I am new to CSS3 and HTML5. I want to know how can I remove spacing between my navigation bar buttons.
My HTMLCode is:
<nav id="menu">
<ul>
<li>
GET HELICOPTER TOURS</li><li>
GET PARTY BUS</li><li>
GET BUS TICKET</li><li>
GET BUS TOURS</li>
</ul>
</nav>
And my CSS3 code is:
#menu li{
position:relative;
font: bold 14px Tahoma;
color: #FFFFFF;
float:right;
margin-right:100px;
margin-top:35px;
list-style:none;
}
I made a quick JSFiddle
ul li{
display:inline-block;
list-style:none;
margin-left:20px;
}
Two things you need to do:-
display:inline;
margin-right:10px;
margin can be adjusted according to your requirement
Related
I need a horizontal navigation bar with the words "HOME", "DRAWINGS", "STORE", and "CONTACT" evenly spread across the page. Right now my CSS looks like this:
<style type="text/css">
<!--
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}
-->
</style>
My HTML looks like this:
<body>
<div>
<ul>
<li>HOME</li>
<li>DRAWINGS</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
</body>
And here is what the web page looks like: http://i.imgur.com/st4m0RR.jpg
Obviously I would also like to get rid of the underline and I need the text to be in black. Not sure what I'm doing wrong. Thanks in advance for any help.
You could set the li elements to float:left..
Like
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}
ul li {
float:left;
margin-right:15px;
}
ul li:last-of-type {
margin-right:0px;
}
}
you have to put this in the:
a{
float:left;
color:#000;
text-decoration:none;
padding;5px;
}
edited:
to put it to the center you have to give the container a width, 315px for example here, but put it in % or em better....and add a padding to a
div {
width:315px;
margin: 0 auto;
}
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I am trying to build a simple CSS only navigation bar for my site. This is it working fine in modern browsers:
And this is my CSS:
#nav{
width:496px;
height:45px;
float:right;
background-color:#bee199;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-top:5px;
border:1px solid #a09f9f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#nav ul{
list-style:none;
text-align:center;
}
#nav ul .last{
padding-right:0px;
border-right:none;
}
#nav ul li.navsep{
width:1px;
height:44px;
background-color:#a09f9f;
padding:0;
margin-right:10px;
}
#nav ul li{
width:auto;
height:44px;
display: -moz-inline-stack;
display:inline-block;
padding-right:10px;
margin-bottom:-16px;
}
#nav ul li a{
font-family:Helvetica, Arial, sans-serif;
font-size:20px;
font-weight:400;
text-decoration:none;
color:#434342;
}
HTML:
<div id="nav">
<ul>
<li>Principles</li>
<li class="navsep"><span></span></li>
<li>Our services</li>
<li class="navsep"><span></span></li>
<li>Recent work</li>
<li class="navsep"><span></span></li>
<li class="last">Contact</li>
</ul>
</div>
One of my problems is using negative margins, I really don't want to be using them. But every time I try to use conventional methods the text will not center vertically and it looks like this:
This also happens on older browsers.
Thanks for your time! If you need more information just ask! :)
Omit the <li class="navsep"> and use borders instead.
use lineheight on the li elements.
Instead of using negative margin use line-height, in your case #nav ul li {height: 44px; line-height: 44px;} this will vertical center your text
i am trying to build a basic hover menu with blank background images and text.
I have created two images with normal and hover state, and for the text the code is in a table with one row and multiple td's. This is an example of one:
<td align="center">
<div id=menu>
<ul style="padding:0px;">
<li>WHO WE ARE</li>
</ul>
</div>
I have a CSS running to control the hover color and background change.
#menu ul li{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#666;
display:block;
background-image:url(resource/try.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}
#menu ul li a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#FFF;
display:block;
background-image:url(resource/try2.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}
#menu ul li a:visited{
text-decoration:none;
color:#666;
}
The problem is that although all this works fine my text is aligned to the top and i am unable to change its position
I have tried every possible trick, worked with vertical-align property but it doesn't seem to work.
Could any one help me with this please?
Thanks in advance.
you need to add line-height for everything
I'd use padding-top.
http://www.w3schools.com/css/css_padding.asp
I see that you use "padding:0px" That locks your stuff to the upleft-corner.http://www.tizag.com/cssT/padding.php shows you how to use padding.
try using: padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; you will see that it has moved.
Maybe you should work with the padding-top property of your li element, try adding something like padding-top: 10px. If it aligns with the bottom border then add the same value to the padding-bottom property of the element.
EDIT:
Try this way:
#menu ul li {
...your attributes...
vertical-align: middle;
line-height: 35px;
}