• Locked
4 replies [Last post]
Fri, 2013-05-03 02:10
Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 10 years 4 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

The image that i attached should show what i get as result. What i want is the nav div border to be on/just above the wrap div. And it all worked fine, untill i actulle added text to the layout. If i remove all the text from the content div it shows how i actulle want it. (It did before i started to try fix this out).

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <div id="header">
        <div id="nav">
            <ul>
                <li class="active"><a href="#"><span>Hovedside</span></a></li>
                <li><a href="#"><span>Om oss</span></a></li>
                <li><a href="#"><span>Portofølje</span></a></li>
                <li><a href="#"><span>Gratis</span></a></li>
                <li><a href="#"><span>Tilbud</span></a></li>
                <li><a href="#"><span>Kontakt oss</span></a></li>
                <li><a href="#"><span>Panel</span></a></li>
            </ul>
        </div>        
    </div>
    <div id="wrap">
        <div id="wrapper">
            <div id="content">
                <p>Dette er tekst i p paranteser</p><p>Dette er tekst i p paranteser</p><p>Dette er tekst i p paranteser</p>
            </div>
        </div>        
    </div>
        <div id="footer">
            <div id ="footer-en">
                en
            </div>
            <div id ="footer-to">
                to
            </div>
            <div id ="footer-tre">
                tre
            </div>
            <div id ="footer-fire">
            </div>
        </div>
</body>
</html>

html, body {
    background: #514539;
    margin: 0 auto;
    height: 100%;
    color:#FFFFFF;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1em;
}
 
a{
    color:#FFFFFF;
    background: #514539;
}
p{
    padding: 5px;
}
 
#header{
    width: 100%;    
    height: 44px;
    border-bottom: 1px solid #645546;
}
 
#nav {    
    margin: 0 auto;
    width:800px;
}
 
#nav ul {
    margin:0 2px;
    list-style:none;    
    padding: 0;
}
 
#nav ul li {    
    list-style:none;
}
 
#nav ul li a {    
    float:left;
    margin:14px 1px;
    padding:5px 10px;
    background:#634f3d;
    text-decoration:none;
    color:#fff;
    border-top:1px solid #645546;
    border-left:1px solid #645546;
    border-right:1px solid #645546;
    font-size: 1em;
}
 
#nav ul li a:hover {
    background:#2d2620;
    color:#fff;
}
 
#nav ul li.active a, #nav ul li.active a:hover {
    background:#2d2620;
    color:#fff;
    font-weight:bold;    
    height: 28px;
    margin-top: 6px;
}
 
#wrap{
    background: #2d2620;
    width:100%;    
    border-bottom: 1px solid #645546;    
    padding-bottom: 50px;
    margin: 0 auto;    
    position: relative;    
    float: left;
}
 
#wrapper{
    width: 800px;
    margin:0 auto;
}
 
#content{
    min-height: 500px;
}
 
.content{
 
}
 
#footer{
    margin:0 auto;
    width: 800px;
    font-size: 0.8em;
}
 
#footer-en{
    width:33%;
    display: inline-block;
    float: left;
}
#footer-to{
    width:33%;
    display: inline-block;
    float: left;
}
#footer-tre{
    width:33%;
    display: inline-block;
    float: left;
}
#footer-fire{
    width:800px;
}

AttachmentSize
Untitled-2.jpg289.15 KB
Top
Tags:
Fri, 2013-05-03 03:27
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested

I suspect margin collapse is the culprit. See Uncollapsing margins.

N.B. The div #nav is redundant. Unless you are using the html5 <nav> element, there is no need for the extra div element.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Fri, 2013-05-03 17:19
#2
Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 10 years 4 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

hm im sure thats the problem,

hm im sure thats the problem, but i cant make it work. i even tried to make a "plain" layout, and i notice now that i get the same problem here.

Top
Fri, 2013-05-03 19:22
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Margins

See 

#nav ul li a {
  background: none repeat scroll 0 0 #634F3D;
  border-left: 1px solid #645546;
  border-right: 1px solid #645546;
  border-top: 1px solid #645546;
  color: #FFFFFF;
  float: left;
  font-size: 1em;
  margin: 14px 1px;
  margin: 14px 1px 0;
  text-decoration: none;
  }

The bottom margin on <a> collapse through.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sat, 2013-05-04 00:01
#4
Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 10 years 4 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

thank you very much! i will

thank you very much! i will look more into this. so the 3d margin value should be put in my cases. (x-px x-px 0 ) so that it marge bottom with 0. thanks again it solved this issue! Smile

Top
  • Locked