This is my code at the moment. I want it to produce a navigation bar with the image and text next to it on the same line on the far left (which it does) and all the menu items which are in the class="top_info" on the same line except they are pulled a bit to the right. Can someone help me?
<!DOCTYPE html>
<html>
<head>
<style>
body {background: ; margin: ; }
#container {width: ; margin:; background: #333300 ; }
#header {color: white;}
#logo { font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
.top_info {float:left; color:white;}
</style>
</head>
<body>
<div id="container">
<!--header-->
<div id="header">
<div id="logo"><img src="http://www.townplanning.com.au/app/theme/default/design/images/header/logo.png"><span>TOWNPLANNING</span>.COM.AU</p></div>
<div class="top_info">CONTACT US</div>
<div class="top_info">BLOG</div>
<div class="top_info">NEWS</div>
<div class="top_info">PREVIOUS VCAT DECISIONS</div>
<div class="top_info">PLANNING SCHEMES</div>
<div class="top_info">WHAT IS TOWN PLANNING?</div>
<div class="top_info">MAP</div>
<div class="top_info">ABOUT</div>
<div class="top_info">HOME</div>
</div> <!--div header end-->
</div> <!--DIV CONTAINTER end-->
Assuming that the logo and the text should be in first line and menu
should be in the second line, i have edited the code.
Please see the fiddle:DEMO
HTML:
<div id="container">
<!--header-->
<div id="header">
<div id="logo"><img src="http://www.townplanning.com.au/app/theme/default/design/images/header/logo.png"/><span>TOWNPLANNING</span>.COM.AU</div>
<ul class="top_info">
<li >CONTACT US</li>
<li >BLOG</li>
<li >NEWS</li>
<li >PREVIOUS VCAT DECISIONS</li>
<li >PLANNING SCHEMES</li>
<li >WHAT IS TOWN PLANNING?</li>
<li >MAP</li>
<li >ABOUT</li>
<li >HOME</li>
</ul>
</div> <!--div header end-->
</div> <!--DIV CONTAINTER end-->
CSS:
#container { margin:0; background: #333300 ;overflow:auto; }
#header {color: white;}
#logo { font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
ul{padding:0;}
.top_info li{ color:white;}
ul li{display:inline-block;list-style:none;}
It is always best practice to create menu's using ul li. and styling
them to display:inline-block which will make them appear in single
line.
I have applied the class to the ul tag , repeating it so many times
in a div is not good practice.
2.Assuming that the logo and the menu should be in the same line,
Please see the fiddle for that: DEMO
CSS:
#container { margin:0; background: #333300 ; overflow:auto; }
#header {color: white;}
#logo { float:left;font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
.top_info li{ color:white;}
ul li{display:inline-block;list-style:none;}
Related
I have a tutorial, where the following CSS is used to separate list items from each other.
But why do I adress the nav a and not the li ? Can someone tell me a proper reason to not define the padding in li? It has a similar effect.
main-header .header-logo {
float:left;
}
.main-header nav {
float: right;
}
.main-header ul {
list-style: none;
}
.main-header li{
float:left;
}
.main-header nav a {
padding: 20px;
}
<div class="container">
<div class="main-header-container">
<header class="main-header clearfix">
<a class="header-logo" href="index.html"><h1>ContactFile</h1></a>
<nav>
<ul class="header-main-menu clearfix">
<li>contact</li>
<li>contact2</li>
<li>contact3</li>
<li>contact4</li>
</ul>
</nav>
</header>
</div>
</div>
Everything will work perfect if you apply styles to li but consider you give a padding to a lielement instead of a. It will create this type of effect where only text will be clickable as a link while all the other space will be unclickable as it will be li not a
I am trying to center my navigation bar but every way I have tried so far results with either the navigation bar not centered or it is centered but the links aren't in one line. I would also like to keep the logo in line with the navigation bar but floating left. I tried adding a container class and a nav id but I don't think that did anything. Please Help!
Here is my html:
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="HCstyle.css">
<title>Hockey Corner</title>
</head>
<body>
<div>
<img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li>Our Sponsers</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here is my css:
img.logo{
float:left;
width:10%;
padding-left:5%;
}
ul{
list-style-type:none;
margin:0;
padding-left:20px;
padding-right:20px;
display:inline-block;
overflow:hidden;
float:right;
}
li{
display:inline-block;
}
li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover{
background-color:#34495E;
}
body{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
background-size:cover;
background-repeat:no-repeat;
}
.nav{
float:left;
text-align:left;
}
.container{
text-align:center
}
Using flex property will solve your problem. Learn more here.
Working code: https://codepen.io/Sahero/pen/rzmVjN
You should change your CSS Code .nav to #nav.
There are a lot of way to make located your logo.
I'd like to recommend display:flex.
You can find easy about flex.
I need to use an image for my navigation buttons inside of my navigation bar. Right now, I have it set as a color, and when hovered over, it changes color.
However, instead of a color, I need an image. I have sized the button image to the exact height and width as I have set it inside of my css.
For each of the ul's: About Me, Photo Edits, Video Edits, Writing, I must have a button. I have the image and it is correct on its width and height.
Here is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--Start Container for Whole Site-->
<div id="container">
<!--Start Header Content-->
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
Logo" border="0" /></a></div>
</div><!--End Header Content-->
<!--Start Navigation ontainer-->
<div id="wrapper">
<div id="navMenu">
<ul>
<li>About Me
</li>
</ul>
<ul>
<li>Photo Edits
</li>
</ul>
<ul>
<li>Video Edits
</li>
</ul>
<ul>
<li>Writing
<ul>
<li>Samples</li>
<li>Recognition</li>
</ul> <!--end inner UL-->
</ul><!--End main ul-->
<br class="clearFloat" />
</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->
<!--Start Media Area-->
<div id="media">
<h1>Images/Rich Media</h1>
<p>(470 x 550)</div>
<div id="text">
<h1>Main Body Text</h1>
<p>(470 x 400)</p>
</div><!--End Text Area Here-->
<!--Start Footer Here-->
<div id="footer">
<h1>Footer (50 x 1024)</h1>
<p>
Voo2Do Public Task List
Sitemap Public Image
Wireframe Public Image
</p>
</div> <!--End Footer Here-->
</div><!--End Container for whole site-->
<div id="w3"><!--Start HTML 5 Validation Button Here-->
<p>
<img src="images/valid_html5.gif" alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></p></div><!--End HTML 5 Validation Button Here-->
</body>
</html>
And here is my CSS Code for the Navigation Bar:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin: 0;
padding:0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #C0C0C0;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 35px;
width: 254px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility: hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background: #09f;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navmenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
I have tried to put url(images/navbutton.jpg) inside #navMenu and that didnt work. No matter what selection I put the image under, nothing happens. And then on top of all that, I also have to have a rollover image for my buttons that is different from my background image. So i'm having two images. One image will be the button, and the second image will appear when hovered over. I'm going cross-eyed, ugh. Can someone please help me?
note I am not using JS or JQ.
Just add the images in HTML instead of CSS, and then style them.
Assuming you don't want the labels "About Me, Photo Edits, Video Edits, Writing"...Just add add this inside your <a> tags:
<img src="/images/about-me.jpg" alt="About Me">
Then in your CSS just target the image:
#navMenu ul li a img { width: 254px; height: 35px; }
You then just need to add any styles for positioning.
For the hover effect, just add another image right next to the first one, add a class to it and then in CSS apply display: none; to that image. On hover of the <a> tag, just display: none; the first image and display: block; the second image.
You will also need to add relative positioning to the containing <a> tag and absolute positioning to the images so that they can sit on top of each other for when you hover on and off of them.
If you would like more specific info please create a codepen or jsfiddle with your current state of things.
I am using the skeleton framework and am trying make a simple nave bar?
When I try and create a nav-bar div and set the css nav- bar id colour to blue the background won't change. However if i try and change the individual columns the colour will change. Is there a way will a grid framework to create a consistent nav bar on top with out telling each column to be a certain colour. this seems silly.
Also is it possible to have a nav bar that extends past the frameworks 960px length? I would like to have the bar background extend to both sides of the screen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="skeleton.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<div class="container">
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar--->
</div><!---container--->
</html>
CSS:
.container {
margin-top: 50px;
}
#nav-bar {
background-color: blue;
}
#nav {
margin: 13px 0 0 0;
}
#nav ul li {
display: inline;
margin: 0 20px 0 0;
margin-bottom: 130px;
}
#nav a {
text-decoration: none;
color: black
}
#nav a:hover {
text-decoration: underline;
}
https://jsfiddle.net/gp9d7yvz/
the #nav children is floating left that make #nav has no height.
Let append <div style="clear:both"></div> before the closing tag of #nav to make it have height like this fiddle.
https://jsfiddle.net/gp9d7yvz/2/
There is an error on the third line of your CSS code : there is no closing } tag. This causes the following CSS to malfunction. You also forgot to put the closing ";" at the end of your "color:black;" property. If it doesn't work also add a fiddle please.
First question:
Try adding background-color under #nav not under #nav-bar
#nav {
margin: 13px 0 0 0;
background-color: blue;
}
Second question:
All your content is inside a .container with a width of 960px. You cannot get these div's to be 100% in width when they are inside this container. So what you need to is to change your code by moving the header outside of the container.
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar-->
<div class="container">
</div><!---container-->
Here is an example:
https://jsfiddle.net/gp9d7yvz/5/
When using grid 960, can I still have a 100% width header section?
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/