1. Tudásbázis
  2. Sminkek
  3. ul li menü stílus öröklődés

ul li menü stílus öröklődés

Beküldte szarkab - 2013. július 6. 02.24
szarkab képe

Kezdő sminkes vagyok és most tanulgatom a dolgokat, de most nagyon megakadtam. Megpróbálom körül írni a "problémám".

Arról van szó, hogy létre hoztam egy régiót vagy blockot a page.tpl.php fájlban így:

<div id="valami"><?php print render($page['valami']); ?> </div>

Ehhez tartozó részt formáztam css-el, hogy vízszintes menüt kapjak, float left list style none stb stb. Azzal a problémával szembesültem, hogy a meglévő sminknek többi formázását is átörökölte. Megkapta a másik menü hover effectjét hátterét stb.

Ezt szeretném valahogy függetleníteni! Hogy az ehhez tartozó régióhoz a menü css formázásom független legyen.

Ha rendesen beirom hogy

  1. #valami ul li {
  2. bármi
  3. }

akkor erre ne érvényesüljön a globális li lu, ami a sminkben van.

Drupal verzió: 
7.x
Fórum: 
Sminkek
aruna képe

Beküldte aruna - 2013. július 6. 07.28

a CSS-ben, de én felül szoktam írni mindent, amit kell:

#valami ul {}
#valami ul li {}
#valami ul li a {}
#valami ul li a:hover {}
#valami ul li ul li {} /* Ha többszintű a menü */
...

Ha minden az utolsó vacakig felüldefiniálsz akkor ez megvalósul:

ehhez tartozó régióhoz a menü css formázásom független legyen

Mindig nézd a firebug-al hogy érvényesül-e az új szabályod, mert előfordulhat, hogy az eredeti menü szabálya valamiért specifikusabb, felülírja az új szabályodat. Ilyenkor ha specifikusabbá teszed a szabályt, akkor be tudsz "előzni".

3
0
szarkab képe

Beküldte szarkab - 2013. július 6. 12.24

Css-ben hiába definiálom felül minden részét.
Ez a kód mindig érvényesül rá:

  1. /* --- Default Drupal Menu --- */
  2. .block ul.menu {
  3.   font-weight: bold;
  4.   margin: 0 -15px -10px;
  5. }
  6.  
  7. .block ul.menu ul {
  8.   font-weight: normal;
  9. }
  10.  
  11. .block ul.menu li {  
  12.     background: url(../images/menu-sep.gif) no-repeat right bottom;
  13.     font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
  14.     line-height: normal;
  15.     list-style-image: none;
  16.     list-style-type: none;
  17.     margin: 0 -15px 0 0;
  18.     overflow: visible;
  19.     padding: 0;
  20. }
még lenne tovább is.

De azt a megoldást találtam ki erre reggel, hogy letöltök egy superfish menüt és azt használom.

0
0
leonidasz képe

Beküldte leonidasz - 2013. július 11. 13.23

Azért érvényesül mert a smink css-e mélyebben definiálja a megjelenést, a Te esetedben ezt kell:

#valamiregioneve .block ul.menu {
font-weight: normal;
margin: 0;
}

ezzel már érvényesül is

ha több szintű a menü akkor pedig így folytasd:
ul>li = ekkor csak az első szintet fogja formázni:
ul>li>ul>li = ez meg csak a második szintet.

Hajrá!

3
0
Nagy Gusztáv képe

Beküldte Nagy Gusztáv - 2013. július 11. 20.33

ul>li = ekkor csak az első szintet fogja formázni:

Nem igaz, mert ez a formázás mindkét li szintre érvényesülni fog.

1
0

Nagy Gusztáv

szarkab képe

Beküldte szarkab - 2013. július 12. 13.54

Köszönöm szépen a segítségeket, nagyon sok hasznos dolgot tanultam :)

0
0
leonidasz képe

Beküldte leonidasz - 2013. július 12. 16.04

ul elé még kell egy id vagy ul.menu>li így már jó.

0
0
zionduc képe

Beküldte zionduc - 2013. július 6. 10.02

Több embertől is hallottam már, hogy mindent fogalmazzunk meg általánosan a CSS-ben - hogy minél kevesebbszer kelljen ismételni - én viszont pont az ilyen problémák miatt szeretek inkább célzottan dolgozni class-okkal, és id-val.

Ha a sminket te hoztad létre, akkor szerintem érdemes elgondolkodni azon, hogy az ilyen teljesen általános ul li a:hover {} értékeket módosítsd először úgy, hogy arra legyen érvényes, ahol szükség van az adott formázásra. Nyilván ehhez ismerni kell a weblap felépítését is.

Ha nem ezt választod, akkor nincs más lehetőség, mint felülírni ezeket az értékeket a #valami-nél.

Hosszútávon pedig kezdj el használni CSS előfeldolgozót, pl. Sass-t: http://sass-lang.com/
Ebben pont az a jó, hogy annyit használsz belőle, amennyit megértettél, de ha jobban elmélyedsz benne, akkor nagyon megkönnyíti az életedet.

2
0

Írj rám, ha érdekel a Győri Drupal Használói Találkozó.

szt képe

Beküldte szt - 2013. július 10. 12.14

Érdemes egyszer azt is átnézni, hogy hogyan érvényesülnek az egyes elemek, class-ok, id-k stb. Itt egy link, az írás alján a példaképeken van az érdekes rész.
Illetve végső elkeseredésben meg lehet nézni a forrásban, hogy tényleg a te css fájlod-e az utolsó...

1
0

Védd az állatokat! ;)