Перейти к содержимому


Партнерская программа Kredov

Тайлинг в CSS

#1 Agriiii

Agriiii
  • Пользователь
  • 378 сообщений
  • Репутация: 40
0

Отправлено 30 Март 2012 - 14:47

Здравствуйте. Делаю шаблон, нарисовал в фотошопе макет, прилепил на сайт. Возникла проблема - есть элементы, которые не тайлятся (не совпадают швы). В итоге фон, где будет контент (без фиксированой высоты) обрезает и выходит не красиво. Можно ли заставить с помощью CSS расчитывать высоту не по концу блока (например текста нет, идёт следующий блок), а по количеству пикселей?

Надо чтобы размер высоты был кратен какому-то значению, так можно сделать? Например 20, а не обрезался если нету елементов внутри типа текста или изображений.

Прикрепленные изображения

  • sample.jpg

 

 

  • 0

#2 Positive_Fun

Positive_Fun
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 30 Март 2012 - 23:40

Если я правильно понял, то тебе должно помочь прикрепление банальной высоты или ширины содержимого блока в зависимости от ситуации,
то есть :
height:100px;
width:100px;
тогда размер содержимого блока будет фиксированным, а не увеличиваться или уменьшаться от контента внутри. Но если контента будет больше, то и ширину надо будет увеличить или же поставить, чтобы контент, который превышает размер блока скрывался и поставить полосу прокрутки, просто может у тебя разные ситуации, но... есть еще внутренний отступ
padding: 10px 5px 10px 10px;
это отступ от конца блока внутрь к контенту, где 1 значение это верхний отступ, потом правый нижний и левый, значения в пикселях;
может еще помочь
margin: 10px 5px 10px 10px;
Это внешний отступ в отличие от внутреннего пединг это отступ от конца блока к другим блокам;
поиграйся с этими 3 свойствами должно помочь. Опять же если я правильно понял твою верстку и проблему, потому что может у тебя еще нестыковки с нарезанным макетом и в этом случае могут помочь эти свойства.
  • 0

#3 Agriiii

Agriiii
    Topic Starter
  • Пользователь
  • 378 сообщений
  • Репутация: 40

Отправлено 30 Март 2012 - 23:54

Это урок CSS, ничего не подходит из этого. Высота не фиксирована, padding к фону значения не имеет, margin тоже не то ^_^
  • 0

#4 Positive_Fun

Positive_Fun
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 31 Март 2012 - 00:28

высвети код лучше этих блоков в html и css, а то на словах так сложно понять, так как у меня не очень много опыта за плечами.
А то может я тебе подсказал, как сделать фиксированную высоту контента, а изображение не изменилось и тебе именно с изображением надо работать а не контентом, да за пединг я не прав был он за контент отвечает.

Ты может начудил что-то в коде потому и некоторые варианты тебе не помогают.

Если б файлики или код был перед глазами, то можно было чтото попробовать, а так можно и кучу ненужных советов наговорить)

Как я понял, если у тебя блочная верстка, и ты на бекграунд блока ставишь фон и с помощью этих блоков делаешь цельное изображение твоего макета, то задаешь высоту какую тебе надо. Например, размер изображения на бекграунде, если оно заранее подогнано, то если я даже ничего не напишу в этом блоке размер блока будет фиксированным, жду кода разберемся.
  • 0

#5 Agriiii

Agriiii
    Topic Starter
  • Пользователь
  • 378 сообщений
  • Репутация: 40

Отправлено 31 Март 2012 - 00:53

Если есть куча не нужных советов - лучше подумать и выдать один нужный. Код ничего не даст, это пример на сайте. Такое можно сделать или нет. А код сайта после парсера системы плохо читабелен из-за добавок своих, нет смысла постить. Я мог написать и без скрина, не показывая пример плохой реализации на сайте ^_^

Нужно узнать можно ли как-то не меняя картинку сделать переход. Фактически задать значение высоты(ширины, не важно..) кратное фоновому изображению. Вот это и хочу узнать.
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 31 Март 2012 - 09:35

Agriiii,
средствами CSS готового решения не существует (либо как-то извращаться надо, чтобы придумать реализацию вашего алгоритма на чистом css).
Пока приходит в голову только реализация через css+js, что-то вроде такого (чтобы наблюдать, как ведет себя блок с изменением высоты содержимого, достаточно менять ширину окна браузера):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Тайлинг в CSS </title>
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
#container{
   padding-left: 30px;
   background: url(wire.png) repeat-y;
}
#text{
   text-align: justify;
}
</style>
<script type="text/javascript">
window.onload = window.onresize = function()
{
   var cont = document.getElementById('container');
   var text = document.getElementById('text');
   cont.style.height = Math.ceil(text.offsetHeight/18)*18 + 'px';
}
</script>
</head>
<body>
<div id="container">
   <div id="text">
	  Здравствуйте. Делаю шаблон, нарисовал в фотошопе макет, прилепил на сайт. Возникла проблема - есть элементы, которые не тайлятся (не совпадают швы). В итоге фон, где будет контент (без фиксированой высоты) обрезает и выходит не красиво. Можно ли заставить с помощью CSS расчитывать высоту не по концу блока (например текста нет, идёт следующий блок), а по количеству пикселей<br />
	  Надо чтобы размер высоты был кратен какому-то значению, так можно сделать? Например 20, а не обрезался если нету елементов внутри типа текста или изображений.
   </div>
</div>
</body>
</html>
Использована картинка wire.png 30x18px (см прикрепленное изображение), соответственно высота блока "content" кратна 18px

Прикрепленные изображения

  • wire.png

  • 2

#7 Positive_Fun

Positive_Fun
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 31 Март 2012 - 11:23

я тоже думал про ява скрипт написать но у тебя ж вопрос звучал именно на CSS
вот в CSS 3 новые свойства бекграунда есть довольно полезные может тебе пригодится
background-size
background-origin
http://www.w3schools...backgrounds.asp
  • 0

#8 Agriiii

Agriiii
    Topic Starter
  • Пользователь
  • 378 сообщений
  • Репутация: 40

Отправлено 31 Март 2012 - 15:06

Последнее - немного не то, читал, не туп. Там другие, а вот скрипт это теплее. Но вписывать каждый раз HTML тэг текста не хочется, там и картинки и многое другое, привязка к этому лишняя будет. Будет ли скрипт правильно работать так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Тайлинг в CSS </title>
<style type="text/css">
*{
	    padding: 0;
	    margin: 0;
}
#container{
   padding-left: 30px;
   background: url(wire.png) repeat-y;
}
#text{
   text-align: justify;
}
</style>
<script type="text/javascript">
window.onload = window.onresize = function()
{
   var cont = document.getElementById('container');
   cont.style.height = Math.ceil(text.offsetHeight/18)*18 + 'px';
}
</script>
</head>
<body>
<div id="container">
		  Здравствуйте. Делаю шаблон, нарисовал в фотошопе макет, прилепил на сайт. Возникла проблема - есть элементы, которые не тайлятся (не совпадают швы). В итоге фон, где будет контент (без фиксированой высоты) обрезает и выходит не красиво. Можно ли заставить с помощью CSS расчитывать высоту не по концу блока (например текста нет, идёт следующий блок), а по количеству пикселей<br />
		  Надо чтобы размер высоты был кратен какому-то значению, так можно сделать? Например 20, а не обрезался если нету елементов внутри типа текста или изображений.
</div>
</body>
</html>

?
  • 0

#9 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 31 Март 2012 - 15:45

Agriiii,
у меня скрипт именно построен на двух вложенных блоках:
1) высота внутреннего определяется количеством текста в нем
2) а высота внешнего (к которому и привязан фоновый рисунок) расчитывается скриптом в зависимости от размера внутреннего, так чтобы результирующий размер менялся заданными ступеньками.

Поскольку высота текста заранее неизвестна, то вам остается придумать, как ее измерить, не помещая этот текст внутрь блока. Как только придумаете, так сможете избавиться от дополнительного блока.

Я придумать не смог. :)
  • 1

#10 Agriiii

Agriiii
    Topic Starter
  • Пользователь
  • 378 сообщений
  • Репутация: 40

Отправлено 31 Март 2012 - 18:27

Печально... тогда видимо придется убирать завитушки в стиле блокнота ^_^
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru