Witam!
O to mój layout co prawda jeszcze nie dokończony ale chciałem się już zabrać powoli za kodowanie, jednak niestety zatrzymałem się na topie mianowicie nie wiem jak okodować to menu które wystaje poza top próbowałem ujemnych marginesów ale menu zostaje ucięte przez div header podobnie sytuacja będzie wyglądała z dolnym "Zadzwoń i umów się na bezpłatny pomiar i konsultację" Prawdopodobnie będę miał również problemy z cieniem pod topem. Bardzo proszę o pomoc ponieważ jestem początkujący a pomocna dłoń bardzo by mi się przydała.
KOD HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Przykładowy opis" />
<meta name="keywords" content="Słowa kluczowe" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<title>Przykładowy tytuł</title>
<link rel="stylesheet" href="css/screen.css" media="screen" type="text/css" />
</head>
<body>
<div id="header">
<div class="content">
<h1><a href="/">CEZEX</a></h1>
<h2>infolinia 818275201</h2>
</div>
</div>
<div id="top">
<div class="content">
<ul class="menu">
<li><a href="#">Storna główna</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Certyfikaty</a></li>
<li><a href="#">Montaż i serwis</a></li>
<li><a href="#">Praca</a></li>
</ul>
</div>
</div>
</body>
</html>
KOD CSS
/* Wyzerowanie domyślnych wartości */
html, body, h1, h2, h3, h4, h5, h6, a, abbr, acronym, em, p, strong, address, blockquote, cite, q, dd, dfn, dl, dt, li, ol, ul, code, kbd, pre, samp, tt, var, del, ins, small, caption, table, tbody, td, tfoot, th, thead, tr, fieldset, iframe, img {
margin: 0;
padding: 0;
border: none;
outline: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
line-height: normal;
text-align: left;
text-decoration: none;
}
html, body {
background-color: #fff;
color: #000;
}
html, body, input, option, optgroup, select {
font-family: sans-serif;
}
ol, ul {
list-style: none;
}
code, kbd, pre, samp, textarea, tt, var {
font-family: monospace;
}
abbr[title], acronym[title] {
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
legend, hr {
display: none;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
.content { margin: 0 auto;
width: 980px;
}
#header { background: url(../images/header-powielane.jpg) repeat-x;
}
#header .content { height: 156px;
position:relative;
overflow:hidden;
}
#header h1 { position:absolute;
top:25px;
left:40px;
overflow:hidden;
}
#header h1 a { display: block;
width:238px;
height:128px;
background:url(../images/logo-cezex.jpg) no-repeat;
text-indent: -666em;
}
#header h2 { display: block;
width:307px;
height:47px;
background:url(../images/infolinia-.jpg) no-repeat;
position:absolute;
top:9px;
left:620px;
text-indent: -666em;
}
#top .content { height: 261px;
position:relative;}
#top {height:300px; background:url(../images/top-powielane.jpg) repeat-x; overflow:hidden;}
#top .menu {
position:absolute;
left: 304px;
background:url(../images/menu_gora-powielane-.jpg) repeat-x;
width: 614px;
height:62px;
overflow:hidden;
}
#top .menu ul {overflow:hidden; position:absolute; text-decoration:none;}
#top .menu li {float:left;}
#top .menu ul li a {display:block;}
