Why is there a margin in the ul? The navbar goes directly below and out of the header when I float left or right. If I remove Ul it doesnt drop below. I dont understand it. How do I fix it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
}
ul{
margin:0;
padding:0;
width:25%;
float:left
}
li{
display:inline;
}
There is no margin on the UL, it just appears that way as it is inside your container, which has margin: auto on it, which centers the #container element on your page and has 80% width.
Move your nav outside of the container if you want it to float to the left of the body, or use:
position: absolute;
left: 0;
width: 100%;
instead of floating it and it will go to the left of the nearest relative container (in this case the body as nothing is set with position: relative.
EDIT: Also, your links are not structured correctly:
<li>NAV1</li>
Should be: <li>NAV1</li> if you want NAV1 to be the text of the link
It's not about margin,because there is no margin, there is not enough space of ul. Im not sure what do you want to achieve but u can remove width: 25%; from ul.
Try this way.
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
overflow: auto;
}
ul{
margin:0;
padding:0;
width:100%;
float:left;
}
li{
display:inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related
I would like to place the middle portion div on top for a #media query -- and then I would like to stack the left portion and right portion divs below it side by side for a responsive and clean looking design, possibly for mobile as well.
Here is my code -- any help would be greatly appreciated! Thanks.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href="needhelpagain.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arvo|Josefin+Slab|Lato|Old+Standard+TT|Open+Sans|PT+Sans|PT+Serif|Roboto|Ubuntu|Vollkorn|Dancing+Script">
<title></title>
</head>
<body>
<header></header>
<div class="container">
<div class="left-portion"></div>
<div class="middle-portion">Blank Content</div>
<div class="right-portion"></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#1a0000;
}
.container{
margin:auto;
width:80%;
overflow:hidden;
background-color:white;
}
header{
padding:50px;
background-color:#000000;
}
.left-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
}
.middle-portion{
width:56%;
height:100%;
float:left;
background-color:#ffffff;
color:#000000;
font-family:'old standard tt';
text-align:center;
}
.right-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
font-family:'vollkorn';
}
You may be able to get away with making the div on top you have it labeled as left .. Make that 100% width then the other 2 divs set as 50% and the set all of the divs in the container to position relative. And the bottom divs to float left.
<style>
.container{
height: 1200px;
width: 100%;
}
.container div{
position: relative;
}
.topDiv{
width:100%;
height:100px;
}
.botDivs{
width:50%;
height: 200px;
float: left
}
.green{
background:green;
}
.red{
background:red;
}
.blue{
background:blue;
}
</style>
<div class="container">
<div class="topDiv red"></div>
<div class="botDivs green"></div>
<div class="botDivs blue"></div>
</div>
I'm trying to make a site that scales properly based on browser size. I'm aware that usually requires to keep all width and heights set to 100%, however I have no clue how to set it when there's a minimum-height and minimum height for the header and footer. A school logo will be in the header which is unreadable when too small, and a google calendar in the sidebar.
What I'd like to do is set it up so that the header and subheader (dark blue and dark grey bars) are set to be a fixed position. The sidebar (black bar) set to fixed, as well as the footer (light grey). The content section (white box) I'd like to be the only scrollable section that contains all of the news and updates. No matter how I set it up something is always moving inappropriately.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
and the css
#header-container{
width:100%;
height:96px;
position:relative;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:100%;
position:relative;
padding-bottom:55px;
background-color:pink;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
add z-index:10 to #header-container....and all your problems will be solved!!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<style>
#header-container{
width:100%;
height:96px;
position:relative;
z-index: 10;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:1021px;
position:relative;
padding-bottom:55px;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
border: 10px solid red;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
I don't think you need all the position: relative; stuff in there if you're using floats. Another thing you can do is add "overflow: auto" to the content div and do "overflow: hidden" on the others. Have you looked into bootstrap. This is very easy if you're using bootstrap. Check out: http://getbootstrap.com/ , it makes this type of stuff very very easy.
I want to make a container in the middle of the screen and put some div itmes in.
I want sth like this.
I stripped down the html to its essentials for you people.
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Webshop</title>
<link href="../css/boilerplate.css" rel="stylesheet" type="text/css">
<style type="text/css">
#content {
position:relative;
width:200px;
height:115px;
background-color:#F00;
top: 900px;
margin:10px;
padding:10px;
display:inline-block;
}
#container {
max-width: 960px;
background: #FFF;
margin: 0 auto;
min-height:100%;
height: auto;
padding-top:0;
padding-left:1em;
padding-right:1em;
padding-bottom:0;
}
</style>
</head>
<body style="background-color:#CF6" >
<div id="container">
<div id="content"> </div>
<div id="content"> </div>
<div id="content"> </div>
</div>
</body>
</html>
The result is awful.
I dont really understand, what you want but have a look at this :
http://jsfiddle.net/u7k6cyf5/
#content {
position:relative;
width:200px;
background-color:#F00;
margin:10px;
padding:10px;
display:inline-block;
}
having a very hard time getting my header image to be centered.
body {
font-family:Verdana, Genova, sans-serif;
background-color:#000;
}
divWrapper {
width:700px;
margin:20px auto;
}
divHeader {
width:700px;
background-color:#999;
}
and my html...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Just Messing Around</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="divWrapper">
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
</div>
</body>
</html>
just seems to stay stuck in the top left no matter what i do...
the "#" for IDs are missing
#divWrapper {
width:700px;
margin:20px auto;
}
#divHeader {
width:700px;
background-color:#999;
}
The image won't be centered just because you have two nested tags of the same width. You might try using ...
#divHeader img {
display:block;
text-align:center;
}
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
Truthfully, I forget (and I'm eating dinner). It all depends on what the final look of the header div will be. Everything centered? In that case, I might put text-align:center; on the <div> . You should get it by tinkering, though.
Above is true, also the #divHeader needs to have margin: auto; width must be smaller than the wrapper..
Check out this Jsfiddle. Change the text for your image and increase the divHeader width to be the size of your image (must still be less than your wrapper).
http://jsfiddle.net/f5yGQ/
body{
width:90%;
}
#divWrapper {
width:700px;
background-color:#999;
margin:auto;
}
#divHeader {
width:20px;
margin: auto;
}
You can ignore the body attribute
I try to stretch a DIV to the bottom of the page with a element above it. That basically works but the height of the element above it is added to the DIV.
Please see jsFiddle example: http://jsfiddle.net/CjKFX/
How to fix this?
CSS:
html, body {height: 100%;}
#header, #headline { position:absolute; width:100%; top:0; }
#header {height: 100px; z-index:1; background-color:#f40; }
#headline {height: 100%; top:100px; margin-top:-100px; background: #000;}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header id="header">
header
</header>
<section id="headline">
section
</section>
</body>
</html>
http://jsfiddle.net/Zeggw/