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; }
Related
I have being trying to make a nowrap navigation with CSS however when I hover over the parent list for lack of a better description jumps
HTML
html {
overflow-x: hidden;
}
ul li{
list-style:none;
}
nav{
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
height:40px;
background-color:white;
overflow:hidden;
}
nav .user-nav{
position:absolute;
white-space:nowrap;
}
nav .user-nav > li{
display: inline-block;
margin: 0 10px;
}
nav .user-nav li a{
text-decoration:none;
color:black;
}
nav .user-nav li a:hover{
color:red;
}
nav .user-nav > .interact li{
display:none;
background-color:white;
padding:10px;
}
nav .user-nav > .interact:hover li{
display:block;
}
nav .user-nav > .interact li:hover{
color:red;
}
<nav>
<ul class="user-nav">
<li>Reccent reviews</li>
<li>Reccent addtions</li>
<li class="interact">Login/Register
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</li>
</ul>
</nav>
I added it to a fiddle below
https://jsfiddle.net/23e5aLp2/
I initially done it with a float however since reading a bit more I found inline-block is the better option, the problem is as I mentioned the parent list seems to jump when hover over the drop down menu
Make your <ul> inside of .interact positioned absolute, like:
.interact ul {
position: absolute;
}
.interact ul {
position: absolute;
}
html {
overflow-x: hidden;
}
ul li{
list-style:none;
}
nav{
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
height:40px;
background-color:white;
overflow:hidden;
}
nav .user-nav{
position:absolute;
white-space:nowrap;
}
nav .user-nav > li{
display: inline-block;
margin: 0 10px;
}
nav .user-nav li a{
text-decoration:none;
color:black;
}
nav .user-nav li a:hover{
color:red;
}
nav .user-nav > .interact li{
display:none;
background-color:white;
padding:10px;
}
nav .user-nav > .interact:hover li{
display:block;
}
nav .user-nav > .interact li:hover{
color:red;
}
<nav>
<ul class="user-nav">
<li>Reccent reviews</li>
<li>Reccent addtions</li>
<li class="interact">Login/Register
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</li>
</ul>
</nav>
Hope this helps!
I would recommend to use inline-table or inline-block for class nav .user-nav li
Fiddle
Its because the list items are block elements, thus making the container bigger in size when they spawn in. Make the dropdown items absolute and your problem will be solved.
http://prntscr.com/ddn5xe
http://prntscr.com/ddn5gv
As for the nav question; a text-align: justify solution might work, or a flexbox solution. Try googling around for "nav justify text" or "nav flexbox" and you'll find a pletora of solutions.
Actually what is happening is that the inline block works well if you add same content in all inline block elements but as they are block elements their default settings will wrap the div around the content inside it. To make sure the content is aligned correctly in line, you need to specifically assign content alignment properties in the css of the inline-block elements.
The simplest solution in your scenario is just add vertical-align:top; to the nav .user-nav > li class or the element with the display:inline-block; property and the problem will be resolved.
Hope this helps.
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');
}
On this page I wish to have the entire space to the right of the navigation filled in white.
So, I achieved 5px wide white block using the :after CSS selector, and am hoping there is a way to make it fit the available width, although I am open to other suggestions!:
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
Here is the simplified HTML:
<div class="menu"><ul id="menu-main-menu">
<li>Home</li>
<li>About us</li>
<li>Courses & prices</li>
<li>Activities in Rio</li>
<li>Accommodation</li>
<li>News</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
And all the relevant CSS:
#primary-menu ul {
overflow:hidden;
}
#primary-menu li {
list-style:none;
float:left;
}
#primary-menu a {
color:#333;
background: #fff;
display:block;
}
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a {
color:#fff;
background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
}
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
Thanks for taking the time to check out my question!
Caroline
You could add the ::after pseudo selector to the li.current-menu-item instead of #menu-main-menu and add white background from that element onwards.
.current-menu-item:after {
background: none repeat scroll 0 0 #fff;
content: "";
height: 30px;
position: absolute;
right: -1000px; /* these numbers are the same */
top: 0;
width: 1000px; /* and need to be at least the width of the menu */
}
#primary-menu li {
position: relative; /* position the ::after element relative to the li */
}
#primary-menu ul {
....
overflow: hidden; /* you already have this to clear your floats */
.... /* but I thought I should emphasise that you need it */
}
The example below works by adding an extra li to fill, but since the font will render dirrentely among browsers you cannot predict the width. The workaround in this example creates a container (#cen) for centering the content and setting the width, also the overflow property is set to hidden. Doing this you are able to add a significantly bigger div wrapping the ul and the filler li with a lot more width than required. Which causes no problem since the parent.parent is hidding overflows.
http://jsfiddle.net/efortis/3YpDh/1/
<div id="cen">
<div class="menu">
<ul id="menu-main-menu">
<li>Home</li>
<li>About us</li>
<li>Courses & prices</li>
<li>Activities in Rio</li>
<li>Accommodation</li>
<li>News</li>
<li>FAQs</li>
<li>Contact</li>
<li class="filler"> </li>
</ul>
</div>
</div>
#cen {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.menu {
width: 1200px;
float:left;
}
li {
padding: 10px 25px;
float:left;
background: white;
}
.filler {
width: 200px;
}
Getting rid of float on li allows you to simply define display: block; background: white on their ul parent without any need for :before and :after pseudos to fill a space. This ul will already be 100% width because of display: block.
To do this, you can display each item as inline-block (display: inline and zoom: 1 for IE6/7) and stick closing and opening </li><li> tags to avoid whitespace between them.
See this fiddle
Bonus in the fiddle: in a second example, items occupy all available width (not necessarily pretty, depends of your design and menu) by using table-cell (the CSS value, not the unsemantic table>tr>td HTML code, of course). For IE6/7, same fallback as above (and same rendering).
I have an inline list that I am trying to get to "fill" the entire width of it's div.
If I use a margin-right on the list the last element will either not reach the end of the div (because it had the right margin) or the right margin will force it to go to the next row as it exceeds the width of the div.
Here is an excample of what I am describing.
http://i.imgur.com/9CJx7.png
my html:
<div id="footerstick" style="background:url(site_files/bg_shears.png) repeat-x; ">
<div id="footer_wrap">
<div id="footer_top_shelf">
<ul>
<li>Contact Us</li>
<li>FAQ</li>
<li>About Us</li>
<li>Distribution</li>
</ul>
</div>
</div>
</div>
my css:
#footerstick {
position: relative;
margin-top: -230px; /* negative value of footer height */
height: 230px;
clear:both;
}
#footer_wrap {width:980px; margin:auto;}
#footer_top_shelf {height:70px; overflow:hidden; }
#footer_top_shelf ul li {display:inline; list-style:none; color:#c7c7c7; font-size:30px; margin-right:85px; line-height:75px; text-transform:uppercase; font-family:myriad pro; }
Write like this:
#footer_top_shelf ul li + li{
margin-left:85px;
}
Try below css - after seeing your image and as per your requirement, if i am getting your problem correct the this updated css should help you.
#footerstick {
position: relative;
margin-top: -230px; /* negative value of footer height */
height: 230px;
clear:both;
}
#footer_wrap {width:980px; margin:auto;}
#footer_top_shelf {height:70px; overflow:hidden;}
#footer_top_shelf ul
{
margin:0;
padding:0;
text-align:center;
}
#footer_top_shelf ul li {
display:inline;
list-style:none;
color:#c7c7c7;
font-size:30px;
margin:0px 40px;
line-height:75px;
text-transform:uppercase;
font-family:myriad pro;
}
Note: Can you show your real time code, so we can identify easily how your code working and where you are facing problem.
anyone know how to fix this! on 'Get In Touch button'
it works find in another browser except IE7;
HTML:
<NAV>
<UL>
<LI>Home</LI>
<LI>Branding</LI>
<LI>About</LI>
<LI>Get In Touch</LI>
</UL>
</NAV>
CSS:
nav { float:right;}
nav ul { margin:0px; padding:0px; }
nav ul li { float:left; }
nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px;}
Add white-space:nowrap to the nav ul li CSS rule.
About the white-space property: http://vidasp.net/CSS-white-space-property.html
You may need to explicitly set width on the list and/or nav container.
This is quite common in IE7 and down, where the dumb browser needs to be told there's room allotted for the content.
nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px; width: auto; }
Add in that width: auto; - see if that helps.
Neuro
use
clear: right; float:right;