There are some problems with my HTML, so I am posting the code.
The first tag is a div with id="header". I have given it 100% width and given it a background image.
Inside the header there's another div with id="header-contents". I want it centered on the page so I have given it a width and then margin:0 auto. It works fine with the max-sized browser but when I zoom in or resize the browser width to about half, the background of the header div starts to disappear at some point and does not fill in 100% width.
This is how it looks at first (and should always look):
This is how it looks when I zoom or resize the browser:
What is the proper HTML and CSS for it?
Here's the code:
<!DOCTYPE HTML>
<html>
<style>
body
{
margin:0;
padding:0;
}
.clear
{
display:block;
clear:both;
}
#header
{
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents
{
width:974px;
margin:0 auto;
height:156px;
}
#header ul
{
margin:85px 23px 0 0;
float:right;
list-style-type:none;
}
#header ul li
{
display:inline;
}
#header ul li a
{
margin-left:46px;
font-size:19px;
color:#fff;
text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active
{
color:#FD7600
}
</style>
<body>
<div id="header">
<div id="head-contents">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" />
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
I have found the solution:
#header {
height: 156px;
min-width: 990px;
background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif');
display: block;
}
#head-contents {
width: 974px;
margin: 0 auto;
height: 156px;
}
It's all a matter of min-width in the #header.
I checked out facebook's login page and figured it out.
Working FIDDLE Demo
You must set the width of your head-contents as the min-width of your header:
#header {
min-height:156px;
display: block;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
min-width: 974px; /* this is width of head-contents */
}
This is the style sheet which works with me:
body{
margin:0;
padding:0;
}
.clear{
display:block;
clear:both;
}
#header{
min-height:156px;
display: block;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents{
width:974px;
margin-left:200px;
height:156px;
}
#header ul {
margin:85px 23px 0 0;
float:right;
list-style-type:none;
}
#header ul li {
display:inline;
}
#header ul li a {
margin-left:46px;
font-size:19px;
color:#fff;
text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active {
color:#FD7600;
}
Resizing the window and setting the margins to auto will screw the position of your inner div because it s width doesn t fit the window.
Take out the background-image property from #header and apply this style to the body tag:
background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;
You will no longer have the problem you described. All you need to do now is cut down the background image to 156px height, using an image-editing software package like Photoshop.
Edit: here's the updated jsfiddle showing the solution: http://jsfiddle.net/eYrg8/35/
#header {
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
Related
Here's the jsfiddle:
http://jsfiddle.net/cnf6cjm2/
Here's the HTML:
<div id="header"><ul>
<li>Link 1</li>
<li>Another Link 2</li>
<li>Link 3</li>
</ul></div>
Here's the CSS:
body {
margin:10px;
padding:0;
}
#header {
height:92px;
background:#58585a;
position:relative;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
position:absolute;
top:35px;
right:16px;
}
#header ul li {
display:inline;
font-size:1.25em;
}
#header ul li a {
color:#ffffff;
text-decoration:none;
margin-left:1.5em;
padding:35px 0;
}
#selected-nav {
background:#ffa31a;
}
I have a header div that has a horizontal ul in it for a navigation. I have the ul absolutely positioned so that it is on the right side of the header div and vertically centered. What I want to do is highlight the current page in the navigation. I want the highlight to be a background color on the link and I want the link bg to fill up exactly the whole height.
The best thing I have come up with, see above jsfiddle, is to try and set just the correct padding on the link so that when you change the background color it will take up the desired height. It works on Chrome but it's off by one pixel on the top and bottom in FF and it's off by one pixel on the bottom in IE. Here's a screen shot of those:
I also tried setting the padding to go over quite a bit and then hide the overflow-y, but that did not work.
See this solution
http://jsfiddle.net/keLsc2op/
CSS
body {
margin:10px;
padding:0;
}
#header {
height:92px;
background:#58585a;
position:relative;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
position:absolute;
top:0px;
height:100%;
line-height:86px;
right:16px;
}
#header ul li {
display:inline;
font-size:1.25em;
}
#header ul li a {
color:#ffffff;
text-decoration:none;
margin-left:1.5em;
height:100%;
display:inline-block;
}
#selected-nav {
background:#ffa31a;
}
body {
margin: 10px;
padding: 0;
}
#header {
height: 92px;
background: #58585a;
float: left;
}
#header ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
#header ul li {
float: left;
font-size: 1.25em;
}
#header ul li a {
color: #ffffff;
text-decoration: none;
margin-left: 1.5em;
line-height:4.6;
}
#selected-nav {
background: #ffa31a;
}
<div id="header">
<ul>
<li>Link 1
</li>
<li id="selected-nav">Another Link 2
</li>
<li>Link 3
</li>
</ul>
</div>
I am creating a thumbnail gallery with floating list items that I would like centered in a fluid layout. I am able to do this without any issues when it is a single line but when it overflows they are no longer centered. Is this impossible purely with css? Here's an example:
<style>
#centeredmenu {
float:left;
width:100%;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
width: 200px;
background-color:black;
border:1px solid white;
}
</style>
<div id="centeredmenu">
<ul>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
</ul>
</div>
If it can't be done purely with css can anyone point me in the direction to how it can be done with js?
try this css, change the li from block to inline-block
#centeredmenu {
}
#centeredmenu ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#centeredmenu ul li {
display:inline-block;
margin:0;
padding:0;
width: 200px;
background-color:black;
border:1px solid white;
}
RRcom Rest y answer is good, but if you need this working with IE7, then display: inline-block will not work.
You can get the same effect for IE7 and modern browsers with this hack (see extra lines after "inline-block"):
#centeredmenu ul li {
display:inline-block;
*display: inline;
*zoom: 1;
margin:0;
padding:0;
width: 200px;
background-color:black;
border:1px solid white;
}
This hack will only be interpreted by IE7 (with the "*" hack), and only in this case will apply the display: inline and zoom: 1 rules. This forces inline element to has "layout". Thats is, inline elements that you can asign width or height properties (for example) but are in the same line.
Here is the full doc explaining this hack
I am having difficulty in getting a menu list to float in the center of it's parent container. Here is the address of the page: simplekitchenandbath.com/staging/
And the necessary code snippets:
div#wrapper {
width:1100px;
margin:0 auto;
padding:0 0 50px 0;
}
div#content-main {
background-color:#000;
width:1024px;
margin:0 auto;
}
nav {
background-color:#000;
height:30px;
}
div#nav-container {
width:720px;
margin:0 auto;
}
ul#nav { position:relative; }
ul#nav li { float: left; zoom: 1; list-style-type:none; margin:0; border-bottom:1px solid #FFF; }
ul#nav a:hover { color:#DDD; text-decoration:none; }
ul#nav a:active { color:#DDD; }
ul#nav li a { display:block; padding:0 10px 0 0; color:#FFF; text-transform:uppercase; }
ul#nav li:last-child a { padding-right:0; }
ul#nav li.hover, ul#nav li:hover { position: relative; }
Make the width smaller and to align it in the center place it inside the container of the element and set its margin to 0 auto; try responsive webdesign with css3 media queries and targeting two different monitor size... because the site on 780px monitor it has the slider to go horizontally.... so basically:
<div class="container">
... some code ...
</div>
css:
.container {
width: 960px;
margin: 0 auto;
}
Thanks for reading... Love to hear some response on my answer.
div#nav-container {
width:575px;
margin:0 auto;
}
the width is too big on #nav-container. set it to 575px !
Use display:inline-block on the #nav element, and text-align:center on the #nav-container
What is the effect of inline and block and inline-block and floating to width and height?
For example take look at below css menu :
ul
{
list-style-type:none;border-style:solid;border-width:1px;border-color:Blue;
padding:0px;
display:inline-block;
float:left;
}
ul li{display:inline;}
ul li a
{
/*display:inline-block;
float:left;*/
display:inline-block;
float:left;
background-color:rgb(100,170,110);
color:Yellow;
text-decoration:none;
height:30px;
padding-left:20px;
padding-top:5px;
padding-right:20px;
}
ul li a:hover{background-color:Yellow;color:Red;}
I have corrected that for both IE and Firefox with adding below codes for ul:
display:inline-block;
float:left;
Is it true that for a inline tag the height=0?
Is it true for the left floated tag , it width is the maximum widths of it's children ?
Why block elements (such as menu items) will have some margins with their next items?
You'll get some goofy stuff with inline-block with IE. You might have better luck setting tha a's to block and float the li's. Try the code below
HTML
<nav>
<ul>
<li>Home
<li>About
<li>Contact
</ul>
</nav>
CSS
ul { margin: 0; padding: 0; }
li { float: left; }
a { display: block; padding: 5px; margin: 0 5px; }
Trying to learn a bit of CSS and I want a horizontal navbar and I am using ul and li to build it. I would like all the 'buttons' to have the same width, is that possible with just CSS?
Thanks
Not exactly sure what you mean by same width. You just set it with pixels on the link? What are your constraints? do you know the list width? or the link width?
<style type="text/css">
.menu { margin:0px auto; padding:0px; list-style-type:none; }
.menu li { margin:0px auto; padding:0px; float:left; }
.menu li a { display:block; width:200px; }
</style>
<ul class="menu">
<li>Section1</li>
<li>Section1</li>
<li>Section1</li>
</ul>
Yup,
ul li
{
display: block;
float: left;
width: 100px;
}
ul
{
padding: 0px;
list-style-type: none;
}
Something like this. (Not tested);