I made a simple site using stack-able divs inside of a wrapper div. The problem is that every time I add content to the , it suddenly adds a space of some type, and I cannot get rid of it. The content in the divs will be dynamic so the height won't be always the same.
Why does this happen? Is it a problem the div or the content itself?
Image below the div's without content
Image below the div's with content
My CSS
#charset "utf-8";
/* CSS Document */
/* Basic */
body {
background-color: #666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrapper {
width: 900px;
height: auto;
margin: 10px auto;
position: relative;
background-color: #999;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#header {
width: 900px;
height: 180px;
background-color: #9C0;
}
#menubar {
width: 900px;
height: 36px;
background-color: #906;
}
#content {
width: 900px;
height: 350px;
position: relative;
background-color: #036;
}
#footer {
width: 900px;
height: 40px;
position: relative;
background-color: #F90;
}
/* Nav */
#nav {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #000;
}
#nav li a:hover {
color: #000;
background-color: #fff;
}
My HTML
<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menubar">
<ul id="nav" >
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
Looking at the CSS you provided, it seems that you are forgetting to normalize it. Add at the very least this to the top of your CSS file:
* {
margin: 0;
padding: 0;
}
This will remove any browser specific margins or padding from elements, which may be causing the whitespace.
There's also a css script called Normalize.css which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
You can download it from: http://necolas.github.com/normalize.css/
for me I had the same issue with CSS NORMALIZER
and I just add this css code to the main container:
border: 1px solid transparent;
seems to be working on all major browsers along with IEs except IE6 gives you a black border b'cause as you may know IE6 does not support TRANSPARENCY
hope this helps :-)
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
The div #leftcol won't go below the navigation panel. Dreamweaver shows it as if #leftcol and #navigation are the same div. I am an absolute newbie so any help is greatly appreciated. Here is 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>Untitled Document</title>
<style type="text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 800px;
margin: 0 auto;
border: 1px solid #FC3;
}
#header h1 {
float: right;
padding-right: 150px;
padding-top: 50px;
}
#navigation {
border-left: 1px solid #FC3;
border-right: 1px solid #FC3;
border-bottom: 1px solid #FC3;
}
#navigation ul {
margin: 0;
}
#navigation ul li {
display:inline;
}
#navigation ul li a {
display: block;
padding: 5px;
text-decoration: none;
float: left;
}
#navigation ul li a:hover {
background-color: #cadb2b;
}
#navigation ul li a:visited {
background-color: #cadb2b;
}
#leftcol {
width: 200px;
background: #cadb2b;
border: 1px solid black;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="header" />
<h1>Some Title!</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
<div id="leftcol">Content for id "leftcol" Goes Here</div>
</div>
</body>
</html>
Also, I didn't know how to position the <h1> next to the picture so I floated it to the right and then positioned it with padding. Is this the correct method for positioning the title next to the header? Thanks in advance. PS. As a new user, I had to remove two of the links in my navigation and my header picture, so don't mind if it looks weird.
Is this what you have in mind. I'm not entirely sure what it is you intend for, so if I'm wrong, see my comment under your question.
http://jsfiddle.net/9hqCK/1/
If you don't want leftcol to take up the entire width of the page, add the following property to #leftcol
width:250px;
Change the width to what suits you.