DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Het lullige is dat die in IE7 weer niet werkt!quote:Op donderdag 4 september 2008 14:40 schreef CraZaay het volgende:
[..]
The holy grailhttp://www.alistapart.com/articles/holygrail
(tenminste hier, zie eerste voorbeeld)
Just say hi!
quote:Op donderdag 4 september 2008 @ 14:45 schreef Chandler het volgende:
mcDavid; de ene stijlsheet is gemaakt door de slicer, de andere door mij, de stijles die je in de HTML ziet zijn tijdelijk, om alleen maar de opzet aan te geven, niets meer niets minder. Er zijn idd delen van de stijl.css gekopieerd van andere plekjes op het internet, juist omdat ik er zelf niet uitkwam!..
Maar heb je een oplossing? want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...
quote:Op donderdag 4 september 2008 @ 14:07 schreef mcDavid het volgende:
een div "float:left" én "clear:both" geven, gaat blijkbaar niet zo goed.
Dat je middelste div niet meeloopt komt doordat er geen enkel object instaat wat in de natuurlijke float zit. Normaal gesproken kun je dit oplossen door een lege div met "clear:both" maar dat gaat dus niet omdat je met deze opzet ook alle divs een float meegeeft (en die div dus alsnog uit de natuurlijke float haalt)
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.quote:Op donderdag 4 september 2008 14:49 schreef Chandler het volgende:
Het lullige is dat die in IE7 weer niet werkt!
Ik probeer je te begrijpen maar doe het gewoon nietquote:Op donderdag 4 september 2008 14:50 schreef mcDavid het volgende:
Dat heb ik dus de gehele ochtend al gedaan maar niets 'simpels' kunnen vinden, maar goed ik zoek ook altijd verkeerdquote:Op donderdag 4 september 2008 14:51 schreef CraZaay het volgende:
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.
-edit-
fix gevonden
http://www.gerd-riesselmann.net/examples/paddedholygrail.html
Just say hi!
clear:both
is het antwoord
En dan niet ook nog float:left of iets anders op een element gooien! Wat je doet doormiddel van de ".middle div" in je eigen css!
is het antwoord
En dan niet ook nog float:left of iets anders op een element gooien! Wat je doet doormiddel van de ".middle div" in je eigen css!
quote:Op vrijdag 29 augustus 2008 08:07 schreef CraZaay het volgende:
Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".
thanks
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen
Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas
wil er niet in en wil het niet vinden
Preview tot zover:
http://www.bruggema.nl/3
voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas
wil er niet in en wil het niet vinden Preview tot zover:
http://www.bruggema.nl/3
voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Just say hi!
Graag gedaanquote:
Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
Ik zie in je css niet meteen een padding bij de container. En bij de holy grail staat content voor de linker- en rechterkolom, bij jou niet.quote:Op donderdag 4 september 2008 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen :(
Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas :{ wil er niet in en wil het niet vinden :P
Preview tot zover:
http://www.bruggema.nl/3
voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Back to basic tijd dus:
html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Geklooi voor Chandler</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="header"></div> <div id="container"> <div id="content"></div> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </body> </html> |
css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | width: 100%; margin: 0; padding: 0; } #header { height: 10px; width: 100%; background: #f00; } #container { padding-left: 160px; padding-right: 160px; } #left, #right { width: 160px; height: 600px; background: url(http://www.bruggema.nl/3/afbeeldingen/wide-skyscraper.gif); float: left; position: relative; } #left { margin-left: -100%; right: 160px; } #right { margin-right: -160px; } #content { height: 700px; width: 100%; float: left; background: #ff8; } #footer { clear: both; background: #8ff; float: left; height: 10px; width: 100%; } |
Have fun :)
Ik mocht/moest vandaag een menu-item toevoegen aan een menu dat met een tabel was gemaakt. Alles bleef gewoon staan verder, er was voldoende ruimte om iets toe te voegen. En dat was al een rampquote:Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:
[..]
Graag gedaan
Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
Met enkel het toevoegen van een <td> ben je er uiteraard niet.
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.
Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
Tabellen vind ik echt een ramp, zeker voor layout.quote:Op donderdag 4 september 2008 22:49 schreef Tuvai.net het volgende:
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.
Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats
De achterkant (Ruby on Rails) hebben we volledig moeten herschrijven, daar was niets mee aan te vangen
Absolute positionering kan inderdaad handig zijn en ik gebruik het zelf vrij regelmatig voor fixed menu`tjes en dergelijke. Het is echter gewoon kut om een heel menu met subitems en andere afhankelijkheden op een dusdanige manier absoluut te positioneren, dat bij het toevoegen van een nieuw element zo'n beetje alles dat niet absoluut gepositioneerd is, niet meer op z'n plaats staat en daardoor de wél absoluut gepositioneerde elementen niet meer op de juiste plek staan.quote:Op donderdag 4 september 2008 23:04 schreef Light het volgende:
[..]
Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats
Welcome to my world.. Ik doe bijna niet andersquote:Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:
[..]
Graag gedaan
Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
De truc is dan ook om eerst alle floats te doen en pas aan het eind de absoluut gepositioneerde elementen. En dat gaat dan over de volgorde van de elementen in de html.
Hier kunnen we echt weinig mee, je verhaal is veel te vaag!quote:Op donderdag 4 september 2008 @ 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen
Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas
Preview tot zover:
http://www.bruggema.nl/3
voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Maak anders eens een voorbeeld met alléén de elementen die mis gaan, zo eenvoudig mogelijk!
Helpt je wellicht ook om zelf inzicht te krijgen in wat er mis gaat!
Ik heb ook het idee dat je iets teveel tegelijk wilt. Maak eerst eens de basis aan de hand van die "holy grail" met IE7 fixes, dus header, footer en drie kolommen. Geef ze allemaal een achtergrondkleurtje en zet er een paar regels tekst in om te testen. Werkt dat niet, kom dan hier met je code. Werkt dat wel, voeg dan stuk voor stuk de andere elementen toe, zonder je oude CSS te hergebruiken (anders krijg je weer per ongeluk floats die je niet wilt, etc etc). Werkt het niet, probeer het dan niet op te lossen door zonder te weten wat het doet te pas en te onpas floats, etc toe te gaan voegen
Ik zal het probleem voorleggen.
Eingelijk wil ik precies hetzelfde dat een tabel doet.
In het geval van bovenstaand tabel worden alle velden evenlang ongeacht welk veld het langste is. Gebruik ik floats voor bijvoorbeeld afbeeldingen dan blijven de afbeeldingen binnen dat kader en overlappen bv niet rechts zoals met de holy grail etc wel.
http://www.bruggema.nl/3/grail.html
Ik wil dus een oplossing vinden voor het feit dat de afbeeldingen gewoon binnen het middelste gedeelte blijven, niets meer niets minder
Ik heb de float verwijderd maar dan komen ze onder elkaar, ook een display inline werkt niet aangezien dan de background en padding/margins niet meer van toepassing zijn wordt gek van CSS
De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html
Ik hoop dat ik duidelijk genoeg ben, en loop denk ik weer tegen iets onmogelijks aan... stom dat tabellen nog steeds moeilijk te evenaren zijn middels divs en css...
Eingelijk wil ik precies hetzelfde dat een tabel doet.
| 1 2 3 4 5 6 7 | <tr> <td width="160">Links</td> <td>Midden</td> <td width="160">Rechts</td> </tr> </table> |
In het geval van bovenstaand tabel worden alle velden evenlang ongeacht welk veld het langste is. Gebruik ik floats voor bijvoorbeeld afbeeldingen dan blijven de afbeeldingen binnen dat kader en overlappen bv niet rechts zoals met de holy grail etc wel.
http://www.bruggema.nl/3/grail.html
Ik wil dus een oplossing vinden voor het feit dat de afbeeldingen gewoon binnen het middelste gedeelte blijven, niets meer niets minder
Ik heb de float verwijderd maar dan komen ze onder elkaar, ook een display inline werkt niet aangezien dan de background en padding/margins niet meer van toepassing zijn
wordt gek van CSS De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html
Ik hoop dat ik duidelijk genoeg ben, en loop denk ik weer tegen iets onmogelijks aan... stom dat tabellen nog steeds moeilijk te evenaren zijn middels divs en css...
Just say hi!
Ik snap je probleem nog steeds niet. Wanneer ik in de code op http://www.bruggema.nl/3/grail.html al die divs met een afbeelding erin "float: left" geef dan vallen ze uiteraard onder buiten de div; je hebt ze immers uit de flow gehaald. Is dat je probleem? Zo ja, een "overflow: auto" op #imagelist lost het dan op (alternatief voor "clear").
Het probleem is idd opgelost door de overflow: auto; al snap ik niet precies waarom!?
ik ga eens kijken waarom overflow: auto dit precies oplost (misschien leer ik er wat van...
)
ik ga eens kijken waarom overflow: auto dit precies oplost (misschien leer ik er wat van...
)
Just say hi!
In de CSS staat een height bij #content. Sloop die er eens uit, dan ben je al een stuk verderquote:Op vrijdag 5 september 2008 09:24 schreef Chandler het volgende:
De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html
Dat bedoel ik, je CSS is al veel te verward door andere dingen om nog goed te kunnen zien wat je aant doen bent
Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.
clear:both geeft in ieder geval aan dat dit element aan beide kanten geen elementen mag hebben die gefloat zijn. Daardoor gaat dit element er onder staan. Dat is wat je wilt.
Als je wilt dat alle div's tot de onderkant doorlopen, gebruik je ipv borders e.d. op de divs, een achtergrondafbeelding in de parent div die je verticaal herhaald. De divs lopen dan niet echt door, maar dat lijkt wel zo.
Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.
clear:both geeft in ieder geval aan dat dit element aan beide kanten geen elementen mag hebben die gefloat zijn. Daardoor gaat dit element er onder staan. Dat is wat je wilt.
Als je wilt dat alle div's tot de onderkant doorlopen, gebruik je ipv borders e.d. op de divs, een achtergrondafbeelding in de parent div die je verticaal herhaald. De divs lopen dan niet echt door, maar dat lijkt wel zo.
Juist, en op deze manier zeg je "wanneer de gefloate elementen binnen mij niet passen, maak me dan automatisch groter".quote:Op vrijdag 5 september 2008 11:47 schreef mcDavid het volgende:
Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.
Met andere woorden: een niet-floating div met daarin alleen gefloate elementen (die dus uit de flow zijn en visueel buiten de div vallen), kun je mee laten schalen met de elementen binnen die div door "overflow: auto" te gebruiken (mits je div geen "height" heeft).
