How do I get the navigation bar to appear next to the logo instead of breaking to the next line under it?
I've tried several changes but it keeps going onto the next line. I'm trying to avoid using floats because I was told they are not good to use. I want it to look like the navigation bar on this website in this end:
http://www.freecsstemplates.org/
I would like to understand how it is being done on that website.
I am just very confused as to how the process is to work.
CSS:
#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}
#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}
#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}
#menu a:hover,a:active
{
background-color:#7ce5e6;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<ul>
<li>Home</li><li>Contact</li><li>About</li><li>Products</li><li>Design-a-Tee</li><li>Reviews/Testimonials</li>
</ul>
</div>
</div>
</body>
</html>
add this css
#logo {
float:left;
}
#menu {
float:right;
}
#header {
clear: both;
overflow: auto;
}
Related
I made a menu and used width: 100% to make sure it comes across the entire page but there were white spaces on the right and left side (looks more like width:95%?) So I then tried using position:absolute top:0 left:0 which solved the problem and made the menu look like width 100%,
Unfortunately, this operation caused my h2 header element to disappear and I cannot find a way to properly place it now?
JSBin code of my html and css code
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
How come position:absolute makes my h2 disappear?
To avoid the default margins in general, you can add margin: 0; to html and body.
To place your absolutely positioned menu behind the h2element, you can apply z-index: -1, which moves it behind its parent element.
In my snippet below I also changed the text-centering to right alignment and added a padding-right on the ul. You can play around with those values so they fit your needs.
html, body {
margin: 0;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right: 30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:100%;
height:50px;
background-color:paleGoldenRod;
position: absolute;
z-index: -1;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
Add padding-top: 50px (the menu height) to body.
body {
padding-top: 50px;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
JSBin
Position in css is tricky thing, everyone uses absolute positioning for placement of element.but before using it. you need to know about what the position is all about. when we use position:absolute then element act like it is floating on top of all element.while using absolute positioning element goes out from html normal flow.
you have used position absolute for both menu links and footer, So these elemment are floating on top of other elements.enter code here
use position absolute and fixed when you want to stick element to specific position.
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
if you still want to use position absolute for menu, so you need to use proper margin for h2 tag.so that h2 tag will not be hidden beside menu links.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Please do bear with me I am aware this is mind-numbingly basic but I need to start somewhere and I both can't find an answer and can't find a reason why.
My nav bar does not correspond to my div's border and this is less of a problem but how do I get it so that the nav bar and the header don't overlap when I use the border because as of now the div border is only working on the header.
you need overflow hidden to container.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
overflow: hidden;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Have you thought about adding a 5px top margin to your nav bar, this will account for the 5px border... I think. I'm also still learning. Best of luck, I'll be watching.
Also you always want body to be the outer most thing of what is rendered on the page. So any containers need to be inside of it.
Problem is a) your body tag is in the wrong place (should start just before head, and end just before html tag and b) there is no height declaration on the container.
Adding this code to the CSS:
html,body {
background-color:Lavender;
height:100%;
}
div.container {
width:100%;
height:100%;
border:2px solid purple;
}
and having this to html should work.
<body>
<div class="container" style = "border: solid yellow;">
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</div>
<br class="clear" />
</body>
</html>
I am trying to create a navigation bar on my website for a project. I get the bar just fine, but I can't get it to center on the page. I have tried a variety of different methods. Can someone help me out? I'm using an external style sheet. Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="tylerschevy.css">
</head>
<body>
<h1>Tyler Chevrolet</h1>
<ul>
<li>Home</li>
<li>Show Room</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Official Site</li>
</ul>
</body>
</html>
Here is my style sheet:
h1 {text-align:center}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
display: inline-block;
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:black;
background-color:#FFFF33;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#0033FF;
color:white;
}
jsfiddle
Add class="nav" to your <ul>, and then in your stylesheet create a new class:
.nav {
display: table; margin: 0 auto;
}
jsFiddle
Center ul
body {
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I recommend to put your ul in one wrapper (so you don't touch the body) like this
<div class="wrapper">
<ul>...</ul>
</div>
css
.wrapper{
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I've been trying to absolutely position my navigation at the bottom right of its parent div (header>nav>menu) and i'm a little lost. Help would be appreciated!
I've been trying to relatively position its parent div, but each property i try, it either disappears from the browser, aligns all the way at the bottom right of the page and not its parent div, or somewhere else i'm not wanting it to go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="images/logo.png" / id="logo">
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
body {
margin:auto;
width:960px;
}
.logo {
display:block;
float:left;
width:242px;
height:141px;
margin:0px;
}
#header {
position:relative;
height:100%;
}
#nav .menu {
position:absolute;
bottom:0px;
right:0px;
margin:0px;
padding:0px;
float:right;
}
#menu ul {
list-style:none;
}
#menu li {
display:inline;
float:left;
}
#menu a {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,a:active
{
background-color:#7A991A;
}
you define in your css nav is a tag element not id or menu is a id not class Please change to your css and define as like this
Change to this
#nav .menu
into this
nav #menu
Demo
You made some mistakes,
you use #header in css but you don't put id header to the <header> tag,
you use #nav in css instead of nav tag because there is no id in nav tag,
#header height is 100%. it will take the height of parent. put height:auto; so that it will take only the height it need to fit its content.
I made a JSFiddle. please check. hope this will solve your problem.
http://jsfiddle.net/banded_krait/Q4Zjj/
I am new to CSS but loving it so far. But, I've hit a road block with my code. I'm almost there but need some proper guidance.
I have provided my website where I'm attempting to place my logo to the left side of my nav. I want the site content CENTERED with a width of 960px and 0px from the top (against the top of the browser). I am using the CSS display: inline with li selectors to try to achieve my goal.
I'm trying to also get the inline nav to be right up against the logo. I'm also trying to mimic the logo's top 4px border with the CSS a:hover selector on the nav. I want this to be at the margin-top: 0px in the browser.
Here's the link to my almost correct logo/nav layout:
http://multimediaxchange.com/vls/index.php?page=home
Here's my CSS CODE:
.topbar {
width:960px;
height:87px;
text-align:center;
}
.topbar-inner {
width:960px;
margin:0 auto 0 auto;
text-align:center;
}
.logo {
margin-top:0px;
display:inline;
}
img {
float:left;
border: 0;
padding: 0;
margin: 0;
}
.menu {
display:inline;
margin-top:0px;
}
.menu > ul > li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
margin-right:0px;
padding-top:40px;
min-width:80px;
}
.menu > li {
display:inline-block;
list-style:none;
margin-top:50px;
}
.menu li a {
color: #000;
display: block;
text-decoration:none;
}
.menu li:hover {
border-top-color: #039;
}
.menu li:hover a {
color:#039;
}
body {
font-family:Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
height:500px;
padding:0px 20px 20px 20px;
text-align:left;
font-size:12px;
}
.footer {
border-top:1px solid #DFDFDF;
width:960px;
margin: 0 auto;
font-size:11px;
text-align:center;
}
Here's the HTML Code:
<?php
// Load Setup document:
include('_config/setup.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
<!-- logo -->
<div class="menu"><?php include('_template/nav_main.php'); ?></div>
<!-- menu -->
</div>
<!-- topbar-inner -->
</div>
<!-- topbar -->
<div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>
<div class="content"><?php get_page_body($dbc, $pg); ?></div>
<div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>
Thanks!
everything is right but you need to add this property margin:0 auto; not to the topbar-inner class but to the topbar class, and this like like this. so change present
.topbar {
width:960px;
height:87px;
text-align:center;
}
to
.topbar {
width:960px;
height:87px;
text-align:center;
margin:0 auto;
}
The secrets are in the .topbar class. Remove the text-align:center, and instead add a margin:0 auto. Should look like this:
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
The text-align:center prevents the <ul> from being centered in the remaining space after the image floats, so the top border looks seamless.
The margin:0 auto centers the whole kaboodle.
Add this line:
.menu ul {
margin:0;
}
and it will be on the top of the browser. My comments about a lot of extra junk still apply though :)
EDIT
Here's your page, with the "minimalist" markup and styling I'm talking about. There's one or two minor tricks a beginner may not know, but you should easily understand pretty much everything.
Just slice out all the crap extra divs, basically, and you can chase down problems quicker, target elements easier, have a lighter page (in bytes, that is) and generally add a bit of elegance to your solutions.
This rebuild does everything the original did, in half the space.
HTML:
<body>
<div class="topbar">
<img src="logo.png" height="87" width="287"/>
<ul class='menu'>
<!-- Not great practice to stagger </li> like this,
but a good way to avoid rogue padding. -->
<li>Home
</li><li>Staffing
</li><li>Jobs
</li><li>Training
</li><li>GSA
</li><li>Why Us
</li><li>Clients
</li><li>Contact</li>
</ul>
</div>
...the rest of your page...
</body>
CSS:
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
.topbar {
width:960px;
height:87px;
margin:0 auto;
}
.topbar img {
float:left;
border: 0;
}
ul.menu {
margin:0 0 0 287px;
padding:0;
}
ul.menu li {
display:inline-block;
position:relative;
border-top:4px solid #FFF;
list-style:none;
padding-top:40px;
min-width:80px;
}
ul.menu li a {
color: #000;
display: block;
text-decoration:none;
}
ul.menu li:hover {
border-top-color: #039;
}
ul.menu li:hover a {
color:#039;
}
It is a good practice to put your divs inside a container, something like this:
<div id="container">
<div class="topbar">
<div class="topbar-inner">
<div class="logo">
<img src="/vls/_images/mylogo.png" height="87" width="287"/>
</div>
<div class="menu">
<?php include('_template/nav_main.php'); ?>
</div>
</div>
</div>
<div class="bdy_hdr">
<?php get_page_name($dbc, $pg); ?>
</div>
<div class="content">
<?php get_page_body($dbc, $pg); ?>
</div>
<div class="footer">
<?php include('_template/footer.php'); ?>
</div>
</div>
Then do just this in your CSS:
.topbar{
margin:0 auto;
}
I suggest you to give a width to .bdy_hdr, .content and .footer and then do the same with them, i.e:
.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}