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 probleem is dat ik het niet zie 
Hoe zou ik dat kunnen oplossen?
Hoe zou ik dat kunnen oplossen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Al die blokjes een vaste hoogte geven?quote:Op donderdag 20 maart 2008 18:55 schreef Chandler het volgende:
Het probleem is dat ik het niet zie
Hoe zou ik dat kunnen oplossen?
Na tijdenlang websites gemaakt te hebben wil ik het nu met divjes proberen. Aangezien het nog nieuw voor me is en het me (mijn mening) toch redelijk wil lukken, loop ik al enkele dagen tegen hetzelfde probleem aan.
Wat ik wil is een site opgedeeld in 6 divs. Een container die de rest bevat, namelijk de header, de body (bevat een div menu en een div content) en de footer.
Voorbeeld/vooruitgang is hier te zien: www.bugworks.eu/stuff/fok/div.html
Alles lijkt goed te zijn tot het moment ik het menu aan ga passen (meer regels/tekst), dan overlapt hij de footer. Doe ik hetzelfde bij de content dan wordt de footer netjes zoals bedoeld opgeschoven naar beneden. Nu heb ik al vanalles geprobeerd, maar ik kan geen oplossing vinden. Weet iemand van jullie waar het aan ligt? Alvast bedankt. :Y
CSS
HTML/divjes
Wat ik wil is een site opgedeeld in 6 divs. Een container die de rest bevat, namelijk de header, de body (bevat een div menu en een div content) en de footer.
Voorbeeld/vooruitgang is hier te zien: www.bugworks.eu/stuff/fok/div.html
Alles lijkt goed te zijn tot het moment ik het menu aan ga passen (meer regels/tekst), dan overlapt hij de footer. Doe ik hetzelfde bij de content dan wordt de footer netjes zoals bedoeld opgeschoven naar beneden. Nu heb ik al vanalles geprobeerd, maar ik kan geen oplossing vinden. Weet iemand van jullie waar het aan ligt? Alvast bedankt. :Y
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 | border: 1px solid; padding: 10px; margin-left: 150px; margin-right: 250px; } #page_header { border: 1px solid; height: 100px; margin-bottom: 10px; } #page_body { border: 1px solid; } #page_menu { position: absolute; width: 190px; border: 1px solid; } #page_content { margin-left: 200px; border: 1px solid; } #page_footer { border: 1px solid; height: 50px; margin-top: 10px; } |
HTML/divjes
| 1 2 3 4 5 6 7 8 | <div id="page_header">Header</div> <div id="page_body"> <div id="page_menu">Menu<br /><br /><br /><br /><br /><br />Menu</div> <div id="page_content">Content<br /><br /><br />Content</div> </div> <div id="page_footer">Footer</div> </div> |
Je menu heeft een position:absolute. Daarmee haal je 'm uit de natuurlijke float, dus de rest houdt geen rekening meer met de grootte van je menu.
Als je 'm gewoon positioneert met margins, zou het in principe goed moeten gaan.
Als je 'm gewoon positioneert met margins, zou het in principe goed moeten gaan.
Het de position:absolute weggehaald en "margin-top: -150px;" toegevoegd aan #page_content, het enige nadeel is dat hij uitgaat van het einde (laagste) van het menu div, dus dat verschilt nogal.
Maar ondanks bovenstaande blijft het menu nog steeds over het footer div gaan
.
Maar ondanks bovenstaande blijft het menu nog steeds over het footer div gaan
.
als je het mij vraagt moet je helemaal niet met zulke grote marges hoeven werken.. Ik ga er even op los!
zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)quote:Op donderdag 20 maart 2008 23:38 schreef CraZaay het volgende:
Zonder #page_body kan het ook prima, scheelt weer een element
Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.quote:Op donderdag 20 maart 2008 23:39 schreef mcDavid het volgende:
[..]
zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)
Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
dan die skippen idd. Veel makkelijker.quote:Op donderdag 20 maart 2008 23:40 schreef BugWorks het volgende:
[..]
#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeitequote:Op donderdag 20 maart 2008 23:42 schreef mcDavid het volgende:
[..]
dan die skippen idd. Veel makkelijker.
.Edit
Je extra div lijkt dus toch noodzakelijk.
[ Bericht 5% gewijzigd door BugWorks op 20-03-2008 23:51:41 ]
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.quote:Op donderdag 20 maart 2008 16:08 schreef CraZaay het volgende:
[..]
Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter
Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
die lijntjes kun je heus wel op een andere manier oplossen zonder javascript te gebruiken =). Wees creatief 
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
Het is visueel en dus layout wat mij betreft, ook als het niets toevoegt aan de gebruikersbeleving. Ik snap wel dat je het zo gedaan hebt hoor en ik heb ook echt weleens het een en ander gepositioneerd met JS. Je moet aan afweging maken tussen twee kwaden in dit geval, en ik kies dan altijd voor zo min mogelijk elementen in de HTML die alleen voor opmaak gebruikt worden en geen JS, dus dan kom je uit op een oplossing met een brede achtergrondafbeelding. Neemt niet weg dat beide punten verdedigbaar zijnquote:Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt. 
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
Nogmaals: kijk even onderaan de vorige pagina. Die gast die links en rechts een verschillende kleur background wil. Als je het precies zo doet gaat het ook goed. Doe je alleen een achtergrondafbeelding ipv een achtergrondkleur!quote:Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:
[..]
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.quote:Op donderdag 20 maart 2008 23:44 schreef BugWorks het volgende:
[..]
Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite
Edit
Je extra div lijkt dus toch noodzakelijk.
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!quote:Op vrijdag 21 maart 2008 12:40 schreef DionysuZ het volgende:
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
IE6 dan weer niet wat idd bloedirritant is
dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijdquote:Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:
[..]
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
| 1 2 3 | <link rel="stylesheet" type="text/css" media="screen, projection" href="/iehack.css" /> <![endif]--> |
met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6 ;).
Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.
Resultaat is dus een divje met gewoon hakkelige tekst erin. :(
Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he :P
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
Dat had ik gedaan, 130 hoogte en breedte;quote:Op donderdag 20 maart 2008 19:07 schreef mcDavid het volgende:
[..]
Al die blokjes een vaste hoogte geven?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
heb je ergens de code staan?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
En IE7 heeft wat afwijkingen in de weergave van kleuren van PNG's.quote:Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:
[..]
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.quote:Op vrijdag 21 maart 2008 13:15 schreef DionysuZ het volgende:
[..]
dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijd
[ code verwijderd ]
met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6.
Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.
Resultaat is dus een divje met gewoon hakkelige tekst erin.
Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he
ik weet het..... dat is toch ook niet wat ik bedoel? als je tekst een alpha channel wil geven.quote:Op vrijdag 21 maart 2008 14:45 schreef Geqxon het volgende:
[..]
In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...quote:Op vrijdag 21 maart 2008 13:35 schreef Chandler het volgende:
[..]
Dat had ik gedaan, 130 hoogte en breedte;
Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.quote:Op vrijdag 21 maart 2008 12:50 schreef mcDavid het volgende:
[..]
Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
Klopt, margin-top heb je dan weinig meer aan, maar padding lost een hoop opquote:Op vrijdag 21 maart 2008 16:27 schreef BugWorks het volgende:
[..]
Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.
Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);quote:Op vrijdag 21 maart 2008 15:23 schreef mcDavid het volgende:
[..]
Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...
En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet
misschien moet ik block mee geven aan de div?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Het is van nature al een block level elementquote:Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:
misschien moet ik block mee geven aan de div?
