Faradey99
-
Posts
18 -
Joined
-
Last visited
Faradey99's Achievements
Explorer (1/14)
0
Reputation
-
Именно Выходит примерно следующее:
-
float: left не подойдет, так как блоки будут разной высоты. Если бы была фиксированная высота, http://habrahabr.ru/qa/6067/ вот тут неплохое решение. Читал статью, как я понял этот способ тот же, что и http://forum.htmlbook.ru/index.php?showtopic=20735 , как я писал, уже пробовал, но при уменьшении ширины при неравном количестве блоков в одном ряду выравнивание проходит не как надо. Остаются еще таблицы, но не очень хотелось их использовать
-
Здравствуйте! Помогите пожалуйста решить следующую задачу: Имеется макет (левая сторона - центр - правая сторона) с динамической шириной, в центральной части по всей ширине необходимо разместить несколько блоков с одинаковой шириной, но разной высотой, блоков должно быть 3 или 4 в одном ряду в зависимости от ширины. С разной высотой все ясно, будет использоваться: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ , вопрос только как выравнять это все по ширине? Пробовал комбинировать с данным методом: http://forum.htmlbook.ru/index.php?showtopic=20735 , но получается совсем не то что хотелось бы.
-
Блин, протупил, спасибо большое СЕВЕР!
-
Поэтому я и спрашивал про position:absolute и z-index:-1, наверное я неправильно сформулировал вопрос, правильнее будет спросить стоит ли его здесь использовать или есть способ получше?
-
Спасибо, работает Но, мне необходимо чтобы и верхний и нижний градиент были на заднем фоне (под div.wrapper) как на картинке:
-
Или все содержимое body обернуть в ещё один блок, которому задать нижний фон? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * {margin:0;padding:0} body {background:url('top-bg.gif') repeat-x top left #F5F5F5} div.bottom-bg {background:url('bottom-bg.gif') repeat-x bottom left} div.wrapper { background:#FAFAFA; margin:0 auto; max-width:1280px; min-width:980px } </style> </head> <body> <div class="bottom-bg"> <div class="wrapper"> .... </div> </div> </body> </html>
-
То есть, как я понял, body я задаю верхний градиент, а нижний градиент с помощью вложенного абсолютно позиционированного дива?
-
Подскажите пожалуйста, как верстать такой фон? Сам я додумался только до такого: верхний фон - один блок, нижний фон - второй блок. Родительскому блоку (в данном случае <body>) задаю position:relative, а верхнему и нижнему фону задаю pozition:absolute и z-index:-1. В коде вот так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * {margin:0;padding:0} body {background:#F5F5F5;position:relative} div.top-bg, div.bottom-bg {height:60px;position:absolute;width:100%;z-index:-1} div.top-bg {background:url('top-bg.gif') repeat-x top left} div.bottom-bg {background:url('bottom-bg.gif') repeat-x bottom left} </style> </head> <body> <div class="top-bg"></div> <div class="bottom-bg"></div> </body> </html>
-
Правда это только для IE 6 и 7, Вы попробуйте масштаб поизменять
-
Если прописать display:inline для IE то работает
-
А не кто не пробовал изменять масштаб в IE7, 8?
-
Ну и им соответственно
-
Спасибо большое, все получилось
-
Помогите пожалуйста, есть резиновый макет с максимальной шириной 1280 и минимальной 980, есть три блока разной ширины, которые находятся на одном уровне, при изменении ширины центральный блок должен находится на равном расстоянии от левого и правого блока, то есть так: Сам я пробовал приблизительно следующее (не думаю что это хороший вариант): <!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin:0;padding:0} div.wrapper { background:#F5F5F5; margin:0 auto; max-width:1280px; min-width:980px; padding:20px } div.block {border:1px solid #000;height:140px;position:relative} div.left, div.center, div.right {position:absolute} div.left, div.right {z-index:1} div.left { background:#FF0; height:68px; left:10px; top:40px; width:244px } div.center { background:#F00; height:46px; left:31%; top:62px; width:412px; z-index:0 } div.right { background:#0FF; height:86px; right:10px; top:10px; width:210px } </style> </head> <body> <div class="wrapper"> <div class="block"> <div class="left"> </div> <div class="center"> </div> <div class="right"> </div> </div> <!-- .block --> </div><!-- .wrapper --> </body> </html> Получается не по-центру, но приблизительно...