[css html] Probleem met een verspringend vak

[orange.x]

Ik zit met een probleem op mijn site. Ik werk met allemaal divjes, dat is voor mij nieuw iig maar het lukt me aardig. Nu is alleen het volgende aan de hand:

Als je naar www.mt.onderdegrond.nl gaat, dan zie je dat als je met je muis over de knop Student gaat en dan vervolgens over de knop De opleiding, dan springt het "main" veld naar boven, of springt, de hoogte wordt gelijk getrokken met het rechtse menu.

Het rare is dat het niet gebeurt tussen de knoppen die zogezegd "on" zijn, actief dus. Ik zie ook nergens waar in mijn code iets mis gaat, alles is gesloten en op de goede plek geopend etc. Ook in de css is alles volgens mij goed, het enigste verschil tussen de normale knop en de "on" knop is de achtergrond kleur Dus dat lijkt me ook niet het probleem..

Hieronder volgen de bestanden, een beetje lang maar goed Als iemand hier een oplossing voor weet? Geef mij die want ik word er gek van...

Wat ik zelf al geprobeerd heb is werken met min-height: 640px; bijvoorbeeld, of 100% in de #pagina van de css, maar dit helpt ook niets...

Cascading Stylesheet:

/* Algemene instellingen */
    body {
        padding: 0px;
        margin: 0px;    
        text-align: center;
    }

    a:link {
        text-decoration: none;
    }
    
    a:visited {
        text-decoration: none;
    }

/* Opmaak voor de gehele pagina */
    #pagina {
        width: 1000px; 
        padding: 0px;
    }

/* Opmaak voor de logo's van verschillende pagina's */
    #header_home {
        height: 101px;
        width: 1000px;
        background-image: url(img/header1_home.png);
        padding: 0px;
        margin: 0px;
    }

    #header_student {
        height: 101px;
        width: 1000px;
        background-image: url(img/header1_student.png);
        padding: 0px;
        margin: 0px;
    }

    #header_docent {
        height: 101px;
        width: 1000px;
        background-image: url(img/header1_docent.png);
        padding: 0px;
        margin: 0px;
    }

    #header_alumni {
        height: 101px;
        width: 1000px;
        background-image: url(img/header1_alumni.png);
        padding: 0px;
        margin: 0px;
    }

/* Menu 1 */
    #menu1 {
        background-color: #999999;
        border-bottom: 1px solid;
        color: white;
        text-align: center; 
        font-family: MS Reference Sans Serif;
        font-size: 19px;
        height: 30px;
        text-align: left; 
    }

    .menu1 a {
        background-color: #999999;
        height: 30px;
        color: white;
        margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
        float: left;
    }

    .menu1 a:hover {
        background-color: #BFBFBF;
    }

    .menu1on a {
        background-color: #BFBFBF;
        height: 30px;
        color: white;
        margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
        float: left;
    }

    #menu1space {
        background-color: #999999;
        height: 30px;
        width: 30px;
        float: left;
    }

/* Menu 2 */
    #menu2 {
        background-color: #BFBFBF;
        border-bottom: 1px solid;
        font-family: MS Reference Sans Serif;
        font-size: 17px;
        text-align: center; 
        height: 30px;
        color: white;
        text-align: left; 
    }

    .menu2 a {
        background-color: #BFBFBF;
        height: 30px;
        color: white;
        margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
        float: left;
    }

    .menu2 a:hover {
        background-color: #DADADA;
    }

    .menu2on a {
        background-color: #DADADA;
        height: 30px;
        color: white;
        margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
        float: left;
    }

    #menu2space {
        background-color: #BFBFBF;
        height: 30px;
        width: 30px;
        float: left;
    }

/* Berichten rechts */
    #opendag {
        background-color: #CC0000;
        border-left: 1px solid;
        height: 30px;
        width: 199px;
        font-size: 17px;
        color: white;   
        text-align: left; 
        float: right;
        padding-left: 20px;
    }
    
    #info {
        float: left;
        margin: 0;
        padding: 0;
        width: 199px;
        font-family: MS Reference Sans Serif;
        color: white;   
        text-align: left; 

    }
    
    .opendaginfo {
        background-color: #DB4C4C;
        border-left: 1px solid;
        height: 20px;
        width: 199px;
        font-size: 16px;
        padding-left: 25px;
    }
    
    .zieken {
        background-color: #009900;
        border-bottom: 1px solid;
        border-left: 1px solid;
        height: 30px;
        width: 199px;
        font-size: 17px;
        padding-left: 20px;
    }
    
    .ziekeninfo {
        background-color: #4CB74C;
        border-left: 1px solid;
        height: 20px;
        width: 199px;
        font-size: 16px;
        padding-left: 25px;
    }

    .contact {
        background-color: #CC9900;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-top: 1px solid;      
        height: 30px;
        width: 199px;
        font-size: 17px;
        padding-left: 20px;
    }
    
    .contactinfo {
        background-color: #DBB74C;
        border-left: 1px solid;
        height: 20px;
        width: 199px;
        font-size: 16px;
        padding-left: 25px;
    }

    .hu {
        background-color: #003366;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-top: 1px solid;      
        height: 30px;
        width: 199px;
        font-size: 17px;
        padding-left: 20px;
    }

    .huinfo {
        background-color: #4C7094;
        border-left: 1px solid;
        height: 20px;
        width: 199px;
        font-size: 16px;
        padding-left: 25px;
    }

/* Main Shizzle */
    #main {
        background-color: #DADADA;
        font-family: Arial;
        font-size: 16px;
        color: black;   
        text-align: left; 
        float: left;
        width: 801px;
        padding-left: 35px;
        padding-right: 35px;
    }

PHP:

<html>
<head>
    <title>Mediatechnologie.nl | Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="pagina">

    <div id="header_home"></div>

    <div id="menu1">
        <div id="menu1space"></div>
        <div class="menu1on"><a href="index.htm">Home</a></div>
        <div class="menu1"><a href="student.htm">Student</a></div>
        <div class="menu1"><a href="docent.htm">Docent</a></div>
        <div class="menu1"><a href="alumni.htm">Alumni</a></div>
    </div>

    <div id="menu2">
        <div id="menu2space"></div>
        <div class="menu2on"><a href="index.htm">Nieuws</a></div>
        <div class="menu2"><a href="opleiding.htm">De opleiding</a></div>
        <div class="menu2"><a href="keuzesemester.htm">Keuzesemesters</a></div>
        <div class="menu2"><a href="minors.htm">Minors</a></div>
        <div id="opendag">Open Dagen</div>
    </div>

    <div id="main">
        <div>
            
            <table>
                <tr>
                    <td colspan="2"><br><b>De Opleiding Mediatechnologie</b></td>
                </tr>
                <tr>
                    <td>[img]"img\001.png"[/img]</td>
                    <td>Hier krijg je een beeld van de bacheloropleiding Mediatechnologie, een idee over de beroepspraktijk en de onderwijsvormen. 
                        Ook vind je hier een overzicht van de vakken die je in de eerste twee jaar van de opleiding krijgt. <br><br>Lees verder.. 
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><br><b>Keuzesemesters</b></td>
                </tr>
                <tr>
                    <td>[img]"img\002.png"[/img]</td>
                    <td>Na de eerste twee jaar van de opleiding en de stage ga je je specialiseren door middel van keuzesemesters of minors. <br><br>Lees verder.. 
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><br><b>Minors ( in English )</b></td>
                </tr>
                <tr>
                    <td>[img]"img\003.png"[/img]</td>
                    <td>The minor Physical User Interfaces (30 ECTS) is open to all students. It focusses on the different aspects of the disappearing computer. <br><br>Lees verder.. 
                    </td>
                </tr>
            </table>
            <br>
        </div>
    </div>

    <div id="info">
        <div class="opendaginfo">5 November 2005</div>
        <div class="opendaginfo">10:00 - 15:00</div>
        <div class="opendaginfo">12 November 2005</div>
        <div class="opendaginfo">10:00 - 15:00</div>
        <div class="opendaginfo"></div>
        <div class="zieken">Zieken</div>
        <div class="ziekeninfo">Dhr. Go</div>
        <div class="ziekeninfo">Dhr. Bruijntjes</div>
        <div class="ziekeninfo">Mevr. Van Berkel</div>
        <div class="ziekeninfo"></div>
        <div class="contact">Contact</div>
        <div class="contactinfo">Berkenweg 10</div>
        <div class="contactinfo">3813BL</div>
        <div class="contactinfo">033-jajajaj</div>
        <div class="contactinfo"></div> 
        <div class="hu">Hogeschool Utrecht</div>
        <div class="huinfo">Klik hier om naar</div>
        <div class="huinfo">de site van HU te</div>
        <div class="huinfo">te gaan</div>
        <div class="huinfo"></div>
    </div> 
</div>

</body>
</html>

Ik hoorde dat het misschien te maken kan hebben met het probleem dat een div de ander overlapt. Opzich kan dit kloppen vanwege het feit dat de hoogte dus zo hoog wordt als het rechter menu. Maar mijn vraag is dan waarom dat juist gebeurt als ik in het menu van knop wissel, en dan ook nog eens van knop tussen het 1e menu en het 2e menu.

Als ik het rechter stuk weghaal, dan doet de site het prima namelijk..... Raaar

_{PS. ik heb er even PHP code van gemaakt voor de kleurtjes, is het wat makkelijker te zien, het is dus gewoon html}

[ Voor 44% gewijzigd door orange.x op 04-10-2005 19:43 ]

[equationunequal]

In Firefox staat het "rechter" menu overal onder het main veld en werken bovendien je afbeeldingen niet... Zorg eerst eens dat je pagina een doctype krijgt en dat je em valideert (http://validator.w3.org/c...%2Fwww.mt.onderdegrond.nl%2), dat kan al een hoop problemen oplossen / voorkomen...

Ik heb het door jou genoemde probleem trouwens niet, dus ik zou niet zo snel een oplossing weten...

[Noork]

In Opera ziet het er helemaal niet uit.


En nog iets, vind je 1000px breed niet een beetje veel voor zo'n site. Het ziet er naar mijn mening een stuk knapper uit wanneer je alles wat verkleint. Je menuitems zijn even groot (30px) als de div waar deze in staan. Maak ze eens 29px. Het toevoegen van een doctype ( <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ) lost het probleem van het verspringen op, echter de rechterkolom verspringt dan wel, maar dat valt wel op te lossen.

[ Voor 35% gewijzigd door Noork op 04-10-2005 21:12 ]

[orange.x]

Die doctype helpt trouwens niet voor dat verspring probleem, althans, niet hier..

Verder vind ik persoonlijk 1000px niet te breed. Ik vind zo'n smalle site nou niet echt mooi. Als je dan ( welke idioot doet het nog ) op 1024 zit te kijken dan zit je zo met scrollbalken in je maag gesplitst. Maargoed dat is persoonlijk...

@Hankey, Als ik em laat valideren zeurt hij alleen over de ALT dingen van de plaatjes, wat zoiezo onzin is als je dat gewoon niet wilt. En verder zegt hij dat er geen doctype is, dus in zoverre is er met mijn html niets mis, met mijn css zijn misschien wat opmaak foutjes. Verder is dat ook in orde, dus waarom het in firefox niet goed weergegeven wordt is mij dan ook een raadsel ( zoiezo, gebruik IE eens tenzij je linux hebt, maargoed ook das persoonlijk ).

Al met al ben ik er dus nog niet... Argh!

Edit. Ik heb de index even goed gezet en is volgens W3C goed ( http://validator.w3.org/c...%2Fwww.mt.onderdegrond.nl ) Ik zal de css ook nog even naar hun maatstaven zetten als ik daar zin in heb omdat dat niet echt super boeiend is vind ik.

[ Voor 14% gewijzigd door orange.x op 04-10-2005 22:06 ]

[equationunequal]

orange.x schreef op dinsdag 04 oktober 2005 @ 22:02:
Die doctype helpt trouwens niet voor dat verspring probleem, althans, niet hier..

Verder vind ik persoonlijk 1000px niet te breed. Ik vind zo'n smalle site nou niet echt mooi. Als je dan ( welke idioot doet het nog ) op 1024 zit te kijken dan zit je zo met scrollbalken in je maag gesplitst. Maargoed dat is persoonlijk...

@Hankey, Als ik em laat valideren zeurt hij alleen over de ALT dingen van de plaatjes, wat zoiezo onzin is als je dat gewoon niet wilt. En verder zegt hij dat er geen doctype is, dus in zoverre is er met mijn html niets mis, met mijn css zijn misschien wat opmaak foutjes. Verder is dat ook in orde, dus waarom het in firefox niet goed weergegeven wordt is mij dan ook een raadsel ( zoiezo, gebruik IE eens tenzij je linux hebt, maargoed ook das persoonlijk ).

Al met al ben ik er dus nog niet... Argh!

Edit. Ik heb de index even goed gezet en is volgens W3C goed ( http://validator.w3.org/c...%2Fwww.mt.onderdegrond.nl ) Ik zal de css ook nog even naar hun maatstaven zetten als ik daar zin in heb omdat dat niet echt super boeiend is vind ik.

Het wel of niet invoeren van een doctype zorgt anders wel voor verschillende render modussen van browsers. Als je een probleem wilt verhelpen dien je altijd eerst je site te voorzien van een correct doctype en te zorgen dat ie valideert. Dan weet je iig dat het daar niet aan ligt.

Wat betreft jouw probleem: dit kan je waarschijnlijk oplossen door je floats te clearen en door je overflow juist in te stellen...

Btw, waarom in godsnaam een tabel voor je tekst Dat kan toch gewoon met de correcte elementen (headers, parapraphs)...

Btw 2: een ALT atribuut opgeven bij afbeeldingen is verplicht en zeker geen onzin. Als je dit niet doet weten mensen met tekst browsers en screen readers niet wat er staat...

[ Voor 10% gewijzigd door equationunequal op 04-10-2005 22:21 ]

[orange.x]

Hankey schreef op dinsdag 04 oktober 2005 @ 22:16:
[...]


Het wel of niet invoeren van een doctype zorgt anders wel voor verschillende render modussen van browsers. Als je een probleem wilt verhelpen dien je altijd eerst je site te voorzien van een correct doctype en te zorgen dat ie valideert. Dan weet je iig dat het daar niet aan ligt.

Wat betreft jouw probleem: dit kan je waarschijnlijk oplossen door je floats te clearen en door je overflow juist in te stellen...

Btw, waarom in godsnaam een tabel voor je tekst Dat kan toch gewoon met de correcte elementen (headers, parapraphs)...

Btw 2: een ALT atribuut opgeven bij afbeeldingen is verplicht en zeker geen onzin. Als je dit niet doet weten mensen met tekst browsers en screen readers niet wat er staat...

de tabel voor de tekst is waarschijnlijk die met de plaatjes, dat leek mij even de snelste oplossing voor dit gedoe. die alt heb ik er al bijgezet omdat het anders niet helemal goed is, vooruit dan maar weer

Maar ik heb nu dus de W3C validatie... enig idee hoe ik die floats kan clearen? want die "main" wordt gelijk getrokken met het gevalletje rechts... en waarom wordt het pas geactiveerd bij het switchen tussen de menu knoppen..

Oke, na wat uitzoeken lijkt het te zitten in het Hover gedeelte van menu 1.. en dus ook gedeeltelijk in dat van menu 2. Als ik dat uitzet werkt het namelijk wel. misschien moet het een onmouseover worden omdat div misschien niet met hover werkt?

[ Voor 28% gewijzigd door orange.x op 05-10-2005 00:03 ]

[Verwijderd]

orange.x schreef op dinsdag 04 oktober 2005 @ 22:02:
( welke idioot doet het nog )

ik zou deze groep niet onderschatten.

Als ik em laat valideren zeurt hij alleen over de ALT dingen van de plaatjes, wat zoiezo onzin is als je dat gewoon niet wilt. En verder zegt hij dat er geen doctype is, dus in zoverre is er met mijn html niets mis, met mijn css zijn misschien wat opmaak foutjes.

Het lijkt erop dat je "mee wilt doen" met "de hype" van CSS, maar de semantiek en usability laat je achterwege....why bother ?

HTML:

<div id="menu1"> 
        <div id="menu1space"></div> 
        <div class="menu1on"><a href="index.htm">Home</a></div> 
        <div class="menu1"><a href="student.htm">Student</a></div> 
        <div class="menu1"><a href="docent.htm">Docent</a></div> 
        <div class="menu1"><a href="alumni.htm">Alumni</a></div> 
    </div>

dit kan bijv. op z'n minst 50% korter

[ Voor 39% gewijzigd door Verwijderd op 05-10-2005 00:14 ]

[orange.x]

@ bakman
Opzich valt het wel mee allemaal met het mee willen doen. Ik ben hiervoor eigenlijk altijd nog heilig gebruiker geweest van tabellen. Omdat ik daar tot dusver alles mee kon maken wat ik wilde. Nu is het in dit geval een probleem omdat ik rechts informatie wil plaatsen die langer kan zijn dan het midden, wat met tabellen haast onmogelijk is zonder allemaal moeilijke cellspanning en rowspanning voor elkaar te krijgen.

Waar jij op doelt met de site die je geeft gebruik ik eigenlijk ook al. In de tekst velden komt er eigenlijk weinig verschil, alleen dat ik geen < strong > en <p> gebruik, voor de rest wil ik wel headers gebruiken. Dusja, zoveel verschil is het dan ook niet meer.

Verder ben ik nu "overgestapt", of eerder een uitstap, omdat het hiermee wel mogelijk is wat ik dus wil. Maar toch zijn er nog dingen die niet helemaal goed gaan. Snap ook niet waarom er 5 verschillende browsers moeten zijn maargoed, daar zijn vast wel goede redenen voor!

Over je code... ja is mogelijk, maar wat maakt het in principe uit, ik moet deze code presenteren aan school, en volgens mij lopen daar niet al te slimme mensen rond die er werkelijk veel van begrijpen ( volgens mijn projectgoede leraar, de man die ons stuurt, kan je nog met frames werken... ik bedoel maar ) dus als ik het zo neerzet is er ook nog wat van te begrijpen, je kan voor de 3e en 4e knop ( id=menu2 ) de divjes en id's weghalen

HTML:

    <div id="menu2back">
        <div id="menu2space"></div>
        <div id="menu2on"><a href="index.htm">Nieuws</a></div>
        <div id="menu2">
            <a href="opleiding.htm">De opleiding</a>
            <a href="keuzesemester.htm">Keuzesemesters</a>
            <a href="minors.htm">Minors</a>
        </div>
        <div id="opendag">Open Dagen</div>
    </div>

Maargoed dat is een andere discussie.... Ik zie tot dusver nog niet echt een oplossing voor mijn probleem.

Werkt het volgende wel goed? Daar zit ik nu namelijk naar te kijken:

Cascading Stylesheet:

    #menu1 a {
        background-color: #999999;
        height: 30px;
        color: white;
        margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
        float: left;
    }

    #menu1 a:hover {
        background-color: #BFBFBF;
    }

    #menu1on a {
        background-color: #BFBFBF;
        height: 30px;
        color: white;
        margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
        float: left;
    }

En dan doel ik op de #menu1 a:hover {, als ik deze code namelijk even tijdelijk uitschakel zie ik dus geen effect als ik eroverheen ga met de muis, maar het verspring effect is wel weg Dat is op zijn minst vreemd te noemen. Ook schijnt het in firefox weer wel goed te werken ....

[ Voor 77% gewijzigd door orange.x op 05-10-2005 00:32 ]

[equationunequal]

orange.x schreef op dinsdag 04 oktober 2005 @ 23:28:
Maar ik heb nu dus de W3C validatie... enig idee hoe ik die floats kan clearen? want die "main" wordt gelijk getrokken met het gevalletje rechts... en waarom wordt het pas geactiveerd bij het switchen tussen de menu knoppen..

Cascading Stylesheet:

#clear {
    clear : both;
}

orange.x schreef op woensdag 05 oktober 2005 @ 00:21:
Over je code... ja is mogelijk, maar wat maakt het in principe uit, ik moet deze code presenteren aan school, en volgens mij lopen daar niet al te slimme mensen rond die er werkelijk veel van begrijpen ( volgens mijn projectgoede leraar, de man die ons stuurt, kan je nog met frames werken... ik bedoel maar ) dus als ik het zo neerzet is er ook nog wat van te begrijpen, je kan voor de 3e en 4e knop ( id=menu2 ) de divjes en id's weghalen

Ik zou met niet aanpassen aan leraren die het fout doen, maar zelf werken op de juiste manier. /imo

[ Voor 49% gewijzigd door equationunequal op 05-10-2005 00:34 ]

[orange.x]

Hankey schreef op woensdag 05 oktober 2005 @ 00:31:
[...]

Cascading Stylesheet:

#clear {
    clear : both;
}

[...]


Ik zou met niet aanpassen aan leraren die het fout doen, maar zelf werken op de juiste manier. /imo

Tja ik vind dat altijd een beetje priegelen, voor mezelf is het ook duidelijker en werkt het net zo snel als dat ik niet elke keer die dingen definieer met een div. Maargoed.

Die clear.. hoe ga ik die toepassen? Want ik werk dus met floats.. of moet ik dan gewoon in bijvoorbeeld menu1 a { clear: both; en dan de rest } ? die clear is eigenlijk het tegenovergesteld van een float, bij een float geef je aan of ze dus uberhaupt naast iets gezet moeten worden en met de clear geef je alleen aan of iets links mag voorkomen of rechts of nergens... dus wat precies de meerwaarde ervan is

[ Voor 19% gewijzigd door orange.x op 05-10-2005 00:46 ]

[equationunequal]

Die clear moet je toepassen bij de eerste div na de floats. Je kan hiervoor een lege div aanmaken die alleen als clear dient. Semantisch niet helemaal correct, maar levert vaak wel het beoogte resultaat...

Zo heb ik het in een van mijn sites toegepast:

HTML:

<div id="content">
    Content: deze div float links
</div>
<div id="clear">
    &nbsp;
</div>

[disjfa]

Hankey schreef op woensdag 05 oktober 2005 @ 01:04:
Zo heb ik het in een van mijn sites toegepast:

Alleen zoals jij het toepast mag er maar één element een clear verkrijgen van de css aangezien id`s uniek zijn.

[equationunequal]

disjfa schreef op woensdag 05 oktober 2005 @ 01:05:
[...]

Alleen zoals jij het toepast mag er maar één element een clear verkrijgen van de css aangezien id`s uniek zijn.

Klopt, en dat is bij die site ook het enige element dat een clear heeft...

_{http://www.newskin.nl/misplaced, site in ontwikkeling}

Als ik me niet vergis zou dit ook bij de TS moeten werken als hij de clear div onder de info div zet (de laatste div die gefloat wordt)...

[ Voor 16% gewijzigd door equationunequal op 05-10-2005 01:18 ]

[disjfa]

Hankey schreef op woensdag 05 oktober 2005 @ 01:16:
[...]
_{site in ontwikkeling}

Ook al zo`n site compleet vol div`s. Waarom gebruiken mensen alleen maar div`s hebben jullie nooit gehoord van andere html elementen ofzo Op een moment gebruiken sommige mensen alleen tables en gaan dan over op een even slechte manier op alleen maar divs Waarom. Er zijn zo veel meer elementen die beter te gebruiken zijn.

[equationunequal]

disjfa schreef op woensdag 05 oktober 2005 @ 01:19:
[...]

Ook al zo`n site compleet vol div`s. Waarom gebruiken mensen alleen maar div`s hebben jullie nooit gehoord van andere html elementen ofzo Op een moment gebruiken sommige mensen alleen tables en gaan dan over op een even slechte manier op alleen maar divs Waarom. Er zijn zo veel meer elementen die beter te gebruiken zijn.

Leg uit. Ik heb hier gekozen voor divs (ik neem aan dat je op het menu doelt) zodat ik rolover images zonder javascript kon maken. Hier is imo niets mis mee. Tuurlijk staat een list netter als menu, maar daar kan ik het gewenste effect niet mee bereiken (zie ook de overlappende menu items). De content wordt uiteraard gestructureerd met de juiste html elementen en de rest van de site is opgedeeld in een minimaal benodigd aantal divs. Ook hier is niets mis mee...

Zie ook m'n css code voor een rollover menuitem:

Cascading Stylesheet:

#welcomeButton {
    position : absolute;
    top : 18px;
    left : 0;
    width : 156px;
    height : 90px;
    margin : 0;
    padding : 0;
}
#welcomeButton a {
    display : block;
    width : 156px;
    height : 90px;
    background : url("bt_welcome.gif") no-repeat 0 0;
}
#welcomeButton a:hover {

    background-position : -156px 0;
}

Ik zou graag zien hoe jij hetzelfde resultaat bereikt (zonder javascript te gebruiken)...

_{je eigen site zit overigen ook vol met divs}

/off-topic

[ Voor 39% gewijzigd door equationunequal op 05-10-2005 02:17 ]

[Verwijderd]

disjfa schreef op woensdag 05 oktober 2005 @ 01:19:
[...]

Ook al zo`n site compleet vol div`s. Waarom gebruiken mensen alleen maar div`s hebben jullie nooit gehoord van andere html elementen ofzo Op een moment gebruiken sommige mensen alleen tables en gaan dan over op een even slechte manier op alleen maar divs Waarom. Er zijn zo veel meer elementen die beter te gebruiken zijn.

precies waar ik op doelde: semantiek, maar orange.x denkt dat ie daar al aan voldoet want hij valideert

HTML:

<div id="menu2back">
        <div id="menu2space"></div>
        <div id="menu2on"><a href="index.htm">Nieuws</a></div>
        <div id="menu2">
            <a href="opleiding.htm">De opleiding</a>
            <a href="keuzesemester.htm">Keuzesemesters</a>
            <a href="minors.htm">Minors</a>
        </div>

kan heel anders:

HTML:

<div id="menu">
 <ul>
  <li class="selected"><a href="index.htm">Nieuws</a></li>
  <li><a href="opleiding.htm">De opleiding</a></li>
  <li><a href="keuzesemester.htm">Keuzesemesters</a></li>
  <li><a href="minors.htm">Minors</a></li>
 </ul>
</div>

maar het kan zelfs zonder ul en li's...

en volgens mij zijn hiervoor paddings uitgevonden
<div id="menu2space"></div> ??

[ Voor 22% gewijzigd door Verwijderd op 05-10-2005 08:58 ]

[orange.x]

Voor dat padding waar jij op doelt werkt natuurlijk alleen als je links net zoveel ruimte wil als rechts. Aangezien ik ga voor 15px tussen de knoppen en vanaf links 30px van de rand kan ik wel padding-left in die knoppen douwen maar dan komt de ruimte dus ook 30px tussen de knoppen, en dat wil mark niet.

En waarom zou ik in godsnaam weer een hele andere groep elementen gaan gebruiken zoals die ul en li dingen als ik ook gewoon een div erin kan zetten dat maakt dus echt geen reet uit, dat maakt het voor mij weer ingewikkelder. En dan hebben die mensen die zo graag een text browser gebruiken pech hoor, ik kan niet als ik een site maak met iedereen rekening houden. Misschien is er wel 1 iemand bezig met een nieuwe concept en die gebruikt weer hele andere dingen, dan moet ik daar ook weer wat op verzinnen. Dat gaat me dus net wat te ver. Vooralsnog is IE de meest gebruikte browser en in Firefox werkt mijn site ook goed, dus waarom zou ik dan voor die 3% opera gebruikers en die 1% andere gebruikers mijn hele site weer moeilijk in elkaar gaan steken.

[TeeDee]

Een aantal steekwoorden hier zijn, toegankelijkheid en zoek machines.

Wat betreft het gebruik van ul e.d.: Dit zijn elementen die daar voor gemaakt zijn. Een div niet. Je zegt dat je het artikel op naarvoren gelezen hebt? Lees deze ook nog even door.

[Erkens]

Hankey schreef op woensdag 05 oktober 2005 @ 01:34:
Leg uit. Ik heb hier gekozen voor divs (ik neem aan dat je op het menu doelt) zodat ik rolover images zonder javascript kon maken. Hier is imo niets mis mee. Tuurlijk staat een list netter als menu, maar daar kan ik het gewenste effect niet mee bereiken (zie ook de overlappende menu items). De content wordt uiteraard gestructureerd met de juiste html elementen en de rest van de site is opgedeeld in een minimaal benodigd aantal divs. Ook hier is niets mis mee...

Je kan met CSS praktisch elk element hetzelfde renderen als welk willekeurig element.
Kijk bijvoorbeeld eens naar dit forum, de menuitems bovenin is een list. Daarnaast kan een beetje browser op elk element een :hover toepassen.
Voor IE is daar wel een hulpstuk voor nodig

[orange.x]

Oke, ik ben even bezig geweest:

als je nu opnieuw naar de site gaat werkt het wel. Probleempje wat geweest zou kunnen zijn is dat ik de "header" Open dagen op de 2e menubalk geplaatst had. Nu heb ik van de 2e menu balk en de het main gedeelte ondergebracht in 1 div. en het complete rechter deel in een div die ik laat floaten tegen de menu2 en de main. Dit werkt prima, ook met dat hover effect.

In IE wordt de site goed weergegeven, in Opera wordt de site goed weergegeven, alleen ( blugh ^$%^$ ) firefox presteert het om het niet goed te doen... Waar dit aan ligt is mij echt een raadsel. Het lijkt erop dat hij de main gewoon breder maakt dan nodig is. Dat kan gewoon haast niet. Maargoed. misschien ga ik dan nog wel een keer overnieuw beginnen, ik zie iig niet wat ik nu fout gedaan heb.

[equationunequal]

Erkens schreef op woensdag 05 oktober 2005 @ 10:40:
[...]

Je kan met CSS praktisch elk element hetzelfde renderen als welk willekeurig element.
Kijk bijvoorbeeld eens naar dit forum, de menuitems bovenin is een list. Daarnaast kan een beetje browser op elk element een :hover toepassen.
Voor IE is daar wel een hulpstuk voor nodig

Voor zover ik weet kan je list items niet elkaar laten overlappen. Dat is mij nog niet gelukt iig. Dit was de enige manier waarop dat wel lukte. Als iemand een werkend alternatief is dat wel semantisch correct is hoor ik het graag, maar tot nu toe ben ik dat nog niet tegen gekomen...

wederom /off-topic

orange.x schreef op woensdag 05 oktober 2005 @ 11:43:
In IE wordt de site goed weergegeven, in Opera wordt de site goed weergegeven, alleen ( blugh ^$%^$ ) firefox presteert het om het niet goed te doen... Waar dit aan ligt is mij echt een raadsel. Het lijkt erop dat hij de main gewoon breder maakt dan nodig is. Dat kan gewoon haast niet. Maargoed. misschien ga ik dan nog wel een keer overnieuw beginnen, ik zie iig niet wat ik nu fout gedaan heb.

Je kan er van uit gaan dat FireFox de site "goed" weergeeft (dus zoals het hoort) en IE niet. De reden hiervan is waarschijnlijk dat je vergeet je padding & border van de width af te trekken. Zoek eens op "box model", genoeg over te vinden...

(voor de duidelijkheid: width = margin + border + padding + inhoud + padding + border + margin)

[ Voor 42% gewijzigd door equationunequal op 05-10-2005 11:55 ]

[Erkens]

Hankey schreef op woensdag 05 oktober 2005 @ 11:46:
[...]


Voor zover ik weet kan je list items niet elkaar laten overlappen. Dat is mij nog niet gelukt iig. Dit was de enige manier waarop dat wel lukte. Als iemand een werkend alternatief is dat wel semantisch correct is hoor ik het graag, maar tot nu toe ben ik dat nog niet tegen gekomen...

je kan li-elementen ook gewoon uit de flow rukken en over elkaar heen plaatsen, op dezelfde manier als je met je div'jes doet.

[equationunequal]

Erkens schreef op woensdag 05 oktober 2005 @ 11:55:
[...]

je kan li-elementen ook gewoon uit de flow rukken en over elkaar heen plaatsen, op dezelfde manier als je met je div'jes doet.

Mmmk, back to the drawing board dan maar ...

[orange.x]

@Hankey over die width
Als ik de width dus instel op 200px. en de padding left staat bij de 1e balk op 20 en bij de 2e balk eronder op 25, dan gaat het dus niet goed... Bij de balk met padding 25 maakt hij de balk groter... pas zodra ik de witdh op 195 zet voor balk 2, komt deze gelijk met balk 1... dus dat verhaal wat je zegt klopt niet.

de bedoeling van padding left is hoeveel px je over wilt slaan van links voordat je begint met plaatsen van de tekst. En de breedte heeft dus alleen invloed op de ruimte die je over houdt, namelijk: 200-20 of 200-25. De balk daarentegen moet toch altijd 200 blijven wat je padding ook is ( tenzij die meer dan 200 is, maar das niet logisch. ) maar dat is dus niet zo

[ Voor 36% gewijzigd door orange.x op 05-10-2005 12:42 ]

[equationunequal]

orange.x schreef op woensdag 05 oktober 2005 @ 12:39:
@Hankey over die width
Als ik de width dus instel op 200px. en de padding left staat bij de 1e balk op 20 en bij de 2e balk eronder op 25, dan gaat het dus niet goed... Bij de balk met padding 25 maakt hij de balk groter... pas zodra ik de witdh op 195 zet voor balk 2, komt deze gelijk met balk 1... dus dat verhaal wat je zegt klopt niet.

de bedoeling van padding left is hoeveel px je over wilt slaan van links voordat je begint met plaatsen van de tekst. En de breedte heeft dus alleen invloed op de ruimte die je over houdt, namelijk: 200-20 of 200-25. De balk daarentegen moet toch altijd 200 blijven wat je padding ook is ( tenzij die meer dan 200 is, maar das niet logisch. ) maar dat is dus niet zo

Het gaat erom dat je de padding op moet tellen bij de daadwerkelijk width. Wil je dat een element 200px breed is, met een padding aan de linkerkant van 20 pixels, dan wordt de width van het element 200 - 20 pixels = 180 pixels. Als je dan nog een border van 1 pixel aan beide kanten wilt moet je ook deze aftrekken van de totale breedte dus 180 - 2 = 178. Misschien dat ik het niet helemaal duidelijk uit leg: zoek eens op dit forum naar "box model" en meet de widths van je elementen eens na met een print screen in PhotoShop, je ziet dan snel genoeg wat er fout zit...

code:

[--------------------totale width element---------------------]
[margin - border - padding - width - padding - border - margin]

[Erkens]

margin hoort niet bij de width van het element

[equationunequal]

Hmmk, ik dacht dus van wel..

Padding & border iig wel en daar gaat het in dit geval om...

_{Margin hoort wel bij de totale ruimte die het element inneemt...}

[ Voor 32% gewijzigd door equationunequal op 05-10-2005 13:00 ]

[disjfa]

Hankey schreef op woensdag 05 oktober 2005 @ 12:59:
Padding & border iig wel en daar gaat het in dit geval om...

Ligt eraan welk box model

Borders en width gaan iig voor beginners vaak niet goed samen cross browser.

[equationunequal]

disjfa schreef op woensdag 05 oktober 2005 @ 13:00:
[...]

Ligt eraan welk box model

Borders en width gaan iig voor beginners vaak niet goed samen cross browser.

True, ik heb het nu over het standaard box-model dat firefox hanteert en dat IE hanteert in standard complaince mode...

[Rowanov]

Even ter verduidelijking dit plaatje van het w3c boxmodel:

Bron: http://www.w3.org/TR/REC-CSS2/box.html

[Hagar]

Screenshot laat de block sizes van de site zien in Firefox dmv de Web Developer extension.
http://hagar.mine.nu/dump/muk/mt.onderdegrond.png

Duidelijker dan dit kan je het niet krijgen.

[orange.x]

Ik ben nu zover, dat hij in zowel iexplorer, opera en firefox een nagenoeg zelfde site laat zien.

Alleen rest mij nog het probleem dat de main niet net zo breed wordt als de balk erachter zeg maar. Alleen in firefox oogt hij nu zoals hij moet zijn, alleen moet het nog naar het midden, alleen weet niet hoe ik dat moet doen, div align werkt niet, text align heeft geen werking in firefox, niet voor de divjes iig...

[Verwijderd]

orange.x schreef op woensdag 05 oktober 2005 @ 10:22:
En waarom zou ik in godsnaam weer een hele andere groep elementen gaan gebruiken zoals die ul en li dingen als ik ook gewoon een div erin kan zetten dat maakt dus echt geen reet uit, dat maakt het voor mij weer ingewikkelder.

lekker ingewikkeld.

waarom gebruik je geen tables, werkt altijd ! Ik begrijp echt niet waarom je zo moeilijk aan het doen bent voor niets....

[ Voor 9% gewijzigd door Verwijderd op 05-10-2005 14:23 ]

[equationunequal]

Tables zijn niet bedoelt voor opmaakt doeleinden en dienen alleen gebruikt te worden voor tabulaire data ...

Als je eenmaal een beetje doorhebt hoe je met css en de juiste elementen je pagina op kan maken, gaat dit veel sneller dan met tabellen en is het ook nog eens een stuk eenvoudiger om alles cross browser te krijgen. Het kost in het begin wat moeite, maar in the long run heb je er veel meer aan...

_{Een voordat ik weer aangevallen wordt: ik ben zelf ook nog aan het leren en weet ook nog niet precies hoe alles werkt, maar ik probeer het tenminste goed te doen en ik wordt er steeds beter in ...}

@orange.x: Ik vermoed dat het probleem met je main die in ie niet voldoende meerekt te maken heeft met je tabel. Haal die eens weg en structureer de inhoud zoals het hoort (dus met headers en paragraphs).

Text-align werkt wel in FireFox. "text-align : center;" centreert bijvoorbeeld de inhoud van een container en daar vallen ook divjes onder. Het werkt mij alleen niet meer als je je divs float, dan trekken ze zich niets meer aan van de text-align van de container waar ze in zitten...

[ Voor 30% gewijzigd door equationunequal op 05-10-2005 14:46 ]

[Erkens]

Hankey schreef op woensdag 05 oktober 2005 @ 14:34:
Tables zijn niet bedoelt voor opmaakt doeleinden en dienen alleen gebruikt te worden voor tabulaire data ...

Als je eenmaal een beetje doorhebt hoe je met css en de juiste elementen je pagina op kan maken, gaat dit veel sneller dan met tabellen en is het ook nog eens een stuk eenvoudiger om alles cross browser te krijgen. Het kost in het begin wat moeite, maar in the long run heb je er veel meer aan...

Je vergeet nog even het puntje dat je code veel overzichtelijker wordt en dus sneller een wijziging kunt maken wat dus "in the long run" _nog_ meer tijd kan besparen
eik zijn er geen nadelen, behalve dat je wellicht iets moet leren wat je eigenlijk al de eerste keer had moeten doen toen je voor het eerst met HTML bezig ging

[equationunequal]

Erkens schreef op woensdag 05 oktober 2005 @ 15:11:
[...]

Je vergeet nog even het puntje dat je code veel overzichtelijker wordt en dus sneller een wijziging kunt maken wat dus "in the long run" _nog_ meer tijd kan besparen
eik zijn er geen nadelen, behalve dat je wellicht iets moet leren wat je eigenlijk al de eerste keer had moeten doen toen je voor het eerst met HTML bezig ging

Good point Vroeger werdt het gebruik van tabellen "gedoogd" en wisten de meesten niet beter. Tegenwoordig is het wel anders en zijn er genoeg middelen beschikbaar (tutorials, referenties) om elke denkbare lay-out te maken zonder gebruik te maken van tables. Ook frames zijn over het algemeen vrij nutteloos en hebben meer nadelen dan voordelen.

Semantisch correct gebruik maken van html icm. css zorgt voor een wat langere learning curve (ik leer ook nog steeds nieuwe dingen), maar levert je wel een hoop voordelen op...

[Verwijderd]

Hankey schreef op woensdag 05 oktober 2005 @ 14:34:
Tables zijn niet bedoelt voor opmaakt doeleinden en dienen alleen gebruikt te worden voor tabulaire data ...

oh is dat zo ? Ik doelde er dan ook op dat orange.x zich niet aan de semantiek wil houden maar wel "stoer" met css wil bezig zijn, als je er dan wat van zegt dan is ineens alles onzin en "maakt het geen reet uit", dan zeg ik mijn beurt: gebruik dan gewoon tabellen dan ben je van het gezeik af.

Zelf heb ik deze 2 jaar geleden in elkaar gezet, en deze is wat recenter, look mom! no tables voor dat je denkt dat ik poep praat.

[ Voor 51% gewijzigd door Verwijderd op 06-10-2005 08:21 ]

[equationunequal]

Verwijderd schreef op donderdag 06 oktober 2005 @ 08:12:
[...]


oh is dat zo ? Ik doelde er dan ook op dat orange.x zich niet aan de semantiek wil houden maar wel "stoer" met css wil bezig zijn, als je er dan wat van zegt dan is ineens alles onzin en "maakt het geen reet uit", dan zeg ik mijn beurt: gebruik dan gewoon tabellen dan ben je van het gezeik af.

Zelf heb ik deze 2 jaar geleden in elkaar gezet, en deze is wat recenter, look mom! no tables voor dat je denkt dat ik poep praat.

Je kan hem beter nu de juiste weg tonen dan te zeggen dat hij het maar weer met tables op moet lossen . Als hij zegt dat het "geen reet uit maakt" kunnen wij uitleggen waarom het wel een reet uit maakt ...

[Verwijderd]

code:

[--------------------totale width element---------------------]
[margin - border - padding - width - padding - border - margin]

toch vreemd...

ik zou zeggen:
[margin - border - width - border - margin] = width inhoud is [padding]inhoud[padding] van width
dit lijkt mij iig logisch

[equationunequal]

Verwijderd schreef op donderdag 06 oktober 2005 @ 11:46:
[...]

toch vreemd...

ik zou zeggen:
[margin - border - width - border - margin] = width inhoud is [padding]inhoud[padding] van width
dit lijkt mij iig logisch

Over de logica van het W3c boxmodel is al vaak gediscussieerd op dit forum. Als je er over nadenkt is het best logisch, omdat je bij de breedtje en hoogte van een box altijd rekening moet houden met de "buitenmaten" van de box en niet alleen met de inhoud ervan. De padding & borders zijn dus onderdeel hiervan. De width heeft dus betrekking tot de gehele box en niet de inhoud ervan.

Ff voor de duidelijkheid, omdat mijn schema niet helemaal correct was:

code:

[-----------------plaats dat element inneemt------------------]
         [-----------totale width element------------]
[margin - border - padding - width - padding - border - margin]

[ Voor 6% gewijzigd door equationunequal op 06-10-2005 12:21 ]