[IE+css] foute toewijzing?

[wizzkizz]

Hallo,

Voor een website heb ik een agenda gemaakt, die elke keer het punt dat het eerste aan de beurt is, weergeeft.

Nu heb ik het geheel opgebouwd met div-jes en css. Dit is op één puntje na gelukt: om één of andere gekke reden pakt IE mijn css-toewijzing voor het bovengenoemde menu niet.

Ik heb de volgende css hiervoor:

Cascading Stylesheet:

div#menu_head, div#menu_foot{
    margin: -2px -2px 2px -2px;
    background-color: #000066;
    border: solid 1px #000066;
    color: #ffffff;
    font-weight: bold; text-align: center;
    width: 150px;
}
div#menu_body{
    margin: 0px; padding: 0px 0px 0px 2px;  
    border: solid 1px #cccccc;
    /*border-width: 0px 1px;*/
    width: 150px;
}

div.agenda {background-color: #ffffff;}
div.agenda#menu_head, div.agenda#menu_foot {
    background-color: #ffffff; color: #ff0000; 
    border-width: 0px;
}
div.agenda#menu_body {border-width: 0px; text-align: center;}

De gegenereerde code voor mijn menu is:

HTML:

<!-- menu Agenda -->
    <div class="agenda" id="menu_body">
        <div class="agenda" id="menu_head">Agenda</div>
        <span id="head">ss op 8-4-2005:</span><br>
        <span id="desc">ss</span><br>
    </div>
    <br>

Mijn probleem is nu dat hij de toewijzing voor menu_head niet pakt, terwijl hij de anderen wel gewoon correct weergeeft. Mozilla geeft helemaal geen problemen en geeft het hele menu goed weer. IE doet de andere menu's die op een vergelijkbare manier worden opgemaakt, ook gewoon goed.

Is dit een fout van mij of van IE??

[ Voor 7% gewijzigd door wizzkizz op 10-03-2004 21:27 ]

[disjfa]

van jou.

code:

div.agenda#menu_head

moet zijn:

code:

div#menu_head

[wizzkizz]

disjfa schreef op 10 maart 2004 @ 21:28:
van jou.

code:

div.agenda#menu_head

moet zijn:

code:

div#menu_head

Nee, want dan worden alle menu's aangepast, terwijl alleen de kop van dat ene menu afwijkend moet zijn, nl. rood op wit tegen wit op blauw bij de anderen.

Alle menu's zijn een div en bestaan uit menu_head, menu_body en evt. een menu_foot. Standaard class is "menu-small", maar wanneer ik menu's afwijkend wil hebben, wordt de class aangepast, in dit geval dus tot "agenda". Daarom moet dit wel worden aangegeven in de css.

[drm]

gecombineerde selectors op de manier die jij wilt werken niet in IE.

[wizzkizz]

drm schreef op 10 maart 2004 @ 21:39:
gecombineerde selectors op de manier die jij wilt werken niet in IE.

Maar dit gaat wel gewoon goed (netjes wit op donkergroen met een lichter groene achtergrond voor de rest van het menu):

HTML:

<!-- menu Stelling -->
    <div class="poll" id="menu_body">
        <div class="poll" id="menu_head">Stelling</div>

met als css nog steeds die div#menu_head, div#menu_foot maar dan met:

Cascading Stylesheet:

div.poll {background-color: #93df93; }
div.poll#menu_head, div.poll#menu_foot {
    background-color: #30b630; border-color: #30b630;
}

[ Voor 16% gewijzigd door wizzkizz op 10-03-2004 22:22 . Reden: typo ]

[Clay]

Alle menu's zijn een div en bestaan uit menu_head, menu_body en evt. een menu_foot.

Een ID moet uniek zijn. Als alle menu's die ID's hebben doe je iets fout gebruik dan een class, die hoeven niet uniek te zijn. Verder heb je een <br /> niet nodig, als iets ergens onder moet komen moet je het gewoon display:block; geven, of ueberhaupt je menu HTML opbouwen uit elementen die iets zeggen over hun inhoud, die vertonen al vaak het gewenste gedrag (in de basis). Een list bijvoorbeeld.

Wbt je CSS notatie,

Cascading Stylesheet:

div.poll#menu_head, div.poll#menu_foot

Ik weet niet of het boeit (en wil het niet weten ) maar een ID is qua specificity 10 keer zo belangrijk als een class, wat je dan ook meestal ziet is dat die eerst genoemd wordt, en dan pas de classes;

Cascading Stylesheet:

div#menu_head.poll, div#menu_foot.poll

Dat kan je kuddegedrag noemen, maar er zit wel logica achter

[ Voor 32% gewijzigd door Clay op 10-03-2004 21:50 ]

[wizzkizz]

Clay schreef op 10 maart 2004 @ 21:47:
Een ID moet uniek zijn. Als alle menu's die ID's hebben doe je iets fout gebruik dan een class, die hoeven niet uniek te zijn. Verder heb je een <br /> niet nodig, als iets ergens onder moet komen moet je het gewoon display:block; geven, of ueberhaupt je menu HTML opbouwen uit elementen die iets zeggen over hun inhoud, die vertonen al vaak het gewenste gedrag (in de basis). Een list bijvoorbeeld.

Weet jij dan een betere manier?

Ik heb op die site duzz veel menu's (momenteel 7). En het overgrote deel van die menu's ziet er precies hetzelfde uit, er zijn 2 afwijkende menu's. En het aantal menu's is dynamisch...

Elk menu bestaat uit de eerder genoemde 3 onderdelen: head, body en foot.
In HMTL zo opgebouwd:

HTML:

<!-- menu Titel -->
    <div class="menu-small" id="menu_body">
        <div class="menu-small" id="menu_head">
            <!-- titel hier -->
        </div>
        
        <!-- body hier -->

        <div class="menu-small" id="menu_foot">
            <!-- footer hier -->
        </div>
    </div>

Om te zorgen voor een goede weergave van de respectievelijke onderdelen, heb ik dit zo opgebouwd. Nu is het ook gemakkelijk (in theorie) om een afwijkende opgemaakt menu te maken, door gewoon de class te veranderen.

En aangezien ik in de menu's in het geheel niet met JavaScript ga proberen te benaderen, is het alleen voor CSS en daar werkt dat wel. Maar of het volgens de regeltjes is? Ik zou het niet precies weten.

[wizzkizz]

voor dit moment rest mij dan niets anders dan inline-stylen, hoewel ik dat niet erg correct vind. Maar het is nu even niet anders.

Of zijn er nog suggesties?

edit: dat inline stylen geldt dus alleen voor dat laatste menu

[ Voor 18% gewijzigd door wizzkizz op 11-03-2004 00:30 ]

[SchizoDuckie]

wizzkizz schreef op 10 maart 2004 @ 22:28:
voor dit moment rest mij dan niets anders dan inline-stylen, hoewel ik dat niet erg correct vind. Maar het is nu even niet anders.

Of zijn er nog suggesties?

ooit van classes gehoord?

[ Voor 9% gewijzigd door SchizoDuckie op 10-03-2004 23:44 ]

[wizzkizz]

Papa Eend schreef op 10 maart 2004 @ 23:41:
ooit van classes gehoord?

Als je de css en html goed had doorgelezen, had je gezien dat ik daar al gebruik van maak

[disjfa]

wizzkizz schreef op 11 maart 2004 @ 00:29:
[...]
Als je de css en html goed had doorgelezen, had je gezien dat ik daar al gebruik van maak

Nee, jij maakt gebruik van classes EN id`s. En zoals clay al zegt kan je een id maar een keer gebruiken en classes vaker. _{class="naam1 naam2" en in je css div.naam1{} en div.naam2{} and so on}

Wat jij precies wilt ben ik iig nog niet helemaal achter.

[wizzkizz]

disjfa schreef op 11 maart 2004 @ 00:35:
Nee, jij maakt gebruik van classes EN id`s. En zoals clay al zegt kan je een id maar een keer gebruiken en classes vaker. _{class="naam1 naam2" en in je css div.naam1{} en div.naam2{} and so on}

Wat jij precies wilt ben ik iig nog niet helemaal achter.

Maar je hebt hiermee wel de tip gegeven die ik nodig had, namelijk dat je meerdere classes kunt toewijzen aan één object. Ik heb zojuist de css-specs nogs ff nageslage en daar staat dat ook, dus ben ik nu van de problemen af. thnx to you and Papa Eend (en de anderen die geholpen hebben uiteraard)

<sub>voor het geval je je afvraagt of ik dat echt, echt niet wist: nu je het zegt herinner ik me het weer, ja. Maar dat zat wel heel ver weg

je kunt in je css trouwens ook div.naam1.naam2{} toewijzen las ik bij het w3c. Dit gaat helemaaal goedkomen</sub>

[Clay]

je kunt in je css trouwens ook div.naam1.naam2{} toewijzen las ik bij het w3c. Dit gaat helemaaal goedkomen

Daarvoor geldt deze nu wel:

drm
gecombineerde selectors op de manier die jij wilt werken niet in IE.

[Verwijderd]

Clay schreef op 11 maart 2004 @ 09:16:

voeg maar toe aan het groeiende lijstje

[T-MOB]

Persoonlijk zou ik het zo doen....

code:

<!-- menu Titel -->
    <div id="menu_naam">
        <h2 class="menu_head">
            <!-- titel hier -->
        </h2>
        
        <!-- body hier -->

        <div class="menu_foot">
            <!-- footer hier -->
        </div>
    </div>

De menu clases kun je een standaard format geven, voor alles wat je afwijkend wil hebben:
[css]

#menu_naam.class
{
properties
}

[/css]

Just my 2cts

[wizzkizz]

T-MOB schreef op 11 maart 2004 @ 16:02:
Persoonlijk zou ik het zo doen....
[knip]
Just my 2cts

Is mss wel een aardig id. Ik denk dat ik nu voldoende tips en adviezen gekregen heb om verder te kunnen. thnx