div - разбиение на блоки с отступами и закруглёнными краями - HTML и CSS

frommars · 23.11.2012, 21:01

Приветствую!
Есть вот такая страница:

Код:

   <body>
     <div id="header">шапка сайта</div>
     <div id="menu_top">меню верх</div>
     <div id="menu">меню</div>
     <div id="content">
       контент
     </div>
     <div id="footer">низ сайта</div>
   </body>

и вот такой стиль

Код:

body{
margin-left: 7%;
margin-right: 7%;
background-color: #FFF;
}   
#header{
background:darkred;
width:100%;
height:100px;
}
#menu_top{
background:green;
width:100%;
height:50px;
}
#menu{

background:oldlace;
width:20%;
height:75%;
float:left;
}
#content{
/*border:3px solid #fff;*/
background:oldlace;
width:80%;
height:75%;
float:left;
}
#footer{
background:red;
width:100%;
height:10%;
}

Прошу помочь сделать блоки menu_top, menu, content с закруглёнными краями и отступами( border:3px solid #fff; ).
Закруглённые края знаю как сделать(http://htmlweb.ru/html/example/skruglenie_uglov2.php) и как сделать отступ( border:3px solid #fff; ), но если это всё вместе сделать, то сайт жутко "расползается". И ещё прошу объяснить почему не отображается фон блока footer.
Заранее спасибо!

StivinKing · 23.11.2012, 23:15

Имеете в виду так? - Скриншот

StivinKing · 23.11.2012, 23:24

Прошу прощения. не то меню) - Скриншот

У вас блоки были 20% и 80% (всего 100%), а "Border" идет наружу, ему не хватало места и поэтому блок уходил вниз.
А Footer шел наверх, потому что не было доп.блока с обнулением обтекания блоков ( clear:both; ).

Код:

body{
    margin-left: 7%;
    margin-right: 7%;
    background-color: #FFF;
}   

#header{
    background:darkred;
    width:100%;
    height:100px;
}

#menu_top{
    background:green;
    width:100%;
    height:50px;
    border:3px solid #fff;
    border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

#menu{
    background:#9376F1;
    width:20%;
    height:75%;
}

#content{
    border:3px solid #fff;
    background:#9376F1;
    width:78%;
    height:75%;
    float:right;
    border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

#footer{
    background:red;
    width:100%;
    height:10%;
}

frommars · 24.11.2012, 06:52

Спасибо конечно, но Вы сами проверяли что написали? Блок content сполз вниз до уровня footer, и загородил его почти полностью, menu_top имеет закруглённые края(это не надо) и сполз вправо.

frommars · 24.11.2012, 07:25

В общем сделал сам, но проблема с footer осталась. Прошу помочь поправить последний момент.
Думаю что можно использовать margin-top, но не знаю как(ну не дизайнер я).

Код:

body{
    margin-left: 7%;
    margin-right: 7%;
    background-color: #FFF;
}   

#header{
    background:darkred;
    width:100%;
    height:100px;
}

#menu_top{
    background:green;
    width:100%%;
    height:50px;
 /*    border:3px solid #fff;
    border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;*/
}
#hide_1{
    background:#fff;
    width:100%;
    height:3px;
}
#menu{
    background:#9376F1;
    width:20%;
    height:75%;
    float:left;
    border:3px solid black;
    border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

#content{
    border:3px solid black;
    background:#9376F1;
    width:78%;
    height:75%;
    float:right;
    border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

#footer{
    background:red;
    width:100%;
    height:10%;
}

StivinKing · 24.11.2012, 16:11

А откуда по вашему скриншот был произведен если я не проверял?

Цитата:

menu_top имеет закруглённые края(это не надо)

а ранее вы писали:

Цитата:

сделать блоки menu_top, menu, content с закруглёнными краями

А вот насчет footer моя вина, каюсь...я в html прописал стиль, а не в css, а скинул только css код и поэтому у вас content уполз.

Код:

<body>
<div id="header">шапка сайта</div>
     <div id="menu_top">меню верх</div>
     <div id="content">
       контент
     </div>
     <div id="menu">меню</div>
     <div style="clear: both;"></div>
     <div id="footer">низ сайта</div>
</body>

23.11.2012, 21:01	#1
frommars Форумчанин Регистрация: 02.07.2011 Сообщений: 144	div - разбиение на блоки с отступами и закруглёнными краями Приветствую! Есть вот такая страница: Код: `<body> <div id="header">шапка сайта</div> <div id="menu_top">меню верх</div> <div id="menu">меню</div> <div id="content"> контент </div> <div id="footer">низ сайта</div> </body>` и вот такой стиль Код: `body{ margin-left: 7%; margin-right: 7%; background-color: #FFF; } #header{ background:darkred; width:100%; height:100px; } #menu_top{ background:green; width:100%; height:50px; } #menu{ background:oldlace; width:20%; height:75%; float:left; } #content{ /border:3px solid #fff;/ background:oldlace; width:80%; height:75%; float:left; } #footer{ background:red; width:100%; height:10%; }` Прошу помочь сделать блоки menu_top, menu, content с закруглёнными краями и отступами( border:3px solid #fff; ). Закруглённые края знаю как сделать(http://htmlweb.ru/html/example/skruglenie_uglov2.php) и как сделать отступ( border:3px solid #fff; ), но если это всё вместе сделать, то сайт жутко "расползается". И ещё прошу объяснить почему не отображается фон блока footer. Заранее спасибо!

23.11.2012, 23:24	#3
StivinKing Пользователь Регистрация: 18.11.2012 Сообщений: 28	Прошу прощения. не то меню) - Скриншот У вас блоки были 20% и 80% (всего 100%), а "Border" идет наружу, ему не хватало места и поэтому блок уходил вниз. А Footer шел наверх, потому что не было доп.блока с обнулением обтекания блоков ( clear:both; ). Код: body{ margin-left: 7%; margin-right: 7%; background-color: #FFF; } #header{ background:darkred; width:100%; height:100px; } #menu_top{ background:green; width:100%; height:50px; border:3px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #menu{ background:#9376F1; width:20%; height:75%; } #content{ border:3px solid #fff; background:#9376F1; width:78%; height:75%; float:right; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #footer{ background:red; width:100%; height:10%; } Последний раз редактировалось StivinKing; 24.11.2012 в 00:06.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Скрыть/показать все блоки div с таким же классом как в selection	rdfhnbhf	JavaScript, Ajax	8	20.07.2012 00:55
Странности с отступами	evheniys	HTML и CSS	7	06.06.2011 10:42
В блоке DIV не выравниваются внутренние блоки	Southerner	HTML и CSS	2	21.09.2010 22:28
Разбиение текста на блоки.	gosu	Общие вопросы C/C++	11	04.06.2009 19:12
Блоки div вместо td, как сделать две колонки одинаковой высоты?	v.victoria12345	HTML и CSS	0	06.05.2009 18:05

23.11.2012, 23:15	#2
StivinKing Пользователь Регистрация: 18.11.2012 Сообщений: 28	Имеете в виду так? - Скриншот

24.11.2012, 06:52	#4
frommars Форумчанин Регистрация: 02.07.2011 Сообщений: 144	Спасибо конечно, но Вы сами проверяли что написали? Блок content сполз вниз до уровня footer, и загородил его почти полностью, menu_top имеет закруглённые края(это не надо) и сполз вправо.