I've been trying to build a navbar for my website using Foundation. However, after I've tried the items in my menu bar are now appearing in reverse order. On the right hand side, rather than saying "portfolio about contact" it says "contact about portfolio". Any ideas?
HTML:
<div id="header-container">
<div id="header" class="row">
<nav class="nav-bar">
<ul class="left">
<li data-slide="1" class="andrewgu">andrewgu</li>
</ul>
<ul class="right">
<li data-slide="2" class="portfolio">portfolio</li>
<li data-slide="3" class="about">about</li>
<li data-slide="4" class="contact">contact</li>
</ul>
</nav>
</div><!--end header-->
</div><!--end header-container-->
CSS:
div#header ul{
height: 128px;
list-style-type: none;
}
div#header ul li {
background-color: #003264;
text-align: center;
height: 128px;
line-height: 128px;
transition: background-color 1s;
-webkit-transition: background-color 1s;
display: inline;
padding: 0;
margin: 0;
}
li.andrewgu {
width: 200px;
font-size: 60px;
}
li.portfolio {
float: right;
font-size: 30px;
width: 140px;
}
li.about {
float: right;
font-size: 30px;
width: 110px;
}
li.contact {
float: right;
font-size: 30px;
width: 130px;
}
Website: http://andrewgu12.kodingen.com/
Any help would be appreciated, thanks!
cahnge float:right; to float:left
li.portfolio {
float: left;
font-size: 30px;
width: 140px;
}
li.about {
float: left;
font-size: 30px;
width: 110px;
}
li.contact {
float: left;
font-size: 30px;
width: 130px;
}
and add float:right to ul
div#header ul{float:right;}
This is happening because the first list item floats to the right border. The second list item doesn't gets the space between the first item and the right border, and hence comes before the first item and so on.
In order to overcome this problem, as the best practice is to float the ul to the right, and li to the left. This will resolve the problem.
Always remember if you put 'float' in it will reverse the order of the menu, so write float value in tag or to main it's the arrangement as default.
Related
I have a HTML5 header setup. It uses <ul> and <li> elements for the links.
This is the HTML:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
And the CSS:
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
width: 100px;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
For some reason this happens: https://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png
If you look at the nav bar you can easily see that the first two elements have a normal amount of spacing in-between. But the seccond and third have weirdly small spacing. I used inspect element on the <li>'s but they are all the same height. Can someone help me?
You need some HTML and CSS Fixes, Wrap the anchors in li elements and the issue was you have mentioned a width to the li, which causes this wierd spacing.
HTML
<header>
<nav>
<ul>
<li id="logoli">
<img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
CSS
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
line-height: 65px;
vertical-align: middle;
text-align: center;
margin:0px 10px;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
You should put the <a href>'s inside the <li> tags like this:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li>Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
Also - you have a class="5px" on one of the <li>'s, but that class isn't in your CSS. You should make your <li>'s a fixed width and center the text, or use a standard padding on the left and right of the <li> text to maintain a uniform spacing rather than injecting classes to push single elements around.
This is happening because you're explicitly defining a width on your list items. Remove the width and separate the list items with padding instead. Optionally, remove any padding on the last list item, since you won't need it.
li {
/* width: 100px; */
padding-right: 1em;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
li:last-child {
padding-right: 0;
}
https://jsfiddle.net/eulloa/yx7vkt79/
Also, restructure your list items so that they are the parent element of your anchors, not the other way around.
<li>Home</li> <!-- structure your list items this way -->
<li>Home</li>
I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using padding: 0px; doesn't do it.
Here's what I've got so far, bear with me since I'm fairly new to HTML & CSS and this is my first time making a website:
*{
padding: 0px;
margin: 0px;
}
#navdiv ul {
width: 100%;
height: 80px;
line-height: 80px;
vertical-align: middle;
background: #333;
margin-top: 5px;
}
#container {
margin-left: 200px;
margin-right: 200px;
}
#navdiv ul a {
width: 80%;
text-decoration: none;
color: #f2f2f2;
padding: 15px;
font-size: 16px;
}
#navdiv ul li {
height: 63px;
list-style-type: none;
float: right;
}
#navdiv ul li:hover {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
height: auto;
max-width: 100%;
max-height: 60px;
vertical-align: middle;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<ul>
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</div>
</ul>
</div>
</div>
</nav>
As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.
While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?
I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.
Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know.
Massive thanks!
- Kay.
Removing width: 80%; from #navdiv ul a will fix the larger border-bottom issue.
Please find below for left-to-right border-bottom effect.
https://codepen.io/julysfx/pen/qXBzYL
The reason for the border looking like that is because the border is around the outside of the HTML element. Padding is within the element so the border will incorporate that and thus do a border at that boundary. This stack overflow question explains this with diagrams:
Difference between margin and padding?
You might want to change to using margin to space out the items. Also, width: 80% might also make the border look a bit longer than you imagined. You could either increase the margin between items, or if you really want the items to be 80% wide, you could have a parent div which is 80% width so that it doesn't affect the border.
Is this more what you are looking for?
*{
padding: 0px;
margin: 0px;
}
.slider {
position: absolute;
display:block;
left: 0;
top: 90%;
margin: 0 auto;
height: 2px;
width: 0%;
border-bottom: 5px solid #FF9933;
transition: width 1s ease;
}
#navdiv {
background: #333;
}
#navdiv ul {
width: 100%;
display: inline;
}
#container {
margin-left: 200px;
margin-right: 200px;
height: 63px;
line-height: 63px;
}
#navdiv ul a {
text-decoration: none;
color: #f2f2f2;
font-size: 16px;
}
#navdiv ul li {
list-style-type: none;
float: right;
position:relative;
display:inline;
background-color: red;
line-height: 29px;
margin-top: 16px;
margin-right: 10px;
}
#navdiv ul li:hover .slider {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
width: 100%;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
max-width: 100%;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<ul>
<li>
Item 5
<span class="slider"></span>
</li>
<li>
Item 4
<span class="slider"></span>
</li>
<li>
Item 3
<span class="slider"></span>
</li>
<li>
Item 2
<span class="slider"></span>
</li>
<li id="highlight">
Item 1
<span class="slider"></span>
</li>
</ul>
</div>
</div>
</div>
</nav>
For some reason or another my navigation buttons are being pushed down by the image. I can solve the issue by floating the image but that does not interest me.
CSS:
.wrapped {
position: relative;
width: 70%;
margin: 0 auto;
}
.header {
width: 70%;
margin: 0 auto;
}
.headernav {
width: 70%;
margin: 0 auto;
height: 120px;
}
.logo, .logo img {
display: inline-block;
margin-right: 30px;
}
.nav {
padding-left: 30px;
display: inline-block;
height: 120px;
line-height: 120px;
vertical-align: middle;
}
.navbutton {
padding: 5px 30px;
display: inline-block;
}
#fitness, #wcontrol, #recipes, #supplementation {
text-align: center;
height: 36px;
line-height: 36px;
font-weight: bold;
}
HTML:
<div id="wrapperheader">
<div class="headernav">
<div class="logo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>
<div class="nav">
<div class="navbutton"><div id="recipes">Recipes</div></div>
<div class="navbutton"><div id="fitness">Fitness</div></div>
<div class="navbutton"><div id="wcontrol">Weight Control</div></div>
<div class="navbutton"><div id="supplementation">Supplementation</div></div>
</div>
</div>
</div>
If anyone knows why this is happening or of a simple solution, please let me know. Sorry if its an obvious answer.. I'm been staring at the code on and off for a day and it's just not clicking.
You could simplify your HTML & CSS to remove div soup, by moving the logo into the nav bar:
Usually the logo would be wrapped with an anchor tag, so that clicking on it will return the user to the home page. So it becomes a nav element.
HTML:
<div class="nav">
<div class="navlogo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>
<div class="navbutton"><span id="recipes">Recipes</span></div>
<div class="navbutton"><span id="fitness">Fitness</span></div>
<div class="navbutton"><span id="wcontrol">Weight Control</span></div>
<div class="navbutton"><span id="supplementation">Supplementation</span></div>
</div>
The HTML above uses spans, but you can also use <... class="navbutton" id="recipes">Recipes</...>, as shown below.
Optimized HTML: Generally people create UL LI tag stacks for nav bars.
<ul class="nav">
<li class="navlogo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></li>
<li class="navbutton" id="recipes">Recipes</li>
<li class="navbutton" id="fitness">Fitness</li>
<li class="navbutton" id="wcontrol">Weight Control</li>
<li class="navbutton" id="supplementation">Supplementation</li>
</ul>
Then cleaning up the CSS, will remove problems with applying duplicate right margins & paddings to both the .logo & .logo .img tags. In your example, there is also a left margin on the nav element, which was creating extra margin space between the logo & the 1st link.
In this CSS example below, I've also thrown in a vertical-align:middle; property, so that the nav links center vertically next to a larger image logo. See this jsfiddle.
CSS:
.nav {
height: 120px;
line-height: 120px;
margin: 0 auto;
vertical-align: middle;
width: 70%;
}
.nav li {
display: inline-block;
list-style-type: none; /* removes bullets */
}
.nav .logo,
.nav .navlogo,
.nav .navbutton {
display: inline-block;
}
.nav .logo {
vertical-align: middle;
}
.nav .navbutton {
font-weight: bold;
height: 36px;
line-height: 36px;
padding: 5px 0 0 30px;
text-align: center;
}
If you wants to keep width: 70% of your .wrapped container, you have to reduce padding of your nav menu and size of your image.
See this fiddle
(It works on large size of the window)
Otherelse, you can put a fixed width of the .wrapped container but still have to consider padding of your nav menu and width of the image to make it fits.
.navbutton {
padding: 5px 25px;
display: inline-block;
}
I'm trying to add code to my site's body but the header just keeps going down whenever I put anything with margin-top, even having ended it.
Already tried to move the header to after the div logo and after the menu. It seems to work better when its after menu. When I had margin-top in #barra, it moves the whole header alongside with it. Already tried everything I remember. Plus, before I close the header, it seems to be alright, but after I close it, it gets all messed up. I suspect it has to do with the menu. Hope you can help me. Thanks.
Header structure
Fiddle
Code:
HTML
<header id="header" class="fluid ">
<div id="mail"></div>
<div id="logo"> </div>
<!-- Menu -->
<div id="menu">
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
#header {
margin-top: 0px;
background-image: url(Imagens/Headercontact.jpg);
height: 21px;
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 0px;
background-image: url(Imagens/logo2.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li {
display: block;
float: left;
margin-left: 57px;
}
#menu a li {
text-decoration: none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display: block;
text-align: center;
}
#barra {
background-image: url(Imagens/semi.jpg);
height: 3px;
margin-top: 15px;
}
Apologies in advance if I misunderstand the issue you're trying to solve, but have you tried:
header {
position: absolute;
top: 0;
left: 0;
}
Delete the float: left in your .fluid rule and set your "#menu" margin-top: 0px; and it jumps back up ... an update of your fiddle
Further more, your menu's ul element look like this
<ul>
<li>Home</li>
which is really wrong, as it should look like this
<ul>
<li>Home</li>
So I recommend to do some clean up work and get elements correct coded, as these issues can cause very unpredictable results.
The divs are not stacking correctly in your page because some floated elements are not being properly clearfixed, causing the divs to float in into each other (in this case, your header and some inner elements). To fix this, I removed the float: left property from your .fluid class and wrapped your floated header elements inside a .clearfix class so they remain in a row.
CSS
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
display: block;
}
#header {
margin-top: 0px;
background-image: url(https://i.imgur.com/1ijUhkZ.jpg);
height: 21px;
}
#mailtext {
margin-left: 450px;
float: left;
font-family: "Adobe Devanagari";
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#teltext {
margin-left: 40px;
font-family: "Adobe Devanagari";
font-weight: bold;
font-size: 18px;
float:left;
color: #FFFFFF;
position:absolute
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 2px;
background-image: url(https://i.imgur.com/6u97lQ7.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li{
display:block;
float:left;
margin-left:57px;
}
#menu a li{
text-decoration:none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display:block;
text-align:center;
}
#menu a li:hover{
background-image: url(https://i.imgur.com/IH2Zg9N.png);
width: 65px;
height: 29px;
display:block;
color: white;
}
#barra {
background-image: url(http://i.imgur.com/S7Qt9Mn.jpg);
margin-top: 190px;
height:30px;
}
HTML
<!-- Cabeçalho e logo -->
<header id="header" class="fluid">
<div class="clearfix">
<div id="mail"></div>
<span id="mailtext"> Email: hotelsolemar#grupofbarata.com</span>
<div id="tel"></div>
<span id="teltext">Tel: (+351) 289 580 080</span>
<div id="logo"> </div>
</div>
<!-- Menu -->
<div id="menu">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Serviços</li>
</a>
<a href="#">
<li>Galeria</li>
</a>
<a href="#">
<li>Notícias</li>
</a>
<a href="#">
<li>Sobre</li>
</a>
<a href="#">
<li>Contato</li>
</a>
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
Demo: https://jsfiddle.net/8bbfyds3/4/
I have six links inside a 100% width DIV.
How can I stop my links from stacking on top of each other, moving, down, and disappearing as I shrink the size of my browser? I would like to have them remain inside the horizontal div.
Here is my code:
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
}
.logo {
width: 317px;
height: 84px;
float: left;
background: url('img/lifesign.png');
}
.navlink {
height: 84px;
font-family: 'open_sansbold';
color: #FFF;
text-align: center;
line-height: 84px;
padding-left: 22px;
padding-right: 22px;
float: right;
font-size: 80%
}
<div class="nav">
CONTACT
GET INVOLVED
Q+A
HOW IT WORKS
WHO WE ARE
<a class="logo" href="home.htm"></a>
</div>
Set a min-width on your .nav class.
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
min-width: 960px; /* or whatever width you need */
}
I think the ideal here would be to create a div of fixed width (id of 'page' below) to contain your nav and other page elements. I also took the liberty of cleaning up some of the structure of the nav itself, as well as some of the more unnecessary rules. I think a list is ideal here. You may want to reverse the order of it since you are floating right but otherwise it works great.
<html>
<head>
<style>
body { text-align: center; }
#container { width: 960px; margin: 0 auto; }
#nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; }
#nav li { float: right; }
#nav li.logo { float: left; }
#nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; }
#nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li class="logo"></li>
<li>CONTACT</li>
<li>GET INVOLVED</li>
<li>Q+A</li>
<li>HOW IT WORKS</li>
<li>WHO WE ARE</li>
</ul>
<div id="main">
<!-- page content here -->
</div>
</div>
</body>
</html>