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..
IE8 in non compatibiliteits mode is errug relaxtquote:Op zaterdag 6 december 2008 14:11 schreef mcDavid het volgende:
Probeer het toch eens met active dan?droevig stuk software, dat IE...
Ja omdat'ie dan eindelijk een strict-modus heeft. Zoals de andere browsers al sinds 2003 ofzo.quote:Op zaterdag 6 december 2008 @ 15:15 schreef mschol het volgende:
[..]
IE8 in non compatibiliteits mode is errug relaxt
maar om eerlijk te zijn: in compatibiliteits modus kom ik bij m'n eigen css bar maar dan ook echt bar weinig tegen wat niet werkt... dus ik vraag me altijd maar weer af waarom men zo loopt te zeiken als het gewoon kan (en ik het kennelijk gewoon goed genoeg doe dat: a) alle browsers het snappen, b) W3c compliant is) enige zal zijn dat het misschien niet SEO isquote:Op zaterdag 6 december 2008 16:13 schreef mcDavid het volgende:
[..]
Ja omdat'ie dan eindelijk een strict-modus heeft. Zoals de andere browsers al sinds 2003 ofzo.
Ik zou ze gewoon met margins uitlijnen zodat ze ongeveer onderaan staan.quote:Op zondag 7 december 2008 @ 23:02 schreef Mirel het volgende:
Kan je text links-onderaan een div zetten?
http://www.mirelmasic.nl/website/ Header en div is dan dit:
[afbeelding]
Als dit niet kan dan zal ik een andere approach moeten nemen voor de divs.
IE7 doet het al behoorlijk prima idd, maar is nog steeds niet volledig strict op sommige punten. Maar in ieder geval de búgs zijn er voor een groot deel uit.quote:Op zondag 7 december 2008 @ 23:15 schreef mschol het volgende:
[..]
maar om eerlijk te zijn: in compatibiliteits modus kom ik bij m'n eigen css bar maar dan ook echt bar weinig tegen wat niet werkt... dus ik vraag me altijd maar weer af waarom men zo loopt te zeiken als het gewoon kan (en ik het kennelijk gewoon goed genoeg doe dat: a) alle browsers het snappen, b) W3c compliant is) enige zal zijn dat het misschien niet SEO is
1 2 3 4 5 6 7 8 9 10 11 | font-family: "Trebuchet MS", Arial; font-size: 12px; padding-left: 15px; <----------------------- padding-right:15px; <----------------------- font-weight: normal; color: #561420; text-decoration:none; font-weight:bold; border:0px; } |
Dat heeft betrekking op alle linkjes in het menu en op alle a:hover en a:active elementen.quote:Op dinsdag 9 december 2008 10:19 schreef ludeau het volgende:
Ja maar dat heeft toch alleen betrekking op het menu? Daar is niks mis mee, ook als ik het verwijder blijven de afbeeldingen onclick verplaatsen...
1 2 3 4 5 6 7 | div.classa { } div.classb { } div.classa_classb { } HTML: <div class="classa_classb"> |
Amen.quote:Op woensdag 10 december 2008 10:19 schreef Intrepidity het volgende:
De dag dat IE6 nog <5% marktaandeel heeft spring ik een gat in de lucht![]()
Er moeten plaatjes van schelpen en aangespoelde ankers en visnetten enzo op het strand!quote:Op woensdag 10 december 2008 @ 17:41 schreef Mirel het volgende:
www.mirelmasic.nl/matrozenkoor
http://www.mirelmasic.nl/oude/website-oud/ (IE)
Uiteindelijk is dus zoals in 1e link geworden. Weet iemand nog ideeën om dit wat meer pro te laten ogen? Het ziet er zo amateuristisch uit
Leuk dat je ziet dat het een strand en zee moet voorstellen, was precies mijn bedoeling.quote:Op woensdag 10 december 2008 18:45 schreef mcDavid het volgende:
[..]
Er moeten plaatjes van schelpen en aangespoelde ankers en visnetten enzo op het strand!
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |