Hi I tried to center the navigation menu by using floating CSS element but didn't work. Does anyone have any advices?
<header>
<div id="top-banner">
<img src="Images/headerlines.png" alt="lines">
</div>
<div id="logo">
<img src="Images/logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>About</li>
<li>Price</li>
<li>Contact us</li>
</ul>
</nav>
</header>
Css
.nav li{
width:960px;
list-style:none;
float:left;
}
.nav a {
display:block;
text-align:center;
width:320px;
text-decoration:none;
}
Sorry guys, this is my first time posting question on stackoverflow.
You can do it like this :)
.nav {
width: 960px;
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
.nav li{
display: inline-block;
}
.nav a {
text-decoration: none;
margin: 0px 30px;
}
<header>
<div id="top-banner">
<img src="Images/headerlines.png" alt="lines">
</div>
<div id="logo">
<img src="Images/logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>About
</li>
<li>Price
</li>
<li>Contact us
</li>
</ul>
</nav>
</header>
Adding
margin-left:50%;
in the class "nav"
Related
I have a centered LI's UL (like those default navigation bars...) - see code below.
Now i want to make a little weird adjustment to that. i want the last li to stay sticked to the left of the last li before him (just like float: left) but without him taking space in the ul, so the other li's will be in the center and he will just be sticking in the side (maybe just like an absolute position's element will...). another thing is i that i need to work when this weird li is alone in the ul also. here is an image that explains better:
weird sticky li image before and after
and here is a codepen playground with that.
Also a built-in one here:
*{font-size:24px;text-align:center;}
.con { background: #aaa; }
.navbar { background: #eee; width:70%;margin:auto;}
.navbar li{display:inline-block; padding: 4px 8px; border: 1px solid blue;}
.last{color:red;}
.afterlast{margin-right:-78.6px;}
BEFORE:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
AFTER:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
Now I prefer a pure css solution if possible and of course it should be responsive.
So, combining the answer and comments made by the grateful users, this is the best answer (pure css):
Using absolute positioning.
Using the :first-child:last-child to set position to relative when the weird li is alone.
Here it is live:
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast:last-child {
position: absolute;
margin-left: .25em;
}
.afterlast:first-child:last-child {
position: relative;
margin-left: 0;
}
<h2>BEFORE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
Thanks to: #sorayadragon, #JaKhris and #Michael Coker.
You'll have to add an additional class to that li element when it's by itself so you can adjust the styles and make it take up space again. I added the .aloneweird class and adjusted its styles. Additionally, I removed the padding-left from the ul element which was making it uncentered.
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding-left: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast {
position: absolute;
margin-left: .25em;
}
.aloneweird {
position: relative;
margin-left: 0;
}
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li class="last afterlast aloneweird">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
I'm trying to make a simple top menu with one level of submenus. I want to animate them with translate3d, but I can't manage to get them to sit behind the header with z-index. I'm using Foundation, so the header looks a bit like this:
#main-menu > li {
position: relative;
}
#main-menu ul {
position: absolute;
-webkit-transition: transform 400ms ease; (omitted other prefixes)
transform: translate3d(0,-100%,0);
}
#main-menu > li:hover ul {
transform: translate3d(0,0,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
So in the normal state the submenus #main-menu ul are translated vertically by their height so that when the main menus buttons are hovered the submenus slide down. However, I can't seem to make it so that the submenus are behind the entire header but appear above the content below.
this may help to your.This can do in several ways.this is one of it.you can do it easily if you start to use bootstrap.this solution only use html, css and js.this may a quick help to you.
<!DOCTYPE>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.one").mouseenter(function(){
$("div.submenu").fadeIn(500,function(){
$(this).mouseleave(function(){
$(this).fadeOut(500);
});
});
});
});
</script>
<style type="text/css">
body{
margin: 0;
}
ul{
background-color:black;
}
ul li{
color: white;
list-style-type: none;
display:inline;
font-size:30px;
width:100px;
margin-left: 30px;
margin-right: 30px;
}
div.submenu li{
list-style-type: none;
color: white;
font-size: 30px;
width:200px;
background-color: black;
text-align: center;
position: relative;
top:-15px;
left:550px;
}
div.submenu{
display: none;
}
</style>
</head>
<body>
<div style="text-align:center;">
<ul>
<li class="one">Basin & Sinks</li>
<li>Bathroom Accessories</li>
<li>Showers </li>
<li>Toilets</li>
</ul>
<div class="submenu">
<li>one</li>
<li>two</li>
</div>
</div>
</body>
</html>
You need to set your either your header or main menu (depending on the style you going for) to absolute with no z-index applied and then add a negative z-index to the absolute positioned sub-menu. this will hide the submenu content behind the parent elements.
* {
margin:0;
padding:0:
}
#header {
background: #f4f4f4;
border-bottom: 1px solid #e3e3e3;
height:60px;
position:relative;
}
#main-menu {
position:absolute;
width:100%;
height:30px;
list-style:none;
}
#main-menu li > a {
display:block;
text-decoration:none;
padding:1em 2em;
}
#main-menu li.has-children ul {
position:absolute;
z-index:-1;
top:100%;
-webkit-transition: transform 400ms ease;
transform: translate3d(0,-100%,0);
background:#f4f4f4;
border:1px solid #e3e3e3;
padding:1em;
}
#main-menu li:hover ul {
transform: translate3d(0,20%,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
Is it possible in Zurb Foundation to have a normal button in the top bar menu items? Here is an example:
The black button is what I'm trying to accomplish.
Here is what the HTML currently looks like:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>
SiteName
</h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li>
Nav item
</li>
<li>
Nav item
</li>
<li>
Nav item (Should be button)
</li>
</ul>
</section></nav>
</div>
Sure, just use class button inside a has-form list item.
<li class="has-form">
<a class="button">Button</a>
</li>
Demo: http://codeply.com/go/00cVHQ15Px
Try like this, may be?
* {font-family: Segoe UI;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none; background: #99f; overflow: hidden; display: inline-block;}
nav ul li a {text-decoration: none; display: block; width: 100px; margin: 10px; padding: 5px 10px;}
nav ul li a.btn {background: #333; color: #fff; text-align: center; border-radius: 3px;}
<nav>
<ul>
<li>New Button</li>
<li><a class="btn" href="#">New Button</a></li>
<li>New Button</li>
</ul>
</nav>
HTML
<html>
<head>
<link rel="shortcut icon" href=".\favicon.ico">
<title>rentPRO</title>
</head>
<body>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
<div id="wrapper">
<div id="header">
</div>
<div class="content">
</div>
<div id="footer">© rentPRO 2015</div>
</div>
</body>
</html>
CSS
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
top: 200px;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
height: 40px;
width: 1075px;
margin: 0 auto;
border-color: black;
}
The height: 40px; is making the banner to come down by 40px, thus leaving a blank space between the top of the page and the banner. When I remove this line, the problem goes away but the navigation bar no more has a background. Can anybody tell me what is wrong here?
First thing you have to put your <nav>tag inside the div with id header.
Set top: 190px; in #top_menu.
HTML :
<head>
<link rel="shortcut icon" href=".\favicon.ico">
<title>rentPRO</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
</div>
<div class="content">
</div>
<div id="footer">© rentPRO 2015</div>
</div>
</body>
</html>
CSS:
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
top: 190px;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
height: 40px;
width: 1075px;
margin: 0 auto;
border-color: black;
}
check fiddle
try this code, i moved your header tag above your menu, took away the height and changed the top menu height to 20.
</head>
<body>
<div id="header"></div>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
<div id="wrapper">
<div class="content">
</div>
<div id="footer">© rentPRO 2015</div>
</div>
</body>
</html>
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
top: 20px;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
width: 1075px;
margin: 0 auto;
border-color: black;
}
It would help you:
html, body {margin: 0; padding: 0}
#banner {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
/*top: 200px;*/
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
height: 40px;
width: 1075px;
margin: 0 auto;
border-color: black;
}
And the HTML:
<header>
<div id="banner">
</div>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="wrapper">
<div class="content">
</div>
</div>
<footer>
<div id="footer">© rentPRO 2015</div>
</footer>
If you are able to change the order of elements in your HTML, the simplest solution is to insert #top_menu between #header and #content. This structure more accurately reflects the structure you want to display and the elements will flow naturally. You can remove height and top from #top_menu.
<div id="wrapper">
<div id="header"></div>
<nav id="top_menu"> ... </nav>
<div class="content"></div>
<div id="footer">© rentPRO 2015</div>
</div>
Example below:
html,
body {
margin: 0;
}
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display: block;
position: relative;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style: solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
width: 1075px;
margin: 0 auto;
border-color: black;
}
<div id="wrapper">
<div id="header"></div>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
<div class="content"></div>
<div id="footer">© rentPRO 2015</div>
</div>
I hope someone will be able to help me with my problem. I'm working on a mobile site and I need the footer background image to be responsive with footer links centrally positioned over this image. To make the background image responsive I used that code:
#footer-bg {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("../img/background.jpg");
}
#footer-bg .inner-footer {
padding-top: 39.06%;
display: block;
height:0;
}
and it works as a charm, but when I add links they are way out of position, on the bottom of page. Is there a way around this? Thanks in advance for any help.
JSfiddle code here http://jsfiddle.net/4kuUm/
Just to clarify, I want the links and copyright logo to be positioned over an image and not the bottom of it.
I cleared out a lot of the extra cruft that you had in your HTML & CSS to strip this down to the essential bones. You may need to add some minor styings (padding margins etc to get the two menu list items to match up but it's mostly there.
I can say that with a little extra time the HTML & CSS could be trimmed further.
JSfiddle Demo
HTML
<div class="footer-container">
<footer class="wrapper">
<div class="social-icons">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter"/>
</li>
</ul>
</div>
<div class="f-links">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
CSS
.footer-container footer {
color: #000000;
padding: 20px 0;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://queermeup.com/wp-content/uploads/2010/10/background-2-640x250.jpg");
}
.social-icons {
text-align:center;
}
.social-icons ul,
.f-links ul {
list-style:none;
width:50%;
margin:0 auto;
text-align: center;
}
.social-icons li,
.f-links li {
display: inline-block;
width:30%;
}
.f-links a {
font-size:12px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
text-decoration: none;
color: black;
padding:2px 10px;
white-space:nowrap;
}
.f-links a:hover {
text-decoration: underline;
}
.divider {
padding:0;
margin:0;
}
.divider p {
margin: 0 5%;
text-align:center;
border-top: 1px solid #000;
font-size:11px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
<div class="footer-container">
<footer class="wrapper"> <span id="footer-bg" role="img" aria-label="Footer">
<div class="social-icons" style="padding:25px;">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter">
</li>
</ul>
</div>
<div class="f-links" style="padding:25px;">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
This works my friend :)