Page 1 of 1
CSS: problems with design of menu[solved]
Posted: Fri Jan 13, 2006 7:39 am
by raghavan20
There are a few problems I am facing now with design of a menu
Look
here to see the menu
The problemswith IE is,
1. the ul inside ul is tabbed
The problems with Mozilla are,
1. Each li item's background image is stretched which should not happen
2. When I start a sub menu with a new ul, the li has a blank line
3. The sub menu ul is tabbed
Posted: Fri Jan 13, 2006 8:45 am
by neophyte
Try this:
Code: Select all
div.menus ul{
list-style:none; margin-left:0px; padding-left: 0px
}
div.menus ul li{
background-image:url(menu/design/model1.png); width:120px; margin-left: 0px; padding-left:20px; color:#FF0FFF; margin-bottom:1px;
}
div.menus ul li ul li{
background-image:url(menu/design/model2.jpg); width:100px; margin-left:0px; padding-left:0px; color:#000000;
}
Didn't understand why there were 20% in your url to your background images, so I took them out.
Posted: Fri Jan 13, 2006 9:24 am
by foobar
neophyte wrote:
Didn't understand why there were 20% in your url to your background images, so I took them out.
Those are URL-encoded spaces.
Try this:
Code: Select all
div.menus ul{
list-style:none; margin-left:0px; padding-left: 0px
}
div.menus ul li{
background-image:url(menu design/model1.png); width:120px; margin-left: 0px; padding-left:20px; color:#FF0FFF; margin-bottom:1px;
}
div.menus ul li ul li{
background-image:url(menu design/model2.jpg); width:100px; margin-left:0px; padding-left:0px; color:#000000;
}
Posted: Fri Jan 13, 2006 10:13 am
by neophyte
Figured. I guess what I meant then was get rid of the space in your directory name.
Posted: Fri Jan 13, 2006 1:27 pm
by raghavan20
guys both of your codes are yielding the same result again.
neophyte, mozilla is finding it hard to locate directories whose names are separated by space and it works only if they are encoded.
Please work with images provided in the example, only then you would know what exactly is wrong....
Posted: Fri Jan 13, 2006 4:29 pm
by DeprecatedDiva
Is this what you had in mind?
without line:
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
a {text-decoration:none;}
a.menus{ background-image:url(../images/model1.png); width:120px; padding:0 20px; color:#FF0FFF; margin-bottom:1px; }
a.menus ul{ display:block; text-align:center; list-style:none; margin-left:0px; }
a.submenus{ background-image:url(../images/model2.jpg); width:120px; margin-left:0px; padding:0 20px; color:#000000; }
ul {list-style-type:none;}
</style>
</head>
<body>
<div>
<ul>
<li><a class = "menus" href="#nogo">main menu 1</a></li>
<li><a class = "menus" href="#nogo">main menu 2</a></li>
<ul>
<li><a class = "submenus" href="#nogo">sub menu 1</a></li>
<li><a class = "submenus" href="#nogo">sub menu 2</a></li>
</ul>
<li><a class = "menus" href="#nogo">main menu 3</a></li>
<li><a class = "menus" href="#nogo">main menu 4</a></li>
</ul>
</div>
</body>
</html>
Tested.
Posted: Fri Jan 13, 2006 4:38 pm
by raghavan20
I think you should taken the snapshots from IE.
I do not see the difference between two images except a text decoration underline goes under every list item.
I do not want the sub menu to be moved right or tabbed; i want in line horizontally with the main menu li
You should view the same menu in Mozilla to see the real problems....
Posted: Fri Jan 13, 2006 5:00 pm
by wtf
Few things...
I'd probably keep my image type consistent, maybe you have a reason not sure
You needed this background-repeat:no-repeat;
Your sub image was 150px; I cut it down to 120 and everything looks consistent.
if you nest UL/OL it'll always be tabbed
Code: Select all
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<title>
Untitled Document
</title>
<style>
div.menus ul{
display:block;
list-style:none;
margin-left:0px;
}
.main{
background-image:url(menu%20design/model1.png);
background-repeat:no-repeat;
width:120px;
padding-left:20px;
color:#FF0FFF;
margin-bottom:1px;
}
.sub{
background-image:url(menu%20design/model2.jpg);
background-repeat:no-repeat;
width:120px;
margin-left:0px;
padding-left:20px;
color:#000000;
}
</style>
</head>
<body>
<div class="menus">
<ul>
<li class="main"> main menu 1 </li>
<li class="main"> main menu 2 </li>
<li class="sub"> sub menu 1 </li>
<li class="sub"> sub menu 2 </li>
<li class="main"> main menu 3 </li>
<li class="main"> main menu 4 </li>
</ul>
</div>
</body>
</html>
Posted: Fri Jan 13, 2006 5:01 pm
by neophyte
padding-left: 0;
margin-right:0;
If anything does it that will.
You can also try negative numbers in the margin.
Good luck
Posted: Fri Jan 13, 2006 5:07 pm
by DeprecatedDiva
raghavan20 wrote:I think you should taken the snapshots from IE.
I do not see the difference between two images except a text decoration underline goes under every list item.
I do not want the sub menu to be moved right or tabbed; i want in line horizontally with the main menu li
You should view the same menu in Mozilla to see the real problems....
But I did.
Which version IE?
Is there a difference between Mozilla & Firefox?
Here's a screenshot that shows all three side by side...

Posted: Fri Jan 13, 2006 5:30 pm
by DeprecatedDiva
raghavan20 wrote:I think you should taken the snapshots from IE.
I do not see the difference between two images except a text decoration underline goes under every list item.
I do not want the sub menu to be moved right or tabbed; i want in line horizontally with the main menu li
You should view the same menu in Mozilla to see the real problems....
DOH!
Okay this code does what you want:
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
a {text-decoration:none;}
a.menus{ background-image:url(../images/model1.png); width:120px; padding:0 20px; color:#FF0FFF; margin-bottom:1px; }
a.menus ul{ display:block; text-align:center; list-style:none; margin-left:0px; }
a.submenus{ background-image:url(../images/model2.jpg); width:140px; margin-left:-40px; padding:0 27px 0 20px; color:#000000; }
ul {list-style-type:none;}
</style>
</head>
<body>
<div>
<ul>
<li><a class = "menus" href="#nogo">main menu 1</a></li>
<li><a class = "menus" href="#nogo">main menu 2</a></li>
<ul>
<li><a class = "submenus" href="#nogo">sub menu 1</a></li>
<li><a class = "submenus" href="#nogo">sub menu 2</a></li>
</ul>
<li><a class = "menus" href="#nogo">main menu 3</a></li>
<li><a class = "menus" href="#nogo">main menu 4</a></li>
</ul>
</div>
</body>
</html>
The images really should be the same type, either png or jpg
Posted: Fri Jan 13, 2006 7:23 pm
by raghavan20
Just made it a little organised and removed certain elements which are not really necessary. I came across examples which uses a tag's block properly to produce effects. I think the same could be done with li and margin-left in minus.
I still do not understand two things...
1. How did you calculate negative margin to -40
2. How did you put padding value as 27px for a:submenus
Is there any kind of calculation available or you jus' used trial and error method....any way that is really a good work...thanks very much
There is actually no reason why I am using png and jpg. I just made one image using png and was trying with it and the other image I got from the Internet. I have to anyway convert both of them to gif later on.
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
div.menu ul {
list-style-type:none;
}
div.menu a{
text-decoration:none;
}
div.menu a:hover{
text-decoration:underline;
}
a.menus{
background-image:url(menu%20design/model1.png); width:120px; padding:0px 20px; color:#FF0FFF;
margin-bottom:1px;
}
a.submenus{
background-image:url(menu%20design/model2.jpg); width:120px; margin-left:-40px;
padding:0 27px 0 20px; color:#000000;
}
</style>
</head>
<body>
<div class = 'menu'>
<ul>
<li><a class = "menus" href="#nogo">main menu 1</a></li>
<li><a class = "menus" href="#nogo">main menu 2</a></li>
<ul>
<li><a class = "submenus" href="#nogo">sub menu 1</a></li>
<li><a class = "submenus" href="#nogo">sub menu 2</a></li>
</ul>
<li><a class = "menus" href="#nogo">main menu 3</a></li>
<li><a class = "menus" href="#nogo">main menu 4</a></li>
</ul>
</div>
</body>
<s/html>
Posted: Fri Jan 13, 2006 7:31 pm
by raghavan20
There is only one problem...
while writing ul...we can use any of these syntaxes 1 or 2 but syntax 1 which works for menus and avoids an extra line I think is not XHTML valid
Code: Select all
syntax 1:
<ul>
<li></li>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
</ul>
syntax 2:
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
Posted: Fri Jan 13, 2006 7:41 pm
by raghavan20
I tried with li again instead of using a tag, it worked...but I had to include an IE fix but even though I have did to be honest...I do not know why the browsers are acting differently
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
div.menus{
margin-left:50px;
}
div.menus ul{
list-style:none; margin-left:0px; padding-left: 0px
}
div.menus ul li{
background-image:url(menu%20design/model1.png); width:100px; margin-left: 0px; padding-left:20px;
color:#FF0FFF; margin-bottom:1px;
}
div.menus ul ul li{
background-image:url(menu%20design/model2.jpg); width:100px; margin-left:-20px; padding-left:20px;
color:#000000;
}
div.menus>ul>ul>li{
margin-left:0px; /* This fix is needed*/
}
</style>
</head>
<body>
<div class = "menus">
<ul>
<li>main menu 1</li>
<li>main menu 2</li>
<ul>
<li>sub menu 1</li>
<li>sub menu 2</li>
</ul>
<li>main menu 3</li>
<li>main menu 4</li>
</ul>
</div>
</body>
</html>