To make a long story short, the header class should be a black line across the entire screen. In HTML it will be a list. The list's children will be styled as buttons and should begin after the first 20% of the page. Somewhere along the line this is going terribly wrong, because:
The list children aren't styled at all (the margin)
The page stretches itself a lot.
Here is the entire source code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body {
padding: 0;
background-color:#FFFCF2;
margin: 0 auto;
}
.header {
list-style:none;
width:100%;
height:65px;
font-size:3%;
background: black;
}
.header:first-child {
margin-left:20%;
}
.headerChild {
margin-left:0;
float:left;
height:65px;
width:10%;
background: white;
}
</style>
</head>
<body>
<ul class="header">
<li class="headerChild"></li>
<li class="headerChild"></li>
<li class="headerChild"></li>
</ul>
</body>
</html>
Replace your CSS with the following:
html, body {
padding: 0;
background-color:#FFFCF2;
margin: 0 auto;
}
.header {
list-style:none;
width:100%;
height:65px;
font-size:3%;
background: black;
padding-left: 20%;
}
.header:first-child {
}
.headerChild {
margin-left:0;
float:left;
height:65px;
width:10%;
background: white;
}
A few issues that I see:
.header:first-child is applied to the <ul>, so change it to .header>li:first-child and that will target the first <li> and set its left margin
You set your font size to 3% in .header and the <li> inherit that, make sure that is what you want
set padding:0 on .header as well to prevent the horizontal scrollbars.
Here's a Fiddle for you to look at. I've put red borders around the <li> and text so you can see them.
Related
Im new to webdesign so I started a very simple project. I tried to make a navbar with 4 buttons spread evenly. However, when i set the width to 25% fot the li, the last element of the bar doesnt fit on the page but instead goes under the other ones. I want them all to spread evenly.
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/style.css">
<title>Untitled Document</title>
</head>
<!-- Nav Bar -->
<div id="#nav">
<ul>
<li><a class="red" href="#nav">Home</a>
<li><a class="orange" href="#OverOns">Over ons</a>
<li><a class="yellow" href="#Nieuws">Nieuws</a>
<li><a class="green" href="#Contact">Contact</a>
</ul>
</div>
<!-- End Nav Bar -->
<!-- Slider -->
<div class="slider">
</div>
<!-- End Slider -->
<body>
</body>
</html>
#charset "utf-8";
/* CSS Document */
/* Fix padding and marg options in different browsers */
* {
margin:0;
padding:0;
}
.red {
background-color:#F00;
}
.orange {
background-color:#F90;
}
.yellow {
background-color:#FF0;
}
.green {
background-color:#0F0;
}
.slider {
}
ul {
position:fixed;
top:0px;
margin:0;
width:100%;
list-style-type:none;
border:0;
padding:0;
overflow:hidden;
background-color:#FF;
}
li {
float: left;
width:25%;
border-right:1px solid #000;
}
li:last-child {
border-right:none;
}
li a {
display: block;
padding: 18%;
color:#FFF;
text-align:center;
text-decoration:none;
}
li a:hover {
opacity:0.5;
}
This is usually because when elements are displayed as inline-block, space between the elements is rendered as text. To fix this, set the font-size on the parent to 0, then reset the font-size on the child. The default font-size on most browsers is 16px.
Also, borders will normally add to the width of an element, instead of being included in it. You have a 1px wide border on these elements, so it is 25% + 2px (one for either side) wide. Use box-sizing: border-box to include the width of the border in the sizing of the element.
Here is a simple example.
dl {
font-size: 0;
}
dd {
font-size: 16px;
display: inline-block;
margin: 0;
width: 25%;
text-align: center;
}
a {
display: inline-block;
padding: 7.5px 20px;
border: 1px solid #f9fd42;
border-radius: 5px;
color: #000;
text-decoration: none;
}
<dl>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
</dl>
Usually this happens when you have some sort of padding/margin/border between elements. Easiest way to solve this is to reduce your width from 25%. Make sure the combined width is under 100%. Right now that's why your elements are going below.
What you are trying to achieve would make the elements with absolutely no space between them. Use something around 96% total. That's 24% for each li.
Alternate solution:
Set this property --> box-sizing: border-box;
and then set your width to 25%. That should solve it. What you're essentially trying to do is to make the width of the element + padding + border + margin = 25%
Do that by using a width class and refrain from using inbuilt styling.
Welcome to web programming
You've a 1px border in the li, so this border take the space of other elements, in other words, the size of li is 25% plus 1 px of the border.
Verify your CSS.
This is your code.
li {
float: left;
width:25%;
border-right:1px solid #000;
}
Try this.
li {
float: left;
width:25%;
border-right:0;
}
That's because you have a border-right, meaning each li block has a total width of 25%+1px and the last one can't fit.
Since you probably want to keep that border and having the four buttons covering all the space you can do something like this:
li {
float: left;
width: calc(25% - 1px);
border-right:1px solid #000;
}
that way you remove that 1px that's causing the problem. Unfortunately calc() isn't supported by some of the older browsers: calc() caniuse.com
Hope this can help you out ;D
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
I am having an issue with this horizontal menu bar. It is suppose to fit the window (width wise) but continues a little bit further than it should. It is also suppose to be top:0;left:0;
Everything I do either one of two things works. Either I align it the top left but the width is too large, or it's not aligned and the width does fit.
<!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>Website Title</title>
</head>
<body>
<style>
body{
}
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#cssmenu ul {
list-style-type:none;
width:100%;
position:absolute;
display:block;
height:33px;
font-size:.6em;
background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
top:0;
left:0;
}
#cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
#cssmenu li a:hover,.current {
color:#fff;
background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
text-decoration:none;
}
#cssmenu .current a {
color:#fff;
font-weight:700;
}
</style>
<div id="cssmenu">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
</html>
Add the box-sizing: border-box; css property.
This tells the menu to take the border into account when calculating '100%'
The answers so far seem cumbersome, so to re-post my comment as an answer:
Simply change the width:100% to left:0;right:0 in the ul style. This is supported in everything better than IE6. If you need to support IE6, use its expression syntax:
width:expression((this.parentNode.offsetWidth-2)+'px')
If you don't want to use the CSS3 property box-sizing as Rockafella suggested, you can try this edit of your CSS.
I got rid of your position: absolute, added 1px padding to the <div> container, and added -1px margin to the <ul>. This way, the width: 100% on the <ul> makes the width of the content box not include the 1px border you specified.
add overflow-x: hidden to your body
Instead of using a border, how about using an inset box-shadow? You'd need to get your prefix on, and it wouldn't work in older IE. As far as I'm concerned, the industry has turned the corner on older IE and understands that it's not worth the trouble giving it all the shadows and rounded corners.
box-shadow:inset 0 0 1px 0 #000;
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets\sets1.css">
</head>
<style type="text/css">
body /* site bg color */
{
margin: 0;
background-color:#b0c4de
}
#navbar ul {
margin: 0;
padding: 5px;
cellspacing: 0;
cellpadding: 0;
border: 0;
list-style-type: none;
background-color: #8B008B;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: #8B008B;
}
#navbar ul li a:hover {
color: #0EC6D7;
background-color: #8B008B;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="images/logo.png" alt="Site Logo" height="50" width="68"></img></li>
<li>Forum's</li>
<li>Chat's</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
</body>
</html>
added margin: 0; to body tag and it works like fb header covering whole top of page no white space or ignorant breaking or any thing like that also its cross browser so thanks alot .thank all you users who have helped me with this
Set the margin to 0px in the body
body{
margin:0px;
background-color:#b0c4de
}
This will remove any white spaces around the body
If you want the navigation bar to span the top of the entire page try setting the width to 100%
#navbar{
position:relative;
width:100px;
height:auto;
background-color: #8B008B;
}
This will make a Magenta bar across the top of the page. Not sure about what height you want so I get it to auto so it will re-size depending on the content. You can then place your logo image inside this div.
If you mean a "sticky" header then use position:fixed
#navbar{
position:fixed;
top:0;
left:0;
}
You may need to define width, z-index, or anything else specific to your design, but this is the basic idea.
If you didn't mean sticky, then maybe william got the answer right.
You need to put margin: 0; in the body tag. I recommend to use a reset style that you can find in google to reset all spaces that browsers put.
I'm making a vertical unordered block list (inside a div), in which I have a border under each li. But somehow the borders don't fit the whole width of the div. I guess the ul has to exactly fit in the div in order to do this, but I don't know how.
This is screen shot of the div and the ul in it:
And this is the CSS code I'm using:
.stats-list li{
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
.stats-list ul{
list-style-type:none;
}
I've never come across this problem before. Does anyone have any solution? Thanks.
UPDATE (HTML code):
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
Another update (CSS code of the parent div):
.checkin-stats-right{
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
By default, the UL element usually has a padding-left set to a certain amount of pixels. Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.stats-list li {
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
ul.stats-list {
list-style-type:none;
padding-left: 0;
}
.checkin-stats-right {
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
</body>
</html>
.stats-list ul {
padding-left: 0;
}
Also note that "ul.stats-list" in your HTML doesn't match ".stats-list ul"