I have just started my website, and I am currently working on the header/navigation bar. I've got it looking how I want, however the one thing I can't figure out, is how to centre the logo and hyperlinks vertically in the header?
Here is my HTML:
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><img src="logo.png"></h1>
</div>
<div class="nav">
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<p>
</p>
</div>
</body>
And CSS:
body {
font-family: 'Nunito', sans-serif;
width: 100%;
margin: auto;
background: #F4F4F4;
}
a {
text-decoration: none;
color: #fff;
}
img {
max-width: 100%;
}
/**********************************
HEADING/NAVIGATION
***********************************/
li {
list-style: none;
float: left;
margin-left: 25px;
padding-top: 10px;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #5BBB9B;
width: 100%;
height: 200px;
top: 0;
position: fixed;
border-bottom: 1px solid black;
}
.logo {
float: left;
}
.nav {
float: right;
}
I have tried using vertical-alignment: middle;, however this didn't work.
Anyone have any suggestions?
Use
display:table;
height:100%;
for the parent and
display: table-cell;
text-align: center;
vertical-align: middle;
and check out this awesome article:
https://css-tricks.com/centering-in-the-unknown/
Related
I trying to create a header of a website, with the logo and name positioned on the left side and the tabs at the center. i have two divs the first holding the logo and the name and the other the tabs(lists). But they are not aligned on horizontally together rather than one div is below the other. I have used float but it doesn't seem to work as i would like as other divs and elements clash with floated divs. I do know a similar question has been asked but they don't work for me.
.header {
width: 100%;
border: solid red;
}
#trademark {
border: solid green;
width: 15%;
}
#logo {
width: 70px;
}
#logoName {
float: right;
}
#divList {
border: solid black;
width: 50%;
text-align: center;
margin-left: 25%;
}
#list li {
display: inline;
margin: 20px;
}
<div class="header">
<div id="trademark">
<img src="images/coin.png" id="logo">
<h2 id="logoName">Halo</h2>
</div>
<div id="divList">
<ul id="list">
<li>About</li>
<li>TCH</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
no errors how not being formatted as needed
try this
.header {
width: 100%;
border: solid red;
}
#trademark {
border: solid green;
width: 20%;
display: flex;
}
#logo {
width: 70px;
}
#logoName {
float: right;
}
#divList {
border: solid black;
width: 50%;
text-align: center;
margin-left: 25%;
}
#list li {
display: inline;
margin: 20px;
}
<div class="header">
<div id="trademark">
<div class="icon">
<img src="images/coin.png" id="logo">
</div>
<h2 id="logoName">Halo</h2>
</div>
<div id="divList">
<ul id="list">
<li>About</li>
<li>TCH</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
Trying to set up a simple 'cheat sheet' of logo and nav bar that I can reuse. I'm having trouble preventing the right floated nav from overflowing into content below.
NB. I'm new to this so I have added borders to all elements to help me see what's happening.
I have tried to add a clear:left (even though I know it should be clear:right as the content has been floated right) to the element proceeding the navigation but that did not work of course!
*{
box-sizing: border-box;
}
header{
display: inline-block;
}
.logo{
background-image: url("logo.png");
background-repeat:no-repeat;
width: 140px;
height: 81px;
margin: 10px;
display: inline-block;
}
nav{
border: 1px solid black;
float: right;
width: auto;
}
ul{
list-style: none;
padding-left: 0;
border: 1px solid red;
vertical-align: middle;
}
li{
display: inline-block;
width: auto;
padding: 20px;
background-color: yellow;
margin-bottom: 5px;
border: 1px solid yellow;
}
.divider{
clear: both;
}
<header>
<div class="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Shopping</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="divider"></div>
<main>
<h1>The display Property</h1>
So next I tried clear:both and that did not work.
I have also tried to set the nav to display:inline-block but that did not work.
Ideally I would like to solve this without using any pre-provided templates and my just raw code or display:flex.
Thanks in advance :)
Hope this helps.
.nav_bar {
margin: 10px;
padding: 10px;
background-color: #00021a;
color: white;
}
.logo {
display: inline-block;
vertical-align: middle;
width: 7%;
}
.logo img {
height: auto;
width: 50px;
}
.nav {
display: inline-block;
vertical-align: middle;
width: 90%;
}
.nav_container li {
list-style: none;
float: right;
padding: 10px;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div class="nav_bar">
<div class="nav_container">
<div class="logo">
<img class="logo"
src="https://t4.ftcdn.net/jpg/00/71/26/83/240_F_71268376_KIbJvY0SYwlvikWpahjNCv5IBfukykG9.jpg"/>
</div>
<nav class="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Shopping</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
</div>
Here's the Fiddle
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I created a nav bar but my border-bottom not working , it is working as a border-top instead. I am trying to create a nav bar like twitter for learning. It will be a great help if someone helps me to solve it
*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: auto;
border-bottom: 1px solid #dae0e4;
}
.container{
width: 90%;
margin: 10px auto;
}
.main-nav{
width: 50%;
float: left;
}
.second-nav{
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
</body>
</html>
I expect the border to show the lining downside but it is showing it upside, I couldn't find the solution anywhere on the web and also I was unable to fix it.
The border did appear, but visually on top of the header.
This is because the child elements of .header are floated and hence the height of .header becomes zero. To avoid this, add a clearfix to .header. Here I've used overflow:auto to fix it.
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: auto;
border-bottom: 1px solid #000;
}
.container {
width: 90%;
margin: 10px auto;
overflow: auto;
}
.main-nav {
width: 50%;
float: left;
}
.second-nav {
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body {
clear: both;
}
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
I'm trying to build a horizontal navigation using %'s, and I cant seem to figure out whats going on. I have it all set up how I want it, but whenever I specify a size to the A or LI nothing changes, and therefore, I can only see a silver of my background image.
<div id=mainwrap>
<div id=header>
<div id = title>
<img src="images/hangaquilt.png" width="483" height="78" alt="Hang A Quilt">
</div>
<div id = cartstatus>
<p> Your Cart Is Empty </p>
</div>
<div id=nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
<li>View Cart</li>
<li>Dealers</li>
</ul>
</div>
</div>
<div id=bodycontent>
<div id=sidebar>
</div>
<div id=bodytext>
</div>
</div>
<div id=slideshow>
</div>
<div id=footer>
</div>
</div>
and the CSS
body {
background-color: rgb(238,225,185);
}
#mainwrap {
margin: 0 auto;
height: 700px;
width: 75%;
max-width:1024px;
min-width:800px;
}
#header {
margin: 0 auto;
margin-top: 3%;
width: 100%;
height: 25%;
}
#header img{
margin-left: 3.3%;
}
#title {
float:left;
width: 55%;
}
#cartstatus{
float: right;
width: 45%;
}
#cartstatus p{
margin-right: 7.1%;
float: right;
}
#nav{
clear: both;
width: 100%;
height: 33%;
font-family:"Rockwell Extra Bold",Trebuchet MS, Arial, Helvetica, sans-serif;
}
#nav ul {
height: 100%;
list-style-type: none;
text-align: center;
}
#nav li{
padding: 0;
width: 20%;
height: 100%;
font-size:18px;
display:inline;
}
#nav ul li a{
background-image: url(../images/navbg.png);
width: 19%;
height: 98%;
color: black;
text-decoration: none;
}
I've done navigation likes this before, and have never had this problem. It's really frustrating as I know it's something really simple that I'm missing.
If you define element as "inline", you can't change it's width or height.
Instead of
display:inline;
try
display:inline-block;
Here is what you want: http://jsfiddle.net/JmTKb/
This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
here's my css code:
body{
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;
height: 29em;}
#header{
height: 60px;
overflow: hidden;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#personalised p {
float: left;
width: 20%;
margin-top:5%;}
#navigation{
margin: 1%;}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}
div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}
I know this is long, but I'd really appreciate your help. Thanks in advance
Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/
<head>
<style>
div {
border: 1px dashed #FF0000;
}
body {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#header {
min-height: 60px;
overflow: hidden;
margin: 1%;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#navigation{
margin: 1%;
float: right;
}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
list-style: none;
}
#navigation ul li {
margin: 0px;
padding: 0px;
display: block;
position: relative;
float: left;
}
#navigation li ul {
display: none;
}
.body {
clear: both;
}
#personalised {
margin: 1%;
float: left;
width: 20%;
}
#content {
margin: 1%;
float; right;
min-height: 29em;
}
#personalised p {
margin: 0px;
padding: 0px;
}
#header, #footer, #navigation, #personalised {
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
<div class="clear"></div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
<div class="clear"></div>
</div>
<div class="body">
<div id="personalised">
<p>Hey there</p>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.
I think the culprit is this:
#content {
overflow: auto;
height: 29em;}
You are explicitly setting the height of the content div. Try setting it to inherit.
Here is a fiddle where the container grows according to the number of elements in it:
http://jsfiddle.net/pUb6q/2/
Uses your layout. The changes are
#content {
border:1px solid black;
float: right;
overflow: auto;
height: inherit;
}