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


Пользователь месяца
Андрей WPMasterKZ Андрей WPMasterKZ 1-й за Ноябрь
Очков активности: 888 1 тема, 71 сообщение, 8 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография OlgaGetman
    #1

    OlgaGetman
    Очков активности: 750 5 тем, 110 сообщений, 4 балла репутации

  • Фотография Mandarin
    #2

    Mandarin
    Очков активности: 570 3 темы, 86 сообщений, 4 балла репутации

  • Фотография TimurR
    #3

    TimurR
    Очков активности: 150 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 120 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 120 0 тем, 20 сообщений, 4 балла репутации

  • Фотография Rodiola
    #6

    Rodiola
    Очков активности: 66 2 темы, 16 сообщений, 2 балла репутации

  • Фотография WGN
    #7

    WGN (worldgamenews.com)
    Очков активности: 46.5 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #8

    pozitron123
    Очков активности: 34.5 2 темы, 17 сообщений, 1 балл репутации

  • Фотография thisismyname
    #9

    thisismyname
    Очков активности: 27 4 темы, 6 сообщений, 1 балл репутации

  • Фотография m3Re
    #10

    m3Re
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2018
  • Яндекс выдача: 13.12.2018
Топ 5 участников по репутации


Тайлинг в CSS

#1 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40
0

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

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

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

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

  • sample.jpg

 

 

  • 0

#2 Positive_Fun

Positive_Fun
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 30 March 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 March 2012 - 23:54

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

#4 Positive_Fun

Positive_Fun
  • Неактивные
  • 5 сообщений
  • Репутация: 0

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

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

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

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

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

#5 Agriiii

Agriiii
    Topic Starter
  • Неактивные
  • 378 сообщений
  • Репутация: 40

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

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

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

#6 yury

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

Отправлено 31 March 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 March 2012 - 11:23

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

#8 Agriiii

Agriiii
    Topic Starter
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 31 March 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
  • Пользователь
  • 645 сообщений
  • Репутация: 190

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

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

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

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

#10 Agriiii

Agriiii
    Topic Starter
  • Неактивные
  • 378 сообщений
  • Репутация: 40

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

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

#11 yury

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

Отправлено 01 April 2012 - 09:32

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

Agriiii,
честно говоря не понял, чем вам не угодили два вложенных блока. Это стандартное решение при верстке, работает оно точно так же, как если бы блок был один. При верстке часто используется и гораздо более сложная вложенность. Точно так же как и в обычный блок вы сможете внутрь этого вложенного блока помещать свои "и картинки и многое другое" без каких-либо ограничений.

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

---------------
Ну и вообще, если я не смог найти лучшего решения — это не означает, что лучше придумать нельзя.
Как раз наоборот — наверняка можно, просто приложите старание и голову и у вас обязательно получится.
  • 0

#12 Agriiii

Agriiii
    Topic Starter
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 03 April 2012 - 16:44

Особенности платформы на которой работает сайт мешают. При такой верстке пользователи не смогут добавлять текст или картинки из визуального редактора, придется в коде.Но за помощь спасибо.
  • 0

#13 c0ns0l3

c0ns0l3
  • Неактивные
  • 264 сообщений
  • Репутация: 49

Отправлено 09 April 2012 - 14:49

Интерестно, а чем тебе мешает виз-редактор?
Для того, что б сверстать такое, ненужно все перегибать как хочешь...

Пусть даже у тебя на выходе выдаст отдельный контейнер с твоей CMS, с определенной версткой...
Перебить ее только с помощью CSS очень легко..

Допустим у тебя тот же макет идет, который представили в виде примера с JS, тоесть container... если CMS... то пусть он допустим выдаст text, title, post_date и т.д.
Отпозиционировать все это, труда не составляет вовсе, вытащить и поставить в нужные места даже ЗА блоком container тоже.
Нет на самом деле ничего неисполнимого, нужно только пошевелить мозгами.. а убирать столь неплохой диз оформления под notepad - это ошибочно, глупо и даже трусливо...

Покажи что у тебя дается на выходе и во что это и как надо распихнуть...

та и на самом деле, тот же скрипт....



<div id="container">
Здравствуйте. Делаю шаблон, нарисовал в фотошопе макет, прилепил на сайт. Возникла проблема - есть элементы, которые не тайлятся (не совпадают швы). В итоге фон, где будет контент (без фиксированой высоты) обрезает и выходит не красиво. Можно ли заставить с помощью CSS расчитывать высоту не по концу блока (например текста нет, идёт следующий блок), а по количеству пикселей<br />
Надо чтобы размер высоты был кратен какому-то значению, так можно сделать? Например 20, а не обрезался если нету елементов внутри типа текста или изображений.
</div>


Только не на внешний контейнер, а на себя же...
  cont = getElementByID('container');
  cont.style.height = Math.ceil(cont.offsetHeight/18)*18 + 'px';

В итоге он просто увеличится, и останется у тебя твой же единственный и неповторимый контейнер ^_^
  • 0

robot

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

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