2013-05-29 3 views
0

Я создаю панель меню для своего сайта, и мне интересно, правильно ли я делаю это.Панель меню CSS - требуется 3 divs?

Есть ли лучший способ достичь такого же результата? Кажется излишним использовать 3 div.

Вот как я в настоящее время его обработки:

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
#topbar { 
    background: #487BC0; 
    width: 100%; 
} 

#container { 
    width: 960px; 
    margin: 0 auto; 
} 

#links { 
    padding: 15px 0 15px 840px; 
    color: #fff; 
    font-size: 14px; 
    margin-bottom: 30px; 
} 

#content { 
    position: relative; 
    background: #f6f6f6; 
    width: 960px; 
    height: 100%; 
    margin: 0 auto; 
} 

</style> 

</head> 
<body> 

<div id="topbar"> 
    <div id="container"> 
     <div id="links">Login | Register</div> 
    </div> 
</div> 

<div id="content">Content goes here</div> 

</body> 
</html> 
+1

Если вы написали, что часть себя, вы должны знать, как сократить/обрезать его вниз. – hjpotter92

ответ

0

Im no Guru, но может быть что-то подобное будет работать?

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
#container { 
background: #487BC0; 
width: 100% 
min-width: 960px; 
margin: 0 auto; 
} 

#container > span { 
display: block; 
padding: 15px 0 15px 840px; 
color: #fff; 
font-size: 14px; 
margin-bottom: 30px; 
} 

#content { 
position: relative; 
background: #f6f6f6; 
width: 960px; 
height: 100%; 
margin: 0 auto; 
} 

</style> 

</head> 
<body> 

<div id="container"> 
    <span>Login | Register</span> 
</div> 

<div id="content">Content goes here</div> 

</body> 
</html> 

Затем снова, не им ни Гуру o.o

+0

Спасибо, я могу работать с этим. –

0

удалить #topbar, если вы не хотите, синий фон, чтобы растянуть в противном случае его хорошо я думаю ..

Есть многие решения этой же проблемы

0

My Way оформлений этого кота. Как я вижу, ширина распространена, поэтому установите ее только один раз.

HTML

<div class="container"> 
    <div class="topBar">Login | Register</div> 
    <div class="content">content</div> 
</div> 

CSS

.container 
{ 
    width:960px; 
    margin: 0 Auto; 

} 

.topBar 
{ 
    background-color:#487BC0; 
    text-align:right; 
    margin-bottom:30px; 
    padding: 15px 15px 15px 15px; 
    color: #fff; 
    font-size: 14px; 
} 

.topBar div 
{ 
    padding: 15px 0 15px 840px; 
    color: #fff; 
    font-size: 14px; 
    margin-bottom: 30px; 
} 

.content 
{ 

    background-color:#f6f6f6; 
} 

Пример: http://jsfiddle.net/V9DGp/

Смежные вопросы