Yazon_Nile

Все проще, чем вы думаете Вместо #table1 td напишите #table1 > tr > td. То есть, идет селекция только первой вложенности tr и только первой вложенности td #table1 td = #table1 tr > td = #table1 > tr td Все эти селекторы выберут ВСЕ ячейки таблицы. Только первый уровень - #table1 > tr > td.

DStereo, +1. Ещё можно использовать центровку тремя дивами. Очень полезная штука при широких сайтах. Но снова-таки. Смотря какая цель.

Лучше бы ссылку на сайт скинул) Или весь проект архивом. По картинкам сложно понять что нужно сделать, и что имеется на выходе.

На блок - афтер с шириной. А отрицательным маржином поднимай не сам блок, а первый вложенный блок. Предварительно задав на него оверфлоу хидден и посишн релетив.

Ну.. Проще самому понять. Объяснить, чтобы стало понятно - сложнее. Попробую У нас есть div с классом - main. В нем содержится div с классом float-right и параграф. html <div id="main"> <div class="float-right"> float-text </div> <p> Some text, that we write here, or here, and many-many times again. Some text, that we write here, or here, and many-many times again. Some text, that we write here, or here, and many-many times again. Some text, that we write here, or here, and many-many times again </p> </div> Выглядит это просто. Идет надпись float-text, а ниже Some text и тд. Далее зададим стили для div с классом float-right, чтобы было более наглядно. + чуток стилей на родителя и на параграф. #main{ background:#eeb0b7; } .float-right{ background:#f00; height:300px; width:300px; } p{ margin:0; } В итоге - то же самое. float-right (далее ФР) вверху, параграф внизу. Единственное - добавили стилей ФР. Далее флотнем наконец ФР .float-right{ background:#040; float:right; <<< height:300px; width:300px; } Что увидим в итоге. ФР сместился вправо. Параграф поднялся (!!!) вверх, но при этом обтекает наш флотнутый див. Сам же main сомкнулся и теперь занимает место равное размерам параграфа - это можно проследить по бекграунду, что мы задали на main. (кто слышал такую вещт как хезЛейаут - это оно и есть - размеры main теперь полностью зависят от размеров параграфа - хезлейаута нету. Кто не слышал - не вникайте даже) Будет ещё время ) Наша задача сделать так, чтобы main учитывал и флотнутый в нем ФР! Как это сделать. Есть два способа. 1. Задать на меин overflow:hidden. Описание этого свойства часто вводит тех, кто пытается разобраться в заблуждение. Написано - при переполнении, контент, что выходит за границы - обрезается. Но! Причем здесь флоты и тд? Ответ прост Переполнение возможно только, если заданы четкие размеры. Высота, ширина. А у нас блок размеры которого зависят от содержимого! Соотв. записывая overflow:hidden в стилях на наш блок, мы как бы застявляем его растягиваться по ВСЕМУ содержимому, что в нем. Или проще - задаем ему hasLayout (по-моему так пишется ) #main{ background:#eeb0b7; overflow:hidden; <<< } В итоге увидим, что бекграунд растянулся на всю высоту флотнутого блока. 2. Если оверфлоу хидден поставить по каким-либо причинам нельзя (о причинах лучше потом ) - используется after! #main{ background:#eeb0b7; width:100%; <<< (!!!) } #main:after{ clear:both; content:''; display:block; } Тут подробнее. Сразу скажу - width:100% - для ИЕ. Остальные и без этого работают. Далее про сам афтер. ты сам уже попробовал. Если создать пустой блок после нашего - все будет работать. Почему? Всё просто. Этот пустой блок как бы занимает ВСЁ место нашего блока. Включая флотнутый элемент. А потому - все что после этого пустого блока - не "налезают" на флотнутый ФР. Используя афтер мы делаем тоже самое! #main:after{ /* - делаем что-то, что будет идти после меина */ clear:both; /* 3. Он не касает ни к чему с обеих сторон */ content:''; /* 1. Создаем то, что указано в кавычках, то есть ничего Пустое место */ display:block; /* 2. Это "ничто" - блочный элемент! */ } Всё. Задача выполнена) Вообще, тема флотов - очень сложна для тех, кто начинает учиться примудростям CSS. Но, считаю, что лучше начать с этого. Ведь это основы расположения элементов на странице..

Да там не только картинка съезжает) Весь сайт поплясывает в ИЕ (смотрю только на ИЕ7). Я так понимаю, речь идет о плюсиках, что висят слева от пунктов меню? Не обижайтесь Но искать ошибку в коде, который изначально построен ошибочно совсем не хочется. Попробуйте бекграунд с дива с классом фолдер повесить на саму лишку. div.menu-sitemap-tree div.item-text { left: 35px; position: relative; top: -20px; } Зачем здесь эти манипуляции с позиционированием вообще не пойму). Если нужно отодвинуть текст от картинки - картинку вешаем бг на лишку + на ту же лишку левый паддинг.

Что сразу бросается в глаза - ссылки из главной навигации. ну хоть чуток им стилей бы))

Ссылка не работает

Блин. Ну не может же быть . Может арихив не распаковал, а смотрел чисто файл html? Там же связка с папкой images и css. - Если распакуешь, запустить, и снова будет неработать - это будет ппц - с нуля ещё раз сделаю и посмотрим. Ну, не видя верстки, я могу лишь догадываться. Но абсолютное позиционирование для основных блоков не используется практически никогда. Все можно разрулить фтотами! Вот и простая структура как выглядит? #wrapper>#header+#main+#footer Общий блок с шириной + маржин 0 ауто (для центровки). Хедер, меин, футер. Если их так расположить в коде - будут идти друг под другом, что нам и надо. #main>#content+#sidebar А меин состоит из двух колонок - контент и саидбар. Первый флотнут влево с шириной (!!!), второй блок флотнут вправо с шириной. Так как после этого в меине не осталось элементов (флот вынимает элемент из потока, грубо говоря) - он схлопывается. Чтобы этого избежать можно на него задать оверфлоу хидден или афтер с шириной. Ну вот. Надеюсь доступно обьяснил )) HTML <div id="wrapper"> <div id="header"> header </div> <div id="main"> <div id="content"> content </div> <div id="sidebar"> sidebar </div> </div> <div id="footer"> footer </div> </div> CSS #wrapper{ margin:0 auto; width:960px; } #header{ } #main{ overflow:hidden } /* ИЛИ */ #main{ width:100%; /*(Если 100% нельзя поставить, то нужно высчитать в пикселях. Если никак - высоту ставить)*/ } #main:after{ clear:both; content:''; display:block; } #content{ float:left; width:700px; } #sidebar{ float:right; width:250px; } #footer{ }

Или на врап, или на контент - overflow:hidden. Если нельзя - цветок может обрезаться, то используй афтер

Тебе дают дизайн, в котором уже все есть. Нужно лишь порезать и собрать . А кнопки и тд - заморочки дизайнеров. Правда, если ты сам дизайнер/верстальщик на все руки "мастер", то конечно, рисовать кнопки - твоя забота

Arinden, ты прав, но не полностью. Справа большая надпись - это и есть заголовок. Но так как текст не отделен от БГ хедера, то заголовок вписывается и скрывается. Но текст в заголовке все-равно есть, и поисковики его все-равно будут видеть, как живой + при просмотре с отключенными стилями заголовок будет как новенький - прямо перед нами Так что не только семантика здесь Ой. Полазил в коде и понял, что чуток ошибся. В том плане, что "не отделен от БГ хедера". Отделен. И тут уже вопрос автору, почему картинка, что дублирует логотип сделана просто ссылкой, а не логотипом собственно .

content-h, content, footer-container заверни в один див и задай ему .newdiv{ background:#fff; margin:0 auto; width:1030px; (чуть больше/меньше - на своё усмотрение) } А на враппер bacground:#ccc;

Делай, как в предыдущем сообщении - самый универсальный способ. Работает всегда и везде Забыть про абсолютное позиционирование, говоря об основных частях страницы. Спасибо. Сделал как в предыдущем посте - исчезли кнопки вообще.Еще не разобрался-почему. По второму: а как лучше(каким способом) реализовать относительное размещение трехколоночного массива? http://files.mail.ru/R5LB91 Тут два архива - один на кнопку, один на построение страницы. Надеюсь, поможет!

Делай, как в предыдущем сообщении - самый универсальный способ. Работает всегда и везде Забыть про абсолютное позиционирование, говоря об основных частях страницы.

1 Даже при минимальном зуме есть вертикальный скролл. Потому что у тебя высота футера 135пк, а ты его вытянул маржином лишь на 125 пк. 2 Структура хедера неправильная, причем в корне . Подобные вещи реализовываются так: http://imagepost.ru/?v=nazvi-1_2.jpg Черная рамка - айдишник. Красная - класс. Вообще без позишн абсолют и тд. - Много лишнего пропадет, когда так сверстаешь. Всякие дикие боковые маржины и тд. 3 класс web не нужен. Можно и без него. 4 Если нужно одну колонку поставить рядом с другой - используй флоат с шириной!!! Никаких огромных боковых маржинов. Вообще, посишн абсолют используется только для элементов, которые ну явно никак не зависят от других елементов на странице. Которые "сами по себе". 5 p>span.head bold - это заголовок 6 У тебя классы висят почти на всех элементах. Это ппц) Можно обращаться и через родителя) К примеру, вместо того, чтобы создавать класс textЮ на котором висит лишь цвет и размер шрифта можно эти стили повесить на родителя. Все. Никакого класса, никаких лишний записей. 7 Нижняя форма. Вместо верхний и нижний отступов у елементов - паддинги на родителя. до футера не дошел, но думаю и так так же "весело". Не знаю, то ли ты хотел услышать.. но вот. Чем смог))

Не знаю, что ты хочешь услышать) Много ошибок. Точнее так - неверных решений. Могу рассписать, если интересно.

1 #nav ul li - можно без ul 2 Что ж так много позишн абсолют? Неужели это панацея от всех бед? В хедере можно легко и без этого обойтись! 3 ЗАчем #nav? Все стили с него на вложенную ul, а сам див в утиль. 4 .h-title - тоже часть заголовка 5 стили на параграф - зло) 6 Что мешает все стили с хедера (кроме высоты, это вообще фээ ) перенести на родителя? Ну его в данном случае нет, а нужно бы! Ну а с иннера на хедер, а сам иннер - удалить. 7 Класс active нужно вешать на лишку, а не на ссылку - больше возможностей будет в будущем, когда нужно будет отслеживать именно пункт с активной ссылкой. 8 Слишком много аидишников. По-моему железный аргумент в пользу классов - их можно использовать на многих элементах. ID - только на одном. 9 Ширину с контента и слайдера на родителя. 10 На все имаги должно стоять хотя бы одно из свойств float/vertical-align - иначе выскакивают какие-то отступы в разных браузерах. 11 Спан post-date - зачем задавать на него italic, если можно использовать <em>, где это идет в комплекте 12 Слишком сложные названия классов. К примеру. product-info. А уже от него обращаемся - .product-info .date, .product-info .price и тд. таких примеров туча) Можно и нужно упрощать. 13 В некоторых ссылках спан не нужен. Все от <а> можно прописать. 14 Класс group используется, как я понимаю исключительно ради after. Вместо этого лучше собрать все элементы, которым нужен хезлейаут и для всех один раз в стилях прописать этот афтер. 15 small-post - параграф и картинку завернуть в див с оверфлоу. (на параграф тоже кстати не помешает) 16 h-twitter-box - паддинг на него, вместо паддинга на внутренних элементах. 17 ппц. Не пойму фишку с пустым дивом и отрицательным маржином на футер. ну хоть убейте - не пойму.. Если хотите сделать footer at bottom - делается намного проще. <div id="wrapper"> <div class="holder"> </div> </div> <div id="footer"></div> html,body { height: 100%; margin: 0; } #wrapper { min-height: 100%; } .holder { padding-bottom: 50px; - высота футера } #footer { position:relative; width: 100%; height: 50px; margin-top: -50px; - та же высота }

Может и есть. Вопрос бы услышать в нормальной формулировке, а так - только догадываться остается , что ты там имел ввиду

С помощью таблиц верстаются только таблицы) Здесь все нужно разруливать дивами с флотами. ЛЕвую часть заверни в див и ему флоат лефт с шириной. А правую соотв в див с флота раит и шириной. На родителя оверфлоу хидден.

html <a class="button"> <span class="l"> <span class="c"> Link yo! </span> </span> </a> css .button{ background:url(../images/left.png) no-repeat; display:block; height:20px; overflow:hidden; padding:0 0 0 10px; } .button .r{ background:url(../images/right.jpg) no-repeat 100% 0; float:left; height:100%; padding:0 10px 0 0; } .button .c{ background:url(../images/center.jpg) repeat-x; float:left; height:18px; padding:2px 0; } Все три картинки должны быть одинаковой высоты)

1 Листик в логотипе - тоже его часть - он тоже должен быть кликабельным 2 На странице должен быть только один заголовок первого уровня. В данном случае это явно "Suspendisse felis..." 3 div с классом хелп. Если и вешать класс на этот див, то лучше support - более логичное название. Ну а разрулька с огромным лаин-хеитом это лишнее. В этот див вложи спан и на сам див задай верхний паддинг. 4 div с классом citata не нужен. Все его свойства можно перекинуть на блокквоту. 5 непонятные вещи с огромным маржином на див с классом text. Просто флотни его влево, а divlist - вправо. Естесственно, на оба дива нужна ширина. 6 Старайся вместо верхнего маржина использовать верхний паддинг на родителе. 7 Структура текста должна быть примерно такая: http://imagepost.ru/?v=nazvi-1_1.jpg И стили на h2 и p прописывать от дива. 8 див с классом лист - обычно такие вещи реализуются с помощью трех дивов, вложенных друг в друга и с бекграундами на эти дивы. <div class="list"> <div class="frame"> <div class="text"> text text text text </div> </div> </div> На первый див задается бекграудом верхняя часть твоего блока + ставишь верхний паддинг, чтобы содержимое отступало от верха как раз на высоту изображения. На второй тоже самое, но нижняя часть и соотв. нижний паддинг. ну а третий див просто заливаешь цветом, в данном случае. 9 Фишку с дивом vstavka и отрицательным маржином на футер не понял . Убрал и то, и то - стало аналогично. 10 Высоту задают только в очень редких случаях. Только если разработчик уверен на все 100, что пользователь не захочет чего-то добавить, чтодо дописать и тд. Если такой блок или оставят без изменения, или уберут вообще - только тогда. Ну вот. Это на беглый взгляд - не смотрел дизайн, просто по структуре. Пиши)