Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » блочная верстка

Страниц (1): [1]
 

1. LIME - 09 Июня, 2011 - 02:37:35 - перейти к сообщению
пробую сделать верстку дивами
какаято ерунда получается никак не могу понять почему
наверное какая-то элементарная ошибка
подскажите пжлст очень надо

должно получится то что в прикрепленном файле

Спойлер (Отобразить)

стили вот
Спойлер (Отобразить)

(Добавление)
ошибся стили не те
Спойлер (Отобразить)
2. IllusionMH - 09 Июня, 2011 - 03:45:32 - перейти к сообщению
LIME, вы как-то слишком много вложенных div'ов делаете (либо я с первого раза не понял задумки)

Да и отступы у вас просто бешенные. Лучше таб заменить на 2 пробела ;)

Рассмотрим header
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="header">
  3.   <div>
  4.     <div>
  5.       <div>
  6.       </div>
  7.     </div>
  8.   </div>
  9. </div>
  10.  

Что вы так упаковываете? Да еще и без опознавательных знаков...
Для меня более логичным кажется код
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="header">
  3.   <div id="Logo">
  4.     <img />
  5.     <h1></h1>
  6.   <div> <!--logo-->
  7.  
  8.   <div id="rss-block">...</div>
  9.  
  10.   <div id="contact-block">...</div>
  11.  
  12.   <div id="search-block">...</div>
  13. </div><!--header-->
  14.  


Начните с основных блоков (стили по месту, чтобы было понятно что-как)
CODE (html):
скопировать код в буфер обмена
  1. <div id="wrapper" style="width: 980px; margin: 0 auto;">
  2.   <div id="header">...</div>
  3.   <ul id="navigation">
  4.     <li style="float: left;">...</li>
  5.     ...
  6.   <ul>
  7.  
  8.   <div id="main" style="float: left;">...</div>
  9.   <div id="sidebar" style="float: right;">...</div>
  10.  
  11.   <div id="footer" style="clear:both;">...</div>
  12. </div>

А дальше постепенно добавляйте в них содержимое.
3. LIME - 09 Июня, 2011 - 03:57:03 - перейти к сообщению
IllusionMH а как закругленные углы сделать без вложенных дивов?
(Добавление)
и фон там не везде одним цветом
гифы в стилях вставляются
(Добавление)
а вообще это мой первый такой опыт
нашел в нете как это делать ,но там только пример 1го блока
4. Viper - 09 Июня, 2011 - 07:20:20 - перейти к сообщению
LIME пишет:
а как закругленные углы сделать без вложенных дивов?

border-radius для IE(не ниже 8) и для Opera 11+(для старых версий не ниже 9 -o-border-radius)
-moz-border-radius для Firefox 3+ (В 4+ -moz- убрано)
-webkit-border-radius для Safari и браузеров на его движке
5. LIME - 09 Июня, 2011 - 07:31:03 - перейти к сообщению
Viper забыл сказать надо поддерживать кроссбраузерность
ну дивы я вроде както вымучил методом тыка
неочень понял правда но это потом
спасибо что откликнулись
6. Viper - 09 Июня, 2011 - 11:23:49 - перейти к сообщению
LIME ну собстно я написал что и в каком браузере поддерживается. для версий IE5/6/7 прийдется делать по старинке, а именно картинками.
7. IllusionMH - 09 Июня, 2011 - 12:49:06 - перейти к сообщению
LIME, а что с цветами не так? Просто задаете каждому элементу свой цвет.
Серый цвет для body.
Черный для div#wrapper.
Серые цвета для div#header,div#main,div#sidebar,div#footer
Светло-серый для заголовка в div#header.

Если у вас фиксированная ширина, то с закруглением углов проблем нет - фоновые картинки вас спасут, а так и двух div'ов на блок хватит.
8. LIME - 09 Июня, 2011 - 15:22:56 - перейти к сообщению
IllusionMHв хидере и футере весь фон двется вертикальной картинкой repeat-x а это 3 дива
а для 4ех углов это 4 дива

Viper
так если всеравно придется делать вариант для старых браузеров почемубы сразу не сделать старую верстку для всех

или я ошибаюсь?
9. Viper - 09 Июня, 2011 - 16:05:54 - перейти к сообщению
LIME пишет:
так если всеравно придется делать вариант для старых браузеров почемубы сразу не сделать старую верстку для всех
Скажу одно. С таким подходом к вопросу сейчас бы сайты были в стиле дизайна аля 90-ые...

Здесь в большей мере все зависит от сложности верстки. ИМХО вместо того чтобы писать суперкостыли для такого нунылого говна как IE лучше забить на него, либо в крайнем случае сделать хак.
10. LIME - 09 Июня, 2011 - 16:25:19 - перейти к сообщению
Viper возможно но такую вот задачу мне поставили
(Добавление)
теперь уперся в другую проблему
немогу в хидере картинки с подписями разместить
если в дивах весь дизайн летит почемуто
в лейблах все лезит друг на друга
помогите плз мне сегодня уже надо
11. IllusionMH - 09 Июня, 2011 - 16:32:05 - перейти к сообщению
LIME, как сказано выше - на старые браузеры нада подзабивать.
Те кто до сих пор юзает ИЕ6/ИЕ7, могут спокойной прожить без мягких скругленных углов, главное чтобы главные элементы выглядели и позиционировались нормально.

По поводу размещения div'ов для углов. Т.к. у вас сплошной темно серый фон, то можно вырезать угол с этим фоном (подозреваю что вы так и делали), а в документ добавлять соответствующий хак.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!--[if lte IE 8]>
  3. <style type="text/css">
  4. #header {
  5.  position: relative;
  6. }
  7. .header-top-left {
  8.  position: absolute;
  9.  top: 0px;
  10.  left: 0px;
  11.  height: 10px;
  12.  width: 10px;  
  13.  background: transtapent url("header-top-left.jpg") no-repeat;
  14. }
  15. /*по аналогии для других*/
  16. </style>
  17. <![endif]-->
  18. ...
  19. <div id="header">
  20. <!-- скругление для ИЕ8- -->
  21. <!--[if lte IE 8]>
  22. <div class="header-top-left"></div>
  23. <div class="header-top-right"></div>
  24. <div class="header-bottom-left"></div>
  25. <div class="header-bottom-right"></div>
  26. <![endif]-->
  27. ...
  28. </div>


UPD. LIME, давай ссыль на тестовую страницу - по месту будет проще разобраться.
12. LIME - 09 Июня, 2011 - 16:35:28 - перейти к сообщению
блин да не могу я забить на IE6 мучался бы я сейчас
13. join - 14 Июня, 2011 - 14:10:30 - перейти к сообщению
Если так, то только по старинке, картиночки-уголочки и максимум терпения.
________________________________ ________________________________ ___________
А вообще - вёрстка разная бывает - всё дело в доктайпах и версиях браузеров.
________________________________ ________________________________ ___________
Осликов - на свалку истории!!!

 

Powered by ExBB FM 1.0 RC1