AssaCSSin
-
Posts
10 -
Joined
-
Last visited
AssaCSSin's Achievements
Explorer (1/14)
0
Reputation
-
Вот уже больше месяца бьюсь над проблемой нижней части данной страницы. Возникло больше вопросов, нежели ответов. Мое представление реализации нижней части страницы (цвета согласно схеме): Зеленый бэкграунд (должен быть на всю высоту страницы) помещаем в body у которого height: 100%. Серый бэкграунд (должен быть на всю ширину страницы и прилеплен к нижнему краю страницы при любом наполнении контентом) помещаем в дочерний элемент относительно body (скажем div#bottom_tile) у которго height: 100% от высоты body. Фиолетовый статичный бэкграунд (должен быть всегда прилеплен к нижнему краю границы при любом наполнении контентом) помещаем в дочерний элемент относительно div#bottom_tile (скажем div#bottom_static_bg) у которого height: 100% от высоты div#bottom_tile. Еще футер, который идет с абсолютным позиционированием, тоже должен быть всегда снизу. Что только не пробовал, но у меня не получается при любом наполнении контентом все три бэкграунда расположить внизу страницы. Помогите, ибо уже хочется убрать DOCTYPE и сверстать все таблицами.
-
Здравствуйте! Заранее извиняюсь, если ошибся с темой форума. Есть дизайн со сложным, композитным бэкграундом. Для описания задачи набросал дизайн: Немного описания: Серым цветом - бэк тянется по-горизонтали; Зеленым цветом - бэк тянется по-вертикали; Оранжевым цветом - просто заливка цветом; Фиолетовым цветом - статический бэкграунд. Как я это сделал: HTML: <body> <div id="wrap"> <div id="bg_top_main "> <div id="bg_bottom_tile"> <div id="bg_bottom_main"> ............... </div> </div> </div> </div> </body> CSS: html, body { height:100%; padding:0; margin:0; } body { background: url(gfx/mainpage/bg/main_bg_middle.jpg) repeat-y top center #242424; /*border: 1px solid red;*/ } #wrap { position:relative; min-height:100%; /*border: 1px solid red;*/ background: url(gfx/mainpage/bg/main_bg_top_tile.jpg) repeat-x top left; } * html #wrap { height:100%; } #bg_top_main { background: url(gfx/mainpage/bg/main_bg_top.jpg) no-repeat top center; /*border: 1px solid red;*/ } #bg_bottom_tile { background: url(gfx/mainpage/bg/main_bg_bottom_tile.jpg) repeat-x bottom left; /*border: 1px solid red;*/ } #bg_bottom_main { width: 960px; margin: 0 auto 0 auto; background: url(gfx/mainpage/bg/main_bg_bottom.jpg) no-repeat bottom center; } ПРОБЛЕМА - в фоксе и опере появляется справа непонятный отступ (соответственно и прокрутка при разрешении 1024х768). Вдобавок при использовании в укороченной записи background: bottom в эксплорере не показываются нижние бэкграунды. ДОПОЛНИТЕЛЬНАЯ ЗАДАЧА - при любом накполнении контента футер должен быть всегда снизу. ВОПРОС - КАК ЭТО РЕАЛИЗОВАТЬ БЕЗ ПОМОЩИ ТАБЛИЦ? P.S. Не обессудьте за сложность
-
Господин e1f, пробовал я уже по-всякому, и убирал, и снова добавлял. Вот сейчас на сайте висит ваша версия без float:left у img и display: block; float: left у <a>. Результат можете посмотреть сами. Ознакомился, но мне не просто текст, а картинку и справа от нее текст нужно равнять по центру.
-
Суть вопроса - как, средствами css и html, без помощи таблиц, воплотить следующую конструкцию: В некоем контейнере (див, ли, не суть важно) вертикально по центру выровнять ссылку-картинку и справа от нее текст-ссылку, который может быть в одну-две-три строки. Чтобы понять проблему смотрите сайт http://www.arcade-gamespalette.com, где внизу страницы расположен темный блок с играми. Большое спасибо, поставил Если две строки текста, то все так. Если одна строка - выравнивает не по центру а выше центра
-
Что есть фаербаг? Не работает однако. Опять же, хорошо когда текст в две строки, когда в одну или в три - плохо. Смотрите на сайте Похоже, это самый надежный способ Вот задачка, блин
-
Обычные блоки с закругленными углами. Почитать можно тут, тут и тут. Если ты про то, как это нарисовано, то рисовал не я Была у меня проблема - не показывался (не рендерился) бэкграунд (левые и правые границы) для вышеуказанных блоков в IE. Я немного погуглил и нашел вот такое решение. Что такое zoom и что он фиксит в IE Кстати, мой вопрос остается открытым
-
Скажу так, с вертикальным выравниванием простого текста в любое кол-во строк все понятно, много раз обсуждалось. В контейнере пишем display: table-cell; vertical-align: middle; И чтобы понимал IE, через условные комментарии пишем: <!--[if IE ]> <style type="text/css"> .outer {position:relative;} .container {top:50%;position: absolute;} .inner {top:-50%;position:relative;} </style> <![endif]--> Но как быть, если к тексту добавляется картинка, которая плывет влево? Или не плыет влево, но она должна быть слева от текста. Вот в чем вопрос.
-
Красиво работает, если текст состоит из двух строк. Если из одной или из трех, то выравнивание некорректное Пример на сайте. Видимо без таблиц никак не обойтись...
-
Я немного обманул... Сейчас у img нет style="float: left;" Каша получается...
-
Здравствуйте, господа сиэсэс-гуру. Верстаю сайт и столкнулся вот с какой проблемой. Есть список. Каждый <li> должен выглядеть следующим образом: <li><a><img src="" width="40" height="40" style="float: left;" /></a><a>Текст ссылки, который должен выравниваться вертикально по середине, при том что текст может быть и в две и в три строки</a></li> Если текст в одну строку, то все тривиально выравнивается vertical-align: middle. А вот если не в одну строку... Хоть убейте, не знаю как реализовать без таблиц, да и чтобы во всех браузерах смотрелось одинаково. Просто руки опускаются. Для тех кто не понял чего надо добиться привожу ссылку на сайт http://www.arcade-gamespalette.com. Листаем в самый низ страницы и видим темный блок с играми. Сразу поймете в чем дело.