[CSS] Fout zorgt voor juiste werking?

[Verwijderd]

N.a.v. deze post heb ik een probleempje met m'n css.

Het gaat om een horizontaal menu, waar een verschillend aantal knoppen in kan staan. Het menu moet dan opgedeeld worden in gelijke stukken en de knop moet dan precies in het midden staan. Ik heb dit gedaan met een tabel met 1 regel. Vervolgens de inhoud van de cellen horizontaal gecentreerd. (als dit beter/netter kan hoor ik het graag)

Nu heb ik tijdens dat puzzelen in het CSS een */ op de verkeerde plek laten staan. Maar het werkte op dat moment goed (ie, ff en safari op de pc). Toen heb ik die */ op de juiste plek gezet, werkt het alleen nog maar in IE7 ??? (zet ik het weer terug, dan gaat het dus weer fout) Zie het css waar de fout zit, zoals het nu staat werkt het vreemd genoeg dus wel (met de fout erin). Wat gaat er mis?

De knoppen in dit menu hebben overig maar 2 plaatjes en 3 statussen:

1. niet actief (zwart)
2. hover (oranje)
3. actief (oranje)

Knop:


Menu:


Zo ziet het menu eruit als het in het css officieel goed staat, dus de */ na de } (ik heb even border op 1 gezet zodat de verschillende knoppen nog zichtbaar zijn):

Cascading Stylesheet:

/* bottom menu => b_menu */

#b_menu {
    position:absolute;
    top: 545px;
    width: 100%;
}
/*
.b_menu {
    text-align: center; 
    height:55px;
    background-position:center;
    background-repeat:no-repeat;    */  <------------  DEZE STAAT DUS EEN REGEL TE HOOG
}                  <------------  ALS IK UM HIER ZET, WERKT HET ALLEEN NOG IN IE (v7)

#b_buttons {
    position:absolute;  
    margin: 0;
    padding: 0;
    height: 55px;
    width: 100%;
    background-repeat:no-repeat;
}
#b_buttons td {
    /*text-align: center;   */ 
    background-position:top;
    height: 55px;
}

#button_7 {
    background: url(images/b_menu_01_01.png) no-repeat;
}

#button_8 {
    background: url(images/b_menu_01_02.png) no-repeat;
}

#button_9 {
    background: url(images/b_menu_01_03.png) no-repeat;
}

#b_buttons td.active,
#b_buttons td:hover {
    background-position: center -55px;
}

PHP:

if (isset($_GET['i'])){
    // Query
    $query = $mydb->query('SELECT * FROM `menu` WHERE `menu_master` = '.$_GET['i'].'');
    $row = $mydb->fetch_object($query);
    
    echo '
    <table cellpadding="0" cellspacing="0" id="b_menu" border="0">
        <tr id="b_buttons">';
    foreach ($row as $value) {
        if ($_GET['si'] == $value->menu_identifier){
            $state = 'class="active" ';
        } elseif (isset($_GET['si'])){
            $state = 'class="inactive" ';
        }   

        echo '
            <td id="button_'.$value->menu_id.'" '.$state.'>
                <a href="?i='.$_GET['i'].'&amp;si='.$value->menu_identifier.'" title="'.$value->menu_name.'" target="_self">
                    <img src="images/trans.png" alt="'.$value->menu_name.'" title="'.$value->menu_name.'" class="trans">
                </a>
            </td>
        ';
        
        $state = '';
    }
    
    echo '</tr>
    </table>';
}

[ Voor 0% gewijzigd door Verwijderd op 20-07-2007 22:23 . Reden: typo ]

[r0bert]

code:

background-position:center;

Compleet maken?
http://www.w3schools.com/css/pr_background-position.asp

Hoewel er aangegeven staat dat

If you only specify one keyword, the second value will be "center".

Zorgt het mogelijk voor een foutje?

edit: "compleet maken" > "compleet maken?"

En ik denk het niet, maar mogelijk helpt het om je <img>-tag wellformed te maken naar <img />?


Ik snap na wat langer kijken trouwens niet helemaal of die comments er nu helemaal uit moeten? Of dat het alleen een naar beneden moet?

Wilde gok. Door de '}' negeert ie de direct volgende styling regels? ' position:absolute; ' verwijderen en de comment één naar onder plaatsen werkt dan mogelijk? Of de hele #id-styling eruit?

_{Je id-kaart + zichtbare codes op je website zetten? Is dat wel slim? Neem aan dat het niet 'echt' is?}

[ Voor 97% gewijzigd door r0bert op 20-07-2007 22:50 ]

[Little Penguin]

Verwijderd schreef op vrijdag 20 juli 2007 @ 22:22:
N.a.v. deze post heb ik een probleempje met m'n css.

Cascading Stylesheet:

/*
.b_menu {
    text-align: center; 
    height:55px;
    background-position:center;
    background-repeat:no-repeat;    */  <------------  DEZE STAAT DUS EEN REGEL TE HOOG
}                  <------------  ALS IK UM HIER ZET, WERKT HET ALLEEN NOG IN IE (v7)

Als je deze rulle wilt wegremmen waarom haal je 'm dan helemaal niet weg of heb je dat al geprobeerd?

[BtM909]

PHP is serverside en dit subforum is clientside. Heb je problemen met je CSS dan zit het clientside en zijn we dus niet geinteresseerd in PHP

Laat client-side code zien en sterker nog laat een werkende testcase (met alleen relevante code) zien

Je krijgt niet zo heel veel kansen meer van mij

[crisp]

r0bert schreef op vrijdag 20 juli 2007 @ 22:39:

code:

background-position:center;

En ik denk het niet, maar mogelijk helpt het om je <img>-tag wellformed te maken naar <img />?

Als het echt XHTML was geweest had hij wel een parse-error gehad (en had het helemaal niet gewerkt in IE), ergo: we hebben het over HTML (doctype veranderd daar ook niets aan) en in HTML heeft die forward slash niets met wellformedness te maken. In fact, hij is daar nutteloos - enkel "to appease the markup gods"¹ (degenen die de "Zeldman Koolaid"² hebben gedronken)

1) http://www.whatwg.org/spe...ection-writing.html#start
2) http://lists.whatwg.org/h...2006-November/008101.html

[Verwijderd]

Little Penguin schreef op vrijdag 20 juli 2007 @ 22:42:
[...]

Als je deze rulle wilt wegremmen waarom haal je 'm dan helemaal niet weg of heb je dat al geprobeerd?

Dit heb ik inderdaad geprobeerd, maar dat heeft het zelfde effect als de */ op de juiste plek te zetten, achter de }. Met als resultaat, afbeelding 3 van mijn post.

---

@r0bert: De <img /> had helaas heen zin.

Je id-kaart + zichtbare codes op je website zetten? Is dat wel slim? Neem aan dat het niet 'echt' is?

Ja, is echt, wel verlopen ondertussen. Had wel een beetje geblurt, maar wilde het niet al te veel aangepast laten lijken. Het origineel was er denk ik niet meer uit te halen. Heb nu wat extra geblurt, heb de opmerking wel vaker gekregen.

[ Voor 4% gewijzigd door Verwijderd op 21-07-2007 00:28 ]

[r0bert]

crisp schreef op vrijdag 20 juli 2007 @ 22:58:
we hebben het over HTML (doctype veranderd daar ook niets aan) en in HTML heeft die forward slash niets met wellformedness te maken.

Het was een gok wat misschien het probleem kon oplossen. Nu heb je een open tag, zou kunnen zijn dat het daar ergens fout gaat. Als het niet helpt, niet geschoten is altijd mis.

Verwijderd schreef op zaterdag 21 juli 2007 @ 00:02:
[...]
Ja, is echt, wel verlopen ondertussen. Had wel een beetje geblurt, maar wilde het niet al te veel aangepast laten lijken. Het origineel was er denk ik niet meer uit te halen. Heb nu wat extra geblurt, heb de opmerking wel vaker gekregen. :)[/small]

Misschien gewoon even een paar cijfertjes veranderen

[ Voor 35% gewijzigd door r0bert op 21-07-2007 00:20 ]

[Verwijderd]

r0bert schreef op vrijdag 20 juli 2007 @ 22:39:
Wilde gok. Door de '}' negeert ie de direct volgende styling regels? ' position:absolute; ' verwijderen en de comment één naar onder plaatsen werkt dan mogelijk? Of de hele #id-styling eruit?

Dit was het inderdaad !!

Dit is dus over:

Cascading Stylesheet:

#b_buttons {
    margin: 0;
    padding: 0;
    height: 55px;
    width: 100%;
    background-repeat:no-repeat;
}

Deel tussen /* en */ helemaal weg en de } natuurlijk ook + position:absolute; uit #b_buttons ...

Bedankt maar weer allen, mijn naamgenoot in het speciaal natuurlijk