I want a navigation like structure in the header of my page, so I decided I'd use an inline list however the result it is producing is not what I imagined. It is placing the elements on 3 separate lines.
Element 1 Element 2 Element 3
The above is what I am aiming to achieve, however currently I get,
Element 1
Element 2
Element 3
This is my CSS and HTML snippets:
CSS
#nav li {
display: inline;
}
HTML
<ul id="nav">
<li><button id="left_nav"><</button></li>
<li><div id="day">Monday</div></li>
<li><button id="right_nav">></button></li>
</ul>
Thanks.
Use inline-block instead of inline, you can also use this by float...
By Inline-block,
#nav li {
display: inline-block;
}
By Float,
#nav {
overflow:hidden;
}
#nav li {
float:left; margin-right:10px;
}
Try using the following:
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
Add this to the CSS for your LI's...
li{ display:inline; }
Use
#nav li {
display: inline-block;
}
Demo: Fiddle
use float:left or float:right aligns side by side
#nav li {
float:left;
}
You have buttons and div inside li give width to div and button that will work.
Because div is block level element and its use all the width of page if you not assign fixed width.
OR
apply float: left; to li that will work too.
The structure is different for different users.
Check the link: http://jsfiddle.net/wWyMW/1/
<div id="nav">
<ul>
<li>
Element <span>1</span>
<div class="clr"></div>
</li>
<li>
Element <span>2</span>
<div class="clr"></div>
</li>
<li>
Element <span>3</span>
<div class="clr"></div>
</li>
</ul>
<div class="clr"></div>
</div>
And The CSS:
*{ matgin:0; padding:0}
ul, li{ list-style:none}
a{ text-decoration:none}
.clr{ clear:both;}
#nav{margin:auto; width:960px;}
#nav ul li{ float:left; margin-left:10px}
#nav ul li:first-child{ margin-left:0}
#nav ul li a{ display:block; background:#f00; color:#0F0; line-height:30px; text-align:center; width:70px; padding:0px 10px; font-weight:bold;}
#nav ul li a span{ display:block; float:right;}
Add this CSS:
#navigation ul
{margin:0px; padding:0px;}
#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}
Related
I want to display (blue) sub menu in one line but somehow it is coming in multiple lines. It works fine if I add fixed width but it should be flexible as this menu will by dynamic and could be change as per user's request.
Please check Fiddle
http://jsfiddle.net/awaises/meXB9/
HTML :
<div class="left-bar">
<ul class="menu">
<li>
For Sale
<ul class="sub-menu">
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
<li>Agriculture</li>
<li>Land</li>
</ul>
</li>
<li>Rent To Own</li>
<li>Key Money</li>
<li>For Sale at Auction</li>
</ul>
</div>
CSS :
body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
color:#adadad;
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #171717;
display:block;
}
ul.sub-menu{
position:absolute;
background:#1ea3d7;
top:2px; left:150px;
}
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}
Updated Fiddle
make top:0px; in ul.sub-menu
Update:
use display:inline-flex;
Use following.
.sub-menu {
display: table;
}
.sub-menu li {
/* float: left; */
display: table-cell;
}
I'm trying to build a centrally-aligned dropdown menu, using HTML5 and CSS3. I could use jQuery to assist, if I must. This must work in IE8+. At the moment, my menu is centrally-aligned, and the drop-downs work, but the width of the dropped-down item (div) is the same width as the li above.
<div class="menu">
<ul class="level0">
<li class="level0">
<a href=" http://domain.com/">
<span>home</span>
</a>
<div class="sub">
<div class="sub-column">
<a href="http://domain.com/customer-service">
<span>Customer Service</span>
</a>
</div>
<div class="sub-column">
<a href="http://domain.com/privacy-policy">
<span>Privacy Policy</span>
</a>
</div>
</div>
</li>
<li class="level0">
<a href=" http://domain.com/about">
<span>About Us</span>
</a>
<div class="sub">
<div class="sub-column">
<div>
<p>Blah blah blah, some random text goes here.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
And the CSS (tried to compact it for easy viewing).
.menu {
clear:both; display:block; max-width:100%; margin:0 auto; padding:0;
border:1px solid #ddd; border-bottom:7px solid #323131; text-align:center;
}
.menu ul {
display:block; max-width:100%; height:3.2em; margin:0 auto;
padding:0; list-style-type:none; text-align:center;
}
.menu ul li {display:inline-block; margin:0; padding:0; height:3.2em;
line-height:3.2em; position:relative;
}
.menu ul li > div {display:none; visibility:hidden; position:absolute;
background:#f60; z-index:999; transition:display 0.25s ease;
}
.menu ul li:hover > div {display:inline-block; visibility:visible;
max-width:100%;
}
.menu ul li a {display:block; margin:0; padding:0 2em; font-size:90%;
font-weight:700; text-transform:uppercase; transition:background-color 0.25s ease;
}
.menu ul li a:hover {background-color:#e4e4e4; color:#323131;}
.menu ul li.switcher {display:none;}
How can I get the width of the first line div (.menu ul li > div) to adopt the width of the grandparent element (.menu)? Or at least stretch to fit the contents in using max-width?
Any help is appreciated. Thanks.
~ edit ~
Here's the fiddle: http://jsfiddle.net/Xp6yG/
I think I understand your issue correctly, try the following:
fiddle demo
CSS:
.sub {left:0px;}
As well as using James suggestion of making the .menu position: relative I think you will also need to remove the position: relative on .menu ul li
Thanks to some helpful suggestions, this is as close to working as I've got it: http://jsfiddle.net/Xp6yG/3/.
I changed the display on .menu ul li:hover > div to display:table; and added whitespace:nowrap; and right:50%; to the .menu ul li > div element.
The dropdown appears where I want it and stretches to fit the containing element(s). Thanks very much all!
i'm currentley trying to make a website nav bar, when the page is active i want the navbar background to be the same as the body.
However, when i do this the background only wraps around the text rather than the full height of the navbar.
My HTML
<div id="navbar">
<ul>
<li> Home </li>
<li>Purchase </li>
<li>Contact </li>
<li>Portfolio </li>
</ul>
</div>
My CSS
#navbar ul{
list-style:none;
margin:0;
background-image:url('Images/black.png');
text-align:center;
height:60px;
}
#navbar ul{
list-style-type:none;
text-align:center;
color:#fff;
}
#navbar ul li{
display:inline;
}
#navbar ul li a{
color:#36b6f4;
text-decoration:none;
font-size:30px;
margin:30px;
}
#navbar ul li a.active{
height:60px;
background-image:url('Images/background.jpg');
}
I have create for you a fiddle:
http://jsfiddle.net/RKRHE/1/
I have changed your background images with colors (because I haven't your images).
The problem was display: inline;. You can put float: left;
You can copy my code from fiddle and change background color with you images.
Hope this will help you!
I am doing a website project on asp.net 3.5. When i Zoom-out the interface on web-browser my menu bar's Contact tab goes below also the places to visit tab's line "visit" comes below. How can I overcome this problem?
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Reservation
<ul>
<li>Room</li>
<li>Membership</li>
<li>Events</li>
</ul>
</li>
<li>Places to visit</li>
<li>Travel</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact us</li>
</ul>
</div>
CSS
#nav { clear:both; margin:0;
padding:0;width:900px; height:30px;}
#nav ul { margin:0; padding:0; line-height:30px; }
#nav li { margin:0; padding:0; list-style:none; float:left;
position:relative;
background-color:#0066CC/*#1B6187*/;}
#nav ul li a { text-align:center;
font-family:Georgia;
text-decoration:none;
font-size:14px;
height:30px; display:block;
color:#FFF; width:110.5px;
border:1px solid #006363;
}
#nav ul ul { position:absolute; visibility:hidden; top:32px;}
#nav ul li:hover ul {visibility:visible;}
#nav li:hover { background:#09F;}
#nav ul li:hover ul li a:hover {background-color:#09F;
color:#4EE6DB;}
#nav ul li ul li { background-color:#0066CC/*#1B6187*/;}
#nav a:hover { color:#000;}
.clearFloat {clear:both;}
This happens because the text doesn't scale well when zooming: it stays bigger than you'd expect. The text forces the surrounding li's and a's to get bigger than you'd like.
I recently fixed the same issue by fixing the width of each li (eg: width: 30px). The text will still be bigger than you'd like, but if you use enough padding it has enough space to grow.
What you could also try is position the last li absolutely top top:0, right:0, this will get ugly as the last li will lay over the one before the last
I want to position an unordered list of items on the left-hand side of a menu header (horizontally displayed, not vertically). For example where you see Home, HTML, etc:
How do I accomplish this effect with CSS?
Floats
ul
{
margin: 0;
list-style-type: none;
}
ul li
{
margin: 0;
list-style-type: none;
float: left;
}
ul li a
{
display: block;
}
<ul>
<li>Home</li>
<li>HTML</li>
<li>...</li>
</ul>
To get the lists like you have in your image, you will need to have two sets of UL and then apply a float: left; to the left one and a float: right; to the right.
With floats you have to clear them to avoid "breaking" your design later. You can do this by adding a <br style="clear: both;" /> below the lists. You can also add that style to the next div.
.menu{
text-align:left;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
display:inline;
margin:0px;
padding:0px 10px 0px 10px;
text-align:center;
}
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>