I'm trying to learn CSS/HTML at the moment so sorry if there is a really obvious solution to this. I'm just using this to practice what I've learnt at the moment, but it keeps going wrong.
After literally hours of messing around with my code, I've finally got my navigation bar to align to the right, without messing everything else up. However it now won't sit in my "header" div. My basic structure is a header div, and within that a div for the logo (aligned to the left), and a div for the navigation menu (aligned to the right).
However after finally getting them aligned correctly, I can't seem to get my menu div in the right place. Here is a picture illustrating what I mean:
http://i.stack.imgur.com/ot5ls.png
I have temporarily changed the colour of my "header" div to black, to better illustrate my problem. As you can see, my menu is underneath the header div, and also slightly to the right?
Here is my HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<div id="logo">
</div>
<div id="menu">
<ul id="nav">
<li id="home"></li>
<li id="about"></li>
<li id="portfolio"></li>
<li id="contact"></li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS:
body
/* T5 */
{background-color:#fff8d3; font-size:100%;}
body#home_p #home{background:url('home.gif') 0 -45px;}
body#about_p #about{background:url('about.gif') 0 -45px;}
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;}
body#contact_p #about{background:url('contact.gif') 0 -45px;}
#header {
background-color:#000000;
height:45px;
width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
}
#logo {
background-image('logo.gif');
height:45px;
width:181px;
}
#menu {
width:328px;
float:right;
}
#nav
{position:absolute;}
#nav ul{
display: inline;
}
#nav li{
height:45px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
right:0px;
top:0px;
display:inline;
float:right;
}
#nav a
{height:45px;
display:block;
}
#home{left:0x; width:62px;}
#home{background:url('home.gif') 0 0;}
#home a:hover{background: url('home.gif') 0 -45px;}
#about{left:62px;width:65px;}
#about{background:url('about.gif') 0 0;}
#about a:hover{background: url('about.gif') 0 -45px;}
#portfolio{left:147px;width:98px;}
#portfolio{background:url('portfolio.gif') 0 0;}
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;}
#contact{left:265px;width:83px;}
#contact{background:url('contact.gif') 0 0;}
#contact a:hover{background: url('contact.gif') 0 -45px;}
I would really appreciate any help. Thanks in advance.
CSS:
body
{
background-color: #fff8d3;
min-width: 600px;
}
body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about
{
background-position: 0 -45px !important;
}
#header
{
background-color: black;
height: 45px;
width: 90%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
}
#logo
{
background-image: url('logo.gif');
background-color: #fff8d3;
height: 45px;
width: 181px;
}
#nav
{
position: relative;
float: right;
padding: 0;
margin: 0;
}
#nav li
{
height: 45px;
margin: 0 -2px;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#nav li:hover
{
background-position: 0 -45px;
}
#nav a
{
height: 100%;
width: 100%;
position: abosolute;
display: block;
}
#home
{
width: 62px;
background-image: url('home.gif');
}
#about
{
width: 65px;
background-image: url('about.gif');
}
#portfolio
{
width: 98px;
background-image: url('portfolio.gif');
}
#contact
{
width: 83px;
background-image: url('contact.gif');
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<!-- The floating elements have to go before the main content, or they will appear below. -->
<ul id="nav">
<li id="home" title="Home"></li>
<li id="about" title="About"></li>
<li id="portfolio" title="Portfolio"></li>
<li id="contact" title="Contact"></li>
</ul>
<div id="logo"></div>
</div>
</body>
</html>
By setting position:absolute on #nav but not giving it coordinates (left/top), it falls somewhere else. Add a border to it and you'll see. But let's put that aside:
You don't need the absolute position on the menu items. Set each to float:left with a margin
Set position:relative on #header, then anchor #nav to the top right with position:absolute
Since every link shares the same hover state, declare a:hover only once changing the background-position
Use an accessible image replacement method, keep the actual text in your HTML
Here's a scaffold for you to build on: http://jsfiddle.net/Pz3Q3/
I strongly recommend you to read this: http://na.isobar.com/standards/
The width you are setting on your #menu is causing havoc throughout your CSS. Your "#nav ul" isn't doing anything. But ultimately the problem is that your #logo needs to have a float: left;
All the absolute positioning is unnecessary. Use this:
#logo {
background-image('logo.gif');
height:45px;
width:181px;
float: left;
}
#menu {
float: right;
}
#nav li{
list-style:none;
display: inline;
}
Related
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
would you be able to help me to position my navigation - "wrapperNav" completely left in the browser so there would be no gap between the blue navigation and the browser edge?
thanks a lot.
code: http://codepen.io/anon/pen/hKsCe
<header>
<div id="logo"><img src="images/logo.jpg" alt="logo"/></div>
<h1 id="adminHeader">Administrace webu</h1>
<div id="wrapperNav">
<nav>
<ul>
<li>Vložit obrázek</li>
<li>Editovat odkazy</li>
<li>Nahrát soubor</li>
<li>Editovat text</li>
</ul>
</nav>
</div>
</header>
#logo,
#adminHeader {
float: left;
display: inline;
width: 45%;
}
nav li {
list-style: none;
height: 100px;
color: #7E8AA2;
background: #263248;
min-width: 100px;
}
nav li:hover {
background: #000;
}
#wrapperNav {
margin-top: 70px;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
position: fixed;
float: left;
display:block;
}
Fixed, you just needed to add in padding-left: 0px; to nav ul
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Administrace odkazů</title>
<link href="adminstyle2.css" rel="stylesheet" type="text/css">
<style type="text/css">
#logo, #adminHeader {
float: left;
display: inline;
width: 45%;
}
nav li {
list-style: none;
height: 100px;
color: #7E8AA2;
background: #263248;
min-width: 100px;
}
nav li:hover {
background: #000;
}
#wrapperNav {
margin-top: 70px;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
position: fixed;
float: left;
display:block;
}
nav ul {
padding-left:0px;
}
</style>
</head>
<body>
<header>
</header>
<div id="logo"><img src="images/logo.jpg" alt="logo"/></div>
<h1 id="adminHeader">Administrace webu</h1>
<div id="wrapperNav">
<nav>
<ul>
<li>Vložit obrázek</li>
<li>Editovat odkazy</li>
<li>Nahrát soubor "credentials"</li>
<li>Editovat text</li>
</ul>
</nav>
</div>
</body>
</html>
#wrapperNav ul {
margin: 0;
padding: 0;
}
As need to be updated, I did on your example, try it once.
As a best practice you have to use css re-set for better styling. Because HTML tags has its own padding and margins, so using a re-set css, you can re--set them and control by yourself. Use following link for more. http://meyerweb.com/eric/tools/css/reset/
You are missing a reset. For example, put in your css:
* {
padding: 0;
margin: 0;
}
I have changed your code check it.
[http://codepen.io/anon/pen/Dvcgr][1]
so I have this little beginning of a site and I want the top menu to stay on top of anything else. I used position:fixed and now it does stay on top of everything except for one div that display a logo... I tried using z-index but that didn't help. How do I force that header to stay on top without using Js if possible...
The "blackBar" passes on top of the heading but it's the only this that does...
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
<li>Stuff3</li>
<li>Stuff4</li>
<li>Stuff5</li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
Here's the CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}
Add position: relative; z-index: -1; to #logo.
Then, make sure that you add z-index: -2 to #blackbar.
See here: http://jsfiddle.net/davidpauljunior/gGMzD/1/
Instead of position fixed, you can try
position: absolute
top: 0
left: 0
right: 0
z-index: 100
but if you must use position fixed, you can disregard this and see the answer above.
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
This is a follow-up to my last question. Thanks to "mu is too short" I can now demonstrate my problem in a fiddle.
I have the following code.
I want the code to show the list circles to the left of the text but to the right side of the .img DIV. This works in Firefox and in Opera but in IE they are positioned to the very far left. I can't understand why they are positioned differently in the two browsers. Help would be much appreciated.
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
Here is a fiddle
Demo 1
I did a couple of things based on my experience. Most importantly:
I have floated the UL towards left
I have zeroed out all margin/padding on the UL (except padding left so that the bullet stays there)
I have zeroed out all margin/padding on the LI
Note that different browsers have different defaults for margin/padding on UL and LI hence the normalization.
Demo 2
This is almost the same as above except UL is not floated, instead a left-margin is used.
My CSS isn't great, but I think you need something like this:
.fp1 .col ul { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
I can't explain why IE does nonsense like this, save for saying IE does this kind of thing all the time!
The solution is condintional comments.
These allow you to point different css at IE versions only: http://www.quirksmode.org/css/condcom.html
so
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
Would target all IE versions, just as
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Would target IE6 only .
so this should fix your problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style><!--
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0; background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
--></style>
<!--[if IE]>
<style><!--
ul li {
margin-left: 80px;
color: red;
}
--></style>
<![endif]-->
</head>
<body>
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
</body>
</html>