[CSS] Kan dit compacter / efficienter?

[Verwijderd]

Hallo allemaal,

Ik ben bezig met een menu waarvan elke knop 4 statussen kent:

1. niet actief
2. hover
3. actief
4. niet actief 2

(belangrijke) bijzaken.

• Het is een horizontaal menu.
• Er word een apart lettertype gebruikt, wat zeker niet standaard op een pc/mac staat. Dus elke knop heeft eigen afbeeldingen (3).

Nu heb ik daar het volgende voor in een css gezet:

Cascading Stylesheet:

/* Main Menu */

#button_1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 150px;
    height: 60px;
    background-image: url(images/m_menu_01.png);
}

#button_1:hover, #button_1.inactive:hover{
    background-image: url(images/m_menu_a_01.png);
}

#button_1.active{
    background-image: url(images/m_menu_a_01.png);
}

#button_1.inactive{
    background-image: url(images/m_menu_i_01.png);
}

Nu werk het prima (i.c.m. de benodige php en in verschillende browsers), maar ik vroeg mij af of het op 1 of andere manier korter kan. Het gaat om aardig wat knoppen en elke knop heeft namelijk een eigen plaatje.

Voor de zekerheid nog even de php:

PHP:

// Query
$query = $mydb->query('SELECT * FROM `menu`');
$row = $mydb->fetch_object($query);

foreach ($row as $value) {
    if ($_GET['page'] == $value->menu_identifier){
        $state = 'class="active" ';
    } elseif (isset($_GET['page'])){
        $state = 'class="inactive" ';
    }   
    
    echo '
    <div id="button_'.$value->menu_id.'" '.$state.'>
        <a href="?page='.$value->menu_identifier.'" title="'.$value->menu_name.'" target="_self">
            <img src="images/trans.png" alt="'.$value->menu_name.'" title="'.$value->menu_name.'">
        </a>
    </div>
    ';
    $state = '';
}

$mydb->close();

Dus nog even mijn vraag: Kan de CSS (misschien ook de php) korter / efficiënter?

Alvast bedankt.

Groeten,
Robert

[ Voor 7% gewijzigd door Verwijderd op 18-07-2007 11:19 . Reden: bijzaken toegevoegd ]

[RM-rf]

waarom zou je die waardes aan de ID als selector hangen:
dat is nogal inefficient, omdat je dan vooor ieder element die waardes moet gaan definieren en het is juist de bedoeling om de visuele weergave onafhankelijk te houden van de content...


Ook bv een element absoluut positioneren is waarschijnlijk niet nodig:


ik zou eerder kiezen voor een opzet als

HTML:

<ul id="Menu">
   <li>  <a href="?page=blah" title="blah">
            <img src="images/trans.png" alt="blah" >
        </a>    
    <li class="active">  <a href="?page=foo title="foo">
            <img src="images/trans.png" alt="foo" >
</ul>

de CSS kan dan gewoon generiek de styles definieren vooor alle elementen en niet per element, gekoppeld aan ID...
als je het menu zelf absoluut wil positioneren, kun je dat adhv de UL#Menu...


Overigens, ik vind het weinig zinnig om zo' navigatie op te zetten met achtergrond afbeeldingen om een 'onmouseover' te krijgen... het mag dan misschien wel werken als scripting uitstaat, qua scheiding van layout en inhoud is het weinig toegankelijk en kan tot problemen leiden als een UA bv achtergronden negeert (wat mogelijk is)

[Martinspire]

Ik denk dat je dan niet een css moet gebruiken die je in een appart document gebruikt, maar in de pagina zelf (kun je bovenaan de pagina het script zetten, dan weet je de hoeveelheid knoppen en daarna zet je de CSS neer waarbij je die automatisch laat genereren. (Ik denk dat je alleen de getallen veranderd?)

Bovendien kun je deze 2:

Cascading Stylesheet:

#button_1:hover, #button_1.inactive:hover{
    background-image: url(images/m_menu_a_01.png);
}

#button_1.active{
    background-image: url(images/m_menu_a_01.png);
} 

Samenvoegen lijkt me? Tot:

Cascading Stylesheet:

#button_1:hover, #button_1.inactive:hover, #button_1.active{
    background-image: url(images/m_menu_a_01.png);
}

Scheelt je weer een regel. Al denk ik dat je een typo hebt gemaakt (ik zie namelijk maar 3 standen en geen 4

Maar ik zou toch gaan nadenken of het niet slimmer is om iets anders dan plaatjes te gebruiken aangezien dit dus allemaal geladen dient te worden en je dus langer moet wachten voordat de site er staat.

[remcotolsma]

Ik zou de CSS ook m.b.v. PHP opbouwen, aangezien je dit ook met het menu zelf doet. Op die manier kun je de CSS 'kort' houden (op de server).

Je moet er wel voor zorgen dat je de juiste Content-Type terug stuurd:

PHP:

header('Content-Type: text/css');

Eventueel kun je wel met tools zien of de CSS korter / efficienter kan:
http://www.cssoptimiser.com/

OFFTOPIC:
Ik zie persoonlijk een menu als een lijst met linkjes, dus ik zou de HTML zo doen:

HTML:

<div id="menu">
  <ul>
    <li id="menu_item_1">
      <a href="#1">Menu item 1</a>
    </li>
    <li id="menu_item_2">
      <a href="#2">Menu item 2</a>
    </li>
  </ul>
</div>

[RM-rf]

remcotolsma schreef op woensdag 18 juli 2007 @ 10:24:
Ik zou de CSS ook m.b.v. PHP opbouwen, aangezien je dit ook met het menu zelf doet. Op die manier kun je de CSS 'kort' houden (op de server).

Je moet er wel voor zorgen dat je de juiste Content-Type terug stuurd:

PHP:

header('Content-Type: text/css');

houd je er dan wel rekening mee dat de CSS hier an iedere keer volledig nieuw ingeladen wordt en niet gecached wordt ....
dat is nu juist een groot voordeel van externe CSS-files en de scheiding van content en inhoud ... dat je niet ook nog eens je visuele formatting iedere keer moet renderen....


als je zo nodig style-informatie wilt laten renderen, kun je het volgens mij veel beter inline of in de HEAD doen, dan een externe file óók nog eens door php laten parsen

[DamadmOO]

Ik zou denk ik ook de css met php opbouwen als je het echt op zo'n manier wilt gaan doen.

Verder zet ik een menu eigenlijk ook altijd in een lijst, echter wel een OL want ik vind dat een menu toch wel enigsinds geordend is . Als je het in een lijst zet kan je ook die div er wel uit mikken die remcotolsma hierboven wel gebruikt. Een div is gewoon een block-level element. En de style die je daaraan kan geven kan je ook gewoon aan je UL / OL geven.

[DamadmOO]

RM-rf schreef op woensdag 18 juli 2007 @ 10:34:
[...]


houd je er dan wel rekening mee dat de CSS hier an iedere keer volledig nieuw ingeladen wordt en niet gecached wordt ....
dat is nu juist een groot voordeel van externe CSS-files en de scheiding van content en inhoud ... dat je niet ook nog eens je visuele formatting iedere keer moet renderen....


als je zo nodig style-informatie wilt laten renderen, kun je het volgens mij veel beter inline of in de HEAD doen, dan een externe file óók nog eens door php laten parsen

Dan laat je een php script toch gewoon een css file vullen en die sla je op op de server? Als je dan je menu aanpast kan je gewoon het script opnieuw runnen en klaar ben je. Veel efficiënter dan zelf handmatig elke keer die bende aan te passen (en minder kans op fouten).

[BtM909]

Lees ook even de eerste reply van RM-rf door en hou alles wat generiek is in een class, zodat je alleen de specifieke onderdelen in een id kan stoppen

[Verwijderd]

Bedankt allemaal voor de antwoorden.

Ik heb in de OP nog wat bijzaken gezet een een afbeelding van het menu (in de eerste status uit het lijstje).

Ik heb ook net tooltje gebruikt voor het optimaliseren van de CSS, dat zier er nu zo uit:

Cascading Stylesheet:

#button_1,#button_2,#button_3,#button_4,#button_5,#button_6 {
    position:absolute;
    top:0;
    width:150px;
    height:60px
}

#button_1 {
    background:url(images/m_menu_01.png);
    left:0
}

#button_1.inactive:hover,#button_1.active,#button_1:hover {
    background:url(images/m_menu_a_01.png)
}

#button_1.inactive {
    background:url(images/m_menu_i_01.png)
}

Ook bv een element absoluut positioneren is waarschijnlijk niet nodig:

Dit werkt alleen als ik achter elke verwijzing naar een background-image "no-repeat" zet (het is een horizontaal menu). Dan lijkt me dit korter. Of heeft het nog andere technische redenen dat ik het beter wel kan doen?

RM-rf schreef op woensdag 18 juli 2007 @ 01:51:
waarom zou je die waardes aan de ID als selector hangen:
dat is nogal inefficiënt, omdat je dan voor ieder element die waardes moet gaan definiëren en het is juist de bedoeling om de visuele weergave onafhankelijk te houden van de content...
...
Overigens, ik vind het weinig zinnig om zo' navigatie op te zetten met achtergrond afbeeldingen om een 'onmouseover' te krijgen... het mag dan misschien wel werken als scripting uitstaat, qua scheiding van layout en inhoud is het weinig toegankelijk en kan tot problemen leiden als een UA bv achtergronden negeert (wat mogelijk is)

Dit is ook helemaal waar, alleen weet ik niet hoe ik het beter kan doen, met die afbeeldingen. Het zijn namelijk 3 afbeeldingen voor 4 verschillende statussen. (De klant wil die 4 verschillende statussen.)

djmantri schreef op woensdag 18 juli 2007 @ 02:37:
Maar ik zou toch gaan nadenken of het niet slimmer is om iets anders dan plaatjes te gebruiken aangezien dit dus allemaal geladen dient te worden en je dus langer moet wachten voordat de site er staat.

Is er ondertussen iets fatsoenlijks om een apart lettertype te gebruiken wat elke browser ondersteund?

Hebben jullie met deze nieuwe info nog nieuwe ideeën?

[ Voor 24% gewijzigd door Verwijderd op 18-07-2007 12:22 . Reden: typo ]

[Verwijderd]

RM-rf schreef op woensdag 18 juli 2007 @ 01:51:Overigens, ik vind het weinig zinnig om zo' navigatie op te zetten met achtergrond afbeeldingen om een 'onmouseover' te krijgen... het mag dan misschien wel werken als scripting uitstaat, qua scheiding van layout en inhoud is het weinig toegankelijk en kan tot problemen leiden als een UA bv achtergronden negeert (wat mogelijk is)

Als je het goed dus hoeft dat geen problemen op te leveren lijkt me. Bij uitgeschakelde stylesheets en/afbeeldingen blijft het menu gewoon in tact en inhoud en layout is netjes gescheiden. Overigens is het misschien handig om 1 achtergrond afbeelding per menu item te gebruiken om vervolgens de background-position aan te passen bij de verschillende staten. Iets als:

HTML:

<ul>
    <li class="item1"><a href="#">Item1</a></li>
    <li class="item2"><a href="#">Item2</a></li>
    <li class="item3"><a href="#">Item3</a></li>
</ul>

Cascading Stylesheet:

ul li a { text-indent: -1000px; }
ul li:hover { background-position: 10 0; }

.item1 { background: url(naamvanafbeelding.gif); }
.item2 { background: url(naamvanafbeelding.gif); }
.item3 { background: url(naamvanafbeelding.gif); }

[ Voor 91% gewijzigd door Verwijderd op 18-07-2007 15:33 ]

[crisp]

In theorie zou dit ook moeten werken:

Cascading Stylesheet:

#button_1 {
    background:url(images/m_menu_01.png);
    left:0
}

#button_1.inactive {
    background:url(images/m_menu_i_01.png)
}

#button_1.active,#button_1:hover {
    background:url(images/m_menu_a_01.png)
}

De :hover pseudo-class heeft namelijk dezelfde specificity als een class-selector (maar je hebt best kans dat sommige browsers dat anders zien )

Verder zou je

Cascading Stylesheet:

#button_1,#button_2,#button_3,#button_4,#button_5,#button_6 {
    position:absolute;
    top:0;
    width:150px;
    height:60px
}

Ook kunnen opvangen door je buttons naast een ID ook een class te geven zodat je dit kan doen:

Cascading Stylesheet:

.button {
    position:absolute;
    top:0;
    width:150px;
    height:60px
}

De tip van .elu is ook de moeite waard: daarmee voorkom je extra requests en 'flikkering' als het plaatje nog niet gecached is

[ Voor 3% gewijzigd door crisp op 18-07-2007 15:34 ]

[RM-rf]

Verwijderd schreef op woensdag 18 juli 2007 @ 11:57:

Is er ondertussen iets fatsoenlijks om een apart lettertype te gebruiken wat elke browser ondersteund?

sIFR : http://wiki.novemberborn.net/sifr3/Examples

Ik weet enkel niet of dit nu al geschikt is voor links en onmouseovers, in theorie zou dat eigenlijk prima moeten kunnen

[Verwijderd]

Zo mensen, daar ben ik weer na wat uurtjes ploeteren. Ik heb bijna uit elke reply wat toe kunnen passen met dit als resultaat:

Cascading Stylesheet:

.trans {
    vertical-align:top;
    width: 100%;
    height: 100%;
}

li {
    list-style-type: none;
}

#button_1,#button_2,#button_3,#button_4,#button_5,#button_6 {
    position:absolute;
    top:0px;
    width:150px;
    height:60px;
}

#button_1 {
    background:url(images/m_menu_01.png) 0 0 no-repeat;
    left:0px;
   }

#button_2 {
    background:url(images/m_menu_02.png) 0 0 no-repeat;
    left:150px;
}

#button_3 {
    background:url(images/m_menu_03.png) 0 0 no-repeat;
    left:300px;
}

#button_4 {
    background:url(images/m_menu_04.png) 0 0 no-repeat;
    left:450px;
}

#button_5 {
    background:url(images/m_menu_05.png) 0 0 no-repeat;
    left:600px;
}

#button_6 {
    background:url(images/m_menu_06.png) 0 0 no-repeat;
    left:750px;
}
 
#button_1.inactive:hover,#button_1:hover,#button_1.active,
#button_2.inactive:hover,#button_2:hover,#button_2.active,
#button_3.inactive:hover,#button_3:hover,#button_3.active,
#button_4.inactive:hover,#button_4:hover,#button_4.active,
#button_5.inactive:hover,#button_5:hover,#button_5.active,
#button_6.inactive:hover,#button_6:hover,#button_6.active {
   background-position: 0 -60px;
}
   
#button_1.inactive,
#button_2.inactive, 
#button_3.inactive,
#button_4.inactive,
#button_5.inactive,
#button_6.inactive {
   background-position: 0 -120px;
}

PHP:

// Query
$query = $mydb->query('SELECT * FROM `menu` WHERE `menu_master` = 0');
$row = $mydb->fetch_object($query);

echo '  <ul>';
foreach ($row as $value) {
    if ($_GET['i'] == $value->menu_id){
        $state = 'class="active" ';
    } elseif (isset($_GET['i'])){
        $state = 'class="inactive" ';
    }   

    echo '
        <li id="button_'.$value->menu_id.'" '.$state.'>
            <a href="?i='.$value->menu_id.'" title="'.$value->menu_name.'" target="_self">
                <img src="images/trans.png" alt="'.$value->menu_name.'" title="'.$value->menu_name.'" class="trans">
            </a>
        </li>
    ';
    
    $state = '';
}
echo '</ul>';

Volgens mij kan ik het nu niet compacter/efficiënter maken, dan dat het nu is.

Ik ben niet heel blij met dit deel, maar ik kan daar geen class meer van maken omdat ik die al vergeven heb aan de "active" of "inactive" status. (als iemand daar nog een suggestie voor heeft zonder dat ik opnieuw hoef te beginnen , is die natuurlijk welkom)

Cascading Stylesheet:

#button_1.inactive:hover,#button_1:hover,#button_1.active,
#button_2.inactive:hover,#button_2:hover,#button_2.active,
en
#button_1.inactive,
#button_2.inactive, 

De knoppen zijn nu allemaal zo, maar dan 6 verschillende:

[crisp]

Nog korter:

Cascading Stylesheet:

#buttons {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 60px;
}
#buttons li {
    float: left;
    width: 150px;
    height: 60px;
}
#button_1 {
    background: url(images/m_menu_01.png) no-repeat;
}
#button_2 {
    background: url(images/m_menu_02.png) no-repeat;
}
#button_3 {
    background: url(images/m_menu_03.png) no-repeat;
}
#button_4 {
    background: url(images/m_menu_04.png) no-repeat;
}
#button_5 {
    background: url(images/m_menu_05.png) no-repeat;
}
#button_6 {
    background: url(images/m_menu_06.png) no-repeat;
}
#buttons li.active,
#buttons li:hover,
#buttons li.inactive:hover {
    background-position: 0 -60px;
}
#buttons li.inactive {
    background-position: 0 -120px;
}

gewoon je UL een ID geven dus en gebruik maken van descendant selectors, en aangezien je toch met een vaste breedte van je list-items werkt kan je net zo goed (beter zelfs) floats gebruiken ipv absolute positioning

[ Voor 8% gewijzigd door crisp op 19-07-2007 22:34 ]

[Verwijderd]

Thnx crisp!! Dit is helemaal mooi!!

Vervolg hierop met een nieuw probleem staat in deze post.

[ Voor 161% gewijzigd door Verwijderd op 20-07-2007 22:25 . Reden: Link ]