Помощник
|
Тайлинг в CSS |
Agriiii
|
Сообщение
#1
|
||
|
|
||
|
|||
Positive_Fun |
31.3.2012, 0:40;
Ответить: Positive_Fun
Сообщение
#2
|
|
Если я правильно понял, то тебе должно помочь прикрепление банальной высоты или ширины содержимого блока в зависимости от ситуации,
то есть : height:100px; width:100px; тогда размер содержимого блока будет фиксированным, а не увеличиваться или уменьшаться от контента внутри. Но если контента будет больше, то и ширину надо будет увеличить или же поставить, чтобы контент, который превышает размер блока скрывался и поставить полосу прокрутки, просто может у тебя разные ситуации, но... есть еще внутренний отступ padding: 10px 5px 10px 10px; это отступ от конца блока внутрь к контенту, где 1 значение это верхний отступ, потом правый нижний и левый, значения в пикселях; может еще помочь margin: 10px 5px 10px 10px; Это внешний отступ в отличие от внутреннего пединг это отступ от конца блока к другим блокам; поиграйся с этими 3 свойствами должно помочь. Опять же если я правильно понял твою верстку и проблему, потому что может у тебя еще нестыковки с нарезанным макетом и в этом случае могут помочь эти свойства. |
|
|
Agriiii
|
Сообщение
#3
|
|
Это урок CSS, ничего не подходит из этого. Высота не фиксирована, padding к фону значения не имеет, margin тоже не то
|
|
|
Positive_Fun |
31.3.2012, 1:28;
Ответить: Positive_Fun
Сообщение
#4
|
|
высвети код лучше этих блоков в html и css, а то на словах так сложно понять, так как у меня не очень много опыта за плечами.
А то может я тебе подсказал, как сделать фиксированную высоту контента, а изображение не изменилось и тебе именно с изображением надо работать а не контентом, да за пединг я не прав был он за контент отвечает. Ты может начудил что-то в коде потому и некоторые варианты тебе не помогают. Если б файлики или код был перед глазами, то можно было чтото попробовать, а так можно и кучу ненужных советов наговорить) Как я понял, если у тебя блочная верстка, и ты на бекграунд блока ставишь фон и с помощью этих блоков делаешь цельное изображение твоего макета, то задаешь высоту какую тебе надо. Например, размер изображения на бекграунде, если оно заранее подогнано, то если я даже ничего не напишу в этом блоке размер блока будет фиксированным, жду кода разберемся. |
|
|
Agriiii
|
Сообщение
#5
|
|
Если есть куча не нужных советов - лучше подумать и выдать один нужный. Код ничего не даст, это пример на сайте. Такое можно сделать или нет. А код сайта после парсера системы плохо читабелен из-за добавок своих, нет смысла постить. Я мог написать и без скрина, не показывая пример плохой реализации на сайте
Нужно узнать можно ли как-то не меняя картинку сделать переход. Фактически задать значение высоты(ширины, не важно..) кратное фоновому изображению. Вот это и хочу узнать. |
|
|
yury_mw |
31.3.2012, 10:35;
Ответить: yury_mw
Сообщение
#6
|
|
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 |
|
|
Positive_Fun |
31.3.2012, 12:23;
Ответить: Positive_Fun
Сообщение
#7
|
|
я тоже думал про ява скрипт написать но у тебя ж вопрос звучал именно на CSS
вот в CSS 3 новые свойства бекграунда есть довольно полезные может тебе пригодится background-size background-origin http://www.w3schools.com/css3/css3_backgrounds.asp |
|
|
Agriiii
|
Сообщение
#8
|
|
Последнее - немного не то, читал, не туп. Там другие, а вот скрипт это теплее. Но вписывать каждый раз 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> ? |
|
|
yury_mw |
31.3.2012, 16:45;
Ответить: yury_mw
Сообщение
#9
|
|
Agriiii,
у меня скрипт именно построен на двух вложенных блоках: 1) высота внутреннего определяется количеством текста в нем 2) а высота внешнего (к которому и привязан фоновый рисунок) расчитывается скриптом в зависимости от размера внутреннего, так чтобы результирующий размер менялся заданными ступеньками. Поскольку высота текста заранее неизвестна, то вам остается придумать, как ее измерить, не помещая этот текст внутрь блока. Как только придумаете, так сможете избавиться от дополнительного блока. Я придумать не смог. :) |
|
|
Agriiii
|
Сообщение
#10
|
|
Печально... тогда видимо придется убирать завитушки в стиле блокнота
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Разработка/доработка сайтов Wordpress, HTML/CSS/JS Вёрстка, перенос на WP, правки |
9 | malamut | 3328 | 25.1.2024, 14:36 автор: malamut |
|
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое | 5 | CULA | 3289 | 19.12.2023, 18:55 автор: CULA |
|
Веб-разработка (HTML, CSS) | 1 | ViktoriaFE | 6438 | 5.5.2021, 5:22 автор: bekett |
|
Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины). | 0 | kozak199110 | 1652 | 3.3.2021, 12:22 автор: kozak199110 |
|
Продам адаптивный шаблон (css/html/js) под cj/tube сайт | 2 | zaiko | 1415 | 29.12.2020, 23:49 автор: zaiko |
Текстовая версия | Сейчас: 28.3.2024, 18:04 |