The following is my HTML and CSS. The I'm expecting a nav bar with background color 4d4030 but not background is rendered. Anyone have nay ideas? Thanks!!
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
</ul>
</div>
#nav {
background-color: #4d4030;
}
#nav ul{
padding: 0;
float: left;
}
#nav ul li{
display: inline;
}
#nav ul li a{
float: left; text-decoration: none;
color: #FFFFFF;
padding-left: 25px;
padding-right: 25px;
font-size: 18px;
display: block;
border-right: 1px #FFFFFF;
}
this will solve your issue
#nav {
background-color: #4d4030;
overflow:hidden;
}
demo http://jsfiddle.net/gaby/Gb22V/
That's because you float the only child for the nav element which is the ul element. This makes the height of the nav element equal to 0. Clear your float by adding an overflow: hidden declaration (or using any other method to clear floats) to nav and it will work.
#nav {
background-color: #4d4030;
overflow: hidden;
}
See fiddle.
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
</ul>
<div class="clear"></div>
</div>
CSS
.clear
{
clear: both;
}
Related
I am trying to make a navigation menu for a simple html/css site, it uses blocks and unorganized lists to add items to the navigation.
The problem is that I want my navigation to be centered, right now it floats from left to right, is there another way of aligning the listed div other than making it float right? I tried using left:20; but didn't work, here is the code.
As I say, just need that to center slightly to the right, I am making it float to the left so that it organizes the list properly, without it, it'd be a messy list, try it and you'll see what I mean... Thanks for help! :D
body {
font-family: Arial;
}
#nav { /*indexed so I can see it over a content div.*/
z-index:0;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 8%;
height: 40px;
background-color: #000000;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 90%;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
margin-left: 0%;
width: 100%;
background-color: #000000;
}
<div id="nav">
<ul>
<li>Attractions
<ul>
<li>Our Team</li>
<li>Camp Sites</li>
<li>Mission & Vision</li>
<li>Resources</li>
</ul>
</li>
<li>Plan Visit
<ul>
<li>Activities</li>
<li>Parks</li>
<li>Shops</li>
<li>Events</li>
</ul>
</li>
<li>Birthdays
<ul>
<li>Map</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
This, I think, gives the nicest result:
#nav {
left:40%
position:relative;
}
When using float, be careful using it without a clearfix hack. A float could end up collapsing your entire site. Link for it here, also an explanation: https://www.w3schools.com/howto/howto_css_clearfix.asp
I have a problem with centering my nav menu. I want to my logo be perfectly centered on website and links to be around it inline. When I center my whole menu, indeed it's centered, but my image isn't in the center of a website.
Is there a solution to center my navigation menu by the logo?
<header>
<div class="nav-desktop">
<nav>
<ul>
<li>Services</li>
<li>Portfolio</li>
<li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
<li>Awards</li>
<li>Team</li>
</ul>
</nav>
</div>
</header>
header
{
background: #3f3f3f;
}
.nav-desktop
{
width: 100%;
position: relative;
padding-top: 30px;
}
.nav-desktop ul
{
list-style-type: none;
display: inline-block;
}
.nav-desktop ul li
{
display: inline-block;
}
.nav-desktop ul li img
{
vertical-align: middle;
}
And here's my jsfiddle https://jsfiddle.net/brq8f7nz/1/
Thanks for help!
The best way I know of achieving this is to set the same width attribute to all your <li> elements, except the one holding the image:
<li class="menuli">Services</li>
<li class="menuli">Portfolio</li>
<li><img src="....."></li>
<li class="menuli">Awards</li>
<li class="menuli">Team</li>
in the CSS:
.menuli
{
width:300px;
text-align:center;
}
only add nav style and remove padding-top: 30px; in .nav-desktop class
nav{
text-align:center;
}
Revise Fiddle
header {
background: #3f3f3f;
}
nav {
text-align: center;
}
.nav-desktop {
width: 100%;
position: relative;
}
.nav-desktop ul {
list-style-type: none;
display: inline-block;
}
.nav-desktop ul li {
display: inline-block;
}
.nav-desktop ul li img {
vertical-align: middle;
}
<header>
<div class="nav-desktop">
<nav>
<ul>
<li>Services</li>
<li>Portfolio</li>
<li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
<li>Awards</li>
<li>Team</li>
</ul>
</nav>
</div>
</header>
I got it... my ul just got left padding and it was a reason why my logo wasn't in the center but more to the right.
Thanks guys!
I am having a problem when using the css property margin-top on <li> elements.
I am trying to have my list align to the top of the page but my li element isn't moving to the top as it should.
Below is my HTML code:
<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
</body>
This is my CSS code:
.main_header li a {
margin-top: -20px;
display: inline-block;
}
If your looking for a inline navigation style ul change the css to:
.main_header li {
margin-top: -20px;
display: inline-block;
}
If your looking to move the whole list up try:
ul {
margin-top:-10px;
}
If your looking to move just the li elements closer to each other try:
.main_header li {
display: block;
}
Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline
Replace
.main_header li a{
margin-top: 20px;
display: inline-block;
}
by
.main_header li {
margin-top: 20px;
display: inline-block;
}
Output
Check it out.
From what I can gather - you're wanting to do something like this...
HTML
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
CSS
.main_header {
width: 500px;
margin: 0 auto;
}
.main_header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main_header li:first-child {
border-left: 1px solid #ccc;
}
.main_header li {
display: inline-block;
margin: 0;
padding:10px;
border-right: 1px solid #ccc;
}
Codepen
http://codepen.io/anon/pen/zKxGPY
When I hover over one of my menu items, the menu moves to the left. Why is that?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
float: left;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
color: gray;
font-size: 20px;
}
nav li:hover a {
color: black;
font-size: 22px;
}
As i can see you need to increase the size of the menu link when use hover on it but if you increase font-size this will dislocate the position of the link and thats the reason you link was moving to left.
Use css transform:scale(1.1,1.1) property to increase the size without change in position.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
display:block;
}
nav li:hover a {
color: black;
transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
transform property should be use with prefix to let it support in all browsers.
Please remove nav li:hover a { font-size:22px; } so that it does not move left on hover
Replace float with inline-block for <li>. And you are changing font-size on hover which is creating dancing effect on list items. Better keep same font-size for normal and hover states.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
}
nav li:hover a {
color: black;
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
Try playing with flex in css3 to see if that works for growing the text. Also there is an HTML menu tag you may want to have a look at.
I have a simple layout like this:
<html>
<body>
<div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
But I can't figure out how to center this menu horizontally and dynamically. The CSS is in here http://codepen.io/syarifphmy/pen/egvsk. I'm thinking it has something to do with the width of the < ul >. But if I state it in a fixed size say for example 500px, then it won't be dynamic. I want it to fit according to the lists.
Use display: table;
ul{
display: table;
list-style: none;
padding:0;
margin:0 auto;
}
Working example: http://codepen.io/anon/pen/zpxyD
Also, unrelated: I would recommend giving your anchors display: block, so they use the entire li space. Right now you have to find the text inside the li to actually click the link.
You can use text-align to center (non-floated) inline-block children:
ul{
text-align: center;
}
li{
display: inline-block;
float: none; /* default value */
}
*{
margin:0;
}
li:first-child{
border-radius:5px 0 0 5px;
}
li:last-child{
border-radius:0 5px 5px 0;
}
ul{
text-align: center;
list-style: none;
padding:0;
}
a{
color:white;
text-decoration:none;
font-size:5vmin;
}
li{
display:inline-block;
background-color: #98bf21;
padding:5px 20px;
}
li:hover{
background-color: #7A991A;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I can't see the codepen snippit here, so i made my own fiddle. Not sure if you wanted horiz or vertical items, so i made both.
div#one { width: 100%; overflow: hidden; }
div#one ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#one ul li { position: relative; float: left; display: block; right: 50%; margin-right: 20px; }
div#two { width: 100%; overflow: hidden; }
div#two ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#two ul li { position: relative; display: block; right: 50%; text-align: center; }
This fires on the markup:
<div id="one">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="two">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>A REALLY LONG TITLE</li>
</ul>
</div>
demo: http://jsfiddle.net/x40h8Ldh/1/
Be sure you are using a STRICT DTD as some of these concepts will not work cross-browser with just <html> declared.