Jump to content

CSS drop-line menu

- - - - -
Started by toldigabor, Jun 29 2010 09:28 PM

This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1
toldigabor
Posted 29 June 2010 - 09:28 PM

toldigabor

    Newbie

  • Members
  • Pip
  • 9 posts
I have a CSS drop-line menu (tableless, without JavaScript).

But, encountered some problems:
- The text does not appear in the middle of the menu (the menuitems singleline, multiline - varied)
- The submenu does not appear under the main menu, but well above.

How to solve these problems?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dropline menu</title>

<style type="text/css">
#navigation MENU {
padding: 0px;
margin: 0px 0px 0px 0px;
}

#navigation MENU LI {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#navigation MENU LI A {
width: 98px;
height: 54px;
display: block;
text-decoration: none;
text-align: center;
background: url(http://lh6.ggpht.com.../mainmenu.gif);
}

#navigation MENU LI A:hover { background: url(http://lh3.ggpht.com...ctivemenu.gif); }

#navigation MENU LI:hover MENU { display:block; }

#navigation MENU MENU {
position: absolute;
top: 54px;
display:none;
width:auto;
height:auto;
}
#navigation MENU MENU LI{
float: left;
width: 98px;
height: 54px;
}
#navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com...gvc/submenu.gif) }


#header { width: 800; height: 200; background-color: paleturquoise; }
</style>
</head>

<body>
<DIV id=header>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
</DIV>
<DIV id=navigation>
<MENU>
<LI><A href=cim.html>Cím szerinti bontás</A></LI>
<LI><A href=datum.html>Dátum szerinti bontás</A></LI>
<LI><A href=kategoria.html>Kategóriák szerinti bontás</A></LI>
<LI><A href=irasok.html>Keresztény írások</A>
<MENU>
<LI><A href=ahitatok.html>Áhitatok minden napra</A></LI>
<LI><A href=konyvek_novellak.html>Könyvek novellák</A></LI>
<LI><A href=versek_idezetek.html>Versek idézetek</A></LI>
</MENU>
</LI>
<LI><A href=linkek.html>Keresztény linkek</A>
<MENU>
<LI><A href=filmek_videok.html>Bibliával kapcsolatos</A></LI>
<LI><A href=jatek.html>Gyülekeztek honlapjai</A></LI>
<LI><A href=kepernyovedo.html>Keresztény oldalak</A></LI>
</MENU>
</LI>
<LI><A href=multimedia.html>Multimédiás szolgáltatások</A>
<MENU>
<LI><A href=filmek_videok.html>Filmek videók</A></LI>
<LI><A href=jatek.html>Legyen Ön is misszionárius</A></LI>
<LI><A href=webalbum.html>Webalbum</A></LI>
<LI><A href=kepernyovedo.html>Keresztény képernyővédő</A></LI>
</MENU>
</LI>
<LI><A href=tamogatas_adomanyozas.html>Támogatás adományozás</A></LI>
<LI><A href=fontos_tudnivalok.html>Fontos tudnivalok</A></LI>
<LI><A href=adminisztracio.html>Adminisztráció</A></LI>
</MENU>
</DIV>

</body>
</html>

#2
CommittedC0der
Posted 30 June 2010 - 05:44 AM

CommittedC0der

    Speaks fluent binary

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,565 posts
Can't you change one of the margin's in there to affect it? Which brings me to another point, please post you code in between [code.]Code Here[./code] tags(With out the periods), because its hard to read it like it is now. ;)
A man can be defined by what he does when no one is looking.
Science is only an educated theory, which we cannot disprove.

#3
toldigabor
Posted 30 June 2010 - 05:53 AM

toldigabor

    Newbie

  • Members
  • Pip
  • 9 posts
OK. Thank you

[code.]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dropline menu</title>

<style type="text/css">
#navigation MENU {
padding: 0px;
margin: 0px 0px 0px 0px;
}

#navigation MENU LI {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#navigation MENU LI A {
width: 98px;
height: 54px;
display: block;
text-decoration: none;
text-align: center;
background: url(http://lh6.ggpht.com...mA/mainmenu.gif);
}

#navigation MENU LI A:hover { background: url(http://lh3.ggpht.com.../activemenu.gif); }

#navigation MENU LI:hover MENU { display:block; }

#navigation MENU MENU {
position: absolute;
top: 54px;
display:none;
width:auto;
height:auto;
}
#navigation MENU MENU LI{
float: left;
width: 98px;
height: 54px;
}
#navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com...gvc/submenu.gif) }


#header { width: 800; height: 200; background-color: paleturquoise; }
</style>
</head>

<body>
<DIV id=header>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
Header Logo<BR>
</DIV>
<DIV id=navigation>
<MENU>
<LI><A href=cim.html>Cím szerinti bontás</A></LI>
<LI><A href=datum.html>Dátum szerinti bontás</A></LI>
<LI><A href=kategoria.html>Kategóriák szerinti bontás</A></LI>
<LI><A href=irasok.html>Keresztény írások</A>
<MENU>
<LI><A href=ahitatok.html>Áhitatok minden napra</A></LI>
<LI><A href=konyvek_novellak.html>Könyvek novellák</A></LI>
<LI><A href=versek_idezetek.html>Versek idézetek</A></LI>
</MENU>
</LI>
<LI><A href=linkek.html>Keresztény linkek</A>
<MENU>
<LI><A href=filmek_videok.html>Bibliával kapcsolatos</A></LI>
<LI><A href=jatek.html>Gyülekeztek honlapjai</A></LI>
<LI><A href=kepernyovedo.html>Keresztény oldalak</A></LI>
</MENU>
</LI>
<LI><A href=multimedia.html>Multimédiás szolgáltatások</A>
<MENU>
<LI><A href=filmek_videok.html>Filmek videók</A></LI>
<LI><A href=jatek.html>Legyen Ön is misszionárius</A></LI>
<LI><A href=webalbum.html>Webalbum</A></LI>
<LI><A href=kepernyovedo.html>Keresztény képernyővédő</A></LI>
</MENU>
</LI>
<LI><A href=tamogatas_adomanyozas.html>Támogatás adományozás</A></LI>
<LI><A href=fontos_tudnivalok.html>Fontos tudnivalok</A></LI>
<LI><A href=adminisztracio.html>Adminisztráció</A></LI>
</MENU>
</DIV>

</body>
</html>
[./code]

#4
toldigabor
Posted 30 June 2010 - 05:54 AM

toldigabor

    Newbie

  • Members
  • Pip
  • 9 posts 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>

<head>

	<title>Dropline menu</title>

	

	<style type="text/css">

		#navigation MENU {

padding: 0px;

margin: 0px 0px 0px 0px;

}


#navigation MENU LI {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}


#navigation MENU LI A {

width: 98px;

height: 54px;

display: block;

text-decoration: none;

text-align: center;

background: url(http://lh6.ggpht.com/_W2DEFOtz8LQ/TCrNcx6osDI/AAAAAAAAADg/pgBiHgdnpmA/mainmenu.gif);

}


#navigation MENU LI A:hover { background: url(http://lh3.ggpht.com/_W2DEFOtz8LQ/TCrNdDTw1eI/AAAAAAAAADo/yA10-qfxNr4/activemenu.gif); }


#navigation MENU LI:hover MENU { display:block; }


#navigation MENU MENU {

position: absolute;

top: 54px;

display:none;

width:auto;

height:auto;

}

#navigation MENU MENU  LI{

float: left;

width: 98px;

height: 54px;

}

#navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com/_W2DEFOtz8LQ/TCrNdMPZQiI/AAAAAAAAADk/YBwpyylogvc/submenu.gif) }



#header { width: 800; height: 200; background-color: paleturquoise; }

	</style>

</head>


<body>

<DIV id=header>

 Header Logo<BR>

 Header Logo<BR>

 Header Logo<BR>

 Header Logo<BR>

 Header Logo<BR>

 Header Logo<BR>

 Header Logo<BR>

 Header Logo<BR>

</DIV>

   <DIV id=navigation>

    <MENU>

	 <LI><A href=cim.html>Cím szerinti bontás</A></LI>

     <LI><A href=datum.html>Dátum szerinti bontás</A></LI>

	 <LI><A href=kategoria.html>Kategóriák szerinti bontás</A></LI>

	 <LI><A href=irasok.html>Keresztény írások</A>

      <MENU>

       <LI><A href=ahitatok.html>Áhitatok minden napra</A></LI>

       <LI><A href=konyvek_novellak.html>Könyvek novellák</A></LI>

       <LI><A href=versek_idezetek.html>Versek idézetek</A></LI>

      </MENU>

     </LI>

     <LI><A href=linkek.html>Keresztény linkek</A>

	  <MENU>

       <LI><A href=filmek_videok.html>Bibliával kapcsolatos</A></LI>

       <LI><A href=jatek.html>Gyülekeztek honlapjai</A></LI>

	   <LI><A href=kepernyovedo.html>Keresztény oldalak</A></LI>

      </MENU>

	 </LI>

	 <LI><A href=multimedia.html>Multimédiás szolgáltatások</A>

      <MENU>

       <LI><A href=filmek_videok.html>Filmek videók</A></LI>

       <LI><A href=jatek.html>Legyen Ön is misszionárius</A></LI>

       <LI><A href=webalbum.html>Webalbum</A></LI>

	   <LI><A href=kepernyovedo.html>Keresztény képernyővédő</A></LI>

      </MENU>

     </LI>

     <LI><A href=tamogatas_adomanyozas.html>Támogatás adományozás</A></LI>

     <LI><A href=fontos_tudnivalok.html>Fontos tudnivalok</A></LI>

	 <LI><A href=adminisztracio.html>Adminisztráció</A></LI>

    </MENU>

   </DIV>


</body>

</html>

#5
solartic
Posted 30 June 2010 - 06:07 PM

solartic

    Learning Programmer

  • Members
  • PipPipPip
  • 95 posts
Well to make your submenu show at the bottom see the code comment below

#navigation MENU MENU {
position: absolute;
top: 54px;// change this to something like top: 220px;
display:none;
width:auto;
height:auto;

#6
toldigabor
Posted 30 June 2010 - 09:12 PM

toldigabor

    Newbie

  • Members
  • Pip
  • 9 posts
Thank you very much! :w00t:

And the other problem?
The text does not appear in the middle of the menu (the menuitems singleline, multiline - varied)
The single-line menu item is usually solved by specifying the line-height parameter. And it is a value as the height parameter.
But this is can not be used for multi-line menuitems.

#7
ferovac
Posted 30 June 2010 - 10:15 PM

ferovac

    Learning Programmer

  • Members
  • PipPipPip
  • 84 posts
around the text you want in the center <center></center> well if you want it to be in single line you need to ider strech your container in CSS or make shorter lines or reduce the font of your text

#8
toldigabor
Posted 01 July 2010 - 09:25 PM

toldigabor

    Newbie

  • Members
  • Pip
  • 9 posts

ferovac said:

around the text you want in the center <center></center> well if you want it to be in single line you need to ider strech your container in CSS or make shorter lines or reduce the font of your text

And the multiline, vertical align?
Back to JavaScript and CSS




  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → JavaScript and CSS
IPB skins by Skinbox