Trying to separate my header and navtab with a simple horizontal line. Nothing fancy.
Yet, it appears above the header for some reason. I know it has something to do with floating of twitter button and company logo. Before I did this the line appeared as it should. I'm stuck here.
.main_header {
background: #d0d0d0
}
.company_logo {
float: left;
text-align: left;
padding: 10px 0 10px 50px;
}
.twitter {
float: right;
margin-top: 10px;
margin-right: 10px;
}
<header class="main_header">
<div class="company_logo">
<img src="images/logo.png" width="20%">
</div>
<div class="twitter">
</div>
</header>
<hr>
<nav class="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfo</li>
<li>Servi</li>
<li>Contact</li>
</ul>
</div>
</nav>
You're right. Since the children of .main_header are floated, their parent has no height.
One solution is to clear the floats.
Below, I'm using group class and one of the clearfix methods.
For further reference, see What methods of ‘clearfix’ can I use?
.main_header {
background: #d0d0d0
}
.company_logo {
float: left;
text-align: left;
padding: 10px 0 10px 50px;
}
.twitter {
float: right;
margin-top: 10px;
margin-right: 10px;
}
.group::after {
content: "";
display: block;
clear: both;
}
<header class="main_header group">
<div class="company_logo">
<img src="images/logo.png" width="20%">
</div>
<div class="twitter">
</div>
</header>
<hr>
<nav class="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfo</li>
<li>Servi</li>
<li>Contact</li>
</ul>
</div>
</nav>
Try :
hr{
clear: both;
}
Should clear floating elements on either side.
Related
I am having trouble making my list inline along with the Sign In to the right of it. I tried putting float for the tags since every part on my header is a link, but that isn't working. Can anyone help me put the logo float left, the list to the right, with the sign in being the farthest thing right (float right pretty much for the sign in). Thanks for any answers I get, I truly appreciate it.
html:
<header>
<nav id="header-flex">
<div>
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div>
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
</div>
<div>
<p>Sign In</p>
</div>
</nav>
</header>
css:
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
It can be done by giving your div's a width and assigning 'float: left' to them, like this:
HTML:
<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>
CSS:
#header-flex {
display: flex;
position: fixed;
background: rgb(0, 191, 255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
.left, .mid, .right {
float: left;
width: 33%;
}
<div> has display: block; by default, no need to use div for img and ul.
Also, remove the default 8px margin from body:
body {
margin: 0;
}
A nav is better to use display: block; since you want it to take the whole width.
Now you can use float: left, float: right
body {
margin: 0;
}
#header-flex {
display: block;
position: fixed;
background: rgb(0, 191, 255);
height: 75px;
width: 100%;
}
img {
float: left;
}
#header-flex>ul {
float: left;
margin: 0;
}
.sign-in {
float: right;
margin: 25px;
}
<header>
<nav id="header-flex">
<img src="logo.jpg" alt=logo width="30px" height="30px">
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
<div class="sign-in">
Sign In
</div>
</nav>
</header>
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
This question already has answers here:
How come my float elements aren't within their parent
(2 answers)
Closed 8 years ago.
The Header part of my template doesn't get the height of its nested Elements.
<header id="header">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Home2</li>
</ul>
</div>
</nav>
</div>
</header>
#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto;}
#top-left {float:left;}
#top-right {float:right;}
I also made a jsfiddle:
http://jsfiddle.net/hqpb3cyc/
The only solution I know is to give the #header and / or #header-inner float:left; or display:inline-block; But I think thats not the right way to do this!?
Hope someone can help me
best regards
You have to clear floats. For example:
<br style="clear: both" />
#header {
width: 100%;
float: left;
background: #D3D3D3;
}
#header-inner {
width: 600px;
margin: 0 auto;
}
#top-left {
float: left;
}
#top-right {
float: right;
}
<header id="header" role="banner">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home
</li>
<li class="page_item page-item-2">Home2
</li>
</ul>
</div>
</nav>
</div>
<!-- clear both floats -->
<br style="clear: both" />
</header>
Addinional you can use pseudo-element :after to clear floats:
#header {
width: 100%;
float: left;
background: #D3D3D3;
}
#header-inner {
width: 600px;
margin: 0 auto;
}
#top-left {
float: left;
}
#top-right {
float: right;
}
#header-inner:after {
content: "";
clear: both;
}
<header id="header" role="banner">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home
</li>
<li class="page_item page-item-2">Home2
</li>
</ul>
</div>
</nav>
</div>
</header>
You should clear the floated inner element. You don't even have to change your HTML. You can do that in CSS as well by using the after pseudo element:
#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto; border: 1px solid red;}
#top-left {float:left;}
#top-right {float:right;}
#header-inner::after{
display: block;
content: "";
clear: both;
}
<header id="header" role="banner">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Home2</li>
</ul>
</div>
</nav>
</div>
</header>
Updated fiddle
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>
In my header, I'm having an issue where if I put regular text in, the lineheight is fine, but if I use a list, I get a good amount of padding on the top and the bottom.
Below is all relevant HTML and CSS as well as a fiddle
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
My line-height isn't bad at all!
</div>
</aside>
</div>
</header>
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
<ul>
<li>My line-height is huge!</li>
</ul>
</div>
</aside>
</div>
</header>
CSS
header
{
background-color: #eee;
}
.clearfix
{
overflow: auto;
}
header #title-container
{
font-size: .7em;
}
header aside .nav
{
padding-right: 4px;
float: right;
}
header aside .nav
{
background-color: red;
}
Reset the margin and padding on your ul and li.
http://jsfiddle.net/PSeFe/3/
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
Adding style="display: inline; padding: 0;" to your <ul>-tag fixes the problem. The second part of your html would look like this then:
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
<ul style="display: inline; padding: 0;">
<li>My line-height is huge!</li>
</ul>
</div>
</aside>
</div>
</header>