bartonom, пример, сделаный тобой, конечно ооочень отвратный. Но как намёк
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
margin:0; font:12px/18px Tahoma,Verdana,Arial,Helvetica,sans-serif;
background-color: #FFF;
font-size: 1em; /* default page font size is 10px (1em) */
}
html, body {height:100%;}
body{ margin: 0; padding: 0; /*outline: none;*/
}
div.case {
margin:0 auto;
padding:0;
background: #FFF;
}
a img { border: none } /* убираем синюю рамку */
a:link { color:#06F; text-decoration:none }
a:hover {color:#06F; text-decoration:underline} /*цвет и стиль при нахождении над ссылкой верхнего меню*/
#logo { /* логотип */
width:250px;
height:85px;
float:left;
padding:10px;
}
.notify_box {
width: 290px;
float:left;
line-height:15px;
text-align:justify;
padding:10px 25px 0 25px;
font-size:0.825em;
}
#header_backgr, #header {
background-image:url(../img/bkgr1.png);
background-repeat:repeat-x;
}
#header { /* div, вмещающей логотип и контент шапки */
width:1000px;
float:left;
}
#header_content { /* div, вмещающей только контент шапки (без логотипа) */
padding-right:23px;
float:left;
}
#um_backgr {
position:relative;
}
#um_backgr,
#upper_menu,
#um_backgr .um_r_box {
background-image:url(../img/upperMenu1.gif);
background-repeat:repeat-x;
border:1px solid #999;
margin: 0 0;
}
#upper_menu {
width:1000px;
float:left;
margin:-1px;
padding:0;
border-right:0;
overflow:visible;
}
.um_l_box { /* левая часть верхнего меню */
float:left;
padding:10px 0px 10px 10px;
font-size:0.925em;
}
#um_backgr .um_r_box { /* правая часть верхнего меню */
/*float:right;*/
position: absolute;
right: 0;
font-size:0.925em;
padding:10px 0px 10px 10px;
border:none;
}
#upper_menu span, #upper_menu span.sr, #um_backgr .um_r_box span {
padding:5px 15px 5px 0px;
font-size:1em;
}
#upper_menu a {
color: #000;
font-weight: 600;
text-decoration: none;
}
#upper_menu a:hover { /*цвет и стиль при нахождении над ссылкой верхнего меню*/
color: #C90;
text-decoration:underline;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class = "case">
<div id="header_backgr">
<div id="header">
<div id="logo"><a href="/"><img src="/img/logo1.png" width="230px" height="75px" /></a></div>
<div id="header_content">
<div class="notify_box"><a href="#">
Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus.
</div>
<div class="notify_box"><a href="#">Aenean massa. Cum sociis natoque </a><br />
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="um_backgr">
<div id="upper_menu">
<div class="um_l_box">
<span><a href="#">Главная </a></span> <!-- &cat=all" -->
<span><a href="#">Каталог </a></span>
<span><a href="#">Помощь</a></span>
</div>
<div class="um_r_box">
<span><a href='/login_form.php'>Войти</a></span>
<span><a href='/form_reg.php'>Регистрация</a></span>
</div>
</div> <!-- end div#upper_menu -->
<div style="clear: both;"></div> <!-- div чтобы не схлопывался div id="um_backgr"-->
</div> <!-- end div#um_backgr -->
</div> <!-- end div.case -->
</body>
</html>
|