ugrás a tartalomhoz

CSS menü listával - működik, csak kis finomítás kellene

Anonymous · 2005. Júl. 22. (P), 17.32
Helló!

Gyártottam egy menüt lista segítségével:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Untitled</title>

<style type="text/css">


body
{
  behavior: url(csshover.htc);
}

#fomenu1, #fomenu1 ul, #fomenu2, #fomenu2 ul
{
  float: left;
  padding: 0;
  margin: 0;
}

#fomenu1 a
{
  color: #cc9966;
  display: block;
  background: #99ffcc;
  width: 3.6em;
  text-decoration: none;
  text-align: left;
  padding-left: 3px;
}

#fomenu2 a
{
  color: #cc9966;
  display: block;
  background: #99ffcc;
  width: 9.5em;
  text-decoration: none;
  text-align: left;
  padding-left: 3px;
}

#fomenu1 li ul a:hover, #fomenu2 li ul a:hover
{
  background: #00cc00;
  color: white;
}

#fomenu1, #fomenu1 ul, #fomenu2, #fomenu2 ul
{
  list-style: none;
}

#fomenu1 ul, #fomenu2 ul
{  
  position: relative;
  display: none;
}

#fomenu1 li:hover ul, #fomenu2 li:hover ul
{
   color: red;
   position: relative;
   left: 0px;
   display: block;
}

 
</style>
</head>


<ul id="fomenu1">
  <li><a href="#">Főmenü</a>
  <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
  </ul>
  </li>
</ul>

<ul id="fomenu2">
  <li><a href="#">Főmenü (de egy másik)</a>
  <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
  </ul>
  </li>
</ul>

</body>
</html>
Működik meg minden, csak az a gond, hogy az egyes menüpontok szélességét egyedileg kell szabályozni (fomenu1, fomenu2). Nincs valami ötletetek, hogy hogyan tudnám ezt egységessé tenni?
‹ Szabványos linkek Link divben beállított háttérképpel ›
 ■
1

csoportosítás

Tome · 2005. Júl. 23. (Szo), 10.39
Ha jól értettem a kérdésed, akkor itt egy megoldás:

#fomenu1, #fomenu2 {
  width : 55px;
}
2

class és id

Jano · 2005. Júl. 23. (Szo), 10.39
Pontosan miknek is kell egyedileg szabályozni a méretét?

Ha az egyes menüpontok különböző méretűek, akkor nincs más megoldás mint mindegyiknek saját id-t adni és egyesével beírni őket a CSS-be.

A 2 főmenü alig különbözik egymástól, javaslom, hogy adj nekik ugyanolyan class paramétert és csak az eltérésekhez használd az ID-t.

#fomenu1, #fomenu1 ul, #fomenu2, #fomenu2 ul
{
  float: left;
  padding: 0;
  margin: 0;
}
helyett:


.fomenu, .fomenu ul {
  float: left;
  padding: 0;
  margin: 0;
}



#fomenu1 a
{
  color: #cc9966;
  display: block;
  background: #99ffcc;
  width: 3.6em;
  text-decoration: none;
  text-align: left;
  padding-left: 3px;
}

#fomenu2 a
{
  color: #cc9966;
  display: block;
  background: #99ffcc;
  width: 9.5em;
  text-decoration: none;
  text-align: left;
  padding-left: 3px;
}
helyett:


.fomenu {
  color: #cc9966;
  display: block;
  background: #99ffcc;
  text-decoration: none;
  text-align: left;
  padding-left: 3px;
}

#fomenu1 a
{
  width: 3.6em;
}

#fomenu2 a
{
  width: 9.5em;
}
Én ilyenkor amikor csak 1 tulajdonságot kell átírni több ugyanolyan típusú elemhez, akkor egy sorba töröm mert jobban átlátható.

#fomenu1 a { width: 3.6em; }
#fomenu2 a { width: 9.5em; }
3

class

Anonymous · 2005. Júl. 23. (Szo), 15.31
Én a fomenu classban állítanám be azt, hogy max-width: 9.5em (ill. a lehetséges leghosszabb menöszöveg hosszát). Nekem így IE-vel is működik, és pont olyan széles lesz, mint, amit a szöveg kíván.
4

Na, így már jobb

Anonymous · 2005. Júl. 24. (V), 14.20
A tanácsokat megfogadva így sikerült.

Azért bebököm ide a kódot is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled</title>

<style type="text/css">

/*******************ÁLTALÁNOS********************/
body
{
  behavior: url(csshover.htc);
}

.fomenu ul
{
  float: left;
  margin: 0;
  list-style: none;
  padding: 0;
  background: maroon;
  color: white;
}

a
{
  font-family: arial, helvetica;
  font-size: 12px;
  color: white;
  text-decoration: none;
  line-height: 20px;
  display: block;
}
/********ÁLTALÁNOS IDÁIG**********************/



/***********LENYÍLÓ MENÜPONTOK ELTÜNTETÉSE********/
.fomenu ul li ul
{
  display: none;
}
/***********IDÁIG***************************/



/***********LENYÍLÓ MENÜPONTOK MEGJELENÍTÉSE********/
.fomenu ul li:hover ul
{
  display: block;
}
/***********IDÁIG***************************/


/************AKTÍV MENÜPONT KIEMELÉSE*********/
.fomenu ul li ul li a:hover
{
  display: block;
  background: #996600;
}
/***********IDÁIG***************************/


/*********EGYEDI HOSSZ FORMÁZÁSOK, EZEKET KELLENE VALAHOGYAN HELYETTESÍTENI*******/
#fomenu1, #fomenu1 a{width: 120px}

#fomenu2, #fomenu2 a {width: 150px}
/***********IDÁIG***************************/

</style>
</head>


<body>

<div class="fomenu">

<ul>
  <li id="fomenu1">Főmenü
  <ul>
    <li><a href="#">ittrzrtzrtzrtzrtzrtzem1</a></li>
    <li><a href="#">itertztrzm2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
  </ul>
  </li>
</ul>


<ul>
  <li id="fomenu2">Főmenü2 (ez hosszabb)
  <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
  </ul>
  </li>
</ul>


</div>

</body>
</html>


Egy kérdésem azért lenne (megpróbálom érthetően megfogalmazni:

A fő menüpontok (lásd fomenu1) hosszát kénytelen vagyok a leghosszabb menüponthoz igazítani. Ezt nem lehetne valahogyan megkerülni? Tehát ha pl. felveszek még egy menüpontot ami hosszabb, mint az eddigiek, akkor ne kelljen hosszt állítgatni. Úgy próbáltam, hogy beállítottam pl. padding-right: 8px, így a főmenü (fomenu1) hossza igazodott a 'Főmenü' szöveghez plusz még jobb oldalt hozzátett 8px-t. A gond az ezzel az, hogy ha van egy menüpont ami hosszabb, mint a fő menüpont, akkor ugrálni fog, vagyis a következő menüpontot (Főmenü2 (ez hosszabb)) eltolja, egészen annyira, hogy kiférjen.
Tehát azt szeretném, hogy a Főmenü1 hossza akkor is lehessen 50px, ha a vmelyik menüpont 80px.

Van erre vmi megoldás?
5

Egy lista, abszolút pozicionálás

Jano · 2005. Júl. 24. (V), 14.33
Értem mi a problémád, azt szeretnéd, hogy az almenu lehessen szélesebb mint maga a főmenüpont amire állva előjön.

Elöszőr is: Ha így hagyod a menüt akkor az egész oldalad ugrálni fog amikor a display:block hatására megjelenik, aztán a display:none miatt eltűnik a menü!

A megoldás és ez megoldja az almenü problémádat is:
az almenü UL-jét abszolút pozicionálni! Az abszolút pozicionált elemek ugyanis nincsenek hatással a környezetükre a méretükkel!

Egyébként valójában nem 2 főmenüd van hanem egy! Ezért helyesebb lenne ha egy listába tennéd a 2 főmenüt, aminek al listái az egyes almenük.