Enkel en alleen dankzij de foutcorrectie van de browsers. Die gaan over op quirks mode en dan maken ze er alsnog wel iets fatsoenlijks vanquote:Op vrijdag 15 juni 2007 09:01 schreef Tuvai.net het volgende:
En tóch werkt het voor vrijwel iedereen.
Maf hé?
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <div class="title">Voorbeeldpagina</div> <div class="menubar">Menu</div> </div> <div id="paneleft"> <div class="title">Hondenrassen:</div> <div class="items"><ul></ul></div> <div class="title">Kattenrassen:</div> <div class="items"><ul></ul></div> </div> <div id="paneright"> <div class="title">Schildpadden:</div> <div class="items"><ul></ul></div> <div class="title">Apen:</div> <div class="items"><ul></ul></div> </div> <style type="text/css"> /* HEADER ID */ #header{ width: 600px; } /* CLASS TITLE IN HEADER ID */ #header .title { text-align: right; line-height: 6px; } /* CLASS MENUBAR IN HEADER ID */ #header .menubar ..... /* CLASS TITLE IN PANELEFT & PANERIGHT */ #paneleft .header, #paneright .header { font-family: Verdana, Tahoma, Arial; } /* CLASS TITLE IN PANELEFT */ #paneleft .header { text-align: left; } /* CLASS TITLE IN PANERIGHT */ #paneright .title { text-align: right; } /* GLOBAL UL IN CLASS TITLE IN PANELEFT & PANERIGHT */ #paneleft .title ul, #paneright .title ul{ display: inline; } </style> |
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 42 43 44 | margin: 0px; padding: 0px; } body { background-color: #FFFFFF; font-size: 15px; font-family: Arial, Helvetica; text-align: center; } html, body { height: 100%; } #container { position: relative; min-height: 100%; height: 100%; } #wrapper { margin-left: auto; margin-right: auto; padding-bottom: 60px; width: 620px; } #content { text-align: justify; } html>body #container { height: auto; } #footer { bottom: 0; position: absolute; text-align: center; width: 100%; background: #FF0000; } |
1 2 3 4 5 6 7 8 9 10 11 | <div id="container" class="container"> <div id="wrapper" class="wrapper"> <div id="content" class="content"> Content hier. </div> <!-- content //--> </div> <!-- wrapper //--> <div id="footer" class="footer"> <p class="footer">Bla</p> </div> <!-- footer //--> </div> <!-- container //--> |
Ja, en de andere titels ook headers van maken. De divs die je voor de titels gebruikt kunnen dan weg. De divs om je lists kunnen ook verdwijnenn. Je kunt in de CSS immers prima de elementen als referentie gebruiken: "#paneleft h2" en "#paneleft ul".quote:Op vrijdag 15 juni 2007 10:51 schreef Bigs het volgende:
Kan wel zo hoor.. maar ik zou van die titel in je header een h1 element maken. Is wat meer semantisch verantwoord (als je het toch goed wil doen).
Je margin-left en margin-right, wat gebeurt er als je dat vervangt door een:quote:Op vrijdag 15 juni 2007 11:14 schreef DikkeSmikkel het volgende:
Ik heb een hele grappige footer... In Mozilla FF en Opera 9 doet-ie het goed. In IE7 begint-ie in het midden van mijn pagina en loopt dan vrolijk rechts van het scherm af. De lengte van de footer is wél goed!
Mijn code:
[ code verwijderd ]
Note: dit is niet de volledige CSS code maar alleen de relevante blokken.
HTML code:
[ code verwijderd ]
Plaatjes:
Mozilla: klik
IE7: klik
Iemand een ideetje wat ik fout doe? Code en CSS komen door de w3c-validatie heen.
Code als XHTML 1.0 Transitional.
Het zou perfect zijn om tekst en opmaak gescheiden te houden, maar dat is helaas niet altijd mogelijk. Om een werkend geheel te krijg zul je toch echt her en der divs moeten nesten, en ook divs aanmaken voor het design. Denk bijvoorbeeld aan afrondingen, ronde hoeken..quote:Op vrijdag 15 juni 2007 11:29 schreef CraZaay het volgende:
[..]
Ja, en de andere titels ook headers van maken. De divs die je voor de titels gebruikt kunnen dan weg. De divs om je lists kunnen ook verdwijnenn. Je kunt in de CSS immers prima de elementen als referentie gebruiken: "#paneleft h2" en "#paneleft ul".
"paneleft" en "paneright" omschrijven de presentatie, en niet de structuur. Even aanpassen naar iets wat over de inhoud zegt dus
De tip van de dag is dus: structureer je pagina zo logisch mogelijk met de html elementen die je tot je beschikking hebt, en voeg eventueel later extra hooks toe als dat voor je design noodzakelijk is (vaak niet). Voor alles een div of span gebruiken is net zo erg als opmaak door middel van tabellen naar mijn mening. Headings, lists (unordered, ordered, definition), paragraphs, emphasis, e.d. zijn niet voor niets uitgevonden En zo hebben alternatieve user agents er ook nog iets aan (Google, visueel gehandicapten, mobile devices zonder CSS, etc)
Mja ik zat te twijfelen of hij daar nou h2's voor moet gebruiken.quote:Op vrijdag 15 juni 2007 11:29 schreef CraZaay het volgende:
[..]
Ja, en de andere titels ook headers van maken. De divs die je voor de titels gebruikt kunnen dan weg. De divs om je lists kunnen ook verdwijnenn. Je kunt in de CSS immers prima de elementen als referentie gebruiken: "#paneleft h2" en "#paneleft ul".
"paneleft" en "paneright" omschrijven de presentatie, en niet de structuur. Even aanpassen naar iets wat over de inhoud zegt dus
De tip van de dag is dus: structureer je pagina zo logisch mogelijk met de html elementen die je tot je beschikking hebt, en voeg eventueel later extra hooks toe als dat voor je design noodzakelijk is (vaak niet). Voor alles een div of span gebruiken is net zo erg als opmaak door middel van tabellen naar mijn mening. Headings, lists (unordered, ordered, definition), paragraphs, emphasis, e.d. zijn niet voor niets uitgevonden En zo hebben alternatieve user agents er ook nog iets aan (Google, visueel gehandicapten, mobile devices zonder CSS, etc)
Je hebt vrijwel altijd extra hooks nodig ja, maar veel minder dan de meeste mensen denken. Ik snap je vraag, en dezelfde namen zijn geen probleem, maar in jouw geval heb je zoveel nesting zeer waarchijnlijk helemaal niet nodig.quote:Op vrijdag 15 juni 2007 11:36 schreef Geqxon het volgende:
[..]
Het zou perfect zijn om tekst en opmaak gescheiden te houden, maar dat is helaas niet altijd mogelijk. Om een werkend geheel te krijg zul je toch echt her en der divs moeten nesten, en ook divs aanmaken voor het design. Denk bijvoorbeeld aan afrondingen, ronde hoeken..
Maar goed, mijn voorbeeld ging puur over geneste divs en classes met dezelfde namen
Als je een h2 "menu" hebt en je hebt daaronder weer kopjes met een opsomming eronder, dan zijn dat dus h3's met lists imoquote:Op vrijdag 15 juni 2007 11:50 schreef Bigs het volgende:
[..]
Mja ik zat te twijfelen of hij daar nou h2's voor moet gebruiken.
Een algemene h2 met de tekst 'Menu' is prima, maar voor de onderverdeling van het menu zou ik een geneste UL of iets gebruiken. Met h2's kun je dan de content in stukken verdelen.
Dat geeft inderdaad wel minder rotzooi. Dan houden we het daar op Aan de slag Geqxon!quote:Op vrijdag 15 juni 2007 11:55 schreef CraZaay het volgende:
[..]
Als je een h2 "menu" hebt en je hebt daaronder weer kopjes met een opsomming eronder, dan zijn dat dus h3's met lists imo
Als ikquote:Op vrijdag 15 juni 2007 11:30 schreef Geqxon het volgende:
[..]
Je margin-left en margin-right, wat gebeurt er als je dat vervangt door een:
"margin: 0 auto"
?
1 2 3 4 5 6 | margin-left: 0 auto; margin-right: 0 auto; padding-bottom: 60px; width: 620px; } |
Om een voorbeeld van mijn huidige pagina te geven:quote:Op vrijdag 15 juni 2007 11:54 schreef CraZaay het volgende:
[..]
Je hebt vrijwel altijd extra hooks nodig ja, maar veel minder dan de meeste mensen denken. Ik snap je vraag, en dezelfde namen zijn geen probleem, maar in jouw geval heb je zoveel nesting zeer waarchijnlijk helemaal niet nodig.
En er is een verschil tussen extra hooks toevoegen voor de opmaak en, zoals in jouw voorbeeld, gewoon helemaal geen structuur aangeven.
In html was het (voor mij) duidelijker geweest, maar dit quote wel makkelijkerquote:Op vrijdag 15 juni 2007 12:13 schreef Geqxon het volgende:
[..]
Om een voorbeeld van mijn huidige pagina te geven:
Prima, gebruik ik ook altijd.quote:[-] Een div om alles gecentreerd te krijgen, met daarin:
Kan prima als <h2> of <p> met een achtergrondafbeelding en de tekst middels css verborgen.quote:[-] [-] Een div gevuld met een slogan (het slogan is een image, de div heeft een padding)
Primaquote:[-] [-] Een menu-div, met daarin:
<ul>quote:[-] [-] [-] Een balk-div, met daarin:
<li> i.c.m. <a>quote:[-] [-] [-] [-] Meerdere button divs, allemaal gefloat, met een vaste breedte
Prima op te lossen door deze als achtergrondafbeeldingen van de menu-div en balk-ul te gebruiken. Schaalt het nog prima mee ook.quote:[-] [-] [-] Een tweede balk-div, met daarin:
[-] [-] [-] [-] Gefloat meerdere onderdelen van de balk: Afgeronde linkerkant, balkdelen afgeronde rechterkant
Primaquote:[-] [-] Een midden-div, met daarin:
[-] [-] [-] Een gefloat linkermenu-div, met daarin:
<h2> voor de titels, <ul> voor de items (zoals je al hebt)quote:[-] [-] [-] [-] Een div met de class "title" per onderdeel, en in een LI voor elk subitem
<p>quote:[-] [-] [-] Een slogan.
Heb je die nodig? De inhoud komt automatisch rechts van de float immers.quote:[-] [-] [-] Een div genaamd hoofdcontent
Lijnen aan de hoofdcontent-div hangen of als achtergrondafbeelding hiervan gebruiken (of als afbeelding aan de midden-div, als je de hoofdcontent-div laat vervallen. Of een combi met de lijnen aan de midden-div en de afrondingshoeken als achtergrond voor de hoofdcontent-div?quote:[-] [-] [-] Een div als verticale lijn links van de hoofdcontent
[-] [-] [-] Een div als verticale lijn rechts van de hoofdcontent
[-] [-] [-] Twee kleine afrondingshoekjes als div
Roept om een <h1>quote:[-] [-] Een div met het bedrijfslogo, die een top en left van nul hebben, en bovenaan de container plakt
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 42 43 44 | padding: 0; margin-bottom: 20px; height: 75px; background-color: #d0c3ac; border: 1px solid #c8b99e; width; 90%; } .comment .big { position: absolute; top: 0; color: #d8cfbd; font-family: "Times New Roman", Times, serif; font-size: 77px; z-index: 10; margin: 0px; padding: 0px; padding-top: 0px; width: 100%; text-align: right; } .comment .body { padding: 5px; z-index: 10; } .comment .date { font-style: italic; font-size: 10px; display: inline; font-weight: bold; } .comment .author { font-size: 13px; padding: 0 0 2px 0; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } div { position: relative; } |
Oopsquote:Op vrijdag 15 juni 2007 12:12 schreef CraZaay het volgende:
Dat zei 'ie niet "margin: 0 auto" is iets anders dan "margin-left: 0 auto"
Graag gedaan en het was absoluut opbouwend bedoeld. En inderdaad, in de gevallen dat er nog een achtergrond enzo nodig is heb je vaak meer divs nodig. Al combineer ik dat vaak door gewoon een afbeelding van 2000 pixels hoog maken met daarin (bijvoorbeeld) borders links en rechts en onderin de gradient. Positioneren op de bottom van de div en het werkt. Alleen te doen uiteraard wanneer je afbeeldingen er niet extreem groot door worden (iets groter dan normaal is geen probleem, aangezien afbeeldingen beter gecached worden dan de html). Qua dynamiek werkt het dan meestal ook prima.quote:Op vrijdag 15 juni 2007 12:40 schreef Geqxon het volgende:
Bedankt voor het commentaar
Vergeet ik er wel bij te melden dat de website vrij grafisch is, en her en der het één en ander niet gelijk in een header kan, maar ik heb wel wat dingetjes overgenomen
De div genaamd hoofdcontent is bijvoorbeeld een losse div, omdat ik er dan een border om kan zetten, en rechts onderin de hoek een gefade achtergrond kan plaatsen.
Laatste puntje, alle moet dynamisch blijven. Ik kan dus veel met afbeeldingen met absolute waarde werken, maar dat gaat niet alles worden. Dan ben ik helaas aangewezen om veel met divs te "tekenen". Niet netjes, maar so far werkt het best goed
Nogmaal: Bedankt!
Heel aardig boek. Misschien zal ik binnenkort eens wat book reviews schrijven, heb wel een stuk of 10 tot 15 boeken over html, css, javascript, accessibilty en usability die de moeite waard zijn.quote:
Een wilde gok voor je eerste probleem: zet je line-height op 0, en dan met negatieve top en right totdat het goed staat.quote:Op vrijdag 15 juni 2007 12:42 schreef Chandler het volgende:
Ik zit met een klein vaag iets. (stukje uit het vorige topic) maar er komt wat bij!
[afbeelding]
Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....
Tevens wilde ik de div die in de stylesheet staat onderbrengen in .comment maar helaas krijg ik dan dat het nummer in de commentaarbox wegvalt die krijg ik dan helemaal niet meer te zien, en als ik deze dus laat staan zijn alle divs opeens position: relatieve;
Stylesheet
[ code verwijderd ]
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |