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;
}
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;
}
In my header I have a logo with an image sprite on both sides of the image. I am trying to center them horizontally to the top of the browser. The header has to be positioned:fixed.
HTML:
<div id="headerbg">
<div id="header">
<ul id="navleft">
<li id="navhome"></li>
<li id="navnew"></li>
<li id="navbrands"></li>
</ul>
<div id="logo"></div>
<ul id="navright">
<li id="navsales"></li>
<li id="navlocation"></li>
<li id="navcontact"></li>
</ul>
</div>
</div>
CSS:
#headerbg
{
background-color: #ffffff;
width:100%;
height:50px;
z-index: 1000;
position: fixed;
top: 0;
left:0;
}
#header
{
width: 800px;
height: 100px;
margin: auto;
}
#logo
{
width:200px;
height:100px;
background:url(images/logo_small.jpg);
display:inline-block;
z-index: 2000;
}
/* NAVIGATION */
#navleft
{
position:relative;
}
#navleft li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navleft li, #navleft a
{
height:50px;
display:block;
}
#navright
{
position:relative;
}
#navright li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navright li, #navright a
{
height:50px;
display:block;
}
I left out CSS for the hover images of the sprite to shorten my post. I appreciate any help I can get. Thanks!
You already know the width of the header and the logo. You then knnow that each ul should have a width: 300px; and just set them all to float:left; or display:inline;
#header ul {
width:300px;
}
#header {
display:inline-block;
*display:inline; /* IE hack */
}
EDIT
You could also apply specific CSS styles for psuedo element e.g.:
#header ul:first-child {
width:300px;
position:relative;
top:0;
left:0;
}
#header ul:last-child {
width:300px;
position:relative;
right:0;
left:0;
}
I have retyped your code to fit your needds (well what I assume is your needs)
see fiddle here http://jsfiddle.net/aLQYS/
And for the future, I will recommend you to use classes instead of Id's. Not only you save the ID tag for something more important such as javascript, but you also have the possibility of reusing your css styles by adding multiple classes to one object e.g.
CSS
.shadow {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.box {
width:200px;
height:200px;
}
HTML
<div class="shadow box"></div>
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.
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).
I'm better about getting things to look good in IE8, FF, and Safari, but IE7 still throws curve balls at me...
Please check out this page and scroll down below the nav bar:
http://rattletree.com/instruments.php
It should become obvious when viewing in FF vs IE7. For some reason the formatting of the list is pushing the list items down on the page...
any tips?
<ul class="instrument">
<li class="imagebox"><img src="/images/stuff.jpg" width="247" height="228" alt="Matepe" /></li>
<li class="textbox"><h3>Matepe</h3><p>This text should be to the right of the image but drops below the image in IE7</p></li>
</ul>
css:
ul.instrument {
text-align:left;
display:inline-block;
}
ul.instrument li {
list-style-type: none;
display:inline-block;
}
li.imagebox {
display:inline;
margin:20px 0;
padding:0px;
vertical-align:top;
}
li.imagebox img{
border: solid black 1px;
}
li.textbox {
display:inline;
}
li.textbox p{
margin:10px;
width:340px;
display:inline-block;
}
basically this line ul.instrument li { is overiding li.imagebox etc.
so what you can do is this:
CSS:
ul.instrument {
text-align:left;
display:inline-block;
}
ul.instrument li {
list-style-type: none;
display:inline-block;
}
ul.instrument li.imagebox {
display:inline;
margin:20px 0;
padding:0px;
vertical-align:top;
}
ul.instrument li.imagebox img{
border: solid black 1px;
}
ul.instrument li.textbox {
display:inline;
}
ul.instrument li.textbox p{
margin:10px;
width:340px;
display:inline-block;
}
Basically what I did, instead of declaring li.imagebox I used ul.instrument li.imagebox
so that it won't be overide by this declaration ul.instrument li
Hope this helps :)
Edit, here's another take but this approach is different it uses float
CSS:
ul, li, h3, p { margin: 0; padding: 0 }
ul, li { list-style: none }
ul.instrument { overflow: hidden}
ul.instrument li, ul.instrument li img { float: left; }
ul.instrument li.imagebox { margin:20px 0; }
ul.instrument li.imagebox img { border: 1px solid black }
ul.instrument li.textbox p { margin: 10px; width: 340px }
but this one works in all browsers, I promise :D. Basically the first 2 lines resets the elements you used so that it will look the same in all browser.