I have a menu fixed on top of my page.
My problem is the li. It is not getting 100% width. There is a margin left on the first li (LOGO) and the second li (login) text is somewhere else, but not in my page.
What is wrong with my menu?
https://jsfiddle.net/c96742fu/
CSS
#menu {
display:table;
background-color: #000;
position:fixed;
width:100%;
top:0;
margin:0;
color: #fff;
text-align: center;
height:45px;
z-index:100;
box-shadow: 0px 0px 1px 1px #999;
}
#menu a:link, #menu a:visited, #menu a:hover{
color: #fff;
}
#menu ul{
width:100%;
list-style-type: none;
}
#menu li{
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
.right{
text-align:right !important;
}
HTML
<ul id=menu>
<li><a href=/index.php>LOGO</a></li>
<li class=right>login</li>
</ul>
You have a default padding for the <ul>. Try this to fix it:
#menu {padding: 0;}
Fiddle: https://jsfiddle.net/c96742fu/1/
For better results, try adding a universal reset as said by everyone:
* {margin: 0; padding: 0; list-style: none;}
Try to add
* {
padding: 0;
margin: 0;
}
to reset default css.
https://jsfiddle.net/c96742fu/
Related
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
I tried to create a navigation bar which should fit inside a div id called #page_wrap
itd width is 980px when i tried with firebug i am seeing that #nav selection is bigger than #page_wrap.Why this is happening.
my intention is the nav bar should not go outside the #page_wrap
Here is the Code
HTML
<div id="page_wrap">
<ul id="nav">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
<li>Menu7</li>
<li>Menu8</li>
<li>Menu9</li>
</ul> <!-- END Navigation Bar-->
<div id="content">
</div>
</div> <!-- END page_wrap -->
CSS
ul#nav {
list-style: none;
width:980px;
height:35px;
background:#000000;
}
ul#nav li a {
float:left;
color:white;
text-decoration: none;
width:105px;
line-height: 35px;
border-right: 2px solid #979797;
text-align: center;
}
ul#nav li a:hover {
background: #979797;
}
#page_wrap {
margin:0 auto;
width:980px;
}
See the image it has empty spaces in start and end. Why there are empty spaces in the start and End. How to avoid those things. I believe this is what causing a problem of bigger than its parent.
How to Remove Start and End emtpy Spaces and how to place #nav inside #page_wrap exactly which means it should not go out from #page_wrap. Any Help?
Check this JSFIDDLE
Remove default padding for the UL.
ul#nav{padding:0;}
LIke this
demo
css
*{
margin:0;
padding:0;
}
ul#nav {
list-style: none;
width:980px;
height:35px;
background:#000000;
margin:0 auto;
padding:0;
}
ul#nav li a {
float:left;
color:white;
text-decoration: none;
width:105px;
line-height: 35px;
border-right: 2px solid #979797;
text-align: center;
}
ul#nav li a:hover {
background: #979797;
}
#page_wrap {
margin:0 auto;
width:980px;
}
Use this at the start of your css
* {
padding: 0;
}
My menu structure is
<div id="menu">
<ul>
<li><span>Two Words</span></li>
<li><span>Three Words</span></li>
<li><span>Very Long menu item</span></li>
<li><span>Short word</span></li>
<li><span>item5</span></li>
<li><span>item6</span></li>
</ul>
</div>
Menu has fixed width 720px and fixed height 50px. How can i make menu items to be like on this image?
here is my CSS
#menu {width:720px; height:50px; }
#menu ul {margin:0px; padding:0px;}
#menu ul li {display:inline; float:left; margin-left:1px;}
#menu ul li a {display:block; width:119px; height:100%;}
#menu ul li a span {display:inline-block;vertical-align:middle;
background-color:gray; text-align:center; font-size: 14px; width:100%;}
Here's a headstart:
#menu {
border: 1px solid #0000ff;
padding: 10px;
}
ul li {
border: 1px solid #ff0000;
display: table-cell;
height: 80px;
margin: 10px 5px;
text-align: center;
width: 80px;
vertical-align: middle;
}
jsfiddle
use the text-align="center" in the span tags that you have created or do the same using css.
Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.
Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?
The code I've tried so far is:
#menu ul {
list-style:none;
margin:0;
padding:10px;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin-right: 40px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 39px;
}
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background-color: #0488C5;
font-weight:bold;
}
I am still learning so excuse any mistakes!
Click here for a demo.
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
</ul>
ul {
width: 100%;
border-bottom: 3px solid blue;
overflow: hidden;
}
li {
float: left;
margin: 0 20px 0 20px;
}
li a {
border-bottom: 20px solid #fff;
display: block;
}
li a:hover, .active {
border-bottom: 20px solid blue;
}
You can then use the hover state for another class called something like "active" that you can apply when on that page.
You should be able to tweak this example to suit your needs.
You don't need any images. CSS is more than capable of doing this for you.
....................................
Live demo
Hi now this is possible used to after in css
as a simple example is this
HTML
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Css
ul{
list-style:none;
border-bottom:solid 10px blue;
}
li{
display:inline-block;
vertical-align:top;
background:red;
}
li a{
text-decoration:none;
display:inline-block;
vertical-align:top;
position:relative;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
li:hover a:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:10px;
background:blue;
}
LIve demo
Place three anchors in an unordered list and have them displayed in-line by setting the list display to none an floating the list items. Further add an empty span to each anchor which you can style with the :hover pseudo selector.
Learn CSS, its fun!
Here is the page I am working on: http://www.sackling.com/new_arrivals.php
It seems to look good in all browsers except ie7.
I can't seem to figure out a way to make it work properly in all browsers it must be something with the way I am trying to stack my divs..
This is the important css:
#menuwrap {
width:940px;
height:84px;
position:relative;
z-index:99999;
}
.top_menu_container {height:60px;}
.menu_holder {width:980px; z-index:9999;}
.menu_right_bottom {width:220px; }
/*Menu Start */
.navtest{list-style:none;}
.navtest ul li {
display: block;
position: relative;
float: left;
cursor:pointer;
z-index:9999;
position:static;
}
.navtest ul li a {
text-transform:uppercase;
font-size: 11px;
display: block;
text-decoration: none;
color: #3F3F41;
padding: 5px 21px 5px 20px;
margin-left: 1px;
white-space: nowrap;
z-index:9999;
font-weight:normal;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.navtest ul li ul { opacity:0.80; width:141px; display:none; }
.navtest ul li:hover ul{ display: block; position: absolute; z-index:9999; }
.navtest ul li:hover li { float: none; z-index:9999;}
.navtest ul li:hover a { background: #fff; z-index:9999; color: #999; } /* main menu rollover color change */
.navtest ul li a:active {text-shadow: 0px 0px 0px rgba(0,0,0,0);} /*main menu click */
.navtest ul li:hover li a:hover { background: #c0c1c0; z-index:9999;} /*hover over background of dropdown */
.navtest ul li:hover ul li a {color:#000;} /* color of drop down on main rollover */
.top_buttons .navtest ul li a { font-size: 10px; } /* top menu row font */
*{margin:0; padding:0;}
body { margin: 0 auto; font-size: 13px; color: #333333; }
html, body { color: #000000; margin:0; padding:0; height:100%; font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif; }
.header_space { height: 15px;; clear: both; width:940px; margin:0 auto;}
.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; }
.container {min-height:100%; height: auto !important; height:100%; margin: 0 auto -25px; width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4; }
.contentContainer {width:980px;}
.banner_listings {margin:0; padding:0; height:293px; width:940px;}
.category_product_style {padding:10px 0px 0px 13px;}
#account_content {background: url(/images/account_nav_bg.png) repeat-x left top; margin-top:35px;}
/* =Account nav */
#account_nav {margin-bottom:55px; margin-top:35px; background: url(/images/account_nav_bg.png) repeat-x left top; float: left; width: 180px;}
#account_nav h2, .table_legend h2, #account_credits h2 { font-size:125%;}
/***********header stuff ************************/
.styled-select {padding-top:6px;}
#searchwrapper {
width:246px; /*follow your image's size*/
height:26px;/*follow your image's size*/
background:#ccc;
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:none; /*important*/
background-color:transparent; /*important*/
background-image:url(images/blank_search.gif);
position:absolute; /*important*/
top:7px;
left:9px;
width:225px;
height:14px;
color:#fff;
font-size:14px;
margin:0px;
}
.searchbox_submit {
border:none; /*important*/ /*important*/
background: url(images/searcharrow.jpg) no-repeat;
position:absolute; /*important*/
top:3px;
left:225px;
width:15px;
height:20px;
margin:0px;
}
Try removing all whitespaces within the ul's in the menu - IE7 renders 2 spaces just above the first menu.
EDIT: i think it's the redundant ul/li - try changing ul class"navtest" to div class="navtest", and remove the li in the left & right menu...
I believe your issue is with the ul#nav-test element. For some reason you have a ul nested within an li within a ul. Was this a mistake or have you done this for a reason?
See line 92 :
<ul class="navtest" >
<li>
<ul>
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>
</li>
</ul>
Remove the additional ul and this will probably resolve your issue as IE7 is assigning a 16px offset from the top of the second ul.
So your HTML becomes:
<ul class="navtest" >
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>