Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Помогите сверстать правильный макет страницы

 PHP.SU

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


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

> Без описания
nkl
Отправлено: 22 Апреля, 2013 - 14:17:47
Post Id



Посетитель


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


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




Ребят, помогите с версткой макета. "Чертеж" тут
В общем что нужно:
1. Высота и ширина страницы равная 100%, т.е. не должны появляться полосы прокрутки ни по высоте ни по ширине ни при каких условиях.
2. Высота хедера и футера задается жестко в пикселях.
3. Высота MENU и CONTENT должна быть такой, что бы оставшееся место от хедера и футера было заполнено этими колонками.
4. Ширина MENU должна быть фиксированной ~250px, с низу и сверху возможны полосы прокрутки.
5. Ширина контента должна быть такой, что бы при любой ширине экрана, контент заполнял бы всю область от правого края меню до правого края страницы. В нем так же возможны полосы и горизонтальные и вертикальные полосы прокрутки.


Думаю применить здесь таблицу, что б не заморачиваться. Не?
 
 Top
DelphinPRO
Отправлено: 22 Апреля, 2013 - 15:15:13
Post Id



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


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


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




HTML (Отобразить)
CSS (Отобразить)

Живой пример

(Отредактировано автором: 22 Апреля, 2013 - 15:17:19)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
nkl
Отправлено: 23 Апреля, 2013 - 08:10:41
Post Id



Посетитель


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


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




Большое человеческое СПАСИБИЩЕ! Вы меня очень выручили, а то у меня фигня какая-то получалась:
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE HTML>
  2. <html style="width:99.9%; height:99.5%">
  3. <head>
  4.         <style type="text/css">
  5. /* reset5 © 2011 opensource.736cs.com MIT */
  6. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0!important;padding:0!important;}input,select,a img{vertical-align:middle;}
  7. </style>
  8. </head>
  9. <body style="width:100%; height:100%">
  10.         <div style="width:100%; height:100%; border:black solid 1px; margin:0 auto;">
  11.         <div style="border:black solid 1px; margin:0 auto; min-height:50px; height:10%">HEADER</div>
  12.         <div style="border:black solid 1px; margin-left:0.5%; overflow:hidden; height:79%">
  13.                 <div style="min-width: 250px; border:black solid 1px; float:left; width: 20%;">MENU</div>
  14.                 <div style="min-width: 750px; border:black solid 1px; float:left; width: 79%;">CONTENT</div>
  15.         </div>
  16.         <div style="border:black solid 1px; margin:0 auto; min-height:50px; height:10%">FOOTER</div>
  17.         </div>
  18. </body>
  19. </html>
  20.  

Только вот проблемка при отображении его в FF и IE все съезжает. В Хроме и Опере работает отлично!
 
 Top
DelphinPRO
Отправлено: 23 Апреля, 2013 - 08:58:41
Post Id



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


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


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




nkl пишет:
Только вот проблемка при отображении его в FF и IE все съезжает

Допиливайте Улыбка

я ж только общую идею проиллюстрировал.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


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



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

 
Powered by ExBB FM 1.0 RC1. InvisionExBB