I am trying to duplicate http://csswizardry.com/demos/centred-nav/ but make the menu at the top of the screen. I have reviewed some of the tutorials on w3schools and a few others but still cant figure out why it is not going to the top to begin with. Below is the my style.css
body {
width:960px;
top:0px;
padding:10px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:102px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
Below is index.html
<!DOCTYPE html>
<html>
<head>
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="topnav">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Anyone see what I am doing wrong?
Change
#nav a {
display:inline-block;
padding: 102px;
}
to
#nav a {
display:inline-block;
padding: 0 102px 0 0;
}
and probably add in this too to remove the right side padding from the final child element
#nav a:last-child {
padding:0;
}
You're applying 102px padding all around the a tags, needs to just be on the right side :)
body {
width:960px;
top:0px;
/*############ change padding from 10px to 0px ##########*/
padding:0px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
There was more padding for #nav a{}
Related
body {
background: gray;
height:100%;
width:100%;
margin:0;
}
header {
background:black;
height:auto;
width:100%;
float:left;
}
header nav {
width:100%;
height:auto;
}
header nav ul{
list-style:none;
height:auto;
width:40%;
float:right;
}
header nav ul li:hover{
background-color:lime;
border-radius:5px;
}
header nav ul li{
color:white;
float:left;
margin-left:5%;
padding:10px 15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="header.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</body>
</html>
i want to make my hover effect background look like the same in picture
i tried editing my code , but it just highlights the text area but not the height of full header. the image posted has also been coded by me , but unable to find the error.
The <ul> tag has a default margin, you can override this in the CSS with margin: 0. This will make the li:hover the full height of the <ul>.
header nav ul{
list-style:none;
height:auto;
width:70%;
float:right;
margin: 0;
}
The default margin is 16px, if you want to preserve the look, add this to the <li> padding: padding:26px 15px;.
https://jsfiddle.net/pjpwea/cn12hjwt/1/
A small change in ul and li
header nav ul {
list-style: none;
height: auto;
width: 40%;
float: right;
margin: 0; // added
}
header nav ul li {
color: white;
float: left;
margin-left: 5%;
padding: 16px 15px; //added
}
Please find code snippet
body {
background: gray;
height:100%;
width:100%;
margin:0;
}
header {
background:black;
height:auto;
width:100%;
float:left;
}
header nav {
width:100%;
height:auto;
}
header nav ul{
list-style:none;
height:auto;
width:40%;
float:right;
margin: 0;
}
header nav ul li:hover{
background-color:lime;
border-radius:5px;
}
header nav ul li{
color:white;
float:left;
margin-left:5%;
padding:26px 15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</body>
</html>
Here is your working fiddle:
https://jsfiddle.net/sesn/jnpvxu9r/1/
header nav ul{
margin: 0px; margin-left: 20px; padding: 0px;
list-style:none;
height:auto;
}
header nav ul li:hover{
background-color:lime;
}
header nav ul li{
color:white;
float:left;
padding:10px 15px;
border-radius: 0px;
}
I am trying to work on just the navigation bar. I am having trouble positioning the unordered list thats in the navbar to position it on the bottom of the header. I tried using overflow hidden and also moving it with padding. Still no luck. How do I do it?
body{
height:100%;
margin: 0;
background-color:#cccccc;
}
#container{
width:100%;
height:auto;
}
#header{
width:100%;
height:50px;
background-color:white;
margin: auto;
}
.logo{
font-weight:bold;
width:8%;
height:20px;
float:left;
font-size: 20px;
}
.navbar{
width:75%;
height:40px;
margin: auto;
}
.navbar ul{
list-style-type: none;
margin:0;
padding:0;
height:20px;
width:18%;
}
.navbar li{
float:left;
padding-right:10px;
display:block;
}
li a{
font-size:18px;
font-family:tahoma;
font-weight:italic;
text-decoration:none;
}
li a:hover{
text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">Hello</div>
<div class="navbar">
<ul>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
remove width in this below class
.navbar ul{
list-style-type: none;
margin:0;
padding:0;
}
demo
Try this. It should help you.
Position navbar relative and Position ul absolute and 48px from top.
.navbar{
width:75%;
height:40px;
margin: auto;
position: relative;
}
.navbar ul{
list-style-type: none;
margin:0;
padding:0;
height:20px;
width:18%;
position:absolute;
top:48px;
}
Codepen
just remove float:left from .logo and margin:auto from .navbar
JSFIddle Demo
If I run the markup as it is now the <li> element is not within the <ul> element.
But if I add this style display:block; to #nav a so the complete #nav a declaration looks like this then the <li> element is within <ul>.
#nav a {
display:block;
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
Can anybody explain why the <li> element is within the <ul> when I add display:block to #nav a?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0;
padding:0;
}
#nav {
float:left;
width:100%;
margin:0;
padding:10px 0 0 46px;
list-style:none;
background:#FFCB2D;
}
#nav li {
float:left;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a {
/* display:block;*/
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
#nav a:hover {
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
</style>
<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
</body>
</html>
I update your code...
see following http://jsfiddle.net/LUzbR/
HTML
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
CSS
body
{
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0px;
padding:0px;
}
#nav
{
float:left;
width:100%;
margin: 0px;
padding:10px 0px 0px 46px;
display: block;
list-style:none;
background:#FFCB2D;
}
#nav li
{
float:left;
display: block;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a
{
/* display:block;*/
margin:0px;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
display: block;
}
#nav a:hover
{
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
You're floating the #nav element on the left, so all <li> elements will appear outside of that container. Try adding overflow: hidden; to your #nav for starters, although there's probably more that could be done to clean up your CSS.
Without adding display: block, a elements are treated as display: inline. As such, when calculating the size of their parents (height is default to auto), the padding of the a element is omitted, while it is included in cases of display: block.
For some reason, my topnav is not the full width of my browser window (it goes almost the full length of the window, but not entirely, on both ends) and also there is a bit of space between it and the top of the browser window.
How do I make it so this is not the case? Here's my code:
#topnav
{
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
}
#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
Here's the HTML:
<div id="topnav">
<ul>
<li>Index</li>
<liInventory</li>
<li>Check-Up</li>
</ul>
</div>
EDIT: Now the bar extends all across the browser, however there is still a gap up at the top.
Also, the gap is only present in Firefox - it does not show up in Chrome. My whole thing is messed up in IE.
to the top problem try this:
#topnav {
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
position:absolute;
top:0;
}
the #topnav -> margin & padding should be deleted since it is 0. The same counts for #topnav ul.
You could incorporate your navigation pane in a div which has a width of 100%. Let me know if that works for you.
-- Edit: This should work in FF/Chrome/IE (just tested it)
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#topnav
{
background-color: #A9A9A9;
margin-bottom: 25;
width:100%;
top:0;
}
#topnav ul
{
list-style-type:none;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
</style>
<head/>
<body>
<div id="topnav">
<ul>
<li>Index</li>
<liInventory</li>
<li>Check-Up</li>
</ul>
</div>
</body>
</html>
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}