Hi I'm trying to make a second navigation bar on my homepage the same as http://www.adventurelink.com/Gallery/Destination.com.
I have the first (top nav bar & text) in place but the text (links) for the second only sits underneath and I'm not sure why as I copy and pasted the code changing the "id" names. At the moment I'm just setting the layout before adding real content but need to sort this first. Any help would be much appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="file:///C|/Users/Deniz/Desktop/Website/css/2nd.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--TOP NAVIGATION BAR AND LOGO-->
<div id="topnavbar">
<div id="logo"></div>
<nav id="topnavlinks">
<ul>
<li>About</li>
<li>Profile</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</nav>
</div>
<!--SPACE FOR CHANGING PICTURES-->
<div id="picspace"></div>
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar"></div>
<nav id="botnavlinks">
<ul>
<li>Destinations</li>
<li>Activities</li>
<li>Things to do</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
<!--CONTENT---->
<div id="content"></div>
<!--FOOTER-->
<div id="footer"></div>
</body>
</html>
CSS:
* {
margin:0px;
}
#topnavbar{
height:50px;
margin:0 auto;
background: -webkit-linear-gradient(#e78869, #ad4e2f); /* For Safari */
background: -o-linear-gradient(#e78869, #ad4e2f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e78869, #ad4e2f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e78869, #ad4e2f); /* Standard syntax (must be last) */
}
#topnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#topnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#topnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#topnavlinks li a:link, a:visited{
display:block;
color:#fff;
padding:10px;
text-decoration:none;
}
#topnavlinks li a:hover{
background-color:#6880af;
}
#logo{
}
#picspace{
height:400px;
background-color:grey;
}
#botnavbar{
height:50px;
background: -webkit-linear-gradient(#6880af, #314a79); /* For Safari */
background: -o-linear-gradient(#6880af, #314a79); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6880af, #314a79); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6880af, #314a79); /* Standard syntax (must be last) */
}
#botnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#botnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#botnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#botnavlinks li a:link, a:visited{
display:block;
color:black;
padding:10px;
text-decoration:none;
}
#botnavlinks li a:hover{
background-color:#e78869;
}
#content{
height:500px;
background-color:grey;
}
#footer{
}
It's still going to need a lot more styling but the reason for this is because in your botnavbar you closed the div before you put the links in it.
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar"></div> <!-- here, this shouldn't be closed yet -->
<nav id="botnavlinks">
<ul>
<li>Destinations</li>
<li>Activities</li>
<li>Things to do</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
You created the "botnavbar" and immediately closed that div, so the links aren't going to be inside that bar. Just move the </div> down.
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar">
<nav id="botnavlinks">
<ul>
<li>Destinations</li>
<li>Activities</li>
<li>Things to do</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
</div>
Related
I'm trying to get the navigation bar inside of the header but it only stays below it. How can I fix this? The nav divs are inside of the <header> so I'm not sure why the entire nav-bar is set below the header.
Here's the JSFIDDLE link.
HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FMHS Choral Dept.</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
<link rel="icon" type="text/css" href="img/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>
<body>
<header><span>FMHS Choral Department</span></p>
<div class="nav_wrap">
<div class="nav_items">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Calender</li>
<li>News</li>
<li>Awards/Honors</li>
<li>Documents</li>
<li>Links</li>
</ul>
</div><!--end of nav_items-->
</div><!--end of nav_wrap-->
</header><!--end of header-->
<div class="container">
</div><!--end of container-->
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../img/crossword_green.png);
margin:0;
}
/* HEADER */
header {
font-family: Roboto;
width:100%;
height:50px;
font-size:24px;
background:#FFF;
text-align:left;
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
position:fixed;
top:0;
line-height:50px;
}
header span {
margin-left:20px;
}
header span a {
text-decoration:none;
color:#000;
}
.nav_wrap {
width:800px;
float:right;
background:#f0f;
}
.nav_items ul li {
display:inline-block;
list-style-type:none;
float:right;
}
/* CONTAINER */
.container {
width:900px;
height:800px;
border-radius:5px;
background:#fff;
margin:auto;
margin-top:70px;
}
http://jsbin.com/lufik/1/edit
First, you need to use some CSS reset, I used the Global one:
*{margin:0; padding:0;}
Than you don't need height set to header
...unless you want to replace your menu with an icon for 'mobile'.
header {
font-family: Roboto;
width:100%;
/*height:50px;*/ /* nope */
you don't need width for your nav wrapper, you already floated it right:
.nav_wrap {
/*width:800px;*/ /* njaaah */
float:right;
}
you don't need to float left your LI elements:
.nav_items ul li {
display:inline-block;
list-style-type:none;
/*float:right;*/ /* nöööu */
}
P.S: I would really apply that #media rule for a fancy nav tab icon!
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 started to add a drop down menu to my 2nd nav bar (the one in blue) but before I've really got started the main links are moving around and the content in separate divs underneath are also moving around but I've no idea why?
Here's a jsfiddle link http://jsfiddle.net/zDGHg/
I'm new to html and css so any help would be much appreciated.
Related code
HTML
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar">
<nav id="botnavlinks">
<ul>
<li>Travel Boards</li>
<li>Destinations
<ul>
<li>sdfgsdfd</li>
<li>sdfgsdfd</li>
<li>sdfgsdfd</li>
<li>sdfgsdfd</li>
</ul>
</li>
<li>Activities</li>
<li>Thingstodo</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
</div>
<!--CONTENT---->
<div id="content">
<div id="slidemenus">
<h1>Filter By</h1>
<!--Put content here-->
<ol>
<li>Price per Trip</li>
<li>Duration</li>
<li>Departure Date</li>
<li>Travel Styles</li>
<li>Activities</li>
<li>City</li>
<li>Country</li>
</ol>
</div>
<div id="featured">FEATURED CONTENT
<!--Put content here-->
<ol>
<li>product info</li>
</ol>
</div>
</div>
CSS
#botnavbar{
height:40px;
background: -webkit-linear-gradient(#6880af, #314a79); /* For Safari */
background: -o-linear-gradient(#6880af, #314a79); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6880af, #314a79); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6880af, #314a79); /* Standard syntax (must be last) */
}
#botnavlinks{
min-width:960px;
margin: 0 auto;
text-align:left;
padding-left:200px;
}
#botnavlinks ul{
list-style:none;
height:35px;
}
#botnavlinks li{
height:35px;
float:left;
padding-right: 60px;
}
#botnavlinks li a:link, a:visited{
display:block;
color:#fff;
font-family:Papyrus;
padding:8px;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0,0,0,0.5); /*For embossed effect*/
text-align:center;
}
#botnavlinks li a:hover{
background-color:#1d3564;
}
#content{
height:500px;
background-color:#fff;
}
#slidemenus{
border:solid black 1px;
width:30%;
min-height:500px;
float:left;
}
#featured{
border:solid black 1px;
width:60%;
min-height:500px;
float:left;
}
In your jsfiddle, check the width of your #botnavlinks ul declaration... it's set to 150px. If you set it to a wider width or auto, then your links should look as they should.
Also, when you define something to 0 (e.g. margin: 0px), you don't need to specify the units; this will suffice: margin: 0;
Hope that helps.
Edit:
Also, I forgot to mention that other things affecting your menu bar is the padding left you have for your list items (200px); since you have a 'min-width: 960px' defined in your #botnavlinks declaration, and 6 list items (6 x 200 = 1200px wide), the elements will naturally wrap. ;)
EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.
<div id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 3</li>
<li>Menu item 2</li>
</ul>
<span></span>
</div>
#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
END EDIT
I have a menu I'm having some issues with - mainly horizontal issues :)
Basically, when you view the website in Chrome, the menu is centered the way I want it to be.
When you view the website in FireFox, the menu is 5-10px short on the right side.
And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.
View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)
So my question is:
How can I style/code this menu correctly to fit within my parent div?
I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#sliderwrapper {width:635px;}
#control {
text-align:right;
margin-top:5px;
}
#control a {
background:#87e7fa;
padding:0 5px;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
margin-left:5px;
}
#control a.active {background:#265db9;}
#control a span {visibility:hidden;}
.sexyslider-control span {display:none;}
.sexyslider-title {
font-weight:bold;
color: #FFFFFF;
}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").SexySlider({
width : 981,
height : 500,
delay : 3000,
strips : 18,
autopause : false,
<!--navigation : '#navigation',--!>
control : '#control',
direction : 'left',
effect : 'fade'
});
});
</script>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.gif" alt="" /></div>
<div id="main">
<ul>
<h2><li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li></h2>
</ul>
<div id="sliderwrapper" class="clearfloat">
<div id="slider" style="width:100%">
<img src="images/slide1.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide2.jpg" alt="" " />
<img src="images/slide3.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide5.jpg" alt="" "/>
<img src="images/slide6.jpg" alt="" "/>
</div>
<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>
</div>
<div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
width:1200px;
height:358px;
}
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:left;
}
#footer {
clear:both;
width:1200px;
height:354px;
}
h2 {
font-family:soos_font;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
ul
{
list-style-type:none;
margin:10 0;
padding:0;
}
li
{
display:inline;
width:100%;
margin:0 auto;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;
}
a:hover,a:active
{
background-color:#3650a2;
}
I have update you css
css
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:center;
}
#main ul{
list-style-type:none;
margin:0;
padding:0;
}
#main li{
display:inline-block;
/*width:100%;*/
margin:0 3px;
}
html
<div id="main">
<ul>
<li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li>
</ul>
<br style="clear:both;"/>
</div>
here is the jsFiddle File
Also don't wrap li in to h2, this is not a valid code.
I am having problems overlaping two boxes. Should I use absolute positioning? z-index or what techniques are out there? By the way I want them to overlap is just that I want to make sure it works cross modern browsers. IE8 or +
I cant push the black box to the center why?
<!DOCTYPE HTML>
<html>
<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<div id="masthead">
<div id="logo">
Logo here
</div><!--end logo-->
<div id="header">
<div id="horizontalMainMenu">
<ul>
<li>About Us |</li>
<li>Contact Us |</li>
<li>Metro Link |</li>
<li>WaRMSS Login </li>
</ul>
<br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
</div>
</div>
<!--end header-->
</div><!--end masthead-->
<div id="container">
<div id="left_col">
<div id="verticalMainMenu">
<ul>
<li>Air Quality Control</li>
<li>CalATERS</li>
<li>Email Encryption</li>
<li>Employee Guide</li>
<li>Patient Special Function Requests</li>
<li>Request Home Address <br> Confidentiality Form</li>
<li>Travel Store</li>
</ul>
</div><!--verticalMainMenu ends here-->
</div><!--left_col ends here-->
<div id="page_content">
<div id="horizontalBodyMenu">
<ul>
<li>Home</li>
<li>Clinical</li>
<li>Administrative</li>
<li>Service</li>
<li>Search</li>
</ul>
<br style="clear:left">
</div>
</div><!--page_content ends here-->
</div>
<div id="footer">
Footer
</div><!--end footer-->
</body>
</html>
CSS:
/* CSS layout */
*{
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 200px;
background-color:yellow;/*I dont know what color this is in the template*/
}
#header {
background-color:yellow;/*I dont know what color this is in the template*/
height:300px;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
background-color:red; /*I dont know what color this is in the template*/
}
#page_content {
background-color:black;
margin:-50px 0 0 0;
width:95%;
}
#footer {
clear: both;
}
/* CSS common layout ends here*/
/* horizontalMainMenu starts here*/
#horizontalMainMenu{
width:100%;
background-color:transparent;
}
#horizontalMainMenu ul{
margin:0;
padding:0;
float:left;
}
#horizontalMainMenu ul li{
display:inline;
}
#horizontalMainMenu ul li a{
float:left;
text-decoration:none;
color:white;
padding:5px 9px;
}
/*horizontalMainMenu ends here*/
/*Body Menu Starts here*/
#horizontalBodyMenu ul{
list-style:none;
}
#horizontalBodyMenu ul li{
display:inline;
}
/* horizontalBodyMenu ends here*/
#horizontalMainMenu ul li a:visited{
color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
color:#fff;
background-color:#0b75b2;
}
#verticalMainMenu ul{
margin:0;
padding:0;
list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
padding:0 0 0 10px;
background-image:url('');
background-repeat:no-repeat;
background-position:.5em;
line-height:200%;
}
#verticalMainMenu li a:hover{
color:#fff;
background-color:#0b75b2;
}
You should do it normally, and then pull "Box 2" upwards with margin-top: -80px.
This will work in "all browsers".
Here's a good article concerning negative margins:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You need to position box2 relative to box1. Lookup html relative positioning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/