I have a logo on top left of my website. And I'm trying to put navigation menu vertically aligned to the right side of the logo. But it always appear at the bottom of the logo. I tried float:left.
I guess it's a simple thing but I can't do it. I may need a wrapper. What am I doing wrong here?
Here is my code:
.logo {}
#topnav {
width: 100%;
vertical-align: middle;
}
nav ul {
background: #FFFFFF;
padding: 0 10px;
list-style: none;
position: relative;
float: left;
display: inline-table;
font-size: 90%;
color: #666666;
}
<div class="container">
<div class="logo">
<img src="assets/images/logo.png" alt="" width="250" height="120" />
<div class="topnav">
<nav>
<ul>
<li>Home</li>
<li>Photos</li>
</ul>
</nav>
</div>
</div>
Do it simply by adding float: left to logo class like that: http://jsfiddle.net/dssHf/
I has also restructured your HTML code because it was been invalid.
<div class="container">
<div class="logo"><img src="http://placehold.it/250x120" alt="" /></div>
<div class="topnav">
<nav>
<ul>
<li>Home</li>
<li>Photos</li>
</ul>
</nav>
</div>
</div>
.container {
clear: both;
}
.logo {
float: left;
}
.logo img {
width: 250px;
height: 120px;
}
.topnav {
margin-left: 260px;
}
Change .logo to this:
.logo img {
float:left;
}
http://jsfiddle.net/87KCt/4/
CSS is cascading style sheets. That means a few things but here cascading means that the styles for class .logo cascade into img tags only.
Related
Hi I'm making a site for a project and can't resize or change anything in a logo that I have.
I don't really know what am I doing wrong.
Here's the part with html and when I try to select the logo in css , it won't change in any way.( I've tried to change it's position to the right of navbar,but it still sticks to the left)
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: right;
}
header {
background-color: #c4c4c4;
}
nav {
float: right;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
<html>
<div id="wrapper">
<div id="imports">
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</div>
<header>
<div id="menu">
<img src="https://dummyimage.com/100x100/000/fff.png" alt="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
</html>
I think your .logo class is missing from img
<img src="Logo.png" alt="logo" class="logo">
give img tag logo class
<img src="Logo.png" alt="logo" class="logo">
I was wondering how I would get 2 divs in one div
html {
margin: auto;
width: 960px;
height: auto;
}
#navbar {
height: 90px;
background-color: #080808 !important;
display: block;
}
.logo {
padding-left: 31px;
height: 90px !important;
width: 90px !important;
}
.navitems li,
.navitems ul {
list-style-type: none;
display: inline-block;
}
.navitems {
float: right;
}
<div id="navbar">
<div class="logo">
<img src="images/logo.png" alt="" width="90px" height="90px">
</div>
<div class="navitems">
<li>
<ul>Home</ul>
<ul>Contact Us</ul>
<ul>About</ul>
</li>
</div>
</div>
It's probably better to use flex.
Set "display: flex" and "justify-content: space-between" on the parent element (navigator). I also changed the image to just have a background color that stands out.
html {
margin: auto;
width: 960px;
height: auto;
}
#navbar {
height: 90px;
background-color: #080808 !important;
display: flex;
justify-content: space-between;
}
img {
background-color: #0ff;
}
.logo {
padding-left: 31px;
height: 90px !important;
width: 90px !important;
}
.navitems li,
.navitems ul {
list-style-type: none;
display: inline-block;
}
<div id="navbar">
<div class="logo">
<img width="90px" height="90px">
</div>
<div class="navitems">
<li>
<ul>Home</ul>
<ul>Contact Us</ul>
<ul>About</ul>
</li>
</div>
</div>
More on flex properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If using float, the floating items must be placed before "regular" (non-floating) items in the DOM tree. In this instance, you would want to move your <div class="navitems"> before <div class="logo">. Also, you might want to permutate your <ul> and <li> tags. <ul> contains <li>s, not the other way around. ;)
The 2 divs are in 1 div only but the fact is float property does not changes the flow .Floated elements remain a part of the flow of the web page unlike absolute and fixed positioning so place the div class="navitems" above the div class="logo".Moreover interchange the ul and li you have used them incorrectly conceptually although it doesnt make any difference visually
First, use display: inline-block; on those two DIVs. Also, use vertical-align: middle; on both to align them vertically centered to their container.
But there a mistake in your code: ul and li should be used the other way round, the lis are inside the ul . And also note that list-style-type: none; is only assigned to the ul, and display: inline-block; only to the li elements.
#navbar {
height: 90px;
background-color: #080808 !important;
display: block;
}
.logo {
display: inline-block;
padding-left: 31px;
height: 90px !important;
width: 90px !important;
vertical-align: middle;
}
.navitems {
display: inline-block;
vertical-align: middle;
}
.navitems ul {
list-style-type: none;
}
.navitems li {
display: inline-block;
margin-right: 4em;
}
<div id="navbar">
<div class="logo">
<img src="http://placehold.it/90x90/fb4" alt="" width="90px" height="90px">
</div>
<div class="navitems">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</div>
</div>
I am trying to increase the space in my inline list so that they are not stuck side by side. I have tried word spacing and adding padding to the header a links, but that hasn't worked. Also, I found the only way to make my list in order (shop, products, faq, blog) inline and floating in the centre is to put the list backwards. So when I do blog faq products shop it will show up in the order as shop, products, faq blog. I was wondering if there was a way to be able to write them in html in order and still have them display inline in order. Any help is appreciated, thanks! BTW I have
* {
padding: 0px;
margin: 0px
}
already
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .mid, .right {
float: left;
width: 33%;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Blog</li>
<li >FAQ</li>
<li >Products</li>
<li >Shop</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
Try below updated snippet code
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .right {
float: left;
width: 25%;
}
.mid {
float: left;
width: 50%;
}
.mid ul{
padding: 0;
text-align: center;
}
.mid ul li{
display: inline;
list-style-type: none;
}
.mid ul li a{
float: none;
padding: 0 6px;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
Why don't you write like this if you need another order?
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
or there is something I didn`t get
and for horizontal space do this
.mid li {padding: 0px, 10px,0px,10px;}
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 am trying to put into the <header> three divs: div1(logo) at the top left of the page, nav2(menu bar) at the top center of the page and div3(social networks) at the top right of the page, but i dont know how to do that. i tried this code (html):
<header>
<div id="logo"></div>
<nav>
<ul>
<li><a></a></li>
</ul>
</nav>
<div id="links">
<a></a>
</div>
</header>
and the css:
nav{
background-color: #215177;
border: 1px solid #215177;
color: white;
display: block;
margin: 0;
overflow: hidden;
position: fixed;
width: 100%;
}
#logo{
height: 120px;
width: 50px;
float: left;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: white;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
#links{
float: right;
position: absolute;
top:0;
}
You are definitely lacking a lot of code, and depending on whether this will be used in Mobile, will be another issue.
Here is a good starting point, make sure you start and end all DIVS and content in your layout, otherwise, you will not get a finished product properly displayed.
Here is a working example, of close to what you want, using same classes and ID's:
<header>
<div id='logo'>Logo</div>
<nav>
<ul>
<li>
<a href='#0'>Home</a>
</li>
<li>
<a href='#0'>About</a>
</li>
<li>
<a href='#0'>Blog</a>
</li>
<li>
<a href='#0'>Contact</a>
</li>
</ul>
</nav>
<div id='links'>Links go here</div>
<div class='clear'></div>
</header>
I have also added some basic CSS to the example as well for a good starting point.
try this:
<div id="top">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>
<a></a>
</li>
</ul>
</nav>
<div id="links">
<a></a>
</div>
</header>
</div>
and css:
#top{
width:100%;
}
#logo{
width:9%;
float:left;
}
nav{
width:78%;
float:left;
}
#links{
width:9%;
float:right;
}
Note
if you see the total width of nav + link + logo isn't 100% in case you have applied padding in your css.