Het lukt met tables, maar het is niet mogelijk met div's..?!

[Verwijderd]

YO

ik had een 4 jaar oude topic omhoog gekickt met als topic titel "div's centreren". Nu is dat het probleem niet, ik wist reeds hoe je een Div kan centreren in het midden van een venster. Dus om verwarring te voorkomen open ik even een nieuw topic met correcte titel.

Het probleem:

Ik heb 3 witte Div blokken. Die middelste (div 2) kan ik plaatsen op de genoemde centreer methode. Maar hoe plaats ik die linker (div 1) en rechter (div 3) ernaast met 1 pixel ruimte ertussen? Width 33% / 33% / 33% plakt ze namelijk aan elkaar. Het is niet mogelijk om met vaste pixel afmetingen te werken gezien het binnen elke resolutie (800x600/1024xetc) hetzelfde eruit moet zien. De hoogte van de blokken is 325px.



Wat weten we eigelijk?

*De height van een blok is 325px
*De width van een blok is ongeveer 33% (geen pixels, het is zoals boven vermeld voor meerdere resoluties)
*De blokken worden van elkaar onderscheiden door 1 pixel.

Hier een voorbeeld van wat ik probeer te realiseren met DIV's. HTML vb met gewone Tables:
http://www.ikwileenwebsite.nl/GoT/tables_too_div.html

In welk formaat het venster van je browser ook is en in welke resolutie je het ook bekijkt, de verhoudingen kloppen altijd in dit voorbeeld. Dat moet toch ook mogelijk wezen met Div's gezien tables hier niet voor zijn bedoeld?

Ik probeer m'n website XHTML strict te houden. Dus daarom geef ik voorkeur voor 3a 4 Div's ipv tiggg TD's.

Toch heel erg appart als je met Tables meer zou kunnen dan met Div's....

[ Voor 3% gewijzigd door Verwijderd op 13-11-2004 21:18 ]

[supakeen]

Dat kan wel, tralalala zoek maar eens goed, je hebt ook floats nodig!

[Verwijderd]

dus jij zegt:

div 1 (float: left; width:33%; height: 325px;)
div 2 (gecentreerd. width:33%; height: 325px;)
div 3 (float: right; width: 33%; height: 325px;)

en dan daartussen 2 transparante div's met beide width: 1px; height: 325px;

of niet?

[Verwijderd]

Je kan de middelste div toch gewoon een left en right margin geven van 1px?

[djluc]

en dan daartussen 2 transparante div's met beide width: 1px; height: 325px;

Gewoon borders er tussen?

[Verwijderd]

Verwijderd schreef op zaterdag 13 november 2004 @ 21:49:
Je kan de middelste div toch gewoon een left en right margin geven van 1px?

idd, klopt

[ Voor 3% gewijzigd door Verwijderd op 13-11-2004 21:53 ]

[Verwijderd]

jullie vergeten dat die marge (en ook de border) opgeteld wordt bij die 33%, dus zal het misschien net niet passen (of net wel omdat je 1% overhoud, dus minstens een pixel of 6,7)

de vraag aan de TS is hoe strikt het moet. Anders kan je misschien die lijn met een backgroundplaatje faken.

[ Voor 4% gewijzigd door Verwijderd op 13-11-2004 22:02 ]

[Verwijderd]

Desnoods een border met dezelfde kleur als de achtergrond...

[Verwijderd]

Verwijderd schreef op zaterdag 13 november 2004 @ 21:54:
jullie vergeten dat die marge opgeteld wordt bij die 33%, dus zal het misschien net niet passen (of net wel omdat je 1% overhoud, dus minstens een pixel of 6,7)

de vraag aan de TS is hoe strikt het moet. Anders kan je misschien die lijn met een backgroundplaatje faken.

Dat is dus het "grote" probleem. 33% omdat het compatible moet wezen voor elke resolutie. Voor de vormgeving is die 1px tussenruimte helaas wel strikt. Faken met de background is ook geen optie gezien dat een jpeg wordt van 1280x1024. De ge-fake-te pixel ruimte gaat dan dus anders uitvallen bij verschillende resoluties....

[Verwijderd]

Verwijderd schreef op zaterdag 13 november 2004 @ 21:57:
Desnoods een border met dezelfde kleur als de achtergrond...

Transparant lijkt me dan logischer. De background is overigens niet blauw, in het orgineel is het een afbeelding (foto).

[ Voor 5% gewijzigd door Verwijderd op 13-11-2004 22:05 ]

[Verwijderd]

ik bedoelde in die div een plaatje van 1 pixel tilen in de linker, cq rechter zijkant van die buitenste divs, of andersom, een witte lijn met 1 transperante pixel op het eind

[Verwijderd]

Verwijderd schreef op zaterdag 13 november 2004 @ 22:07:
ik bedoelde in die div een plaatje van 1 pixel tilen in de linker, cq rechter zijkant van die buitenste divs, of andersom, een witte lijn met 1 transperante pixel op het eind

op die manier, geen gek idee idd. Ik ga even aan de slag ermee en post het resultaat straks.

[Verwijderd]

De eerste poging hiervoor met div's

http://www.ikwileenwebsite.nl/GoT/tables_too_div2.html

Mozilla en IE geven een compleet andere weergave....

Hier is de CSS

Cascading Stylesheet:

body {
    background-color: #0000ef;
    margin: 0; padding: 0; 
    width: 100%; height: 100%;
    font-family: arial; font-size: 10pt; color: #000;
    overflow: hidden; /*geen borders*/
}
.div1 {
    position: relative;
    float: left;
    top: 33%; bottom: 33%;
    background: #fff;
    width: 33%; height: 325px;
    text-align: left;
}
.div2 {
    position: absolute; 
    top: 33%; left: 33%; 
    bottom: 33%; right: 33%; 
    background: #fff;
    width: 33%; height: 325px;
    text-align: left;
}
.div3 {
    position: relative;
    float: right;
    top: 33%; bottom: 33%;
    background: #fff;
    width: 33%; height: 325px;
    text-align: left;
}

en de HTML

HTML:

<html>
<head>
    <title>GoT vb2</title>
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head>

<body>

    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>

</body>
</html>

[ Voor 63% gewijzigd door Verwijderd op 13-11-2004 23:48 ]

[JayVee]

Heb je al naar little boxes gekeken?

[ Voor 5% gewijzigd door JayVee op 14-11-2004 01:22 ]

[Verwijderd]

JayVee schreef op zondag 14 november 2004 @ 01:21:
Heb je al naar little boxes gekeken?

bedankt voor de tip, ik heb ze bekeken maar ook daar gaan ze uit van statische formaten (px) en geen % maar morgen werp ik er nog even een wat meer wakkere blik op....

[T-MOB]

Leuke puzzel... mijn inzending.

[Verwijderd]

update *

Cascading Stylesheet:

body {
    margin: 0px; padding: 0px;
    color: #000; background-color: #0000ef;
    text-align: center;
}
.div1 {
    position: absolute;
    float: left;
    top: 0px; left: 0px;
    background: #fff;
    width: 33%;
    height: 325px;
}
.div2 {
    top: 0px; margin: 0px;
    background: #fff;
    width: 33%;
    height: 325px;
    }
.div3 {
    position: absolute;
    float: right;
    top: 0px; right: 0px;
    background: #fff;
    height: 325px;
    width: 33%;
}

* Laatste poging voor vanavond met wat behulp van die little boxes. Redelijk in IE maar in Mozilla is het een puinhoop.

http://ikwileenwebsite.nl/GoT/tables_too_div3.html

Dan vond ik m'n 1e poging er "completer" uitzien in Mo ila

http://ikwileenwebsite.nl/GoT/tables_too_div2.html

[Verwijderd]

T-MOB schreef op zondag 14 november 2004 @ 02:37:
Leuke puzzel... mijn inzending.

Ziet er strak uit!! Morgen ga ik even de bron grondig begluren.

[X-Lars]

Niet mooi, maar misschien doeltreffend: http://caseyard.com/topics/got/noplayer.html

offtopic:
Waarom doe ik dit nog op dit tijdstip

[Verwijderd]

X-Lars schreef op zondag 14 november 2004 @ 07:42:
Niet mooi, maar misschien doeltreffend: http://caseyard.com/topics/got/noplayer.html

offtopic:
Waarom doe ik dit nog op dit tijdstip

Helemaal perfect, knap gedaan!! en dat nogwel op zo tijdstip

Thanks.

[Verwijderd]

nog 1 klein dingetje.........

Is het mogelijk om die 2 borders transparant te krijgen?

http://www.ikwileenwebsite.nl/GoT/noplayer.html

Cascading Stylesheet:

border-right:1px solid black;

volgens diverse websites kun je een border niet transparant maken, is er misschien een andere methode?

> edit
http://www.w3.org/TR/CSS2/box.html#border-color-properties
heeft geen effect op de border

Cascading Stylesheet:

border-color: transparent;

[ Voor 25% gewijzigd door Verwijderd op 14-11-2004 14:34 ]

[We Are Borg]

Oeps, foutje, werkt toch niet

[ Voor 73% gewijzigd door We Are Borg op 14-11-2004 14:36 ]

[X-Lars]

A slightly different approach: http://caseyard.com/topics/got/noplayer2.html

[Verwijderd]

off: waar slaat dat "Lorem ipsum dolor sit amet" op? wat moet het voorstellen?

[X-Lars]

offtopic:
http://www.lipsum.com/

[Verwijderd]

Verwijderd schreef op zondag 14 november 2004 @ 15:01:
off: waar slaat dat "Lorem ipsum dolor sit amet" op? wat moet het voorstellen?

Vultekst. Het betekent niks, het is onleesbaar, en daarom leidt het niet zo af als wèl leesbare tekst. Het gaat dus om de vorm, niet om de inhoud

[Verwijderd]

X-Lars schreef op zondag 14 november 2004 @ 14:54:
A slightly different approach: http://caseyard.com/topics/got/noplayer2.html

Nice!!

alleen viel me nog een heel klein detail op, wat toch een wel van belang is voor de vormgeving.....

Mozilla duwt de rechter div netjes tegen de kant, alleen is er dan een opening van 2px bij de rechter opening:



IE heeft keurig 2 maal 1px afstand tussen de div's maar drukt de rechter div niet tegen de kant aan:



Verder helemaal perfect, hoop dat dit ook nog te fixen is....

[X-Lars]

Lijkt me een bug in FF, die 2px, want daar staat gewoon een margin-left:1px;.
En die 1px rechts in IE (5+6) zie ik niet. Die #filler staat gewoon op right:0;.

[Verwijderd]

in het voorbeeld: http://caseyard.com/topics/got/noplayer2.html zie ik geen 2px fout zitten.
niet in firefox en niet in mozilla...

@X-Lars, Cheatah: tnx voor de omschrijving van "Lorem ipsum" .

[coubertin119]

offtopic:
"Lorem ipsum" is geen onleesbare tekst, het is een Latijnse tekst. Ze hadden even goed het bekendere De Bello Gallico kunnen nemen, of De Rerum Natura, of een ander willekeurig klassiek werk

[Verwijderd]

X-Lars schreef op zondag 14 november 2004 @ 16:30:
Lijkt me een bug in FF, die 2px, want daar staat gewoon een margin-left:1px;.
En die 1px rechts in IE (5+6) zie ik niet. Die #filler staat gewoon op right:0;.

om nog even terug te komen op die ene pixel, ik heb nagevraag gedaan en wilde toch even de bevindingen posten. Iedereen die de website bekeek (ongeacht resolutie) had het probleem van die pixel. IE mist de pixel aan de rechterkant waardoor het blok de kant niet raakt en Mozilla plaats een pixel teveel bij de rechter scheidingslijn. We kunnen het afdoen als browser bug, maar volgens mij mist er gewoon een pixel ergens in het script. Gezien het voorgaande script met de border wel prima functioneerde in IE & Mozilla.

[X-Lars]

Verwijderd schreef op zondag 14 november 2004 @ 17:40:
[...]
We kunnen het afdoen als browser bug, maar volgens mij mist er gewoon een pixel ergens in het script. Gezien het voorgaande script met de border wel prima functioneerde in IE & Mozilla.

Dit klinkt niet alsof je weet waar je mee bezig bent. Dat ik even de moeite heb genomen om iets voor je in elkaar te zetten is mooi voor jou, maar vervolgens dien je het zelf maar verder te tweaken naar je eigen wensen. Dit riekt toch wel sterk naar een scriptrequest (zie faq). Trouwens, script? Het is CSS (Cascading Style Sheets), geen programmeertaal o.i.d. Dat is misschien gemiereneuk, maar je geeft nu zelf aan dat je niet weet hoe e.e.a. werkt en waarschijnlijk zelfs niet eens de CSS (goed) bekeken hebt. Want anders had je makkelijk kunnen constateren dat er niet ergens een pixel mist in het "script" en vooral dat de beide stylesheets net even "slightly different" in elkaar zitten. Ik zeg niet dat ik de CSS heb aangedragen, alleen dat ik denk dat het goed zou moeten werken. Dat FF en IE daar vervolgens anders cq. foutief mee omgaan, kan ik niets aan doen. Maar nogmaals, ik zie geen fouten in IE. Heb je hier een screenshot van? Wat heb je verder geprobeerd om het op te lossen?

[Verwijderd]

Als ik kundig genoeg was geweest om dit zelf op te lossen dan had ik dit topic in de eerste plaats niet geopend. Het in m'n gezicht gooien dat ik het niet weet vind ik daarom ook een beetje flauw, maar ok je hebt gelijk: Ik weet het niet. Het is geen script request of whatever want ik kan redelijk uit de voeten met css. Het enige wat ik nodig had was de juiste denkwijze. Met wat uitleg als aanvulling op je stylesheet kan ik misschien wat meer, want ik zie o.a. de logica van die margin:-162px niet. Je hoeft je niet beledigd te voelen want ik heb reeds erg dankbaar gereageerd op je topic aanvullingen. Heb je CSS heel erg goed en lang bekeken en geruime tijd ermee zitten puzzelen zonder resultaat.

Onderstaande de screenshots:

http://www.ikwileenwebsite.nl/GoT/screenshot_IE.jpg (IE*)
http://www.ikwileenwebsite.nl/GoT/screenshot_FF.jpg (Mozilla*)

Voorbeeld van een foutloze weergave:
http://www.ikwileenwebsite.nl/GoT/screenshot_OK.jpg (photoshop edit*)

[ Voor 8% gewijzigd door Verwijderd op 14-11-2004 20:06 ]

[X-Lars]

Verwijderd schreef op zondag 14 november 2004 @ 19:59:
Als ik kundig genoeg was geweest om dit zelf op te lossen dan had ik dit topic in de eerste plaats niet geopend. Het in m'n gezicht gooien dat ik het niet weet vind ik daarom ook een beetje flauw, maar ok je hebt gelijk: Ik weet het niet.

Logisch dat je een topic opent als je iets niet weet Had ik waarschijnlijk ook gedaan als ik de problemen zou hebben gehad die jij in je screenshots duidelijk laat zien.

Het is geen script request of whatever want ik kan redelijk uit de voeten met css. Het enige wat ik nodig had was de juiste denkwijze.

Die heb je imho nu Maar het leek (en dat vind ik nog steeds) alsof je net zolang doorvroeg tot iemand de perfecte oplossing voor je zou gaan posten.

Met wat uitleg als aanvulling op je stylesheet kan ik misschien wat meer, want ik zie o.a. de logica van die margin:-162px niet.

Die zit daar omdat #content op top:50%; staat, dan begint-ie dus op 50% (gezien vanuit de height:100% van de body). Maar dat is te laag, namelijk de helft van de hoogte van #content. Met een negative margin-top zet je die #content omhoog.

Je hoeft je niet beledigd te voelen want ik heb reeds erg dankbaar gereageerd op je topic aanvullingen.

Da's ook wel weer zo

Heb je CSS heel erg goed en lang bekeken en geruime tijd ermee zitten puzzelen zonder resultaat.

Dan neem ik mijn woorden hieromtrent terug

Onderstaande de screenshots:

http://www.ikwileenwebsite.nl/GoT/screenshot_IE.jpg (IE*)
http://www.ikwileenwebsite.nl/GoT/screenshot_FF.jpg (Mozilla*)

Voorbeeld van een foutloze weergave:
http://www.ikwileenwebsite.nl/GoT/screenshot_OK.jpg (photoshop edit*)

Ik zie het, maar vind het raar dat IE het bij jou anders doet dan bij mij. Misschien kun je leven met een oplossing waarin beide marges 2px zijn i.p.v. 1px? Ik weet niet of dat wel juist gaat werken.

Misschien iemand anders? Er zitten hier zoveel mensen die meer weten van CSS dan ik