Hi I am trying to create a personal website and am having some problems with the styling at my header, specificaly related to positioning.This is how my header looks now:
The NA in the middles is actually an image circle that should overlap the black borders , but I can not seem to figure out how to do it.This is my markup:
<section class="top-bottom-border overflow">
<div class="center">
<ul id="social">
<li><img src="images/social/FacebookIco.png"></li>
<li><img src="images/social/TwitterIco.png"></li>
<li><img src="images/social/LinkedinIco.png"></li>
<li><img src="images/social/LinkedinIco.png"></li>
</ul>
</div>
</section>
<nav class="center overflow" id="menu">
<ul class="float-left">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
</ul>
<ul id="logo">
<li><img src="images/Logo.png" alt="logo"/></li>
</ul>
<ul class="float-right">
<li>Skills</li>
<li>Portfolio</li>
<li>Contact me</li>
</ul>
</nav>
<section class="top-bottom-border"></section>
And this is my css:
.center {
margin: 0 auto;
width: 960px;
}
.overflow {
overflow: hidden;
}
.top-bottom-border {
background: url(../images/top-bottom-border.jpg);
height: 37px;
}
ul#social{
float: right;
}
ul#social li {
display: inline-block;
margin-left: 10px;
margin-top: 5px;
}
nav#menu{
position: relative;
height: 50px;
}
nav#menu li{
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
nav#menu .float-left{
padding-left: 150px;
}
nav#menu .float-left li{
margin-right: 25px;
}
nav#menu .float-right{
padding-right: 150px;
}
nav#menu .float-right li{
margin-left: 25px;
}
ul#logo{
position: absolute;
left: 400px;
top:-40px;
}
How can I make the image in the center overlap the two black borders?
<nav class="center overflow" id="menu"> the z-index isn't coming into act because you've overflow: hidden for your #nav so the logo that overflows it is not displayed. Removing overflow class from it will fix display of your logo.
Edit As far as I can understand your layout and the goal, you might also want to add float: left to nav#menu .float-left and float :right to nav#menu .float-right
You could try adding a style="z-index: 5" to the li or ul of the logo
Related
I'm having trouble vertically aligning the links and the logo inside the list any idea what i can to fix it?
Here is the code in codepen.
http://codepen.io/tacoxlegendary/pen/VjXqkA?editors=1100
<body>
<nav>
<div class="wrapper ">
<ul class="cf">
<li id="logo">LOGO</li>
<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>
.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}
nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
}
Add padding:0 to nav ul #logo
.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}
nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
padding:0;
}
<nav>
<div class="wrapper ">
<ul class="cf">
<li id="logo">LOGO</li>
<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>
a simple way to center the navbar and logo in the center of navbar is to set a height to navbar and give the same value as line-height to li
like
nav {
height: 70px;
}
ul.cf {
line-height: 70px;
}
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
i created a navigation bar, and while hovering i made the font larger.
but when i hover the other menu items seem to move from its position , how do i lock them in their position. Also, just started html and css, if anyone would help me, thank you :)
html:
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.php">
<img src="images/hawa.png" style="width:200px;height:60px;">
</a></div>
<div class="header-right">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li>Sign Up</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.header{
background-color: #003399;
width: 100%;
height: 83px;
position: fixed;
}
.container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
}
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
}
.header-right ul{
margin: 0;
padding: 0;
}
.header-right li{
list-style: none;
}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}
You can add a class on your list items and set the width for these items. For example:
html:
<ul>
<li class="nav-cells">Home</li>
<li class="nav-cells">About</li>
<li class="nav-cells">Services</li>
<li class="nav-cells">Contact Us</li>
<li class="nav-cells">Sign Up</li>
</ul>
css:
.nav-cells {
width: 100px;
display: inline;
}
I floated a logo image and the title of the page to the left, but then the nav gets in the way along with some of the main content. I tried to clear the nav but then when I want to display my navs inline it will throw it off. So I can't do that.
Anyone know what to do?
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
Add this to your css:
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block