0

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!

4
Contributors
6
Replies
7
Views
8 Years
Discussion Span
Last Post by macneato
0

0px is an invalid style. Leave the px or other units of measure off the 0 values. Otherwise, some browsers go into quirks mode or throw out the style and use the default.

You do have a top padding on the body.

0

0px is an invalid style. Leave the px or other units of measure off the 0 values. Otherwise, some browsers go into quirks mode or throw out the style and use the default.

You do have a top padding on the body.

Hi and thanks for the 0px tip :)
I have removed that from the code but the #pages is not moving even if I remove the padding/margin on the body.
Any suggestion?
Thanks!

0

Grungina,

Could be something to do with body's padding:5em 0 0; ?

Pleased to see someone using a sprite. Great technique.

Airshow

Edited by Airshow: n/a

0

The issue is your body padding... But removing it won't make much sense since you have a negative margin on your topnav class. So what I would do is remove topnav out of the content id and add it to the wrapper id. Here is an exmaple;

<!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: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:0;
	position: relative;
	padding: 0px;
}
.topnav li.rook{margin-left:315px;}
.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">
	<ul class="topnav">
	    <li class="rook"><a href="#">dove siamo</a></li>
	    <li class="bishop"><a href="#">contatti</a></li>
    </ul>
    <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">
      <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>

Normally this would fix everything, but since you have multiple margins all over the show it doesn't. I would suggest removing all margin lefts and make the width of #content smaller and use it to give the entire container one margin left. If you want padding, do so within it. make sense?

If not just shout

Edited by macneato: n/a

0

The issue is your body padding... But removing it won't make much sense since you have a negative margin on your topnav class. So what I would do is remove topnav out of the content id and add it to the wrapper id. Here is an exmaple;

<!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: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:0;
	position: relative;
	padding: 0px;
}
.topnav li.rook{margin-left:315px;}
.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">
	<ul class="topnav">
	    <li class="rook"><a href="#">dove siamo</a></li>
	    <li class="bishop"><a href="#">contatti</a></li>
    </ul>
    <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">
      <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>

Normally this would fix everything, but since you have multiple margins all over the show it doesn't. I would suggest removing all margin lefts and make the width of #content smaller and use it to give the entire container one margin left. If you want padding, do so within it. make sense?

If not just shout

Ciao Macneato,
I've set the margin bottom to zero on the ul :)

.topnav {
height:37px;
margin-bottom:0;
margin-top:-37px;
padding:0;
position:relative;
}

I'm now trying to change color to all the div #next, from yellow to black with white text but I cannot. If I apply #next a the element takes the rules of sidebarNav. What is the best way to do it?
http://www.enricoandchiara.com/Ilaria/Dec4.html
Belowe what I've coded so far there's the template I'd like to build.

Thank you!
Chiara

0

Try using a more specific selector. Eg.

#wrapper #next { 
	background:#000
	border-bottom:0.1em dotted #55474F;
	border-top:0.1em dotted #55474F;
	color:#fff;
	float:left;
	font-style:normal;
	font-variant:normal;
	margin:70px 0 0;
        padding: 11px 0 11px 35px;
	position:relative;
	width:255px;
}

Chances are it will be in #wrapper so it should work.

Edited by macneato: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.