[css] Newbie* Divs lopen de container uit. - Softwareontwikkeling

donderdag 11 december 2003 20:11

Acties:

Powerball @ 12.582

Topicstarter

Ben voor het eerst aan het spelen met CSS icm layers en divs.

Nu heb ik de volgende testsite:

http://evaarties.xs4all.nl/testsite/

Nu staan aan de linkerkant 2 aparte bruine divs (niet op de kleuren letten

). Alleen valt de onderste bruine div buiten de container. Zelf kan ik geen fouten ontdekken in onderstaande code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>TVGids.nl</title>
    <link rel=StyleSheet HREF="basis.css" TITLE="Layout">
</head>
<body>


<div id='container' name='Container'>
    <div id='koptekst' name='Koptekst'>
        test
    </div>
    <div id='links' name='Links'>
        <div class='vaklinks' name='Menu'>
            <h1>Menu</h1>
        </div>
        <div class='vaklinks' name='test'>
            <h1>Snelkeuzes</h1>
        </div>
    </div>
    <div id='rechts' name='Rechts'>
        test
    </div>
    <div id='inhoud' name='Inhoud'>
        test
    </div>
</div>

</body>
</html>

Bijbehorende css:

code:

body {
    font-family: sans-serif;  
}

div {
    border: 1px solid purple;
}

#container {
    margin: 5px 5px 5px 5px;
}

#koptekst {
    border-bottom: 1px solid purple;
    text-vertical-align: top;
}

#inhoud {
    margin-left: 14em;
    margin-right: 14em;
}

#links {
    float: left;
    width: 18em;
    margin: 0;
    font-size: 0.75em;
}

#rechts {
    float: right;
    width: 18em;
    margin: 0;
    font-size: 0.75em;
}

.vaklinks {
    background-color: #5F310B;
    color: #926E00;
    border-top: 2px solid #C12B03;
}

.vaklinks h1 {
    margin: 0;
    font-size: 1.2em;
    color: #008000;
}

Wat doe ik fout?

Misschien overbodig om te zeggen, maar ik gebruik oa de volgende sites als leidraad:

http://www.glish.com/css/
http://www.yourhtmlsource...eets/divspositioning.html

[ Voor 35% gewijzigd door evaarties op 11-12-2003 20:14 ]

donderdag 11 december 2003 22:29

Acties:

Blaise

#container een position:absolute meegeven helpt in ieder geval.
(in IE6 dan)

[ Voor 10% gewijzigd door Blaise op 11-12-2003 22:30 ]

donderdag 11 december 2003 23:02

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Dit heb ik geprobeerd.. maar lost het probleem niet op

. http://evaarties.xs4all.nl/www.tvgids.nl staat de huidige ontwikkeling.

vrijdag 12 december 2003 13:36

Acties:

Blaise

Bij mij blijven die divs gewoon netjes in hun container, in IE6, Opera7 en Firebird 0.7.

Het enige "foute" wat ik zie is dat de headlines te breed zijn waardoor het vrij lelijk wordt met het aantal reacties dat niet meer op de lijn past.

En het is ook niet geschikt voor een 800:600 resolutie, terwijl veel mensen nog steeds die resolutie hebben of browsen met een venster van die grootte. Misschien iets om op te letten.

Verder is een layout met zoveel floats erg fragiel, ik denk dat je het jezelf op deze manier heel moeilijk maakt.

vrijdag 12 december 2003 18:28

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Bij de 2e link die ik heb gegeven, blijven de divs inderdaad netjes in de container. Dit komt echter doordat de headlines de container hoger maken. De linker en rechterkant vallen zodoende ruim binnen de container.

Als je goed kijkt, loopt het middenvak ook totaal niet goed. In Opera 7 zitten er bijvoorbeeld witregels tussen 'Fok.net Headlines' en de headlines.

In IE6 zie ik helemaal geen 'Fok.net Headlines' -> Deze tekst is opeens wit

vrijdag 23 januari 2004 10:06

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Heb na veel puzzelen eindelijk een redelijk werkende layout. Alleen nog het volgende probleem:

De pagina moet vaak 2 maal geladen worden (met CTRL+F5) omdat er anders geen horizontale scrollbalk aanwezig is in Internet Explorer. Heeft iemand tips? Ik heb al proberen te spelen met 'position: relative', dit lost het 2 maal laden probleem niet op.

Een link naar de pagina: http://evaarties.xs4all.nl/www.tvgids.nl/index.html , het laden kan even duren (slechts een P200 met emule).

De betreffende CSS:

code:

body {
    font-family: sans-serif;
    background-color: #F7FCFD;
}

/*div {
    border: 1px solid purple;
} */

h1 {
    font-size: 10px;
}

#clearboth {
    clear: both;
}

#container {
    margin: 5px auto;
}

#koptekst {
    text-vertical-align: top;
}

#inhoud {
    margin-left: 14em;
    margin-right: 14em;
    position: relative;
}

#links {
    float: left;
    width: 18em;
    position: relative;
    margin: 0;
    font-size: 0.75em;
    background-color: #51D0E7;
}

#rechts {
    float: right;
    width: 18em;
    position: relative;
    margin: 0;
    font-size: 0.75em;
    background-color: #51D0E7;
}

ul {
    list-style: none;
    margin : 0
}

zaterdag 24 januari 2004 13:40

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Iemand?

zaterdag 24 januari 2004 17:28

Acties:

saviour

Is het niet gewoon een cache probleem? Ik heb hier namelijk geen problemen in IE 5.1, 5.5 en 6.

[ Voor 12% gewijzigd door saviour op 24-01-2004 17:30 ]

zaterdag 24 januari 2004 17:52

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Dan zal ik het daar maar op houden. Het is niet echt storend, alleen vaag.

zaterdag 24 januari 2004 17:52

Acties:

creative8500

freedom.

Je bent een beetje doorgeslagen met je unordered list-gebruik...

HTML:

<ul>
    <li>
        <span class='Zendernaam'>Veronica</span>
    </li>
    <ul>
        <li>
            <span class='Programmatijd'>06.00</span>
            <span class='Programmatitel'>Fox kids</span>
            <span class='Programmagenre'>Jeugd</span>
        </li>
        <!-- (...) -->
    </ul>
</ul>

Moet zoiets zijn natuurlijk:

HTML:

<table summary="overzicht van tijden en genres van uitgezonden tv-programma's">
    <caption>Veronica</caption>
    <thead>
        <tr>
            <th>tijd</th>
            <th>titel</th>
            <th>genre</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>06:00</td>
            <td>Fox kids</td>
            <td>Jeugd</td>
        </tr>
    </tbdoy>
</table>

zaterdag 24 januari 2004 18:13

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Uhm zou kunnen, het ziet er nu uit als in hier: http://evaarties.xs4all.nl/tv

Ben nog niet overtuigd om er een tabel van te maken.

zaterdag 24 januari 2004 18:40

Acties:

creative8500

freedom.

evaarties schreef op 24 januari 2004 @ 18:13:
Uhm zou kunnen, het ziet er nu uit als in hier: http://evaarties.xs4all.nl/tv

"Wichdoctor, give us the magic words!"
- "Just say:"

Cascading Stylesheet:

1 2	tr { display: block; } td { display: inline; }

zaterdag 24 januari 2004 18:42

Acties:

evaarties

Powerball @ 12.582

Topicstarter

tnx. ik ga er naar kijken. Klinkt wel logischer, het is tenslotte bij elkaar horende informatie.

dinsdag 13 april 2004 13:34

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Even een kickje van mijn oude topic aangezien er enige vooruitgang is geboekt.

De site ziet er in Opera (iig 7.5) nu prima uit.. alleen in IE (iig 6) werkt hij niet .. heb het probleem alleen nog niet gevonden.

De site wordt nu ook gehosted op een snellere locatie:

http://www.vaarties.nl/

Op dit moment is de data verouderd, maar normaal verschuiven de tijden die in de middelste kolom staan in IE volledig naar links (van de GoT en Fok Topics) als de linkerkolom goed gevuld is.

Het effect is ongeveer te zien als je 1 keer klikt op de 'zoek' knop. In Opera wordt dan in de middelste kolom elke Zendernaam weergegeven. Deze zijn in IE verdwenen lijkt het wel.

Ergo: Als je na het klikken de broncode vergelijkt in IE en Operadan staan in IE Zendernamen er niet eens tussen. Gaat IE anders om met een formulier dan Opera?

dinsdag 13 april 2004 16:32

Acties:

Verwijderd

Effe tussendoor, hoe kan het dat mijn externe CSS niet door Dreamweaver gezien wordt als ik edit in DW. Als ik er een interne CSS van maak word alles wel gelezen

dinsdag 13 april 2004 16:36

Acties:

chris

Verwijderd schreef op 13 april 2004 @ 16:32:
Effe tussendoor, hoe kan het dat mijn externe CSS niet door Dreamweaver gezien wordt als ik edit in DW. Als ik er een interne CSS van maak word alles wel gelezen

welke dw gebruik je? ik kan me herinneren toen ik dw nog gebruikte dat ie dit wel deed....

woensdag 14 april 2004 08:10

Acties:

evaarties

Powerball @ 12.582

Topicstarter

? lol, mij 'blij maken met een dode mus' - antwoord

woensdag 14 april 2004 09:24

Acties:

Verwijderd

chris schreef op 13 april 2004 @ 16:36:
[...]

welke dw gebruik je? ik kan me herinneren toen ik dw nog gebruikte dat ie dit wel deed....

Droombreier MX, echt een irritant probleem

_{soz pelle}

[ Voor 6% gewijzigd door Verwijderd op 14-04-2004 13:59 ]

woensdag 14 april 2004 09:59

Acties:

Pelle

🚴‍♂️

AngeR > gelieve ontopic te blijven. Als het niet werkt en het zou wel moeten werken, dan is daar maar 1 oplossing voor: kijk of het in de help staat. Zo niet, bel ze op, MacroMedia is redelijk goed in het geven van support. Tel# vind je op je registratiekaart.

donderdag 15 april 2004 13:13

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Heeft iemand nog een ontopic oplossing?

donderdag 15 april 2004 18:00

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Na nog een bugje te hebben opgelost (Opera behandeld formulieren blijkbaar anders dan IE), is nu met gevulde data goed het probleem te zien.

Open deze site http://www.vaarties.nl/ maar in IE en je zult zien dat de tijden uit de middelste kolom naar links verspringen. Hetzelfde gebeurt als je zenders hebt geselecteerd en daarna op 'zoek' hebt geklikt.

Als je na het laden van de site nog een de site laadt door in de adresbalk op enter te drukken, springen de tijden wel op de juiste plek.

[ Voor 65% gewijzigd door evaarties op 15-04-2004 18:24 ]