quote:Op dinsdag 17 januari 2006 22:49 schreef SuperRembo het volgende:
Komt die ruimte niet door het form?
In FF zit daar in ieder geval standaard een margin-bottom: 1em op.
1 2 3 4 5 6 7 8 | <div style="float: left"> <img> </div> <div style="float: left"> <p>test</p> </div> </div> |
Tis gelukt, met een clear: right; aan de text-div.quote:Op woensdag 25 januari 2006 19:46 schreef the_disheaver het volgende:
[ code verwijderd ]
?
Of begrijp ik je niet goed?
1 2 3 4 5 6 7 8 | <img style="float: left"> <div style="clear: right"> <p>test</p> </div> </div> <hr /> |
1 2 3 4 5 6 7 8 | <img style="float: left" > <div style="clear: both"> <p>test</p> </div> </div> <hr /> |
1 2 3 4 5 6 7 8 | <img style="float: left" "> <div style="float: left"> <p>text</p> </div> </div> <hr style="clear: both" /> |
Thnx.quote:Op woensdag 25 januari 2006 20:31 schreef the_disheaver het volgende:
Maar dit wel: clear: both in de <hr> zetten
[ code verwijderd ]
Paar kleine opmerkingen over je site:quote:
1 |
1 |
1 2 | <h2>Sponsoren van het Ruud Middel Rally Team</h2> |
Vergeet IE voor de mac. Klote browser, weinig gebruikt en wordt niet meer ondersteund. Ziet het er goed uit in Safari? Dan is het goed.quote:Op zaterdag 28 januari 2006 13:41 schreef DionysuZ het volgende:
Even een vraagje. Ik probeer verticaal centreren nog steeds goed werkend te krijgen met css. Zie bijvoorbeeld http://www.ruudvandevoort.nl. Maar als ik deze met IE voor de mac bekijk dan ziet het er verneukt uit. Volgens mij ligt dat aan het html, body { height: 100%; } maar dat weet ik niet zeker, iemand een oplossing, eventuele mac ie hack, daarvoor?
quote:Bug ridden crash prone piece of junk
Je bent een heldquote:Op dinsdag 31 januari 2006 15:10 schreef Desdinova het volgende:
<td style="background-color: #000000;"> al geprobeerd?
of als je een externe stylesheet hebt;
style.css:
td.achtergrond { background-color: #000000; }
je htmlpagina:
<td class="achtergrond">
Danku, margin-left van 250px deed het.quote:Op zaterdag 4 februari 2006 21:55 schreef SuperRembo het volgende:
Waarom geef je een div display: table-cell: (en dan ook nog een dubbele punt aan het eind)
Je stylesheet eindigd me di, ontbreekt daar niet iets
Ik denk dat er een margin-left van ongeveer 200px ontbreekt op de content div.
Ik had \\\'m er in eerste instantie neergezet om die content div naast het menu te krijgen. Maar nu blijkt het zonder ook te werken...quote:Op zaterdag 4 februari 2006 23:12 schreef SuperRembo het volgende:
Ik snap die div met display: table-cell nog niet. Wat wil je daar me bereiken?
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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>test</title> <style type="text/css"> * { font-family: Verdana; font-size: 13px;} h1 { font-size: 24px; border-bottom: 3px solid gray; margin-bottom: 5px;} h2 { font-size: 16px; padding-bottom: 5px; padding-top: 5px; } html { background: white;} body { margin: 0 auto; padding: 30px; background: #ddd; border-left: 1px solid gray; border-right: 1px solid gray;} #container { width: 600px; border-bottom: 3px solid gray;} #navcontainer { margin: 0; padding: 0; height: 22px; font: 13px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; } #navlist li a#current:hover { border-bottom: 3px solid #f90; background: #eee; } #navlist li { float: left; margin: 0; padding: 0; width: auto; display: block; } #navlist li a, #navlist li a:link { font: 13px Verdana, sans-serif; color: #555; text-decoration: none; padding: 3px 5px 3px 5px; display: block; } #navlist li a:hover { font: 13px Verdana, sans-serif; color: #039; border-bottom: 3px solid #bbb; cursor: pointer; background: #eee; } #navlist li a#current, #navlist li a#current:link { color: #000; cursor: default; font-weight: bold; border-bottom: 3px solid #999; } #subcontainer { margin: 0; padding: 0; height: 15px; font: 9px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; } .sublist ul { list-style-type: 0; } .sublist li, .sublist li a { list-style-type: none; text-decoration: none; color: gray; font: 9px Verdana, sans-serif; font-weight: bold; height: 15px; float: left; padding-top: 2px; padding-right: 10px;} .sublist li a:hover { color: black; list-style-type: none; text-decoration: none; } select { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px; } .f_input { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px;} .f_radio { border: 1px solid gray; width: 20px; } .f_check { border: 1px solid gray: width: 20px; } button { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px; } textarea { border: 1px solid gray; width: 250px; height: 150px; } p { padding-left: 10px; padding-right: 10px; } .left { width: 200px; float: left; } .break { clear: both; } </style> <script language="javascript" type="javascript/text"> </script> </head> <body> <div id="container"> <h1>HEX2PHP Archive builder v2.0</h1> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Installer settings</a></li> <li><a href="#">Installer data</a></li> <li><a href="#">Help</a></li> </ul> </div> <div id="subcontainer"> <ul class="sublist"> <li><a href="#">Settings</a></li> <li><a href="#" id="current">Disclamer</a></li> <li><a href="#">Function checks</a></li> </ul> </div> <div id="subcontainer"> <ul class="sublist"> <li><a href="#" id="current">Files and paths</a></li> <li><a href="#">MySQL (database)</a></li> </ul> </div> <div id="home"> </div> <div id="settings"> <h2>Settings</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tortor lorem, pellentesque quis, tristique id, iaculis eu, augue. Sed aliquet, enim a gravida mollis, pede mauris commodo nunc, in mollis eros mauris et urna. Cras adipiscing. Praesent viverra rutrum purus. Aliquam scelerisque vehicula nisi. Duis at libero. In ornare interdum mi. Aenean eget dolor pulvinar enim commodo tempus. Nulla facilisi. In et libero. Donec nonummy, tortor eu dapibus tempus, lorem dui lobortis nunc, at sodales mi metus vel leo. </p> <div class="left">Pulldown optie</div> <div class="left"> <select><option value="kut">Whahahahahahahaha</option></select> </div> <div class="break"></div> <div class="left">Input veld</div> <div class="left"> <input class="f_input" type="text" name="test" value="invoerveld" /> </div> <div class="break"></div> <div class="left">Button</div> <div class="left"> <input class="f_input" type="button" name="test" value="Button" /> </div> <div class="break"></div> <div class="left">Radio</div> <div class="left"> Yes <input class="f_radio" type="radio" name="test" value="Button" /> No <input class="f_radio" type="radio" name="test" value="Button" /> </div> <div class="break"></div> <h2>Profiles</h2> <div class="left">Check</div> <div class="left"> Yes <input class="f_check" type="checkbox" name="test" value="Button" /> No <input class="f_check" type="checkbox" name="test" value="Button" /> </div> <div class="break"></div> <div class="left">Textarea</div> <div class="left"> <textarea name="input">tralalala</textarea> </div> <div class="break"></div> </div> </div> </body> </html> |
Wat mij betreft niets, maar ik dacht dat dat uit den boze wasquote:Op woensdag 1 maart 2006 13:59 schreef Autoreply het volgende:
Wat is het bezwaar tegen tabellen?
Zoiets?quote:Op woensdag 1 maart 2006 13:37 schreef Tijn het volgende:
Kan iemand me uitleggen hoe ik het wèl moet aanpakken?
Geniaal! Het werkt!quote:Op woensdag 1 maart 2006 14:16 schreef SuperRembo het volgende:
@Tijn:
Zet de content en sidebar divs beide in de main div. Zet net voor het einde van de main div een div met alleen clear:both.
Je geeft vaak de breedte (of hoogte) van een element en ook een border of padding. Daardoor zie je de verschillen.quote:1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.
De enige manier om te zorgen dat opvolgende content onder je floats begint is om een element te plaatsen dat geen floats dult aan een van beide of beide kanten.quote:Op woensdag 1 maart 2006 14:21 schreef Tijn het volgende:
Geniaal! Het werkt!
Maar is zo'n oplossing niet een lapmiddel? Of is er gewoon geen manier om dit goed te krijgen zonder onzichtbare divs te maken?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |