Hi Everybody,
I'm trying to get rid of margins on the top of a content but actually not able to do so. I have removed the margins and padding of the elements but it still doesn't work.
Can you please have a look at the code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Studio Legale Ilaria Corezzola</title>
<style type="text/css">
@charset "UTF-8";
body {
background: url(img/sfondo.gif) repeat-x;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.85em;
color: #222222;
padding:5em 0 0;
margin:0;
}
#wrapper {
width: 1000px;
clear:both;
}
#header {
padding: 0px;
margin: 0px;
background: #000000;
position: relative;
width: 900px;
}
#content {
width: 730px;
background: #ffffff;
position: relative;
margin:0px 0 0;
float:left;
}
#next {
color: #ffffff;
background: #60bc15;
position: relative;
padding-top: 11px;
padding-left: 35px;
float: left;
width: 235px;
font-style: normal;
font-variant: normal;
border-top: 0.1em dotted #FFFFFF;
border-bottom: 0.1em dotted #FFFFFF;
padding-bottom: 11px;
margin: 70px 0px 0px;
}
#logo {
margin:0px;
padding: 0px;
width: 270px;
clear: both;
}
.textimg {
margin: 2em;
float: right;
}
#sidebarNav {
padding: 0;
width: 270px;
float: left;
margin:0;
clear: both;
}
#sidebarNav ul {
margin: 180px 0 200px;
padding:0;
list-style:none;
width:270px;
}
#sidebarNav li {
margin: 0;
border-top: 1px dashed #999999;
float:left;
clear:left;
width:270px;
}
#sidebarNav li b {
float:left;
margin-left:-10px;
position:relative;
}
#sidebarNav a {
color: #4f4d4b;
text-decoration: none;
float:left;
clear:left;
padding: 14px 0 14px 2px;
background:#e6e3e1;
border-left:38px solid #e6e3e1;
width:230px;
}
#sidebarNav a:hover, #sidebarNav a:focus, #sidebarNav a:active {
color: #d5a52a;
border-color:#c90;
background:#f2f2ef;
}
#sidebarNav a:hover b {
visibility:hidden
}
#sidebarNav li.first {
border-top-style: none;
}
#sidebar li.last {
border-bottom: 1px dotted #999999;
}
.textbottom {
vertical-align: text-bottom;
padding: 0;
margin: 0px 0.3em 0px 0px;
}
#pages {
margin: 0px;
padding: 0px;
}
.topnav li a {
background: url(img/chess.gif) no-repeat 0px 0px;
color: #55474f;
text-decoration: none;
padding: 19px 5px 1px 35px;
float: left;
height: 17px;
}
#pages .text {
font-size: 1.4em;
color: #1A1A1A;
margin-left: 0.85em;
margin-top: 0em;
}
p {
line-height: 1.5em;
padding: 2em 3em 4em 4em;
margin: 0px;
font-style: normal;
font-weight: lighter;
font-variant: normal;
}
#footer {
background: #666666;
margin: 0px 0px 0px 270px;
padding: 0px;
height: 5em;
clear:both;
border-top: 0.1em dotted #FFFFFF;
width: 730px;
}
#footer p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.85em;
text-align: center;
margin: 10px 0px 0px;
padding: 0px;
color: #FFFFFF;
line-height: 1.3em;
}
.img {
padding: 0px 5px 0px 10px;
margin: 0px;
border-width: 0px;
}
.imgSector {
padding: 0px;
margin-left: 3.5em;
border-width: 0px;
vertical-align: middle;
margin-top: 0px;
}
/* topnav*/
.topnav {
height: 37px;
margin-top: -37px;
position: relative;
padding: 0px;
}
.topnav li.rook{margin-left:400px;}
.topnav li.rook a{background-position:0 0;}
.topnav li.rook a:hover{background-position:0 -37px}
.topnav li.bishop a{background-position:0 -74px}
.topnav li.bishop a:hover{background-position:0 -111px}
.topnav li {
float: left;
height: 37px;
background: #e7e4e0;
margin: 0px 5px;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebarNav">
<div id="logo">LOGO will be an image</div>
<ul>
<li class="first"><a href="studio.html"><b>|</b> link1</a></li>
<li><a href="#"><b>|</b> link2</a></li>
<li class="last"><a href="#"><b>|</b> link3</a></li>
</ul>
<div id="next">ILARIA COREZZOLA <br />
studi accademici e formazione <br />
</div>
<!--end of sidebarNav-->
</div>
<div id="content">
<ul class="topnav">
<li class="rook"><a href="#">dove siamo</a></li>
<li class="bishop"><a href="#">contatti</a></li>
</ul>
<div id="pages"><img src="img/metodo.gif" alt="method" width="55" height="57" class="imgSector" /> <span class="text">|chiara</span></div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a <img src="img/tracingIMG.gif" alt="test" width="125" height="198" class="textimg"/>galley of type and scrambled it to make a type specimen book. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
<br />
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br />
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br />
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<!--end of content-->
</div>
<!--end of wrapper-->
</div>
<div id="footer">
<p>studio avvocato ilaria corezzola - via che la vaga, 11 - 37100 verona, italia
<br />
tel 045.8101000 fax 045.8101000 ilaria@libero.it<br />
P.Iva 12345678913
<!--end of footer-->
</div>
</body>
</html>What I want is the div pages hanged just at the top of the white margin of the content.
I believe that the #topnav is causing what I have now but I don't know how to fix it and why it's like that now..
Thank you for your advise!
