I am trying to show the menu as follows
| HOME |
| GAMES |
| PLAYERS|
|SCHEDULE|
The problem is that my menu is showing like this
| HOME || GAMES |
|PLAYERS||SCHEDULE|
and also.. how can I set the width of it to be consistent?, right now it takes only the length of the word inside of |HOME| but i would like to set this to a fix number.. I am new to css please help
.#tabshor {
width:100%;
font-size:50%;
line-height:5px;
}
#tabshor ul {
margin:-30px;
padding:150px 0px 0px 0px;
line-height:10px;
}
#tabshor li {
display:block;
margin:0;
padding:5;
}
#tabshor a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabshor a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:10px 20px 20px 10px;
color:#FFF;
}
#tabshor a span {float:none;}
#tabshor a:hover span {
color:#FFF;
}
#tabshor a:hover{
background-position:0% -42px;
}
#tabshor a:hover span {
background-position:100% -42px;
}
div#tabshor>ul>li {
display:block;
position:relative;
float:left;
list-style:none;
left:50px;
}
div#tabshor>ul>li ul{
position:absolute; display:none;
list-style:none;
left:100px;
}
div#tabshor>ul>li>a{
display:block;
}
div#tabshor>ul>li:hover ul{
display:block;
z-index:500;
width:50%;
margin:10px 0px 0px -20px;
width:100%;
}
div#tabshor ul li ul a{
display:block;
width: 50px;
}
div#tabshor ul li a:hover{
background:red;
font-style: oblique;
}
HERE IS THE HTML
<div id="left_banner" class="divleftside">
<div id="tabshor">
<ul>
<li><span>HOME</span></li>
<li><span>GAMES</span></li>
<li><span>PLAYERS</span>
<ul>
<li><span>PLAYERS</span></li>
<li><span>SOCCER</span></li>
<li><span>BASKETBALL</span></li>
</ul>
</li>
<li><span>COURTS</span></li>
<li><span>REFEREES</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
<li><span>REGISTER</span></li>
</ul>
</div>
</div>
Try:
Remove float: left from div#tabshor>ul>li
Remove float: left from #tabshor a
Add width: 170px; to div#tabshor>ul>li>a
Cleaning up your CSS might lead to less headaches. Also starting with an example like this vertical rollover list or this nested vertical rollover list might be easier.
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'm having some issues trying to style a menu in chrome. The menu looks fine in ltr mode, but in right to left mode it breaks in Chrome.
I have a fiddle of this here:
http://jsfiddle.net/YKger/
In firefox, the menu in ltr is "one - two - three", in rtl "three - two -one". It chrome it is always rendered as "one-two-three".
Any idea why this is happening, or how I can style this without the first 'li' spanning the whole menu?
Thanks,
Also, here's the code:
<!doctype html>
<head>
<style>
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline;
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first">One<span id='tail1'> </span>
<span id='tail2'></span></li>
<li class="menu-1014">Two<span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active">Three<span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>
</html>
i think thats the easy way -
you should make both of your:
ul, li
{
direction:rtl;
}
Try this:
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline-block;
}
I am trying to create a site using html,css,php & MySQL. I am trying to design a liquid layout, with a centred navigation menu, within the header. In google chrome, the design works well. but in firefox and IE, the end of list items drop down to a new line. How can I fix this issue?
I am attaching the code snippets below:
css style for menu:
.menu {
float:left;
width:100%;
background-image:url(../images/menu_bg.gif);
background-repeat:repeat-x;
min-width:750px;
min-height:81px;
overflow:hidden;
position:relative;
}
.menu ul{
clear: both;
float:left;
list-style:none;
text-align:center;
left:50%;
position:relative;
display:inline-block;
white-space: nowrap;
}
.menu > ul > li {
float:left;
right: 50%;
position:relative;
list-style:none;
}
.menu > ul > li > a {
display:block;
color:#ff3;
text-decoration:none;
background:transparent;
padding:0 0 0 10px;
}
.menu > ul > li > a b {
display:block;
background:transparent;
padding:0 10px 0 10px;
}
**********************************
css styles for Header:
#header {
background-image:url(../images/header_bg.gif);
background-repeat:repeat-x;
height:160px;
min-width:750px;
}
#logo {
background-image:url(../images/logo.gif);
background-position:10px 10px;
background-repeat:no-repeat;
height:79px;
}
*******************************************************
body:
<div id="header">
<div id="logo"></div>
<div class="menu">
<ul>
<li class="current"><b>Home</b></li>
<li><b>About Us</b></li>
<li><b>Services</b></li>
<li><b>Tech Shop</b></li>
<li><b>Downloads</b></li>
<li><b>Knowledge Base</b></li>
<li><b>Contact Us</b></li>
<li><b>Live Help</b></li>
</ul>
</div>
</div>
********************************
Remove left:50%; and right:50%; They are meaningless
I am having difficulty in getting a menu list to float in the center of it's parent container. Here is the address of the page: simplekitchenandbath.com/staging/
And the necessary code snippets:
div#wrapper {
width:1100px;
margin:0 auto;
padding:0 0 50px 0;
}
div#content-main {
background-color:#000;
width:1024px;
margin:0 auto;
}
nav {
background-color:#000;
height:30px;
}
div#nav-container {
width:720px;
margin:0 auto;
}
ul#nav { position:relative; }
ul#nav li { float: left; zoom: 1; list-style-type:none; margin:0; border-bottom:1px solid #FFF; }
ul#nav a:hover { color:#DDD; text-decoration:none; }
ul#nav a:active { color:#DDD; }
ul#nav li a { display:block; padding:0 10px 0 0; color:#FFF; text-transform:uppercase; }
ul#nav li:last-child a { padding-right:0; }
ul#nav li.hover, ul#nav li:hover { position: relative; }
Make the width smaller and to align it in the center place it inside the container of the element and set its margin to 0 auto; try responsive webdesign with css3 media queries and targeting two different monitor size... because the site on 780px monitor it has the slider to go horizontally.... so basically:
<div class="container">
... some code ...
</div>
css:
.container {
width: 960px;
margin: 0 auto;
}
Thanks for reading... Love to hear some response on my answer.
div#nav-container {
width:575px;
margin:0 auto;
}
the width is too big on #nav-container. set it to 575px !
Use display:inline-block on the #nav element, and text-align:center on the #nav-container
I used Son of Suckerfish dropdown menu on my website. It looks fine in all browsers (including IE8 and above) but when in IE7, when I hover on the button, the dropdown menu does not appear below the button. Instead, it appears to the right of the button as per the image shown below.
I really don't know why IE7 is still alive but yes, clients are still using it.
Here's the image: http://i.stack.imgur.com/w1L95.png
Here is my HTML
<div id="menutop">
<div id="menu">
<ul id="drops">
<li>Home</li>
<li>Details
<ul class="drop">
<li>> Location</li>
<li>> Connectivity</li>
<li>> Technology</li>
<li>> Sustainability</li>
<li>> Community</li>
</ul>
</li>
<li>Choices
<ul class="drop">
<li>> Bungalow</li>
<li>> Semi-detached</li>
<li>> Town House</li>
<li>> Terrace</li>
<li>> Condominium</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Here is my CSS
#menutop{
background:#003c57 url(images/menubg.jpg);
background-repeat:repeat-x;
height:35px;
width:auto;
}
#menu{
margin:0 0 0 150px;
}
#menu a.home, #menu a.details, #menu a.choices{
float:left;
background:url(images/menubuttons.jpg) no-repeat;
height:35px;
text-indent:-99999px;
}
#menu a.home{
background-position: 0px 0px;
width:141px;
}
#menu a.details{
background-position: -141px 0px;
width:290px;
}
#menu a.choices{
background-position: -431px 0px;
width:290px;
}
#menu a.home:hover{
background-position:-0px -35px;
}
#menu a.details:hover{
background-position:-141px -35px;
}
#menu a.choices:hover{
background-position:-431px -35px;
}
#menu a#active1{
background-position:-0px -70px;
}
#menu a#active2{
background-position:-141px -70px;
}
#menu a#active3{
background-position:-431px -70px;
}
#drops, #drops ul {
padding:0;
margin:0;
clear:both;
float:left;
width:inherit;
list-style:none;
}
#drops ul.drop {
background:#000;
opacity:0.9;
padding:5px;
width:280px;
clear:both;
margin-top:35px;
z-index:999;
}
#drops ul.drop li {
width:inherit;
clear:both;
padding:5px 0 5px 0;
}
#drops ul.drop a {
color:#fff;
font-size:16px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
}
#drops ul.drop li:hover {
background-color:#003c57;
}
#drops a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:150px;
}
#drops li {
float: left;
/*width: 10em;*/
}
#drops li ul {
position: absolute;
width: 10em;
left:-999em;
}
#drops li:hover ul {
left:auto;
}
#drops li:hover ul, #drops li.sfhover ul {
left:auto;
}
A wild guess could be some issue with the negative margins, often having different behaviors between browsers, and also could be some width, as IE7 and 6 had problems with different margins and paddings rather than what they should have. Sometimes I have had this problem and was related with the position:absolute atribute (you have it somewhere, specially when using margins). I have not reviewed your entire code, but in several cases I got it solved doing a parent have position relative instead of absolute, and sometimes even combinations of both...
This is due to the width of your menu items. The dropdown will move e.g. 100px to the right if you have one menu item with a width of 100px. Use a left and right padding to avoid this problem in IE7.