3 replies [Last post]
Aladin
Aladin's picture
Offline
newbie
CANADA
Last seen: 6 years 23 weeks ago
CANADA
Timezone: GMT+1
Joined: 2014-01-27
Posts: 2
Points: 3

Hello...

I read answers about almost the same problem that I have with my css, but it do not solve my problem... So I had to ask it this way...
I have almost classical CSS structure, with divs as container, header, nav, ext... But space between header div and nav div is always there regardless what I had tried. ?????

CSS:

ul, li {list-style: none;}
H3 {
text-align:center;
color: #999999;
}
 
H2 {
text-align:center;
color: #999999;
}
 
a {
color: #FFF000;
text-decoration: none;
}
body {
font: small Helvetica, Arial, sans-serif;
margin: auto;
color: #FFFFFF;
font-size: 16px;
background-image: url(../images/starsbackground.jpg);
}
 
#container {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
 
#header {
padding: 0;
margin: auto;
margin-bottom: 0;
}
 
.banner {
width: 100%;
height: 100%
margin: 0;
}
 
#nav {
padding: 0;
max-width: 100%;
margin: auto;
margin-top: 0;
font-weight: bold;
}
 
#nav ul li a {
    float: left;
	color: #120248;
	text-decoration: none;
	padding: 15px;
	font-weight: bold;
}
 
#nav ul li a:hover {
	background-color: rgba(18, 2, 72, 0.71);
	color: #FFFFFF;
}
 
#kolona1 {
margin: auto;
float: left;
width: 33.3%;
background-color: rgba(18, 2, 72, 0.71);
height: 870px;
}
 
.kolona1wrap {
padding: 5px;
}
 
#kolona2 {
margin: auto;
float: left;
width: 33.3%;
background-color: rgba(18, 2, 72, 0.71);
height: 870px;
}
 
.kolona2wrap {
padding: 5px;
}
 
#kolona3 {
margin: auto;
float: left;
width: 33.3%;
background-color: rgba(18, 2, 72, 0.71);
height: 870px;
}
 
.kolona3wrap {
padding: 5px;
}
 
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */

HTML:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="viewport" content="width=device-width,initial-scale=1">
 <link href="video.css" rel="stylesheet">
	<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header">
 <img src="images/zaglavlje2.jpg" class="banner">   
 
</div>
 
<div id="nav">
       <ul>
                   <li>
                        <a href="index.html">HOME</a>
                    </li>
                    <li>
                        <a href="about.html">ABOUT US</a>
                    </li>
                    <li>
                        <a href="liquidations.html">LIQUDATIONS</a>
                    </li>
                    <li>
                        <a href="auctions.html">AUCTIONS</a>
                    </li>
                    <li>
                        <a href="appraisals.html">APPRAISALS</a>
                    </li>
                    <li>
                        <a href="contact.html">CONTACT</a>
                    </li>
                </ul> 
 </div>
 
<div id="kolona1"> <div class="kolona1wrap">
    <h3>Biblija u našem vremenu</h3>
 
</div>
</div>
 
<div id="kolona2"> 
 
    <div class="kolona2wrap">
    <h3>Video propovedi i streaming</h3>
 
 
    </div>
 
	</div>
 
<div id="kolona3"> <div class="kolona3wrap">
    <h3>Ko je William Branham</h3>
    <center>
 </div>
 </div>
 
<div id="footer">
 
</div>
 
</div>
</body>
</html>

Thanks
Aladin

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 29 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Drop Your Float

When you are coding to trouble shoot. The best thing you can do is put borders around what your are looking to trouble shoot. If you do so for the code where you see a gap. You will see that the float for the NAV is not dropping. Additionally you should ad a default reset. Because the browser will add default padding and margins to many different elements you have to work around. It is best to get rid of them. There are some really elaborate resets. I find most of it unnecessary. The basic reset I use on everything is.

* { margin:0; padding:0; }
a img { border-style:none; }
a { text-decoration:none; } 
ul li { list-style-type:none; margin:0; padding:0; }
hr { margin:0; padding:0; display:none; }

This is how my code looks when I trouble shoot your problem. And you can take out the float on the container and look at what happens. It is a good rule of thumb to float containers to drop the float. Floating a container will make your layout more stable and usually fixes a great deal of potential problems. The main thing is that you understand what a float does.

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="video.css" rel="stylesheet">
<title>Untitled Document</title>
<style type = "text/css">
 
* { margin:0; padding:0; }
a img { border-style:none; }
a { text-decoration:none; } 
ul li { list-style-type:none; margin:0; padding:0; }
hr { margin:0; padding:0; display:none; }
 
ul, li {list-style: none;}
H3 {
text-align:center;
color: #999999;
}
 
H2 {
text-align:center;
color: #999999;
}
 
a {
color: #FFF000;
text-decoration: none;
}
body {
font: small Helvetica, Arial, sans-serif;
margin: auto;
color: #FFFFFF;
font-size: 16px;
background-image: url(../images/starsbackground.jpg);
}
 
#container {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
 
#header {
padding: 0;
margin: auto;
margin-bottom: 0;
border-style:solid; border-width:1px; border-color:#f00;
}
 
.banner {
width: 100%;
height: 100%
margin: 0;
}
 
#nav {
float:left;
width:100%;
padding: 0;
max-width: 100%;
margin: auto;
margin-top: 0;
font-weight: bold;
border-style:solid; border-width:1px; border-color:#f00;
}
 
#nav ul li a {
float: left;
color: #120248;
text-decoration: none;
padding: 15px;
font-weight: bold;
}
 
#nav ul li a:hover {
background-color: rgba(18, 2, 72, 0.71);
color: #FFFFFF;
}
 
#kolona1 {
margin: auto;
float: left;
width: 33.3%;
background-color: rgba(18, 2, 72, 0.71);
height: 870px;
}
 
.kolona1wrap {
padding: 5px;
}
 
#kolona2 {
margin: auto;
float: left;
width: 33.3%;
background-color: rgba(18, 2, 72, 0.71);
height: 870px;
}
 
.kolona2wrap {
padding: 5px;
}
 
#kolona3 {
margin: auto;
float: left;
width: 33.3%;
background-color: rgba(18, 2, 72, 0.71);
height: 870px;
}
 
.kolona3wrap {
padding: 5px;
}
 
.clear {
clear: both;
}
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
 
.clearfix {display: inline-block;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/zaglavlje2.jpg" class="banner">   
 
</div>
 
<div id="nav">
<ul>
       <li>
            <a href="index.html">HOME</a>
        </li>
        <li>
            <a href="about.html">ABOUT US</a>
        </li>
        <li>
            <a href="liquidations.html">LIQUDATIONS</a>
        </li>
        <li>
            <a href="auctions.html">AUCTIONS</a>
        </li>
        <li>
            <a href="appraisals.html">APPRAISALS</a>
        </li>
        <li>
            <a href="contact.html">CONTACT</a>
        </li>
    </ul> 
</div>
 
<div id="kolona1"> <div class="kolona1wrap">
<h3>Biblija u našem vremenu</h3>
 
</div>
</div>
 
<div id="kolona2"> 
 
<div class="kolona2wrap">
<h3>Video propovedi i streaming</h3>
 
 
</div>
 
</div>
 
<div id="kolona3"> <div class="kolona3wrap">
<h3>Ko je William Branham</h3>
<center>
</div>
</div>
 
<div id="footer">
 
</div>
 
</div>
</body>
</html>

Aladin
Aladin's picture
Offline
newbie
CANADA
Last seen: 6 years 23 weeks ago
CANADA
Timezone: GMT+1
Joined: 2014-01-27
Posts: 2
Points: 3

Thanks

Thank you very much, it really helped me to have better insight to my problem. So I have now just one more question? Why than the image banner left spacing between itself and the bottom of the header div? It is really strange???
I know I will get a good answer and solution for that... Since I had assign to to banner image div class that say:
.banner {
width: 100%;
height: 100%;
margin: 0;
}

Thanks for answer!!!
Aladin

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 29 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Fix

Get in the habit of floating your containers. And alot of headaches will go away. When your starting out. A good rule of thumb is "When in doubt float:left;"

.banner { float:left; width:100%; height:100%; }