Im putting together a horizontal footer nav for a website that I am working on, but for the life in me I cannot get it to display correctly.
Basically what I am looking to achieve is for each menu item to be displayed with an image to the left go the link text with the text centred in relation to the middle of the image.
I know this is a simple problem, but everything I've tried to resolve the problem doesnt seem to work.
CSS
#footer-links{ border: 1px solid black; height:90px; width:100%;}
#footer-links .nav-bar { list-style:none;}
#footer-links .nav-bar li { display:inline; padding: 0 10px; }
#footer-links .nav-bar li a {
padding-left: 115px; /* Create padding on the left where the icon goes */
text-decoration: none;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;}
.nav-bar .nav-button-developments a { background:url("http://mulgraveproperties.co.uk/wp-content/uploads/2013/05/icon11.jpg") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-news a { background:url("http://mulgraveproperties.co.uk/wp-content/uploads/2013/05/icon21.jpg") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-contact a { background:url("http://mulgraveproperties.co.uk/wp-content/uploads/2013/05/icon31.jpg") no-repeat 0px -2px transparent; }
HTML
<nav id="footer-links">
<ul class="nav-bar">
<li class="nav-button-developments">Our Developments</li>
<li class="nav-button-news">News</li>
<li class="nav-button-contact">Contact Us</li>
</ul>
</nav>
Here is a link to the associated
http://jsfiddle.net/n420jmsw/
Any help would be greatly received.
I'm not sure to get it right but what about a float ? http://jsfiddle.net/n420jmsw/3/
#footer-links .nav-bar li { padding: 0 10px;float:left; }
Related
Im trying to have a layout like this, with a full width gray border but then below the active item have a different border color:
enter image description here
But its not working. Do you know why?
https://jsfiddle.net/Ldye5qg8/
<div class="container">
<div class="nav">
<a class="active" href="">Item 1</a>
Item 2
</div>
</div>
Css
a{text-decoration:none;}
.nav{
border-bottom: 3px solid gray;
}
.nav a{
padding: 15px;
}
.nav .active{
border-color:yellow;
padding:20px;
}
Try this one. Hope it will work
EDIT: I used 5px bottom color in .nav. So, the whole .nav will use 5px bottom color. Then I used 5px in .nav a.active bottom color. The .nav a.active bottom color will be shown but on different lines. Hence I used margin-bottom: -5px to overlap .nav color.
.nav {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc;
}
.nav a {
display: inline-block;
padding: 0 15px 0 15px;
margin-left: -4px;
text-decoration:none;
}
.nav a.active {
border-bottom: 5px solid yellow;
margin-bottom: -5px
}
<div class="container">
<div class="nav">
<a class="active" href="">Item 1</a>
Item 2
</div>
</div>
.nav .active {
border-bottom: 3px solid yellow;
padding: 20px 20px 1px 20px;
}
is not the same element, you need to bring for him border-style also to bottom.
Just change border color to border-bottom like this
.active {
border-bottom: 3px solid yellow;
}
Whatever I do I can't get the navigation to center.
I have a wrapper and the navigation bar has an underline across this div. The top of the buttons are rounded of so it just looks like they are coming out of the bottom border.
I've tried searching for a good way to center them. A lot of people use margin auto or margin 0 auto. Other people also use this in combination with display inline-block but then the border gets cut off from the nav buttons.
This is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
The CSS:
#nav {
margin: auto;
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
}
#nav ul {
margin: auto;
padding-top: 6px;
padding-bottom: 8px;
padding-left: 5px;
list-style:none;
}
#nav li {
display: inline;
width: 120px;
margin:0;
padding: 10px 5px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)), to(rgb(132,132,132)));
background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}
#nav li:last-child {
border-right: none;
}
#nav a {
text-decoration: none;
color: #383838;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
padding-left: 5px;
}
For the ease for you i've also put it in a js fiddle http://jsfiddle.net/ge702rna/
Really hope someone can help me out because i've got my hands tied up in my hair right now.
Probally i'm just doing something simple wrong.
Simply add text-align:center;
#nav {
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
text-align:center; /* <-- ADD THIS LINE */
}
I just change the width in
#nav {
margin: auto;
color: #FFFFFF;
width: 77%; //changed
border-bottom: 1px solid #000000;
}
Are you looking for this..DEMO
I'm trying to have an inline-block navigation bar. When someone hovers over the li, I want it to change background colors - simple enough.
It appears as though my code causes the background to be off about 2 inches.
Here is the offending code -
css-
#mainNav {
width: 100%;
background:#bbb;
border-right: 2px solid #777;
border-left: 2px solid #777;
border-bottom: 2px solid #555;
}
#mainNav ul li {
display: inline-block;
line-height:40px;
font-size: 20px;
padding: 0 15px 0 15px;
border-right: 2px solid #777;
}
#mainNav ul li.active {
background:#aaa;
}
#mainNav ul li:hover {
background:#aaa;
}
html-
<div class='container_12'>
<nav id="mainNav">
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Forums</a></li>
</ul>
</nav>
</div>
Screenshot:
Give margin-left to li will solve the problem.
DEMO
It should also be :
#mainNav ul li:active {
background:#aaa;
}
Just like hover is coded out. Still not sure about the original question though.
Please look at my CSS Tabs menu: http://jsfiddle.net/NoGo/3Spru/
It uses the YAML 4 CSS Framework form yaml.de (Edit 2019: not actively developed anymore)
The Tabs are: Home | Users | Map
My HTML:
<nav>
<div class="ym-wrapper">
<div class="ym-wbox">
<ul>
<li>
<a href="#">
<div>Home <i class="icon-home"></i></div>
<span>Go to Main Page</span>
</a>
</li>
<li class="active">
<a href="#" class="">
<div>Users <i class="icon-search"></i></div>
<span>Search User Accounts</span>
</a>
</li>
<li>
<a href="#">
<div>Map <i class="icon-globe"></i></div>
<span>Users near you</span>
</a>
</li>
</ul>
</div>
<div class="ym-clearfix"></div>
</div>
</nav>
The CSS:
header nav {
clear: both;
width:100%;
position:relative;
white-space: nowrap;
padding-top:10px;
border-bottom: 2px solid #CA278C;
}
header nav ul {
list-style: none;
padding:0;
margin:0;
display:inline;
}
header nav ul li {
display: inline-block;
border-top: 2px solid transparent;
margin: 0 5px -2px 0;
background-color: #f0f0f0;
border-bottom: 2px solid #CA278C;
line-height: 180%;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #fff;
background-color: #fff;
}
header nav ul li.active {
border-right: 2px solid #CA278C;
border-left: 2px solid #CA278C;
}
header nav ul li a {
display: inline-block;
padding: 5px 16px;
}
header nav ul li a div {
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}
header nav ul li a span {
font-size: 11px;
color: #999
}
header nav [class^="icon-"],
header nav [class*=" icon-"] {
vertical-align: baseline;
line-height: inherit;
opacity: 0.7;
}
My problem: When I change browser zoom, the bottom-line looks ugly. Is there a better way than working with margin-bottom: -2px on li elements?
I could get it to look a lot better by using subpixel positioning and setting the margin-bottom and border-width to -1.5px and 1.5px respectively. It looks fine here at jsFiddle - with minimal effort - on 100% up to somewhere close to 200%, and you could probably get it to look even better at other zoom levels by going further down the subpixel rendering path.
But then it dawned on me that you don't really need to have that bottom border on the inactive tabs, just set the margin-bottom on the tabs to 0px and then set the margin-bottom at the .active and :hover class to -2px. This will automatically look fine on any zoom level, as you won't have to worry about 'lineing up the lines' at all. Here's a jsFiddle for this approach.
header nav ul li {
display: inline-block;
margin: 0 5px 0 0;
border-top: 2px solid transparent;
background-color: #f0f0f0;
line-height: 180%;
position: relative;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #FFF;
background-color: #fff;
margin-bottom: -2px;
}
Please help me cut the following navigation bar using CSS2.1, with shadow, rounded borders and without spoiling the layout if you zoom-in/zoom-out:
Already two days I have been working on it, and could not find any way which will look the same look while zooming...
EDIT:
need to be done with CSS2.1
right and left borders are rounded + have shadow (right left correspondingly)
there is a shadow on bottom as well
Should be simple enough.
<div id="navbar">
NewsBusiness......Deals
</div>
CSS:
#navbar > a {
padding: 10px;
box-shadow: 4px 4px 16px black;
color: white;
}
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; }
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; }
It's a pretty simple solution. You can use just css. I used jQuery to assing the colors but it's a straightforward process...
http://jsfiddle.net/elclanrs/QtLv5/2/
html
<ul>
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
<li>Option5</li>
</ul>
css
li { float: left; }
a {
display: block;
padding: .5em 1em;
text-decoration: none;
color: black;
font: bold 15px Arial;
}
/* If you assign unique ids to your menu items you can do */
#item { background: red; }