CSS: problems with design of menu[solved]
Moderator: General Moderators
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
CSS: problems with design of menu[solved]
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
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
Last edited by raghavan20 on Fri Jan 13, 2006 7:26 pm, edited 1 time in total.
Try this:
Didn't understand why there were 20% in your url to your background images, so I took them out.
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;
}Those are URL-encoded spaces.neophyte wrote: Didn't understand why there were 20% in your url to your background images, so I took them out.
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;
}- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
-
DeprecatedDiva
- Forum Newbie
- Posts: 24
- Joined: Wed Aug 03, 2005 10:47 am
- Location: NW Louisiana
Is this what you had in mind?

without line:

Tested.

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>
Last edited by DeprecatedDiva on Fri Jan 13, 2006 4:42 pm, edited 1 time in total.
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
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....
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....
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
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>
Last edited by wtf on Fri Jan 13, 2006 5:01 pm, edited 1 time in total.
-
DeprecatedDiva
- Forum Newbie
- Posts: 24
- Joined: Wed Aug 03, 2005 10:47 am
- Location: NW Louisiana
But I did.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....
Which version IE?
Is there a difference between Mozilla & Firefox?
Here's a screenshot that shows all three side by side...

-
DeprecatedDiva
- Forum Newbie
- Posts: 24
- Joined: Wed Aug 03, 2005 10:47 am
- Location: NW Louisiana
DOH!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....
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>- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
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>- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
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
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>- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
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>