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.
Uiteindelijk ben ik toch maar bezweken onder een beunhaasmethode omdat ik er echt niet aan uit kwam en de html wel een keertje af mocht zijn...quote:Op woensdag 19 maart 2008 21:51 schreef GVRuud het volgende:
Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Toch heel erg bedankt voor je moeite!
Bahquote:Op donderdag 20 maart 2008 12:17 schreef GVRuud het volgende:
Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Waarom niet gewoon die header 100% breed en een breed plaatje met die lijnen maken en die gecentreerd als achtergrond voor de header gebruiken? De afbeelding wordt daar misschien 1 kilobyte groter van.
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Je kunt het ook doen net als die gast hiervoor met die rode/groene/blauwe div's.quote:Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
En dan die achterste 2 dus een achtergrondplaatje geven met repeat-x
Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groterquote:Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
Een randje eromheen zetten wil nog wel eens helpen om te kijken wat er precies gebeurtquote:Op donderdag 20 maart 2008 07:29 schreef Chandler het volgende:
[..]
IE7 & de laatste versie van FF geven het allemaal heel netjes weer
Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
http://duft.nl/web/test2.html
Zo te zien zijn die 2 plaatjes linksboven net te hoog, waardoor de plaatjes daaronder naar een volgende regel worden verplaatst ofzo....
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?
maar waarom is deze dan geen 100%
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Ze staan nu zowel in Fx2.x als in MSIE 6 als 3 rijen van 2quote:Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:
[..]
Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);
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
iig consequenter
Haha, heb nu de thumbs maar op 110px gezet in een div van 125px die 5px padding gebruikt! dus moet nu in IE6 ook goed zichtbaar zijn
dus moet nu in IE6 ook goed zichtbaar zijn
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Klein probleempje dat vast heel simpel op te lossen is.
Ik heb een grote div en daarin zitten allemaal divjes.
de onderste twee zijn er twee die naast elkaar staan. Namelijk een sidebar en daarnaast de daadwerkelijke content.
De sidebar is niet zo lang en de content varieert in lengte. Nu wil ik natuurlijk dat mijn sidebar ook altijd net zo lang is als mijn content.
Het is vast iets met min-height: contentheight
ofzo wat. Maar hoe zit het precies?
Ik heb een grote div en daarin zitten allemaal divjes.
de onderste twee zijn er twee die naast elkaar staan. Namelijk een sidebar en daarnaast de daadwerkelijke content.
De sidebar is niet zo lang en de content varieert in lengte. Nu wil ik natuurlijk dat mijn sidebar ook altijd net zo lang is als mijn content.
Het is vast iets met min-height: contentheight
ofzo wat. Maar hoe zit het precies?
Leg eerst eens uit waarom je dat wilt Fliepke, en dan gaan we daarna waarschijnlijk "faux columns" roepen
Ah, het gaat dus om iets visueels kennelijk. En wat wil je precies bereiken dan?
M'n idee is namelijk dat je iets wilt wat op te lossen is dmv zogenaamde "faux colums" (google)
M'n idee is namelijk dat je iets wilt wat op te lossen is dmv zogenaamde "faux colums" (google)
Dat werkt dus niet, want ik wil onderaan de sidebar een klein plaatje hebben. Dat zou door de achtergrond te "faken" dus nog steeds ergens in het midden staan.
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opendequote:Op maandag 24 maart 2008 15:44 schreef CraZaay het volgende:
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
.
Jup dat is het.quote:Op maandag 24 maart 2008 15:46 schreef Fliepke het volgende:
[..]
Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opende
Weet iemand trouwens of Firefox3 weer anders om zal gaan met css en html dan firefox 2? Dat we dan met een browser extra rekening moeten houden?
Overigens staat hier een of andere oplossing
http://www.intensivstatio(...)es/2/template-1.html
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); }
The content-div has a left margin. Setting a min-height assures that the content area is always higher than the navigation.
IE on MAC doesn't interprets min-height. The dynamic properties (i.e. expression) used in explorer are proprietary by Microsoft. This prevents the css from validating according to W3C.
«-- back
http://www.intensivstatio(...)es/2/template-1.html
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); }
The content-div has a left margin. Setting a min-height assures that the content area is always higher than the navigation.
IE on MAC doesn't interprets min-height. The dynamic properties (i.e. expression) used in explorer are proprietary by Microsoft. This prevents the css from validating according to W3C.
«-- back
