Ik heb nu de floats in een wrap gezet met een min height en dat lijkt ook te werken... Maar vreemd dat je ook moet 'clearen' als er na je floats geen divs meer komen.quote:Op dinsdag 25 november 2008 21:02 schreef mcDavid het volgende:
Dat worden ze wel, maar met die float haal je ze uit de natuurlijke float, waardoor de overige elementen geen rekening meer houden met de grootte.
Zet er een divje onder met clear:both, dan dwingt die de container om er weer omheen te gaan staan.
Dat vreesde ik al...quote:Op dinsdag 25 november 2008 21:09 schreef mcDavid het volgende:
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.
Wat dan?quote:En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.
Die komt er wellicht onder dus dat gaan we maar doen.quote:Anyway gewoon <div style="clear:both"></div> eronder en klaar.
Mocht er een footer onder komen, kun je die er ook voor gebruiken.
Ik zou de body een achtergrond geven, en dan repeaten natuurlijk. Daarna en wrapper maken met bovenin een header div zonder achtergrond, waar je navigatie inkomt, en dan daaronder een div met je content en die een achtergrond geven (van de content).quote:Op donderdag 27 november 2008 20:01 schreef Banzaiaap het volgende:
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen)
Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/
Moet dus uiteindelijk zo gaan worden:
[ afbeelding ]
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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Matrozenkoor Apeldoorn</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <h1></h1> <p>slogan hier</p> </div> <!--einde header--> <div id="inhoud"> <div id="rij1"> <div id="welkom"> <h3 id="welkombalk">Welkom!</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue, ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra. Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi sit amet elit semper ullamcorper.</p> </div> <div id="agenda"> <h3 id="agendabalk">Agenda</h3> <p>1 december optreden 2 december optreden 3 december optreden</p> </div> </div> <!--einde rij1--> <div id="rij2"> <div id="laatstenieuws"> <h3 id="laatstenieuwsbalk">Het laatste nieuws</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue, ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra. Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi sit amet elit semper ullamcorper.</p> </div> </div> <!--einde rij2--> </div> <!--einde inhoud--> </div> <!--einde container--> </body> </html> |
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | } body { background: url(images/strookheader.jpg) repeat-x; font-size: 90%; font-family: verdana, calibri, tahoma; line-height: 1.6em; text-align: center; color: #444444; } ul,li, img, body, html { margin: 0; padding: 0; } a { text-decoration: none; color: #00d256; } a:hover { text-decoration: underline; } a img ( border: none; } h3 { background: url(images/strookitem.jpg) repeat-x; font-size: 12px; font-family: verdana, calibri, tahoma; color: #FAFAFA; margin: 0; padding: -.2em .5em; text-align: left; text-transform: lowercase; font-weight: normal; } .fr { float: right; } .fl { float: left; } #container { text-align: left; width: 866px; margin: 0 auto; } #header { background: url(images/header.jpg) no-repeat; width: 866px; height: 195px; } #inhoud { padding: 0 1em; } #inhoud div { overflow: hidden; } #rij1, #rij2 { margin-bottom: 2em; } #rij1 div, #rij2 div, { border: 1px solid #ababab; } #rij1 #welkombalk { height: 50x; margin: 0; padding: 0; } #agenda { float: right; width: 200px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | float: left; width: 300px; border: 1px solid #ababab; } #laatstenieuws { float: right; width: 300px; border: 1px solid #ababab; } #agenda { width: 200px; border: 1px solid #ababab; } |
Je geeft zelf het antwoord al, gewoon 2 divs maken. In de linker welkom en laatste nieuws en in de rechter je agenda.quote:Op donderdag 4 december 2008 10:02 schreef Mirel het volgende:
Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.
#welkom en #laatstenieuws zijn de linker 2, en het gedoe eromheen is de #inhoud, maar tot zover hoef ik niet in de #inhoud te kloten.
#agenda is de rechter.
[ code verwijderd ]
Ze komen wel naast elkaar, maar telkens net niet goed.
Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.
Laat eens zien wat je hebt gemaaktquote:
FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.quote:
Hij hoeft iig niet die h3 een ID te geven omdat ie al gedefineerd wordt in de CSS zelf.quote:Op donderdag 4 december 2008 13:57 schreef Jo0Lz het volgende:
[..]
FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...
Er staat in ieder geval nog een fout in je css. Padding mag namelijk niet negatief zijn (margin mag dat wel).quote:
1 |
quote:Op zaterdag 6 december 2008 11:47 schreef mcDavid het volgende:
Volgens mij kan dat met de psuedo-class ":focus"
[ code verwijderd ]
zoiets dus..
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |