Горна линия като на Google ?

[DirectX]

Добър ден. Искам да попитам как се прави такова нещо (горния черен header на google ) ?

 

[Styl3rbg]

<div id="top_bar">Горната лента</div>

[css]#top_bar {
margin-top: -15px; /* Може и повече, стига да се залепи */
background: black;
color: white;
border-bottom: 2px solid red;
}[/css]

 

[oveRLuckEd]

Ето ти подобно меню http://cssmenumaker.com/builder/menu_info.php?menu=035 само дето чертата е отдолу, а за да го прикрепиш плътно сложи това в css: * { margin: 0; padding: 0; }

 

[tedo96]

Ето така съм го направил аз:

<div class="menu">
    <div class="menu_holder">
        <ul>
            <li>sadsasd</li>
        </ul>
    </div>
</div>

[css].menu { background: url('../images/menu.png') repeat-x scroll 0 0 transparent; width:100%; height:37px; margin-top: 15px; }
.menu ul { padding:0; list-style-type:none; }
.menu li { display: inline; float: left; margin: 0; padding: 0; }
.menu ul li a:hover { background: url("../images/hover.png") repeat scroll 0 0 transparent; }
.menu li a { color: #CECECE; display: block; margin: 0 -1px 0 -1px; padding: 10px 25px 10px; }
.menu_holder { width: 901px; min-width: 800px; max-width: 901px; margin: 0 auto; }
[/css]

 

[StormBreaker]

<div id="top_bar">Горната лента</div>

[css]#top_bar {
position:absolute;
top:0;
left:0;

width: 100%;
height: 30px;
background: #2d2d2d;
color: #cccccc;
}[/css]

 

[sandh]

Не е нужна нито абсолютна позиция, нито отрицателен margin. Всъщност и двете практики са доста противопоказни. Просто си нулирайте отстъпа на документа.
[css]html, body { padding: 0; margin: 0; }
#lenta { background: black; color: #ffffff; padding: 10px; }[/css]

<div id="lenta">.......</div>