PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
LIME
Отправлено: 09 Июня, 2011 - 02:37:35
Post Id



Активный участник


Покинул форум
Сообщений всего: 10740
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




пробую сделать верстку дивами
какаято ерунда получается никак не могу понять почему
наверное какая-то элементарная ошибка
подскажите пжлст очень надо

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

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

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

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

Прикреплено изображение (Нажмите для увеличения)
main_.jpg


-----
: DDD
 
 Top
IllusionMH
Отправлено: 09 Июня, 2011 - 03:45:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




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>

А дальше постепенно добавляйте в них содержимое.
 
 Top
LIME
Отправлено: 09 Июня, 2011 - 03:57:03
Post Id



Активный участник


Покинул форум
Сообщений всего: 10740
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




IllusionMH а как закругленные углы сделать без вложенных дивов?
(Добавление)
и фон там не везде одним цветом
гифы в стилях вставляются
(Добавление)
а вообще это мой первый такой опыт
нашел в нете как это делать ,но там только пример 1го блока


-----
: DDD
 
 Top
Viper
Отправлено: 09 Июня, 2011 - 07:20:20
Post Id



Активный участник


Покинул форум
Сообщений всего: 4556
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)




LIME пишет:
а как закругленные углы сделать без вложенных дивов?

border-radius для IE(не ниже 8) и для Opera 11+(для старых версий не ниже 9 -o-border-radius)
-moz-border-radius для Firefox 3+ (В 4+ -moz- убрано)
-webkit-border-radius для Safari и браузеров на его движке

(Отредактировано автором: 09 Июня, 2011 - 07:21:27)



-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
LIME
Отправлено: 09 Июня, 2011 - 07:31:03
Post Id



Активный участник


Покинул форум
Сообщений всего: 10740
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




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


-----
: DDD
 
 Top
Viper
Отправлено: 09 Июня, 2011 - 11:23:49
Post Id



Активный участник


Покинул форум
Сообщений всего: 4556
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)




LIME ну собстно я написал что и в каком браузере поддерживается. для версий IE5/6/7 прийдется делать по старинке, а именно картинками.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
IllusionMH
Отправлено: 09 Июня, 2011 - 12:49:06
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




LIME, а что с цветами не так? Просто задаете каждому элементу свой цвет.
Серый цвет для body.
Черный для div#wrapper.
Серые цвета для div#header,div#main,div#sidebar,div#footer
Светло-серый для заголовка в div#header.

Если у вас фиксированная ширина, то с закруглением углов проблем нет - фоновые картинки вас спасут, а так и двух div'ов на блок хватит.

(Отредактировано автором: 09 Июня, 2011 - 12:54:53)

 
 Top
LIME
Отправлено: 09 Июня, 2011 - 15:22:56
Post Id



Активный участник


Покинул форум
Сообщений всего: 10740
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




IllusionMHв хидере и футере весь фон двется вертикальной картинкой repeat-x а это 3 дива
а для 4ех углов это 4 дива

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

или я ошибаюсь?


-----
: DDD
 
 Top
Viper
Отправлено: 09 Июня, 2011 - 16:05:54
Post Id



Активный участник


Покинул форум
Сообщений всего: 4556
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)




LIME пишет:
так если всеравно придется делать вариант для старых браузеров почемубы сразу не сделать старую верстку для всех
Скажу одно. С таким подходом к вопросу сейчас бы сайты были в стиле дизайна аля 90-ые...

Здесь в большей мере все зависит от сложности верстки. ИМХО вместо того чтобы писать суперкостыли для такого нунылого говна как IE лучше забить на него, либо в крайнем случае сделать хак.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
LIME
Отправлено: 09 Июня, 2011 - 16:25:19
Post Id



Активный участник


Покинул форум
Сообщений всего: 10740
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




Viper возможно но такую вот задачу мне поставили
(Добавление)
теперь уперся в другую проблему
немогу в хидере картинки с подписями разместить
если в дивах весь дизайн летит почемуто
в лейблах все лезит друг на друга
помогите плз мне сегодня уже надо


-----
: DDD
 
 Top
IllusionMH
Отправлено: 09 Июня, 2011 - 16:32:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




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, давай ссыль на тестовую страницу - по месту будет проще разобраться.

(Отредактировано автором: 09 Июня, 2011 - 16:37:57)

 
 Top
LIME
Отправлено: 09 Июня, 2011 - 16:35:28
Post Id



Активный участник


Покинул форум
Сообщений всего: 10740
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




блин да не могу я забить на IE6 мучался бы я сейчас


-----
: DDD
 
 Top
join
Отправлено: 14 Июня, 2011 - 14:10:30
Post Id



Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Февр. 2011  


Помог: 1 раз(а)




Если так, то только по старинке, картиночки-уголочки и максимум терпения.
________________________________ ________________________________ ___________
А вообще - вёрстка разная бывает - всё дело в доктайпах и версиях браузеров.
________________________________ ________________________________ ___________
Осликов - на свалку истории!!!


-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB