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;
Related
I would like to have a fixed menubar at the top of my website. (which doesn't move when we scroll). My issue is that this menu bar can have a variable height (one or two (or more) levels depending of the number of items/screen size)
Because the top menu is fixed, I have to add a margin-top for my "real" content after that (or it will begin hidden under the menu), but as the menu height is variable, I can't set a margin-top.
So, is it possible to "force" the content not to be under/over my menubar ? How could I do this ? (I wish not to use javascript for this king of positioning)
Here is the code I am using to test a solution :
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style>
body
{
margin: 0;
padding: 0;
color: #575757;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #cdcdcd;
}
#page
{
margin-top: 0px;
margin-bottom: 5px;
width:100%;
max-width:1500px;
margin-left:auto;
margin-right:auto;
}
#mainmenu
{
background:#b90014 repeat-x left top;
position:fixed;
/*height:28px;*/
width:100%;
z-index:100;
left:0;
background-image:linear-gradient(#b90014, #d00018);
}
#mainmenu p#lastUpdate
{
float:right;
color:#ffffff;
margin-top:5px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
}
#mainmenu ul
{
padding:6px 20px 5px 20px;
margin:0px;
}
#mainmenu ul li
{
display: inline;
}
#mainmenu ul li a
{
color:#ffffff;
background-color:transparent;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:8px 8px 4px;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #d00018;
background-color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="page">
<div id="mainmenu">
<p id="lastUpdate">Last Update : this date</p><ul id="yw0">
<li>Accueil</li>
<li>Rapports</li>
<li>Rapports personnalisés</li>
<li class="active">Rapports instantannés</li>
</ul>
</div><!-- mainmenu -->
<div id="content">
<div id="contentbox">
HELLO WORLD
</div>
</div><!-- content -->
</div><!-- page -->
</body>
</html>
Thank you !
I think what you are looking for are media queries:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can apply CSS styles depending on the size of the screen.
I don't think you can do this in just CSS as it's not able to able detect changes in the page like that. As stated below you could get somewhere near what you want using css padding but i would suspect it wont be exactly what you want. This is one of the things JavaScript is designed for. Id happily be proved wrong though
I have a navigation bar which works fine, but I want to add padding and a height to each link.
Whenever I do so, It make all the links except the first one taller than they are supposed to be. This does not work in Fiddle for some reason, so here is the code:
(CSS)
body {
overflow-x:hidden;
font:13px arial;
background-color:#171120;
margin:0;
}
nav {
height:100px;
width:100%;
padding:10px;
padding-top:30px;
background-image:url('nav_bg.png');
border-bottom: 3px solid #302342;
}
nav #header {
color:#FFFFFF;
font:bold 56px arial;
float:left;
}
nav ul {
float:right;
list-style-type:none;
margin:0;
padding:0;
margin-top:20px;
margin-right:180px;
overflow:hidden;
}
nav ul li {
float:left;
}
nav ul li a:link,a:visited {
display:block;
width:180px;
##################################If you add height or border or padding, the links become taller!
background-color:#333333;
text-align:center;
font:bold 26px arial;
color:#ffffff;
text-decoration:none;
}
(HTML)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<title>Testing...</title>
</head>
<body>
<nav>
<div id="header">Testing...</div>
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</nav>
</body>
</html>
Why can't I add height, padding or border on the links without them suddenly becoming taller?
This is well know and annoying problem.
This can be solved using "box-sizing"
See this link for a tutorial
This explanation is very relevant:
"The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. We can now safely declare our textarea to be of 100% width, including pixel-based padding and border, and accomplish out layout perfectly."
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.
I am trying to make a big footer. I have tried my best to make the links displayed inline but I am unable to do so. Please help out. Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#footer{
width:auto;
height:600px;
background:url(footer.png);
}
#footer div{float:left; width:43.5%}
#footer div:nth-child(2n+1){clear:none}
#footer div:nth-child(3n+1){clear:left}
#footer div li a{float:none; width:auto; display:inline; font-size:1em; padding:0; line-height:1.5em; background-color:transparent}
#footer .contribute{border:none; background-color:transparent}
#footer div h4{transition:color 0.3s; -moz-transition:-color 0.3s; -ms-transition:color 0.3s; -o-transition:color 0.3s; -webkit-transition:color 0.3s}
#footer div:hover h4{color:#e53b2c}
#footer div:nth-child(2n){clear:left}
#footer div{width:100%; clear:both}
#footer .contribute{background-color:rgba(255,255,255,0.8); border-bottom:10px solid rgba(0,0,0,0.025); background-color: transparent;
border: medium none;}
#footer div li {display:block; width:94.5%; float:left; font-size:0.95em; }
#footer li{padding:0.125em 0}
#footer a{border-bottom:1px solid rgba(0,0,0,0.1)}
#footer a:hover{border-bottom:1px solid rgb(65,183,216)}
#footer a:active, #footer a:focus { background-color:#e53b2c; border: none; }
</style>
</head>
<body>
<div id="footer">
<div class="contribute">
<h4>Best of Design</h4>
<ul>
<li>Responsive Design</li>
</ul>
</div>
<div class="contribute" >
<h4>Best of Coding</h4>
<ul>
<li>JavaScript & jQuery</li>
</ul>
</div>
<div id="contribute">
<h4>Smashing Hub</h4>
<ul>
<li>Smashing Magazine</li>
</ul>
</div>
<div class="contribute">
<h4>Other Resources</h4>
<ul>
<li>Free Anniversary eBook</li>
</ul>
</div>
</div>
</body>
</html>
Here is a visual of what design I am trying to make,
The typical way you see people accomplish this problem is by using the float property. Note that I added overflow: hidden to #footer to clear the floats.
#footer { overflow: hidden; }
.contribute {
float: left;
width: 25%; }
http://jsfiddle.net/Wexcode/nxvdG/
If you're trying to stick with using inline, you will use similar code, only inline elements behave differently when stuck next to each other. Whitespace in your markup, ie </div> <div> will produce a gap between the two elements. To make it so the elements touch, you need to remove the white space in your markup, like </div><div>.
.contribute {
width: 25%;
display: inline-block; }
http://jsfiddle.net/Wexcode/TkxKm/
You can do this with float: left; instead of display: inline;.
The problem with your CSS is that you override the style for #footer div a lot:
#footer div{width:100%; clear:both}
This is one of these and its the main reason for breaking the layout.
Try to remove part of the style and refactor it to clean out a bit. You will thank us for this.
"If you can't understand your own code, its time to take a break and refactor."
I have created a list of items using <ul> and <li>. It's works fine in Firefox but in Internet Explorer 6 and 7 I cannot see the list bullet.
Here is what I've done:
I have a global ul , li reset value. After that I have created two column list using two <ul> block. I am overwriting the ul li global style value none in CSS to list style as disc. when I do this I can see the bulleted list item, but when I set the ul's width as some specific value the li bullets disappear in IE.
Even if I use list style as list-style-image: url(bullet.gif) that also does not appear in IE 6 and 7.
Here is the HTML code. Please have a look on this and let me know which way I can archive bulleted list in all the browsers.
<!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>List Sample</title>
<style>
* { padding: 0; margin: 0; }
body { font-size: 62.5%; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#000000;margin:0; }
p,ul { font-size: 1em; }
li { list-style: none; font-size: 1em }
.clear { clear: both; height:0px; font-size:0px;}
#box1{ font-size:1.5em; margin:10px 0px 0px 10px; width:350px; border:1px solid red; padding:10px 20px; clear:both;}
#box1 ul#listLeft{ display:inline;}
#box1 ul#listLeft li{ list-style:disc; border:1px solid red; width:150px; float:left;}
#box1 ul#listRight li{ list-style:disc; border:1px solid red; width:150px; float:left;}
</style>
</head>
<body>
<div id="box1">
<ul id="listLeft">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<ul id="listRight">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<div class="clear"></div>
</div>
</body>
For native disc bullets you need some margin, padding.. try with
ul li { margin:0 0 0 15px; padding:0 0 0 15px; }
And keep decreasing the left for either of those until you've gained consistency ( I forget which browser uses which - you might be able to just rely on one of those alone ). If you want to use an image use:
ul li { background:url(/images/bullet.gif); zoom:1; }
The zoom is to counter-act IE-oddities, sometimes it creates oddities though. Don't forget to set the background position depending on your design.