X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Тайлинг в CSS
Agriiii
Agriiii
Topic Starter сообщение 30.3.2012, 15:47; Ответить: Agriiii
Сообщение #1


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

Надо чтобы размер высоты был кратен какому-то значению, так можно сделать? Например 20, а не обрезался если нету елементов внутри типа текста или изображений.
Эскизы прикрепленных изображений
Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Positive_Fun
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
Agriiii
Topic Starter сообщение 31.3.2012, 0:54; Ответить: Agriiii
Сообщение #3


Это урок CSS, ничего не подходит из этого. Высота не фиксирована, padding к фону значения не имеет, margin тоже не то ^_^
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Positive_Fun
Positive_Fun
сообщение 31.3.2012, 1:28; Ответить: Positive_Fun
Сообщение #4


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

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

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

Как я понял, если у тебя блочная верстка, и ты на бекграунд блока ставишь фон и с помощью этих блоков делаешь цельное изображение твоего макета, то задаешь высоту какую тебе надо. Например, размер изображения на бекграунде, если оно заранее подогнано, то если я даже ничего не напишу в этом блоке размер блока будет фиксированным, жду кода разберемся.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Agriiii
Agriiii
Topic Starter сообщение 31.3.2012, 1:53; Ответить: Agriiii
Сообщение #5


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

Нужно узнать можно ли как-то не меняя картинку сделать переход. Фактически задать значение высоты(ширины, не важно..) кратное фоновому изображению. Вот это и хочу узнать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
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
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
Agriiii
Topic Starter сообщение 31.3.2012, 16:06; Ответить: 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
yury_mw
сообщение 31.3.2012, 16:45; Ответить: yury_mw
Сообщение #9


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

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

Я придумать не смог. :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Agriiii
Agriiii
Topic Starter сообщение 31.3.2012, 19:27; Ответить: Agriiii
Сообщение #10


Печально... тогда видимо придется убирать завитушки в стиле блокнота ^_^
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3331 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3291 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


 



RSS Текстовая версия Сейчас: 29.3.2024, 1:55
Дизайн