Блок под блоком

Jaguar™ · August 10, 2011

Здравствуйте! Я разрабатываю сайт, но у меня появилась проблема:

Блок, который выполняет функцию рамки (если кто подскажет, как сделать рамку в 6px белого цвета с 50% прозрачности, то вопрос решен) не хочет правильно функционировать. Как было задано min-height, так он и остается... Не масштабируется В общем. Причем похожие стили были у блока body, но он масштабируется прекрасно. Вот небольшой листинг HTML кода:

<html>
<head>
<link rel="stylesheet" href="templates/anime/css/style.css" type="text/css">
<title>ONSaL - Новостной портал</title>
</head>
<body id="background">
<div id="bodyborder"><div id="body">
<div id="menu"><div id="home"><b>Главная</b></div><div id="categories"><b>Категории</b></div><div id="styles"><b>Стили</b></div><div id="about"><b>О сайте</b></div><div id="donate"><b>Помочь</b></div></div>
<div id="clear01"> _ </div>
<div id="bodytextarea">123<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</div>
</body>
</html>

А вот листинг CSS

@font-face {
      font-family: menu;
      src: url(/templates/anime/fonts/search.otf);
     }

#background {
background: url(/templates/anime/images/background.png);
}

#body {
width: 862px;
position: absolute;
left: 50%;
margin-left: -431px;
border-radius: 59 59 25 25;
background: url(/templates/anime/images/top.png) no-repeat;
background-color: black;
min-height: 524px;
z-index: 2;
margin-top: 6px;
padding-bottom: 10px;
}

#bodyborder {
width: 874px;
position: absolute;
left: 50%;
margin-left: -437px;
border-radius: 59 59 25 25;
background: url(/templates/anime/images/bodyborder.png);
min-height: 536px;
z-index: 1;
top: 3px;
}

#menu {
margin-top: 257px;
width: 862px;
height: 82px;
background-color: white;
list-style: none;
}

#menu #home {
width: 151px;
height: 82px;
background: url(/templates/anime/images/menu.png) 0px 82px repeat-y;
background-position: 0px 82px;
}

#menu #home:hover {
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: 0px 0px;
}

#menu #categories {
width: 170px;
height: 82px;
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -151px 82px;
}

#menu #categories:hover {
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -151px 0px;
}

#menu #styles {
width: 170px;
height: 82px;
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -321px 82px;
}

#menu #styles:hover {
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -321px 0px;
}

#menu #about {
width: 170px;
height: 82px;
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -491px 82px;
}

#menu #about:hover {
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -491px 0px;
}

#menu #donate {
width: 201px;
height: 82px;
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -661px 82px;
}

#menu #donate:hover {
background: url(/templates/anime/images/menu.png) repeat-y;
background-position: -661px 0px;
}

#menu #donate, #menu #about, #menu #styles, #menu #categories, #menu #home {
float: left;
font: 32pt menu;
text-align: center;
}

#menu b {
position: relative;
top: 15px;
cursor: default;
}

#clear01 {
background-color: #dcdad4;
opacity: 0;
}

#bodytextarea {
background-color: #dcdad4;
margin-left: 10px;
margin-right: 10px;
border-radius: 59 59 25 25;
}

Как сделать, чтобы рамка растягивалась под размер блока?

psywalker · August 10, 2011

Можно сделать два блока, один будет белого 50% прозрачного цвета, с углами закруглёнными, и паддингами, а второй будет вложен в него, он и будет сайтом

Jaguar™ · August 10, 2011

Можно сделать два блока, один будет белого 50% прозрачного цвета, с углами закруглёнными, и паддингами, а второй будет вложен в него, он и будет сайтом

Также и сделано...

<div id="bodyborder"><div id="body">

psywalker · August 10, 2011

border-radius: 59 59 25 25;

Где единицы измерения?

И зачем ты делаешь блоки на абсолюте?

Jaguar™ · August 10, 2011

Убераю абсолют, вот что выходит:

#body {
width: 862px;
/*position: absolute;
left: 50%;
margin-left: -431px; */
border-radius: 59px 59px 25px 25px;
background: url(/templates/anime/images/top.png) no-repeat;
background-color: black;
min-height: 524px;
z-index: 20;
/*margin-top: 6px;
padding-bottom: 10px;*/

psywalker · August 10, 2011

Вот, зацени пример и сделай так же http://jsfiddle.net/qhCcg/7/

Jaguar™ · August 10, 2011

Ок спасибо) Будем ковырять))

Все получилоооось =) Спасибо

Edited August 10, 2011 by Jaguar™

psywalker · August 10, 2011

Ок спасибо) Будем ковырять))
Все получилоооось =) Спасибо

Sign In

Блок под блоком

Question

Jaguar™

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Jaguar™

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Jaguar™

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Jaguar™

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information