I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>My Approach</li>
<li>Testimonials</li>
<li>Fees</li>
<li>Contact</li>
</ul>
</div><!--holder(navbar)-->
</div><!--navbar-->
<div id="main">main</div><!--main-->
</div><!--container-->
<body>
</html>
CSS:
body {
background-image: url(images/colorful7.jpg);
}
#container {
width: 960px;
float: none;
margin: auto;
height: auto;
}
#header {
height: 350px;
width: 940px;
padding: 10px;
}
#navbar {
background: none;
height:40px;/*40*/
width:960px;
float:right;
}
#navbar #holder {
height:40px;
width:725px;/*725*/
float: right;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float:left;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:600;
color:#660033;
border-bottom:none;
padding:10px;
width:120px;
text-align:center;
display:block;
background:#FFC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
margin-left: 5px;
}
#navbar #holder ul li a:hover {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink:hover {
background:#660033;
color:#white;
text-shadow:1px 1px 1px #000;
}
#main{
background-color: #FFC;
height: 400px;
width: 960px;
padding: 10;
}
Here's a live jsFiddle
Add
clear: both;
to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/
If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.
I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.
delete float:right; from #navbar
#navbar {
background: none;
height:40px;/*40*/
width:960px;
}
http://jsfiddle.net/G26TD/10/
I have made changes to CSS & its working
Working fiddle: http://jsfiddle.net/G26TD/11/
Don't use ID inside a id to style its will slow down CSS
Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
Related
I busy in the process of creating a website and currently seem to be having an issue with logo that keeps hiding its self away.
I'm not to sure what I'm doing wrong I have added my html and css here so that hopefully some one can tell me what I have done wrong please.
I am currently using the html5 boilerplate template as well but have commented out the code in the mean time this is the html part of the code:
<!--header -->
<div id="header">
<div id ="logo">
<h1></h1>
</div>
<div id= "hmenu">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Bar</li>
<li>Specials</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
this is the the css code for the header and logo and menu:
body,#container
{ margin:0;
border:0;
height:100%;
font:Arial, Helvetica, sans-serif;
background:url(../Images/bgImg.png) repeat-x ;
}
body > #container
{
height:auto;
min-height:100%;
}
#header
{
background:url(../Images/hdBgImg.png);
width:100%;
height:115px;
}
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
heigh:142px;
cursor:pointer;
}
#hmenu
{
font-size:38px;
font-family:Tangerine, sans-serif;
font-weight::bold;
text-align:right;
text-shadow:3px 2px 3px #333;
border-radius:8px;
position::absolute;
top:10px;
right:10px;
}
#hmenu ul
{
height:auto;
padding:8px 10px;
margin:0.1em;
}
#hmenu li
{
display:inline;
padding:20px;
}
#hmenu a
{
text-decoration:none;
color:#FFF;
padding:8px 8px 8px 8px;
}
#hmenu a:hover
{
color:#8AAB8E;
back:#fff;
}
when I try to get the logo added then it moves my menu of the header and it some how creates a double logo too.
any help would be great thanks.
previous CSS code:
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
heigh:142px;
cursor:pointer;
}
suggested to fix
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
}
let me share an updated JSFIDDLE link
may you could see what's missing
Change heigh to height:-
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
display:block;
}
#header #logo
{
background:url(Images/1.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
display: inline-block;
}
I have created a menu but cannot solve this issue so I am hoping that someone can help me:(
Problem my last li (anchor tag) inside my menu keeps collapsing underneath my menu and no matter I do problem persists. In Firefox looks fine but in every other browser it is a disaster... I have tried: adding overflow:hidden; to my menuwrapper,tried adding a "clear both" div after last ul tag,added display:inline-block to li tags,and a lot of other approaches to my problem but nothing works:( I didn't set explicit width to my anchor tags (I really don't want to do that!). In Firefox looks like perfect: http://robertpeic.com/kyani/template/menu.png
in other browsers look like this: (notice that there is no blue button because it came bellow my menu) http://robertpeic.com/kyani/template/menu2.png
I dont want this:http://robertpeic.com/kyani/template/menu3.png
Question: How can I prevent my li's from going below my menu even if there is no room? Thanks for your help!!
Link to my menu
Relevant CSS looks like this:
.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}
Html looks like:
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
I added overflow:hidden to .mainmenu and changed the padding for .mainmenu ul li a and it worked for me.
.mainmenu
overflow:hidden;
.mainmenu ul li a
padding:0 22px 0 23px;
I have found that the best way to get a consistent full width menu bar with cross browser compatibility is to force the widths of the LIs. Although it isn't a very forward compatible. it is the best way I have found for maintaining the integrity of the visual design.
Set the width of the mainmenu div to 910px. It will solve your problem and also not show any white spacing
Your entire html will be, as given below. While testing your code,I found, if I omit the first line DocType... the menu gets mangled in IE . In Chrome it works fine. So AFAIK, Your issue was with Doctype.
<!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>
<title></title>
<style>
.mainmenu
{
display: block;
width: 906px;
margin: 0px auto;
height: 42px;
background-image: url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat: repeat-x;
position: relative;
margin-top: -15px;
z-index: 160;
}
.mainmenu ul
{
list-style-type: none;
}
.mainmenu ul li
{
float: left;
}
.mainmenu ul li a
{
text-decoration: none;
display: block;
font-family: "Palatino Linotype" , "Book Antiqua" ,Palatino,FreeSerif,serif;
font-size: 20px;
padding: 0 20px ;
color: #383838;
border-left: 1px solid #dedede;
height: 42px;
line-height: 42px;
z-index: 100;
}
.mainmenu ul li a:hover
{
color: #ffffff;
}
.mainHover
{
background-image: url('http://robertpeic.com/kyani/template/hoverm.png');
display: block;
position: relative;
background-repeat: repeat-x;
z-index: -50;
}
</style>
</head>
<body>
<div class="mainmenu">
<ul>
<li>Pocetna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div>
</body>
</html>
I feel so dumb right now :) To prevent my li from going below I've only wrapped my menu with other div and set that div to overflow hidden and it worked perfect! THX everybody for your help!!!
CSS now looks like:
.mainmenu{
display:block;
width:903px;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.menuwrap{
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
width:900px;
overflow:hidden;
}
HTML looks like this:
<div class="menwrap">
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
</div><!--/menuwrap-->
The following code shows a pop up menu.
<!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>position ul</title>
<style type="text/css">
html, body, div, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main {
position:relative;
width:950px;
height:30px;
margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/
border:2px solid #8c8b4b;
}
#main li {
width:92px;
height:30px;
float:left;
list-style-type:none;
border:2px solid red;
}
#main li a { text-decoration:none; }
#main li ul li {
width:400px;
border:2px solid #8c8b4b;
height:30px;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
.menu2 li a {
color:white;
font-weight:bold;
}
li.menu2 div {
position:absolute;
margin-left:-999em;
padding-top:200px;
}
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
}
li.menu2:hover div { margin:0; }
li.menu2:hover ul li { clear:left; }
ul li ul.rounded-corner {
border:2px solid red;
height: 200px;
width:776px;
background-image:url(../banner/bg_to_sitepoint.gif);
background-repeat:no-repeat;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}
</style>
</head>
<body>
<ul id="main">
<li class="menu1">menu item1</li>
<li class="menu2">menu item2
<div>
<ul class="rounded-corner">
<li>submenu2 item1</li>
<li>submenu2 item2</li>
<li>submenu2 item3</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
The submenu is consisted of a ul entity reesides inside a div.
I would like to change that ul's position within its' ancestor: a div.
I add: "top:100px;" to "li.menu2 ul" selector and see no impact whatsoever. "left" value is no good as well.
Can anyone explain me please why i cannot make that ul repositioned inside its' div?
How can i make it move to other place within the div?
Attached is a screen shot of the present page which i'd like to change.
Thanks a lot !
you can add padding-top: 100px to your CSS
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
padding-top:100px;
}
take a look here if that's what you meant (and what I understood)
http://jsfiddle.net/9NqDd/
give this div
position:relative;
if adding
padding-top:100px;
won't work try
margin-top:100px;
instead.
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;
}
Having a headache with IE. I have an image (24x24) which I'd like to display inline beside my username at the top navigation bar after logging in. It shows nicely in firefox, chrome. problem with IE version 7. The img breaks to another line, and other sibling items in the float back left.
CSS below:
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav .right {
float:right;
}
I have tried many variations but can't seem to fix the problem. I have also tried variations of the css below, but the image still doesn't show nicely inline.
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
display:inline;
position:relative;
top: 0px;
line-height: 35px;
}
The HTML code as follows
<span class="menuitem right">Welcome, <a id="profile" href="http://localhost/usercp">user<img src="avatar24x24.jpg"></a></span>
I altered the css and html source. I only have IE6 to work with, but it looks consistent in Chrome and IE6. Try this:
http://work.arounds.org/sandbox/38/run
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
display:inline-block;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav a { display:inline-block; vertical-align:top; }
.lol { display:inline-block; }
#nav .right {
float:right;
}
</style>
<!--[if lt IE 8]>
<style>
#nav .menuitem a { display:inline; zoom:1; }
#nav .menuitem img { display:inline; zoom:1; border:1px solid red; vertical-align:top; }
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<div class="right menuitem">
<span class="lol">Welcome,</span> <a id="profile" href="http://localhost/usercp">user</a> <a id="profile-img" href="http://localhost/usercp"><img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"></a>
</div>
</div>
</body>
</html>
This snippet suffered from the float:right width calculation bug and I had to use inline-block workaround to get it to work right.
Use a background image instead, like this:
<a style="background-image: url(avatar24x24.jpg);
background-repeat: no-repeat;
background-position: right center; padding-right: 30px;"
id="profile" href="http://localhost/usercp">user</a>
Should position it pretty well, tested it in Opera, IE8 compatability mode and Firefox. To display the entire image, tune the height of the elements around it.
You can use background-position to move the image around inside the surrounding element, there's more information on this at w3schools.com.
Alternatively, you can use margin to get more spacing (margin will create spacing that includes the background image).