CSS: problems with design of menu[solved]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

CSS: problems with design of menu[solved]

Post 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
Last edited by raghavan20 on Fri Jan 13, 2006 7:26 pm, edited 1 time in total.
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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.
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post 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;
}
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post by neophyte »

Figured. I guess what I meant then was get rid of the space in your directory name.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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....
DeprecatedDiva
Forum Newbie
Posts: 24
Joined: Wed Aug 03, 2005 10:47 am
Location: NW Louisiana

Post by DeprecatedDiva »

Is this what you had in mind?

Image

without line:


Image

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.
Last edited by DeprecatedDiva on Fri Jan 13, 2006 4:42 pm, edited 1 time in total.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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....
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post 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>
Last edited by wtf on Fri Jan 13, 2006 5:01 pm, edited 1 time in total.
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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
DeprecatedDiva
Forum Newbie
Posts: 24
Joined: Wed Aug 03, 2005 10:47 am
Location: NW Louisiana

Post 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...

Image
DeprecatedDiva
Forum Newbie
Posts: 24
Joined: Wed Aug 03, 2005 10:47 am
Location: NW Louisiana

Post 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
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

Image

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>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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
Image

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>
Post Reply