This the link http://jsfiddle.net/a6K3f/1/.
I need to have one link in right aligned in the navigation menu. Below code is fine in all major browser except in ie7. Right aligned 'Link4' is breaking down. I know it works if i add floated:right li as first li in ul. But i cannt add as first li. Becasue i have written pseduo classes first-child for that.
I tried many trials but not yet resolved. Can anybody please help in my concern issue. Thanks
HTML:
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li class="f-Right">Link4</li>
</ul>
CSS:
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*display:inline;
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
Like this
please write *float:left; and remove
*display:inline;
demo
css
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*float:left; /* <--hack for IE **/
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
Related
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I'm having a weird problem with my CSS menu. There is a huge space above the links.
I tried everything from removing all the margin and padding settings from the css and still nothing. The only way I can remove the extra spacing is to delete all the li.
Can anyone see what I'm doing wrong?
http://jsfiddle.net/3dB7v/
<div id="test_nav">
<div id="test_subnav">
<ul id="test_ul">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<asp:panel id="pnlUpdateDate" cssclass="UpdateDate" runat="server">Last Update: 11-26-2013</asp:panel>
</div
#test_nav
{
text-align: left;
padding: 5px;
border: 1px dashed blue;
}
#pnlUpdateDate
{
width: 200px;
border: 1px dashed blue;
}
#test_subnav
{
float: right;
position: relative;
z-index: 1000;
padding: 0;
border: 1px solid red;
}
#test_ul li
{
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 1001;
b1order: 1px dashed orange;
}
#test_ul li ul
{
margin-left: 0;
padding: 0;
}
#test_ul > li
{
float: left;
padding: 3px; /* padding-top: 3px; padding-bottom: 3px; */
margin: 0 2px 0 0;
}
#test_ul > li > a, #test_ul > li > span
{
display: block;
padding: 4px 4px 4px 4px;
margin: 0 3px 0 3px;
font-size: 14px;
font-weight: bold;
color: black;
text-decoration: none;
}
#test_ul > li > span
{
cursor: default;
}
#test_ul > li:hover > a, #test_ul > li.active > a
{
color: Red;
}
#test_ul > li:hover > a:active
{
color: #3B96B6;
}
#test_ul > li:hover > span
{
color: #3B96B6;
}
That space belongs to the default margins of the ul#test_ul element applied by the useragent.
You should reset the default stylesheet applied by user agent on the list element, as follows:
ul#test_ul {
padding: 0;
margin: 0;
}
You can refer to this answer for further details:
User agents apply some default styles to the HTML elements. For
instance they apply a top and bottom margin on the <p>, <ul>, ... elements.
As Google Chrome sets -webkit-margin-before: 1em; and -webkit-margin-after: 1em;.
Working Demo
It's better to reset user agent stylesheet before any author stylesheet to prevent unexpected issues.
Try removing the margin and padding from the ul element.
A quick and dirty way would be * { padding:0; margin:0; }
What you are seeing is the browser default styles. Consider locating a "reset" stylesheet and always applying it first before any other styles. I like this one: http://meyerweb.com/eric/tools/css/reset/
Address the problem, not the symptoms. You'll run into this all the time if you don't. Each browsers default styles are different. Zeroing them all out is the only way to get consistency throughout.
It looks like you need to add this to your CSS:
#test_ul {
padding: 0;
margin: 0;
}
I'm brand new to this coding stuff so please go easy on me ;)
I'm trying to make the top nav on this website stretch to fit the width of what I understand to be the "container" of the website which is 900px wide. I can't for the life of me remove what appears to be padding or margins to the left and right of the nav. See code below.
Site screenshot here: http://img560.imageshack.us/img560/9479/237c.png
Right now I'm just cleverly making adjustments to padding to make the nav somewhat centered on the page, but ultimately it would look much better if it met up with the edge of the containter like everything else.
Thx for any help.
/* Navigation
--------------------------------------------------------------------------------*/
#topnav {
clear: both;
margin: 0 0;
overflow: hidden;
}
#topnav ul {
list-style: none;
float: left;
text-align: center;
}
#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep.png) right 0px no-repeat;
padding: 15px 0px 12px 0px;
display: inline block;
}
#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}
#topnav a {
float: left;
display: block;
color: #545454;
font-family: Blair, sans-serif;
font-weight: 500;
padding: 6px 0 6px;
border: 0;
border-top: 3px solid transparent;
outline: 0;
margin: 0 16.6px;
list-style-type: none;
font-size: .75em;
text-transform: uppercase;
}
#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
margin-right: 0;
}
#topnav li#active a,
#topnav a:hover {
color: #666666;
border: 0;
border-top: 3px solid #8cc640;
}
Try with
margin-left:auto;
margin-right:auto;
See also:
Cross browser method to fit a child div to its parent's width
Hope this helped. Cheers.
I would say to add a main container div that will enclose all your existing html, and then define a css for it with margin-left/right as auto :
<head>
.......
<style>
#mainContainer {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<html>
<body>
<div id="mainContainer">
............................
............................
............................
</div>
</body>
</html>
Hi if you are new on this you need to know that for default all element tags like ul, p or body has for default some values on properties like margin and padding. What you need is first work on reset those values in CSS to avoid issues and make more easier your cutomization. In your case the ul has some properties:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
You can use this simple global reset with * as the global selector :
* {
margin:0;
padding:0;
}
Or search for some complex resets like this one.
Then with values on 0 you can customize in a better way your elements:
#topnav ul {
list-style: none;
float: left;
text-align: center;
width:100%;
}
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li>home</li>
<li>about</li>
<li>tutors</li>
<li>students</li>
<li>contact us</li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Change the rule on your <a> element from:
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
to
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
jsFiddle example
You have to make the UL inside the div behave like a block. Try adding
.navigation ul {
display: inline-block;
}
I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.
If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.
One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.
Well, I'm working an an ul - li multilevel menu and have problem.
Firstly, some code (I know it's not perfect but the crappy div is automatically added by Wordpress):
<nav id="page-navigation">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Pages
<ul class="sub-menu">
<li>One Column</li>
<li>Two Columns</li>
<li>Three Columns</li>
</ul>
</li>
</ul>
</div>
In my stylesheet I'll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.
The problem is I can't change WIDTH of links in sub-menu. I don't know how. I'm totally lost.
As far as I can see this code overwrites them:
#page-navigation ul li {
float: left;
padding: 0;
font-size: 1.2em;
line-height: 1.2em;
background-repeat: no-repeat;
width: 200px;
height: 65px;
}
#page-navigation ul li a {
display: inline-block;
text-align: center;
padding: 10px 0 0 0;
text-shadow: #222 1px 1px 1px;
width: 200px;
height: 65px;
}
And here's the code for sub-menu items:
.sub-menu {
border-radius: 5px;
border: solid 1px #000;
box-shadow: 0px 0px 25px #000;
background-color: #222;
height: 200px;
width: 500px; /* THIS LINE DOESN'T WORK */
}
.sub-menu li {
width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}
.sub-menu li a {
font: 10px Verdana;
tex-shadow: 1px 1px 0px #000;
width: 100px; /* doesn't work :) */
height: 100px; /* doesn't work :) */
}
I know the whole sub-menu is inside of a <li>, but can do nothing with that (default Wordpress behavior).
What now? :(
Thaanks
You need to specify the full path, the higher level items are currently more specific. Try this:
#page-navigation ul li .sub-menu li {
width: 100px;
}
Your .sub-menu width, the first of your "doesn't work" actually does work for me. For the second, you can do two things.
Make it width: 500px !important so it overrides anyway. But I would advise to instead...
Put the ID at the beginning of the selector. .sub-menu li is overridden by any selector with an ID in it. So change it to #page-navigation .sub-menu li.
The selector #page-navigation ul li is more specific than .sub-menu li, so it takes precedence.
You can either work this out by adding an !important annotation to your CSS rules like this:
.sub-menu li {
width: 500px !important;
}
or specify the rule as more specific:
#page-navigation ul.sub-menu li {
width: 500px;
}
For problems like this, please resort to Firebug - you'll have a nice view of what is overwritten by what. This helps a lot :)