[CSS] Beeldschermgrootte meegeven aan CSS.

[The Great HooD]

Ik zit met een heel irritant probleem, waar ik echt totaal niet uitkom.

Ik zal de situatie zo duidelijk mogelijk proberen te scheppen zodat jullie mij ook zo duidelijk mogelijk advies kunnen geven.

Ik heb een page met een header, body met alle content, en de footer.
In deze body zitten 2 kolommen, links 1 met een vaste waarde, qua breedte, en rechts is een kolom die zich moet aanpassen aan de grootte van het beeldscherm.
Maar juist met het laatste heb ik echt super grote problemen terwijl het op het 1e gezicht zo makkelijk lijkt.

Ik heb al verschillende dingen geprobeerd. Zo heb ik met procenten gewerkt, echter bleef ook hier op een gegeven moment het blok achter met de grootte omdat procenten ook niet helemaal precies zijn. Hij krijgt een steeds grotere marge onderin, hij blijft niet als het ware plakken aan de onderkant met een bepaalde marge.

Met width:auto. Hier begint mijn blok helemaal te flippen en laat hij deze ook niet meer zien. Dit werkt dus ook niet voor mij. Ook houd mijn page dan niet de schermbreedte aan maar schiet hij helemaal door.

Wat ik ook heb geprobeerd is het rechterblok in nog een blok te zetten zodat ik de breedtes en hoogtes van het beeldscherm op dat blok zet en dan alleen een marge hoef te geven aan de binnenblok, dit werkt echter ook niet.

De code zoals ik hem nu heb:
CSS:

Cascading Stylesheet:

#buitenkolom2
{
    float: left;
    height: auto;
    margin-top: 16px 
    margin-bottom16px:
    margin-right20px:
    margin-left:20px;
    width: auto;
}

#binnenkolom2
{
    height: 300px;
    margin-left: 530px;
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
    width: 500px;
} 

[code=css]-tags kunnen ook een taal bevatten

Die binnenkolom2 staat nu niet goed afgesteld. Ik heb hem een absolute waarde meegegeven zodat hij nog te zien is. Maar is niet goed atm.

[ Voor 8% gewijzigd door BtM909 op 24-12-2011 01:35 ]

[Verwijderd]

Ik denk dat je een sidebar wilt maken die 100% hoog is? Zo ja, fake het. Geef bijv. je wrapper of content div een achtergrond van 1px hoog waar je de sidebar in tekent (bijv. links wit, rechts grijs) en laat deze herhalen naar beneden. Zo lijkt het alsof je sidebar 100% hoog is.

[ Voor 8% gewijzigd door Verwijderd op 22-12-2011 16:11 ]

[The Great HooD]

Verwijderd schreef op donderdag 22 december 2011 @ 16:10:
Ik denk dat je een sidebar wilt maken die 100% hoog is? Zo ja, fake het. Geef bijv. je wrapper of content div een achtergrond van 1px hoog waar je de sidebar in tekent (bijv. links wit, rechts grijs) en laat deze herhalen naar beneden. Zo lijkt het alsof je sidebar 100% hoog is.

Nee nee. Geen Sidebar.

Mijn site heeft gewoon een header. Body, met deze 2 kolommen met de daadwerkelijke inhoud, en een footer,
Tevens is het rechterblok een applicatie, die wordt gerund met Javascript.

[Verwijderd]

The Great HooD schreef op donderdag 22 december 2011 @ 16:14:
[...]

Nee nee. Geen Sidebar.

Mijn site heeft gewoon een header. Body, met deze 2 kolommen met de daadwerkelijke inhoud, en een footer,
Tevens is het rechterblok een applicatie, die wordt gerund met Javascript.

Kun je eens een screenshot maken of een URL geven om te verduidelijk wat je wilt?

Volgens mij wil je dit:

Header
Kolom 1	Kolom 2
Footer

En moet kolom 2 meerekken met de grootte van je scherm/pagina. Dit kun je alleen faken met mijn methode. De kolom 2 div daadwerkelijk laten meerekken tussen de header en de footer kan na mijn weten niet.

[ Voor 6% gewijzigd door Verwijderd op 22-12-2011 16:26 ]

[Verwijderd]

dit? http://jsfiddle.net/hKfSF/

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:30:
dit? http://jsfiddle.net/hKfSF/

Dit gaat niet werken tussen een header en footer.

[Verwijderd]

oh nee? http://jsfiddle.net/hKfSF/1/

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:36:
oh nee? http://jsfiddle.net/hKfSF/1/

Reply ontopic of reply niet, ok?

[ Voor 18% gewijzigd door BtM909 op 24-12-2011 01:24 ]

[Gtoniser]

Verwijderd schreef op donderdag 22 december 2011 @ 16:30:
dit? http://jsfiddle.net/hKfSF/

Dan kom je in problemen met de hoogte van de binnenkolom2.

@TS
Gezien je applicatie met javascript werkt, zou het misschien een optie zijn om de rechterdiv te resizen met javascript? Is niet de mooiste optie ofc maar als je applicatie toch al van de beschikbaarheid van javascript afhangt...

[Verwijderd]

nee hoor. http://jsfiddle.net/hKfSF/4/

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:40:
nee hoor. http://jsfiddle.net/hKfSF/4/

Omdat dit een serieus forum is neem ik maar aan dat je me niet in de maling neemt..
Hoe past deze zich precies aan aan je scherm als ik vragen mag?

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:41:
[...]


Omdat dit een serieus forum is neem ik maar aan dat je me niet in de maling neemt..
Hoe past deze zich precies aan aan je scherm als ik vragen mag?

Het linker blauw vlak blijft altijd 500px breed, het rechter rode vlak vult de rest van de breedte van het scherm.

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:43:
[...]


Het linker blauw vlak blijft altijd 500px breed, het rechter rode vlak vult de rest van de breedte van het scherm.

Ik zit niet op te letten geloof ik, mijn excuus. Ik dacht dat het om de hoogte ging ipv de breedte.

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:50:
[...]


Ik zit niet op te letten geloof ik, mijn excuus. Ik dacht dat het om de hoogte ging ipv de breedte.

Beter voorbeeld:
http://martndemus.nl/doodle/kolommen.html

Als je de browser resized dan gaat de rechter kolom lekker mee in de breedte

P.s. excuus aanvaard!

[Verwijderd]

Verwijderd schreef op donderdag 22 december 2011 @ 16:55:
[...]


Beter voorbeeld:
http://martndemus.nl/doodle/kolommen.html

Als je de browser resized dan gaat de rechter kolom lekker mee in de breedte

P.s. excuus aanvaard!

Ja je hebt helemaal gelijk. Ik zal volgende keer beter lezen.

[F.West98]

om de kolommen OOK nog even hoog te houden een dirty fix:
http://jsfiddle.net/hKfSF/6/
Zet maar eens een heleboel tekst neer, het blijft even hoog
(maar dat kan ook met een backgroundpic, die in de buitenkolom is, en dan transparent backgrounds
of zelfs de buitendiv de kleur van de kortste kolom meegeven, die is dan die kleur en de langste kolom de andere kleur meegeven: http://jsfiddle.net/hKfSF/6/)

[ Voor 46% gewijzigd door F.West98 op 22-12-2011 17:10 ]

[The Great HooD]

Thanks for the reply's!

Ik ga nu direct tested of het werkt. Indien niet, dan horen jullie van mij

[Verwijderd]

F.West98 schreef op donderdag 22 december 2011 @ 17:08:
om de kolommen OOK nog even hoog te houden een dirty fix:
http://jsfiddle.net/hKfSF/6/
Zet maar eens een heleboel tekst neer, het blijft even hoog

Je fix werkt in ieder geval niet in Chrome 18
Edit: ook niet in FF 9 of 11 en Opera 11.60 of 12.00

Edit2: Ik ben niet zo'n fan van faux backgrounds, ik schrijf liever 2 regels javascript om twee kolommetjes even hoog te krijgen.

[ Voor 22% gewijzigd door Verwijderd op 22-12-2011 17:19 ]

[F.West98]

Verwijderd schreef op donderdag 22 december 2011 @ 17:10:
[...]


Je fix werkt in ieder geval niet in Chrome 18
Edit: ook niet in FF 9 of 11 en Opera 11.60 of 12.00

en mijn edit?
hij werkt hier FF8 wel

[Verwijderd]

F.West98 schreef op donderdag 22 december 2011 @ 17:19:
[...]

en mijn edit?
hij werkt hier FF8 wel

Heb je wel op update geclicked?

[F.West98]

Verwijderd schreef op donderdag 22 december 2011 @ 17:20:
[...]


Heb je wel op update geclicked?

nog niet, ik ga zo naar FF9...
en jawel, de fix werkt
fout, goede linkjes komen

[ Voor 7% gewijzigd door F.West98 op 22-12-2011 17:22 ]

[Verwijderd]

F.West98 schreef op donderdag 22 december 2011 @ 17:22:
[...]

nog niet, ik ga zo naar FF9...
en jawel, de fix werkt

Ik bedoelde in jsFiddle =D

[F.West98]

goede link fix 2:
http://jsfiddle.net/hKfSF/13/
goede link voor dirty fix: http://jsfiddle.net/hKfSF/14/

[The Great HooD]

Ok gasten. Breedte werkt nu!

Nu heb ik alleen nog problemen met de hoogte.
Mijn footer heb ik op deze manier gemaakt:

CSS:

Cascading Stylesheet:

#content
{
      min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -76px; /* hoogte footer */
}

#footer
{
    background-color: #FFFFFF;
    background-image: url("images/footer.png");
    background-repeat: no-repeat;
    background-position: center;
    border-top: 1px solid #505050;
    clear: both;
    float: none;
    height: 76px;
    text-align: center;
}

[code=css]-tags kunnen ook een taal bevatten

Waarbij de content hier buitenkolom2 is.
De header staat overigens in de content, footer erbuiten.

Mijn probleem is nu dat mijn rechter kolom, die dus moet meebewegen met het grootte van het scherm, over de footer heenvalt.

[ Voor 3% gewijzigd door BtM909 op 24-12-2011 01:39 ]

[Verwijderd]

The Great HooD schreef op donderdag 22 december 2011 @ 17:33:
Mijn probleem is nu dat mijn rechter kolom, die dus moet meebewegen met het grootte van het scherm, over de footer heenvalt.

Bedoel je dit?
http://martndemus.nl/doodle/kolommen.html

[The Great HooD]

Verwijderd schreef op donderdag 22 december 2011 @ 17:44:
[...]


Bedoel je dit?
http://martndemus.nl/doodle/kolommen.html

Ja, in essentie is het hetzelfde, hij valt eroverheen, precies zo, alleen dan niet met die breedte die niet klopt.

[ Voor 10% gewijzigd door The Great HooD op 22-12-2011 17:47 ]

[Verwijderd]

The Great HooD schreef op donderdag 22 december 2011 @ 17:46:
[...]

Ja, in essentie is het hetzelfde, hij valt eroverheen, precies zo, alleen dan niet met die breedte die niet klopt.

Refresh, zie het footerfix divje

[The Great HooD]

Verwijderd schreef op donderdag 22 december 2011 @ 17:48:
[...]


Refresh, zie het footerfix divje

Thanks!

Had ik dus toch even die spacer aan moeten zetten, die had ik er uit gecommented, dacht dat ik hem niet nodig had.

2 nieuwe problemen.

Mijn applicatie die ik inlaad, in de kolom die mee geresized moet worden, wordt nu niet goed weergegeven. Hij heeft een height nodig, anders geeft hij hem totaal verkeerd weer.
En dat weet ik nu ook waar dat door komt. Hij wordt geladen met een height en width van 100%. Indien ik geen height mee geef, wordt dat hele ding verkeerd weergegeven.

Een ander probleem. er wordt een plaatje in de rechterkolom weergegven, de breedte wordt echter wel goed gedaan, de hoogte wordt echter te groot voor het scherm waardoor deze scrollable wordt. Dit wil ik niet hebben.

[ Voor 51% gewijzigd door The Great HooD op 22-12-2011 18:00 ]

[Verwijderd]

Bij die applicatie weet ik niet precies wat je wilt.

Bij het plaatje is het een kwestie van

Cascading Stylesheet:

img {
    width:100%;
    max-width:123px; /* Zet naar gewenste maximum breedte.. */
}

Meer kan je er css/html technisch niet aan doen.

[The Great HooD]

Verwijderd schreef op donderdag 22 december 2011 @ 18:30:
Bij die applicatie weet ik niet precies wat je wilt.

Bij het plaatje is het een kwestie van

Cascading Stylesheet:

img {
    width:100%;
    max-width:123px; /* Zet naar gewenste maximum breedte.. */
}

Meer kan je er css/html technisch niet aan doen.

Ik denk dat je max-height bedoeld?

Maar ik vind het vaag. Je zou toch wel moeten kunnen instellen dat je geen hoogte wilt dat je scrollbalken krijgt?
Dit is bij elk beeldscherm weer anders, door de hogere/lagere resoluties.

Wat betreft die applicatie, dat is openslide.
Ik zal aan de hand van screenshots wel even laten zien wat er gebeurt. Tevens met Firebug zal ik laten zien hoe hij het 1 en ander opbouwt.

Situatie met gefixeerde hoogte:


Hier geeft hij hem dus normaal weer. Echter niet dynamisch de grootte van het scherm.

Situatie met gevarieerde height:


Ik heb dus even gekeken en het ligt aan de 100%. Hij krijgt dan een hoogte van 0px mee. Als ik hem namelijk een hoogte van 0px meegeef dan geeft hij hetzelfde weer.

[ Voor 9% gewijzigd door The Great HooD op 22-12-2011 19:36 ]

[Verwijderd]

Met die plaatjes is het er niet duidelijker op geworden.

Als ik het goed begrijp is de applicatie een image slider?

[The Great HooD]

Verwijderd schreef op donderdag 22 december 2011 @ 19:27:
Met die plaatjes is het er niet duidelijker op geworden.

Als ik het goed begrijp is de applicatie een image slider?

Jep.

Sorry dat die plaatjes het niet duidelijk maken
Ik probeer het nog wat duidelijker te maken...

Plaatjes verduidelijkt!

[ Voor 3% gewijzigd door The Great HooD op 22-12-2011 19:36 ]

[The Great HooD]

AUB niet kicken binnen 24uur!

[ Voor 89% gewijzigd door BtM909 op 24-12-2011 01:37 ]

[ytterx]

Iemand dit al gelezen?: http://matthewjamestaylor...ross-browser-css-no-hacks

nog beter het perfecte voorbeeld:

http://matthewjamestaylor...lumn-left-menu-pixels.htm

[ Voor 34% gewijzigd door ytterx op 23-12-2011 11:07 ]

[Zoefff]

De plaatjes komen niet overeen met het beeld dat ik naar aanleiding van je verhaal heb gevormd. Mijn gedachte was dat je een meerkoloms layout wil hebben waarbij de rechterkolom altijd de schermgrootte moet aannemen en een bepaalde breedte. Uit de plaatjes blijkt (volgens mij) dat je dit alleen doet voor de imagecontrols die rechts onderin moeten komen.

Waarom los je dat dan niet veel eenvoudiger op met fixed of absolute positioning? Soms heiligt het doel de middelen en hoeft echt niet alles floating en flexibel te zijn maar voldoet andere positionering uitstekend en los je daar heel veel problemen in 1 klap mee op.

[The Great HooD]

Zoefff schreef op vrijdag 23 december 2011 @ 13:40:
De plaatjes komen niet overeen met het beeld dat ik naar aanleiding van je verhaal heb gevormd. Mijn gedachte was dat je een meerkoloms layout wil hebben waarbij de rechterkolom altijd de schermgrootte moet aannemen en een bepaalde breedte. Uit de plaatjes blijkt (volgens mij) dat je dit alleen doet voor de imagecontrols die rechts onderin moeten komen.

Waarom los je dat dan niet veel eenvoudiger op met fixed of absolute positioning? Soms heiligt het doel de middelen en hoeft echt niet alles floating en flexibel te zijn maar voldoet andere positionering uitstekend en los je daar heel veel problemen in 1 klap mee op.

Ik zal het nog een keer proberen uit te leggen. Nu ook aan de hand van een mooie tekening



Bovenin heb je de header. Deze heeft een gefixeerde hoogte en daar zijn ook geen problemen mee.
Evenals de footer, gefixeerde hoogte, en pakt automatisch de breedte van het beeldscherm.

Nu komt de content (de inhoud, de daadwerkelijke site). Deze heeft 2 kolommen, links is een kolom, meestal is die hoogte gefixeerd, maar die pakt hij ook automatisch, aan de hand van de hoeveelheid inhoud die deze box heeft. Nu komt de rechter box, deze heeft verschillende soort inhouden, een imageslider, of een statisch plaatje.

Nou wil ik dat de breedte en de hoogte automatisch wordt gepakt door die rechterbox, de imageslide/plaatje dus. De breedte pakt hij nu automatisch, dat werkt ook. Echter is de hoogte een probleem, deze kan ik niet dynamisch meegeven anders gaat er iets fout, te zien in de plaatjes, hij krijgt namelijk helemaal geen hoogte mee.

EDIT:

Ik denk dati k weet waar de verwarring is over ontstaan, ik heb bij die plaatjes met de echte site alleen de rechterkolom genomen, de linkerkolom staat er eigenlijk nog naast maar is niet opgenomen in het plaatje.

[ Voor 6% gewijzigd door The Great HooD op 23-12-2011 14:25 ]

[The Great HooD]

Update:

Problemen met IE6 en 7. Mijn rechterkolom wordt nu als het ware onder mijn linkerkolom gezet terwijl ik ze naast elkaar wil hebben.

Cascading Stylesheet:

#rechterkolom
{
    height:650px;
    max-height: 100%;
    min-height:400px;
    margin-left: 540px;
    margin-right: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    border:solid;
    border-width:3px;
    float:right;
    
}

#linkerkolom
{
    border-style: solid;
    background: #f1f1f1;
    margin-top: 16px;
    border-width: 1px;
    margin-left:15px;
    float:left;
    width: 450px;


    /*drop shadow*/
    moz-box-shadow: 3px 3px 4px #8f8f8f;
    -webkit-box-shadow: 3px 3px 4px #8f8f8f;
    box-shadow: 3px 3px 10px #8f8f8f;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#8f8f8f')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#8f8f8f');
}

[Zoefff]

Maak anders eens een proof of concept die je ergens neer kan zetten? Dus, bovenstaande plaatje simpel uitgewerkt met lege kolommen en minimale CSS om het grid zo te krijgen als je het nu hebt of wilt.

Enerzijds elimineert dat fouten die je wellicht zelf maakt bij de invulling van het geheel, en geeft ons anderzijds een daadwerkelijk voorbeeld waar verbeteringen aan gedaan kunnen worden of fouten uitgehaald kunnen worden. Nu heb je wel CSS snippets, maar mist de context en HTML structuur om er iets zinnigs over te zeggen.

[The Great HooD]

Zoefff schreef op woensdag 28 december 2011 @ 17:31:
Maak anders eens een proof of concept die je ergens neer kan zetten? Dus, bovenstaande plaatje simpel uitgewerkt met lege kolommen en minimale CSS om het grid zo te krijgen als je het nu hebt of wilt.

Enerzijds elimineert dat fouten die je wellicht zelf maakt bij de invulling van het geheel, en geeft ons anderzijds een daadwerkelijk voorbeeld waar verbeteringen aan gedaan kunnen worden of fouten uitgehaald kunnen worden. Nu heb je wel CSS snippets, maar mist de context en HTML structuur om er iets zinnigs over te zeggen.

Misschien een site waar ik dat ergens snel kan maken met een linkje er naartoe?

[The Great HooD]

http://jsfiddle.net/xYY9n/

Ik heb het hier uitgelegd. Zo wil ik het hebben, en zo komt het er ook uit op alle browsers behalve IE6,7.
Daar staat de blauwe kolom onder de rode kolom maar dan nog wel goed in de breedte.
Hij staat er dus niet naast maar rechtsonder, linkerbovenhoek tegen de rechteronderhoek aan.

[The Great HooD]

Iemand een idee?

[The Great HooD]

Bump
Wat was er niet duidelijk aan BtM's bericht

[ Voor 122% gewijzigd door RobIII op 30-12-2011 10:15 ]

[OkkE]

Oude IE's ondersteunen de HTML5 header en footer elementen niet.

Verder klopt je hele jsfiddle niet: je hoort rechts boven alleen alle HTML die tussen de body tags staat te plaatsen, rechts boven je eigen CSS. Normalize.css wordt sowieso ingeladen (zie linker sidebar).

http://jsfiddle.net/okke/xYY9n/3/

[The Great HooD]

OkkE schreef op donderdag 29 december 2011 @ 16:27:
Oude IE's ondersteunen de HTML5 header en footer elementen niet.

Verder klopt je hele jsfiddle niet: je hoort rechts boven alleen alle HTML die tussen de body tags staat te plaatsen, rechts boven je eigen CSS. Normalize.css wordt sowieso ingeladen (zie linker sidebar).

http://jsfiddle.net/okke/xYY9n/3/

Ok ja dit heb ik ff snel gevonden hier in een van de reacties. Schetste goed wat ik wilde.

Is er geen hack ofzo om dit alsnog goed te krijge want het is zwaar bijdehand.

[Zoefff]

Pfff come on dude. Er is echt veel informatie te vinden over HTML5 i.c.m. oudere browsers als IE6. Google is je vriend als je zoekt naar een goede oplossing

[Snobbieh]

Een float:left doen en daarna een float:right is niet goed. Als je de linkerkolom links wilt, en daarnaast de rechter moet je beide op float:left zetten. Zorg er ook voor dat de totale breedte (margins en breedte divs) NIET groter is dan de totale breedte van het scherm. Anders is het gevolg dat deze eronder komt

Verder begrijp ik dit niet:

Cascading Stylesheet: css.css

        #binnenkolom2 {
            float:left;
            height: 200px;
            text-align: center;
            width: 260px;
            background: #00f;
            padding:20px;
        }

        #binnenkolom3 {
            margin-left:270px;
            background: #f00;
            padding: 20px;
        }

Je wilt 2 kolommen naast elkaar, de ene float je en de andere niet?

[ Voor 6% gewijzigd door Snobbieh op 30-12-2011 10:06 ]

[Zoefff]

Snobbieh schreef op vrijdag 30 december 2011 @ 10:06:
Een float:left doen en daarna een float:right is niet goed. Als je de linkerkolom links wilt, en daarnaast de rechter moet je beide op float:left zetten.

Neen.

Een element dat je rechts naast een ander element wilt plaatsen hoeft géén float property mee te krijgen. Het wordt immers door het element links van zich al aan de rechterkant geplaatst, daar dat wel een float: left heeft. Je moet hoogstens aan de slag met de overflow property of een marge om te zorgen dat de content ook op de juiste plek blijft staan als de kolom langer dan de linkerkolom is.

[Verwijderd]

Zoefff schreef op vrijdag 30 december 2011 @ 10:11:
[...]

Neen.

Een element dat je rechts naast een ander element wilt plaatsen hoeft géén float property mee te krijgen. Het wordt immers door het element links van zich al aan de rechterkant geplaatst, daar dat wel een float: left heeft. Je moet hoogstens aan de slag met de overflow property of een marge om te zorgen dat de content ook op de juiste plek blijft staan als de kolom langer dan de linkerkolom is.

Probeer het eens in bijv. Chrome.

[Zoefff]

Verwijderd schreef op maandag 02 januari 2012 @ 12:07:
[...]


Probeer het eens in bijv. Chrome.

Wat is je punt?

[Verwijderd]

Zoefff schreef op maandag 02 januari 2012 @ 12:45:
[...]



Wat is je punt?

Dat 1 float niet in alle browsers werkt.

[R4gnax]

Verwijderd schreef op maandag 02 januari 2012 @ 13:20:
[...]


Dat 1 float niet in alle browsers werkt.

Dat doet het dus echt wel. Werkt het voor jouw sites niet, dan doe je gewoon iets verkeerd.

[Zoefff]

Verwijderd schreef op maandag 02 januari 2012 @ 13:20:
[...]


Dat 1 float niet in alle browsers werkt.

Dan doe je zelf toch echt iets niet goed, want het werkt in alle browsers (en met een beetje hulp in IE6/7) precies zoals door mij en het W3C beschreven

[Verwijderd]

R4gnax schreef op maandag 02 januari 2012 @ 13:32:
[...]


Dat doet het dus echt wel. Werkt het voor jouw sites niet, dan doe je gewoon iets verkeerd.

Zoefff schreef op maandag 02 januari 2012 @ 13:41:
[...]

Dan doe je zelf toch echt iets niet goed, want het werkt in alle browsers (en met een beetje hulp in IE6/7) precies zoals door mij en het W3C beschreven

Totdat je je div's een width geeft (wat je 9 van de 10 keer zult doen).

[Zoefff]

Verwijderd schreef op maandag 02 januari 2012 @ 15:03:
[...]


[...]


Totdat je je div's een width geeft (wat je 9 van de 10 keer zult doen).

Laat dan eens een voorbeeld zien waarin dat niet goed gaat? Dan zal ik je laten zien wat je fout doet

In het geval dat de totale breedte meer dan de viewport is zou het misschien mis kunnen gaan, maar verder mag het geen problemen opleveren.

[Verwijderd]

Zoefff schreef op maandag 02 januari 2012 @ 15:35:
[...]

Laat dan eens een voorbeeld zien waarin dat niet goed gaat? Dan zal ik je laten zien wat je fout doet

In het geval dat de totale breedte meer dan de viewport is zou het misschien mis kunnen gaan, maar verder mag het geen problemen opleveren.

http://jsfiddle.net/yzbzw/

[Zoefff]

Verwijderd schreef op maandag 02 januari 2012 @ 15:52:
[...]


http://jsfiddle.net/yzbzw/

http://jsfiddle.net/yzbzw/3/

En voor de volledigheid ook nog de uitleg:

quote: http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

En datzelfde alleen dan uitgebreid uiteengezet in een blogpost http://colinaarts.com/articles/the-magic-of-overflow-hidden/

[ Voor 80% gewijzigd door Zoefff op 02-01-2012 16:48 ]

[Verwijderd]

Zoefff schreef op maandag 02 januari 2012 @ 16:03:
[...]

http://jsfiddle.net/yzbzw/3/

En voor de volledigheid ook nog de uitleg:

[...]

En datzelfde alleen dan uitgebreid uiteengezet in een blogpost http://colinaarts.com/articles/the-magic-of-overflow-hidden/

Dat is naar mijn idee nogal slordig (en 5 tekens langer dan float:left; ). Overflow:hidden is bedoeld om bijv. een main div mee te laten stretchen met de floatende inhoud, vandaar ook de naam overflow.

Dus ik zou gewoon 2x float:left gebruiken, of float:left en float:right.

[The Great HooD]

Ik heb het inmiddels opgelost door een statische breedte te geven en de pagina ook een statische breedte mee te geven. Echter is het jammer dat de min-width niet werkt waardoor het verkleinen van de pagina ook alle elementen uit positie raken.

Ik wilde dat oplossen door een IE6 hack, maar dit werd niet opgepakt.

Cascading Stylesheet:

width: expression(document.body.clientWidth < 902? "900px" : "auto");

Werkte dus niet.

Nu is mijn vraag dus, ik kan het wel met JS oplossen maar ik geloof dat dat lang niet op alle IE6 computers gebruikt en ingeschakeld word..

What to do next?

[Verwijderd]

The Great HooD schreef op woensdag 04 januari 2012 @ 18:21:
Ik heb het inmiddels opgelost door een statische breedte te geven en de pagina ook een statische breedte mee te geven. Echter is het jammer dat de min-width niet werkt waardoor het verkleinen van de pagina ook alle elementen uit positie raken.

Ik wilde dat oplossen door een IE6 hack, maar dit werd niet opgepakt.

Cascading Stylesheet:

width: expression(document.body.clientWidth < 902? "900px" : "auto");

Werkte dus niet.

Nu is mijn vraag dus, ik kan het wel met JS oplossen maar ik geloof dat dat lang niet op alle IE6 computers gebruikt en ingeschakeld word..

What to do next?

Zelfs Microsoft zelf viert de 'dood' van IE6 maar jij gaat er nog rekening mee houden?

http://windowsteamblog.co...-says-goodbye-to-ie6.aspx
http://www.ie6countdown.com/

We hope this means more developers and IT Pros can consider IE6 a “low-priority” at this point and stop spending their time having to support such an outdated browser.

[ Voor 9% gewijzigd door Verwijderd op 05-01-2012 09:40 ]

[The Great HooD]

Ik kan er helaas ook niet zoveel aan doen dat er nog zoveel bedrijven zijn die maar niet willen vernieuwen

[OkkE]

Je hoeft ook IE6 gebruikers niet te blokkeren, geef ze gewoon een wat minder uitgebreide layout. In het geval van min-width is het toch een prima oplossing om IE6 een vaste breedte te geven?

[Verwijderd]

The Great HooD schreef op vrijdag 06 januari 2012 @ 02:18:
Ik kan er helaas ook niet zoveel aan doen dat er nog zoveel bedrijven zijn die maar niet willen vernieuwen

Volgens mij valt dat allemaal wel mee, in NL is het gebruik 1,1%.
Google support IE6 niet meer, daar krijg je de oude versie van Google te zien en volgens mij werken veel andere diensten helemaal niet. Facebook support IE6 niet, timeline en chat werken in ieder geval niet. YouTube support IE6 niet, werkt helemaal niet meer. Zo zullen er nog veel meer grote websites zijn die het niet doen.

Maar krijgt jouw pagina zoveel bezoekers van IE6 dan?
Anders kun je ook nog deze banner plaatsen (of natuurlijk voor een andere browser):
http://www.ie6countdown.com/join-us.aspx

[ Voor 4% gewijzigd door Verwijderd op 06-01-2012 09:48 ]

[Bosmonster]

The Great HooD schreef op vrijdag 06 januari 2012 @ 02:18:
Ik kan er helaas ook niet zoveel aan doen dat er nog zoveel bedrijven zijn die maar niet willen vernieuwen

Zelfs dat is in NL tegenwoordig (of eigenlijk al een jaar+) praktisch niet meer het geval. Daarnaast ontwikkel je een website niet voor het bedrijf, maar voor hun bezoekers, iets wat klanten ook niet altijd snappen.

Anyway. Stukje graceful degradation. Zorg als het dan echt moet dat het functioneel werkt, maar ga je niet druk lopen maken om dit soort geneuzel werkend te krijgen, tenzij de klant daar substantieel extra voor belast wordt.

En zijnote: Het heeft tegenwoordig veel meer zin om tijd te stoppen in goede touch-ondersteuning bijvoorbeeld, dan IE6-support, als je toch tijd in de marge wilt investeren. Of goede toegankelijkheid, for that matter. Daar heb je meer bereik mee dan die <1% IE6-gebruikers.

[ Voor 16% gewijzigd door Bosmonster op 06-01-2012 10:31 ]

[OkkE]

Nu Microsoft IE8 gaat pushen kan je zelfs discussiëren of je nog wel actief moet ontwikkelen voor IE7, of die op de zelfde manier behandelen als IE6: alleen font/color stylesheet geven plus wat basic layout.

Zoals Bosmonster ook al zegt, het is tegenwoordig je tijd meer waard om te zorgen voor goede ondersteuning voor touch en mobile devices.

[ Voor 25% gewijzigd door OkkE op 06-01-2012 10:36 ]

[The Great HooD]

Het is een webapplicatie die door mensen binnen bedrijven wordt gebruikt. Vooralsnog veel oude windows software die daar nog draaien. Iets met overheid instanties

Maar ik ga inderdaad nu voor een vaste breedte van de pagina.

[DeEindbaas]

@The Great HooD

Even kort:

- Linkerkant 450px breed en de hoogte word bepaald door de content. (hoeft niet 100% te zijn)
- Rechterkant vult qua breedte de rest op en hoogte wel 100%.
- Header en footer breedte van 100% en een vaste hoogte.

Dit klopt zo?

[The Great HooD]

Dreamwire schreef op vrijdag 06 januari 2012 @ 20:10:
@The Great HooD

Even kort:

- Linkerkant 450px breed en de hoogte word bepaald door de content. (hoeft niet 100% te zijn)
- Rechterkant vult qua breedte de rest op en hoogte wel 100%.
- Header en footer breedte van 100% en een vaste hoogte.

Dit klopt zo?

Ja klopt helemaal.