Ik heb dus gezocht naar een simpele oplossing maar kon er helaas geen vinden, is er geen oplossing waarbij dynamisch een div een iframe kan omvatten?quote:Op maandag 3 november 2008 11:49 schreef spaceninjapirate het volgende:
Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe
Of anders even verder zoeken, er zijn heel wat paginas over te vinden
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 | <head> <script type="text/javascript"> // make the specified div a windowed control in IE6 // this masks an iframe (which is a windowed control) onto the div, // turning the div into a windowed control itself function makeWindowed(p_div) { var is_ie6 = document.all && (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1); if (is_ie6) { var html = "<iframe style=\"position: absolute; display: block; " + "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" + "filter: mask(); background-color: #ffffff; \"></iframe>"; if (p_div) p_div.innerHTML += html; // force refresh of div var olddisplay = p_div.style.display; p_div.style.display = 'none'; p_div.style.display = olddisplay; }; } </script> </head> <body> <div id="test" style="position: absolute; z-index: 2; top: 50; left: 30; width: 200px; height: 200px; background-color: red"> </div> <select style="position: absolute; z-index: 1; top: 50;"> <option>test</option> </select> <a href="javascript:makeWindowed(document.getElementById('test'));"> Make Windowed</a> </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 | <h3>Hoofdmenu</h3> <ul class="menu"> <li class="item1"> <a href="http://gooimeer.no-ip.info/olavtestsite/"> <span>Home</span></a> </li> <li class="parent active item3"> <a href="/olavtestsite/index.php?Itemid=3"><span>Speltakken</span></a> <ul> <li class="item4"> <a href="/olavtestsite/index.php?Itemid=4"><span>Bevers</span></a> </li> <li class="item5"> <a href="/olavtestsite/index.php?Itemid=5"><span>Dolfijnen</span></a> </li> <li id="current" class="active item8"> <a href="/olavtestsite/index.php?Itemid=8"><span>Zeeverkenners Ochtend</span></a> </li> <li class="item9"> <a href="/olavtestsite/index.php?Itemid=9"><span>Zeeverkenners Middag</span></a> </li> <li class="item10"> <a href="/olavtestsite/index.php?Itemid=10"><span>Wilde Vaart</span></a> </li> <li class="item11"> <a href="/olavtestsite/index.php?Itemid=11"><span>Loodsenstam</span></a> </li> <li class="item14"> <a href="/olavtestsite/index.php?Itemid=14"><span>Vaarschool Seal</span></a> </li> <li class="item12"> <a href="/olavtestsite/index.php?Itemid=12"><span>Bestuur</span></a> </li> <li class="item13"> <a href="/olavtestsite/index.php?Itemid=13"><span>Olav klusteam</span></a> </li> </ul> </li> <li class="parent item6"> <a href="/olavtestsite/index.php?Itemid=6"><span>Onderkomens</span></a> </li> <li class="parent item7"> <a href="/olavtestsite/index.php?Itemid=7"><span>Verhuur</span></a> </li> <li class="parent item20"> <a href="/olavtestsite/index.php?Itemid=20"><span>Vrienden</span></a> </li> <li class="item2"> <a href="http://gooimeer.no-ip.info/olavtestsite/administrator/index.html"><span>Site beheren</span></a> </li> </ul> </div> |
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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 | padding: 0; margin: 0; } body { text-align: center; font-size: 76%; font-family: Arial, sans-serif, Verdana, Helvetica; line-height: 1.3; } h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 0.5em 0; } a img { border: 0px; } li, dd { margin-left: 1em; } li { list-style-type:circle; } fieldset { padding:5em; } td { padding:1px; } #wrap { min-width: 960px; max-width: 960px; width: auto !important; width: 960px; margin: 0 auto; text-align: left; } #header { background:#fff url(../images/hbg.jpg) 0 0 no-repeat; position:relative; height:180px; margin-top:10px; margin-bottom:5px; color:#fff; } #header .logo { margin-top:55px; } #header h1 { font-variant: small-caps; font-stretch: expanded; padding-left: 20px; color:#fff; font-weight: bold; font-size: 50px; } #header input { background: url(../images/search.png) no-repeat; border:0; height: 22px; width: 168px; padding: 2px; font-size:1em; color:#fff; border:1px solid #fff; } #header .search { position:absolute; top: 30px; right:20px; color:#fff; } #header .banner { position:absolute; top: 68px; right:20px; color:#fff; } #leftcol { float:left; width:23%; overflow:hidden; } #content { float:left; width: 54%; } #content1 { position:relative; float:left; width: 54%; overflow:hidden; } #content2 { position:relative; float:left; width: 77%; overflow:hidden; } #content3 { position:relative; float:left; width: 100%; overflow:hidden; } #rightcol { position:relative; float:left; width:23%; overflow:hidden; } #footer { clear:both; background:#fff url(../images/fbg.png) 0 bottom no-repeat; height:60px; margin-bottom:10px; padding-top:20px; text-align:center; } #top { padding:10px 10px 5px 10px; margin:0px; } #top .box { padding:0; margin:0; color:#000; background:#fff; } #bottom { clear:both; padding:10px 10px; margin:5px 10px; background:#fff; border-top:1px dotted #708059; border-bottom:1px dotted #708059; } #user { clear:both; padding:10px; } .box { padding:10px; } /* --- */ #leftcolbg { background: url(../images/lbg.png) 23% 0 repeat-y; } #rightcolbg { background: url(../images/rbg.png) 77% 0 repeat-y; } a {color: #99bf60;} a:link {color: #708059;} a:hover {color: #708059;} h1, .contentheading, .componentheading, .contentpagetitle { color: #708059; font-weight:bold; font-size:1.5em; } h2{font-size: 1.5em;} h3 {font-size: 1.3em;} h4 {font-size: 1.2em;} h5 {font-size: 1.1em;} h6 {font-size: 1em;} hr { border:1px solid #DCE6CF; } fieldset { padding: 0.3em; border: 0px; } #footer, .small, .createdate, .modifydate { font-size:0.8em; color: #B4CC8F; } .module { margin-bottom: 1em; padding: 0 10px; padding-bottom: 5px; border: 1px solid #DCE6CF; text-align:left; } .module h3 { background: #DCE6CF; color: #708059; padding: 0.25em 0.5em; text-align: center; font-size: 1.1em; margin: 2px -8px 0.5em -8px; text-align: left; } .module_menu { padding:0; margin-bottom: 1em; color: #ffff99; } .module_menu h3 { background: #000000; color: #ffff99; padding: 0.25em 0.5em; text-align: left; font-size: 1.1em; margin: 0; } .module_menu ul { list-style: none; margin: 0; padding: 0; } .module_menu li { margin: 0; list-style:none; } .module_menu li a { display: block; padding: 3px 5px 3px 0.5em; border-left: 10px solid #000000; background-color: #ffff99; color: #000000; text-decoration:none; border-top: 1px solid #3366ff; } html>body .module_menu li a { width: auto; } .module_menu li a:hover, a#active_menu:link, a#active_menu:visited { display: block; border-left: 10px solid #000; background-color: #ffff33; color:#000000; border-top: 1px solid #3366ff; } .module_menu #current a { display: block; border-left: 10px solid #000; background-color: #ffff33; color:#000000; border-top: 1px solid #3366ff; } /*sub*/ .module_menu ul li ul li a{ display: block; padding: 3px 5px 3px 1.0em; border-left: 20px solid #000; background-color: #ffff99; color: #000000; text-decoration:none; border-top: 1px solid #3366ff; } /*zelf toegevoegd, hover submenu 20 px*/ .module_menu ul li ul li a:hover { display: block; border-left: 20px solid #000; background-color: #ffff33; color:#000000; border-top: 1px solid #3366ff; } /*als menu is geklikt waar submenu inzit, maar submenu nog niet gebruikt*/ .module_menu ul #current ul li a{ display: block; padding: 3px 5px 3px 1.0em; border-left: 20px solid #000; border-top: 1px solid #3366ff; background-color: #ffff99; margin:0 0 -1px 0; color:#000; } /*zelf toegevoegd, submenu ook van kleur veranderen*/ .module_menu ul #current ul li a:hover{ display: block; border-left: 20px solid #000; background-color: #ffff33; border-top: 1px solid #3366ff; color:#000; } /*als menu is geklikt waar submenu inzit, en daarin een pagina bezocht word*/ .module_menu ul li ul #current a{ display: block; padding: 3px 5px 3px 1.0em; border-left: 20px solid #000; border-top: 1px solid #3366ff; background-color: #ffff33; margin:0 0 -1px 0; color:#000; } /*zelf toegevoegd, submenu ook van kleur veranderen*/ .module_menu ul li ul #current a:hover{ display: block; padding: 3px 5px 3px 1.0em; border-left: 20px solid #000; border-top: 1px solid #3366ff; background-color: #ffff33; margin:0 0 -1px 0; color:#000; } #header .module { margin-bottom: 0em; padding: 0; border: 0px; } #mainlevel-nav { list-style:none; float:right; margin:0; padding:0; width:100%; list-style-type:none; position:absolute; bottom:0px; right:10px; } #mainlevel-nav li { list-style:none; float:right; margin:0; padding:0px; } #mainlevel-nav a:link,#mainlevel-nav a:visited { float:left; display:block; color:#000; text-decoration:none; margin:0 2px; padding:7px 8px 5px 8px; border-left: 1px solid #80896c; border-top: 1px solid #80896c; border-right: 1px solid #80896c; border-bottom: 1px solid #80896c; background:#DCE6CF; } #header #active_menu-nav, #mainlevel-nav #current a { float:left; display:block; color:#000; text-decoration:none; margin:0 2px; padding:7px 8px 5px 8px; border-left: 1px solid #80896c; border-top: 1px solid #80896c; border-right: 1px solid #80896c; border-bottom: 1px solid #fff; background:#fff; } #mainlevel-nav #current { background:#fff; } #mainlevel-nav li a:hover { background:#fff; } .pagination span, .pagination a, .pagination strong{ margin:0 3px; } |
1 2 3 4 5 6 7 8 9 | display: block; padding: 3px 5px 3px 1.0em; border-left: 20px solid #000; border-top: 1px solid #3366ff; <--------- background-color: #ffff33; margin:0 0 -1px 0; <----------- color:#000; } |
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 | font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; width: 200px; padding-left: 550px; margin: 0px; float:left; height: 0px; } #sidebar h1 { display: block; background-color:#FF9900; font-size: 100%; padding: 3px 0 5px 3px; border: 1px solid #000000; color: #333333; margin: 0px; width:215px; } #sidebar ul { list-style: none; margin: 0px; padding: 0px; border: 1px; } #sidebar ul li { margin: 0px; padding: 0px; } #sidebar ul li a { font-size: 100%; display: block; border-bottom: 1px dashed #C39C4E; padding: 5px 0px 2px 4px; text-decoration: none; background-color: yellow; color: #666666; width:200px; } |
1 2 3 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
Ja, de code voor de conditional comment is niet goed. En 't staat op de verkeerde plaats.quote:Op vrijdag 21 november 2008 01:36 schreef mcDavid het volgende:
Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="menu" runat="server" class="menu"> <div class="header"> <div class="version">Versie nummer</div> <div id="usermenu" runat="server" class="usermenu"></div> </div> <div id="menucontent" runat="server" class="menucontent"></div> </div> <div id="content"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> </div> <div id="footer">footer</div> |
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 | { height: 100%; } body { margin: 0; padding: 0; font-family: Verdana; height: 100%; background: url(../images/menubackground.png) repeat-y; } #holder { width: auto; height: 100%; } .menu { height: 100%; width: 220px; float: left; } |
Dat is idd een veelgebruikte oplossing voor datsoort problemen!quote:Op vrijdag 21 november 2008 @ 15:22 schreef Patje1987 het volgende:
Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee.
HTML
[ code verwijderd ]
CSS
[ code verwijderd ]
Er staan nog wel wat foutjes in stylegreen.css. Om te beginnen regel 41. In css kun je geen conditional comments plaatsen, en al helemaal niet in html-stijl.quote:
Jazeker! Ik gebruik het ook wel voor mijn site voor school.quote:Op zaterdag 22 november 2008 11:37 schreef Light het volgende:
Je hebt wel gezien dat er een linkje staat in m'n vorige post?
1 2 3 4 | height: 145px; width: 960px; background: url(1.png) no-repeat;} |
1 2 3 | <img src="img/bannergreen.png" alt="www.hokje10.nl" /> </div> |
IE6?quote:Op maandag 24 november 2008 @ 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.
Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.
CSS:
[ code verwijderd ]
HTML:
[ code verwijderd ]
Nee Firefox/IE7. Kijk maar eens op www.hokje10.nl bovenaan.quote:Op maandag 24 november 2008 13:56 schreef mcDavid het volgende:
[..]
IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.
quote:Op maandag 24 november 2008 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.
Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.
CSS:
[ code verwijderd ]
HTML:
[ code verwijderd ]
1 |
1 2 | background-repeat: no-repeat; |
1 2 3 4 5 6 | border: 1px solid #f1f1f1; background-color: #f5f5f5; margin: 5px; padding: 5px; text-align: center; } |
1 2 3 4 5 6 7 | margin: 5px; padding: 5px; text-align: center; border: 1px solid #f1f1f1; background-color: #f5f5f5; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title> home</title> <link rel="stylesheet" type="text/css" href="includes/ui.css" /> </head> <body> <div class="container"> <div id="top"> top </div> <div class="left" style="border:solid 1px red;"> links </div> <div class="bottom"> <p>Test...</p> </div> </div> </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 | margin:0; padding:0; height:100%; } body{ font-family: tahoma, verdana, Sans, sans-serif; background-image: url(../image/bg.gif); } .container{ position:relative; border: 1px solid #c5d6f9; margin: 20px 0px 5px 0px; background-color: #fffffe; margin:0 auto; /*horizontale centrering. Werkt niet in IE quircksmode. Dan text-align:center aan body toevoegen*/ width:1000px; } #top{ position:relative; height:100px; padding:0; } .bottom{ float:right; width:834px; height:500px; min-height:500px; } .left{ float:left; height:500px; min-height:500px; width:156px; } |
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!
hij wil waarschijnlijk sneeuwvlokjes of lampjes rond de site hebben oid?quote:Op zondag 21 december 2008 11:16 schreef Roy_T het volgende:
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
Nou misschien meer met 'opmaak' danquote:Op zondag 21 december 2008 11:16 schreef Roy_T het volgende:
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
IE is een ramp met z-index enzo.quote:Op zondag 21 december 2008 @ 17:46 schreef donroyco het volgende:
Hoe kan ik het menu fixen in Internet Explorer? Het menu van 'Tentoonstellingen' loopt daar maar tot net aan de content, dan valt ie erachter..
De site
Bij voorbaat dank!
stylesheet hoort ín de head, niet net eronder.quote:Op maandag 22 december 2008 @ 22:47 schreef Mindstate het volgende:
Ik doe al behoorlijk lang puur ontwerp in photoshop, waarna ik die doorgeef aan een slicer/coder, maar begin dat toch wel zonde te vinden, dus vandaar dat ik nu deze tutorial volgl:
http://css-tricks.com/vid(...)age-1/#comment-43161
Tot min. 15 gaat het prima, maar op een gegeven moment laat hij even als voorbeeldje zien of z'n background image het doet. Bij mij geeft hij echter geen enkele blijk van het ook openen van de CSS.
Mijn site is wel anders opgebouwd dan die van hem en dat was ik van plan daarom een beetje op mijn eigen manier te gaan doen, maar dan zou hij op zijn minst toch gewoon mijn plaatje moeten laten zien, waar ik naar verwijs?
Heb hier een zipje voor wat meer opheldering, heb de PSD er voor de leukigheid even bijgedaan. Heb hem expres simpel gehouden, zodat het niet te ingewikkeld was voor het codeerwerk.
Link:
http://www.megaupload.com/?d=DH9MR7U4
Bij voorbaat dank
Dank voor je antwoordquote:Op maandag 22 december 2008 23:01 schreef mcDavid het volgende:
[..]
IE is een ramp met z-index enzo.
Google eens op haslayout... en geef sowieso #header en # content beide position:relative (zonder daadwerkelijke positie) en een Z-index. #header dan de hoogste natuurlijk.
-edit-
misschien juist position:relative van content weghalen... dat zou wel eens juist kunnen zijn waar IE over struikelt in dit geval...
ooooh, je wilt niet weten hoe lang ik er mee bezig ben geweest om te kijken wat er mis was, bedanktquote:Op maandag 22 december 2008 23:06 schreef mcDavid het volgende:
[..]
stylesheet hoort ín de head, niet net eronder.
Verder is het praktischer als je je voorbeelden ergens online zet (everyoneweb ofzo voor gratis) en als je je HTML duidelijk indent...
1 2 3 4 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"/> <title>ForumPost.nl - Een kickstart voor je forum!</title> </head> |
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 | /* CSS Document */ /*RESETS AND BASIC PAGE SETUP*/ *{margin: 0; padding: 0; } html {overflow-y: scroll; } body { font: 62,5% Verdana, sans-serif; background: url;(images/bodybg.jpg); top left repeat; } ul {list-style: none inside; } p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; } a {outline: none; } a img {border: none; } /* END RESET */ /* TOOLBOX */ .floatleft {float: left; } .floatright {float: right; } .clear {clear: both; } /* END TOOLBOX */ /* STRUCTURE AND STUFF */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */ |
Bij background hoort na url geen ; te staan. De url die je opgeeft is normaal gesproken relatief ten opzichte van het css-bestand. Dat gaat wel goed hier, omdat ze beide in dezelfde directory staan. Het stukje "top left repeat;" is overbodig, omdat het de standaardwaarde is. Als je het wilt specificeren moet er geen puntkomma voor staan, alleen achter.quote:Op maandag 22 december 2008 23:24 schreef Mindstate het volgende:
[..]
ooooh, je wilt niet weten hoe lang ik er mee bezig ben geweest om te kijken wat er mis was, bedankt :D
en met indenten bedoel je het soms gebruiken van tabjes en witregels zodat het duidelijker is om iets op te zoeken?
Ik heb het nu in de head zo staan:
[ code verwijderd ]
en de style.css als:
[ code verwijderd ]
maar wil hem nog steeds niet weergeven :{
1 2 3 4 | font: 10px Verdana, sans-serif; background: url(images/bodybg.jpg); } |
installeer sowieso even de Web Developer firefox addon, maakt het leven een stuk makkelijker!quote:Op dinsdag 23 december 2008 @ 12:44 schreef Mindstate het volgende:
Oh, het lag dus aan die ;, bedankt.
Ook bedankt voor die CSS Validator, kan nog goed van pas komen
Tenzij je relatieve waarden wilt gebruiken, want dan zou bijvoorbeeld "75%" betekenen dat de <body> een grootte heeft van 75% van de 75% van de <html>.quote:Op dinsdag 23 december 2008 04:01 schreef Light het volgende:
En ik zou html en body altijd samen pakken.
Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6quote:Ook zou ik de initiele fontgrootte met een absolute waarde specificeren (dus in px, niet in % of em ofzo). Voor andere elementen kan een relatieve grootte wel.
Een jaar geleden was dat wel een goed punt, maar tegenwoordig heb ik zoiets van als je slecht ziend bent installeer je maar IE7quote:Op dinsdag 23 december 2008 @ 15:00 schreef Roy_T het volgende:
[..]
Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
1 2 3 4 | -moz-border-radius: 5px; -webkit-border-radius: 5px; } |
Alle plaatjes samen in een div zetten?quote:Op dinsdag 23 december 2008 @ 18:16 schreef Mindstate het volgende:
Hoe kun je via css ingeven dat een bepaald plaatje altijd recht onder een ander plaatje staat? Ik doe het nu via het opgeven van het aantal pixels dat alle plaatjes van de randen moeten staan, maar dat is op een gegeven moment geen doen meer. Stel ik wil plaatje B onder plaatje A hebben, hoe stel ik dit in?
Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?quote:Op dinsdag 23 december 2008 @ 18:13 schreef hello_moto1992 het volgende:
Kan iemand mij uitleggen waarom
[ code verwijderd ]
niet werkt?
Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven
Dan nog. Het gaat er om hoe groot de letters uiteindelijk worden. En of je een effect nou bereikt door 75% of door 87% op te geven, doet dan niet echt ter zake. Daarbij, als je een relatieve fontgrootte opgeeft, wat is dan je uitgangspunt? Relatief is immers altijd ten opzichte van iets anders.quote:Op dinsdag 23 december 2008 15:00 schreef Roy_T het volgende:
[..]
Tenzij je relatieve waarden wilt gebruiken, want dan zou bijvoorbeeld "75%" betekenen dat de <body> een grootte heeft van 75% van de 75% van de <html>.
Dan gebruik je daar maar een andere browser voor. Ik ga geen rekening houden met alle problemen van alle prehistorische browsers.quote:Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
Ja dat weet ikquote:Op dinsdag 23 december 2008 18:20 schreef mcDavid het volgende:
[..]
Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
[..]
Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
Heb het geheel even geupload, misschien dat het zo wat duidelijker is:quote:Op dinsdag 23 december 2008 18:20 schreef mcDavid het volgende:
[..]
Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
[..]
Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
In welke browser heb je dat getestquote:Op dinsdag 23 december 2008 @ 18:44 schreef Mindstate het volgende:
[..]
Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/
Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.
Ik zou eerst eens kijken naar je.css, die is namenlijk best een rotzooi.quote:Op dinsdag 23 december 2008 18:44 schreef Mindstate het volgende:
[..]
Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/
Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.
1 2 3 4 | margin: 0; padding: 0; } |
Let ook eens op > als je een <div opent. Zou zomaar kunnen helpen.quote:Op dinsdag 23 december 2008 18:44 schreef Mindstate het volgende:
[..]
Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/
Ben het er mee eens dat je dat 'resetten' beter achterwege kunt laten.quote:Op dinsdag 23 december 2008 @ 23:14 schreef Spike1506 het volgende:
[..]
Ik zou eerst eens kijken naar je.css, die is namenlijk best een rotzooi.
Sowieso moet je nooit * { margin: 0; padding: 0; } gebruiken. Beste kun je margin en padding op 0 zetten in je body { }.
Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.
Mijn tip(s):
- doe alles wat je op een andere positie wilt hebben een een div en geef deze een herkanbaae naam.
- geef deze divjes een border zodat je beter kunt zien waar ze staan.
- doe alles 1 voor 1 en kijk daarna pas hoe je de elementen in deze divs gaat stylen.
Wat als je de betreffende iframe(s) nu een id/class meegeeft om daarna deze id/class te stylen in je .css?quote:Op dinsdag 23 december 2008 18:13 schreef hello_moto1992 het volgende:
Kan iemand mij uitleggen waarom
[ code verwijderd ]
niet werkt?
Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven![]()
Er is geen enkele reden om een extra <div> om een <ul> te zetten. Een <ul> kun je gewoon een id geven en stylen, het is gewoon een blokelement. Voor de plaats op het scherm is een extra <div> dus niet nodig.quote:Op dinsdag 23 december 2008 23:14 schreef Spike1506 het volgende:
Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.
Hij was sowieso nog lang niet klaar, ik was alleen bezig met het in elkaar zetten van het geheel, toen ik er maar niet uitkwam hoe je simpelweg een plaatje onder een ander plaatje zet.quote:Op dinsdag 23 december 2008 19:34 schreef mcDavid het volgende:
[..]
In welke browser heb je dat getestHet ziet er in iedere browser namelijk anders uit en bij geeneen heb ik het idee dat het zo hoort...
Bedankt, heb nu alles een achtergrond kleur gegeven, maar staat allemaal nog compleet random in de layout (niet geupload), hoe kan ik het dan netjes op de goede plekken zetten, heb op die site zitten zoeken maar daar zag ik alleen uitleg over de absolute positie.quote:Op dinsdag 23 december 2008 23:39 schreef mcDavid het volgende:
Tip: www.w3schools.com, start reading
-edit-
en begin met de tip van spike: alle elementen een achtergrondkleurtje geven (hoe lelijk ook) zodat je kunt zien wat er gebeurt.
eerst eens valide html maken, dan maak je het jezelf een stuk makkelijkerquote:Op woensdag 24 december 2008 @ 18:53 schreef Mindstate het volgende:
[..]
Bedankt, heb nu alles een achtergrond kleur gegeven, maar staat allemaal nog compleet random in de layout (niet geupload), hoe kan ik het dan netjes op de goede plekken zetten, heb op die site zitten zoeken maar daar zag ik alleen uitleg over de absolute positie.
Hetzelfde. "background-image: url(data:etc)".quote:Op woensdag 31 december 2008 13:27 schreef veldmuis het volgende:
Alleen ben ik er nog niet uit hoe dat met CSS kan.
en was het niet zo dat IE dat weer eens niet begrijpt?quote:Op woensdag 31 december 2008 @ 13:44 schreef Roy_T het volgende:
[..]
Hetzelfde. "background-image: url(data:etc)".
Gaat perfect in zowel IE7 als IE8. Wat 6 doet interesseert me ff wat minder.quote:Op woensdag 31 december 2008 14:14 schreef mcDavid het volgende:
[..]
en was het niet zo dat IE dat weer eens niet begrijpt?
Absoluut. Sterker nog: ze zijn de nummer 1 reden waarom een website snel of traag is (of overkomt). Hoe snel je verbinding ook is, een browser kan niet meer dan 2 requests per domein aan (en voor JS-bestanden 1). Hoe meer request, hoe langer het duurt. Kun je oplossen door meer assets hosts te gebruiken (static1.example.com, static2.example.com, die allemaal naar dezelfde fysieke locatie verwijzen), maar bij teveel verschillende hosts krijg je weer last van vertraging door DNS lookups.quote:Op woensdag 31 december 2008 14:26 schreef Swetsenegger het volgende:
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan![]()
Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.quote:Op woensdag 31 december 2008 14:44 schreef Roy_T het volgende:
[..]
Absoluut. Sterker nog: ze zijn de nummer 1 reden waarom een website snel of traag is (of overkomt). Hoe snel je verbinding ook is, een browser kan niet meer dan 2 requests per domein aan (en voor JS-bestanden 1). Hoe meer request, hoe langer het duurt. Kun je oplossen door meer assets hosts te gebruiken (static1.example.com, static2.example.com, die allemaal naar dezelfde fysieke locatie verwijzen), maar bij teveel verschillende hosts krijg je weer last van vertraging door DNS lookups.
Of inline images wel of niet handig zijn hangt heel erg van je doel af. Voor de gemiddelde website maakt het niets uit of is het nadeliger (wanneer je geen goede caching gebruikt). Je hebt het echt over high traffic sites wil het interessant worden.
Leesvoer: http://developer.yahoo.com/performance/
Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.quote:Op woensdag 31 december 2008 14:48 schreef Swetsenegger het volgende:
Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.
ik denk dat het nu júíst een issue is. Vroeger maakte je zoveel mogelijk hele kleine bestandjes zodat er zoveel mogelijk in de cache terecht kwam (websites in frames anyone?) maar tegenwoordig boeit de download tijd maar weinig meer dus kun je beter gewoon één groot bestand maken en het voor lief nemen dat niet alles door de browser gecached kan worden.quote:Op woensdag 31 december 2008 @ 14:26 schreef Swetsenegger het volgende:
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan
En als iemand erop wil Googlen: dat ging over "CSS sprites"quote:Op woensdag 31 december 2008 15:04 schreef RenRen- het volgende:
Neemt natuurlijk niet weg dat je wel realistisch moet blijven... dr was laatst ook een topic over imagemapping, dat kan ook nog wat uitmaken en lijkt me praktischer.
Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.quote:Op woensdag 31 december 2008 14:55 schreef Roy_T het volgende:
[..]
Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.
Ik zou het eerder in goede caching, het samenvoegen van bestanden (de 9 externe JS bestanden op de Fok! frontpage zouden makkelijk tijdens het deploy proces kunnen worden samengevoegd bijvoorbeeld) en far future expiry headers zoeken overigens dan inline images, maar het is leuk om te weten hoe het werkt
Zie ook http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Alleen zijn mijn cijfers wél gebaseerd op onderzoeksresultaten.quote:Op woensdag 31 december 2008 17:27 schreef Swetsenegger het volgende:
Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.
Dat magquote:Ik vind het allemaal nogal overtrokken.
Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?quote:Op woensdag 24 december 2008 13:10 schreef mcDavid het volgende:
niet echt een CSS probleem, maar ik zou wordpress eens bekijken!
Het is de bedoeling dat je je eigen layout omzet in templates. Het kan wel helpen als je eerst een (soortgelijke) template eens goed bekijkt, zodat je een beetje een idee krijgt hoe dat werkt. Verder zijn er met google vast honderden tutorials te vinden over hoe je een wordpresstemplate maakt.quote:Op maandag 5 januari 2009 @ 20:30 schreef Mirel het volgende:
[..]
Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?
Kutgedoe
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .butlong { display: block; float: left; height: 16px; margin: 0px 10px 0px 0px; color:#337f92; background: #d2eaf0; padding: 2px; text-align:center; text-decoration: none; border: 1px solid #337f92; } .but { width: 100px; } .butlong { width: 175px; } |
1 2 | <a href="/user/mailbox/delete/<?php echo $list->id; ?>.html" class="butlong">Verwijder bericht</a> |
Line-height ook op 16px zetten.quote:Op donderdag 8 januari 2009 @ 13:52 schreef Chandler het volgende:
Ik heb een klein vraagje dat over a en input gaat, deze wil ik namelijk beiden stijlen met een zelfde class
class:
[ code verwijderd ]
html:
[ code verwijderd ]
maar ik krijg als resulaat dit
[afbeelding]
Wat doe ik fout?
tuurlijk is dat mogelijk, als je maar specifiek genoeg bent.quote:Op donderdag 8 januari 2009 @ 14:24 schreef Chandler het volgende:
Ik heb het geprobeerd maar wil nog niet helemaal lukken eingelijkIk wil idd beiden even hoog/groot hebben! is dat mogelijk met 1 class? of dien ik apparte classes te maken?
Thsnks, dat laatste gaf mcDavid mij meequote:Op donderdag 8 januari 2009 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?
een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
Hmm, dat kanquote:Op donderdag 8 januari 2009 18:49 schreef veldmuis het volgende:
Nog even mierenneuken op die sait: rechtsonder, dat meer informatie-knopje, daar zou ik tekst van maken. Ivm cleartype en andere AA-dingetjes op tekst steekt dat nogal af. Die oranje onderrand is gewoon een border-bottom.
vertical-align kan volgens mij ook gebruikt worden om de positie van plaatjes op de tekstregel te bepalen. Het werkte wel iigquote:Op donderdag 8 januari 2009 @ 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?
een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
Ik heb het even bekeken maar zie nog steeds een verschilquote:Op donderdag 8 januari 2009 15:31 schreef mcDavid het volgende:
Ik zie al wat het probleem is: bij een button komt de border bínnen het element, bij een anchor erbuiten.
http://duft.nl/test.php heb het opgelost met wat spelen met de font-size en line-height (laatste heeft alleen effect op anchor). Maar een handigere oplossing zou denk ik zijn om de maat apart te defineren
button.but {height:22px;}
a.but{height:20px;}
zoiets.
In IE klopt het niet, in FF wel..quote:Op vrijdag 9 januari 2009 10:00 schreef Chandler het volgende:
[..]
Ik heb het even bekeken maar zie nog steeds een verschil
[ afbeelding ]
Moet je maar niet zo'n idiote browser gebruikenquote:Op vrijdag 9 januari 2009 @ 10:00 schreef Chandler het volgende:
[..]
Ik heb het even bekeken maar zie nog steeds een verschil
[afbeelding]
Je bedoeld in de topics waar jij in postquote:Op vrijdag 9 januari 2009 14:14 schreef mcDavid het volgende:
Dat kan kloppen want meer dan de helft van de mensen zijn idioten.
-edit-
op fok minder trouwens.
Ja en aangezien ik nogal eens op F5 ram is de fx-score vast wat overrated, maar dan nog.quote:Op vrijdag 9 januari 2009 @ 14:32 schreef HuHu het volgende:
[..]
Je bedoeld in de topics waar jij in post?
Ik ben bang van niet.quote:Op vrijdag 9 januari 2009 @ 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />quote:Op vrijdag 9 januari 2009 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Frames?!quote:Op vrijdag 9 januari 2009 14:30 schreef Patje1987 het volgende:
Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.
http://www.patrickvd.com/
Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getestquote:Op vrijdag 9 januari 2009 18:44 schreef veldmuis het volgende:
[..]
Frames?!
Dat 'Valid HTML' onderin kun je trouwens ook wel weghalen.
Edit: Ohw, je zit in een frame ivm je domein.
quote:Op vrijdag 9 januari 2009 @ 18:49 schreef Patje1987 het volgende:
[..]
Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getest ;)
1 2 3 | RewriteCond %{HTTP_HOST} ^.*(patrickvd.com)$ [NC] RewriteRule ^(.*)$ http://patrickvd.derium-online.com/$1 [L] |
Omdat je dan JS nodig hebt, en anders niet?quote:Op vrijdag 9 januari 2009 16:54 schreef Light het volgende:
[..]
Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />
Daar kun je dan natuurlijk nog weer classes aanhangen
Iddquote:Op vrijdag 9 januari 2009 20:10 schreef Roy_T het volgende:
[..]
Omdat je dan JS nodig hebt, en anders niet?
Ik heb even in de CSS specs gekeken, maar zag het er niet in staanquote:Op vrijdag 9 januari 2009 20:34 schreef Mirel het volgende:
Wat is trouwens de menumodule code in joomla. Ben die even kwijt
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 | background-image:url(bg.jpg); margin-top:0; } ul, li { padding: 0px; margin: 0px; } img { border: none; } #container { width:757px; height:868px; margin-left:auto; margin-right:auto; } #header { background-image:url(images/ani_01.jpg); width:757px; height:248px; float:left; } ul{ list-style:none; } li{ display:inline; } #sidebalkleft{ background-image:url(images/ani_02.jpg); width:28px; height:575px; float:left; } #menu{ width:479px; height:41px; float:left; } #menu a{ border:0; text-decoration:none; list-style:none; display:inline; } #onderstuk{ background-image:url(images/ani_07.jpg); width:223px; height:41px; float:left; } #content{ background-image:url(images/ani_10.jpg); width:556px; height:495px; float:left; } #menubalk{ background-image:url(images/ani_09.jpg); height:39px; width:702px;' float:right; } #onderbalk{ background-image:url(images/ani_12.jpg); width:757px; height:45px; float:inherit; } #rechterbalk{ background-image:url(images/ani_08.jpg); height:575px; width:28px; float:right; } |
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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Animatie</title> <link href="div.css" rel="stylesheet" type="text/css" /> </head> <body><div id="container"> <div id="header"> </div> <div id="sidebalkleft"> </div> <div id="menu"> <ul> <li><a href="index.html"> <img src="images/ani_03.jpg" width="118" height="41" /></a></li> <li><a href="historie.html"><img src="images/ani_04.jpg" width="120" height="41" /></a></li> <li><a href="studiolfc.html"><img src="images/ani_05.jpg" width="121" height="41" /></a></li> <li><a href="contact.html"> <img src="images/ani_06.jpg" width="120" height="41" /> </a> </li> </ul> </div> <div id="onderstuk"></div> <div id="rechterbalk"></div> <div id="menubalk"></div> <div id="content"> </div> <div id="onderbalk"> </div> </div> </body> </html> |
het is een beginquote:Op zondag 11 januari 2009 21:37 schreef veldmuis het volgende:
Begin eens met
ul, li {
padding: 0px;
margin: 0px;
}
Dat moet je dus in css doen, niet in html.quote:Op zondag 11 januari 2009 21:39 schreef donroyco het volgende:
en geef je images een border="0" mee..
dan welquote:Op zondag 11 januari 2009 21:39 schreef donroyco het volgende:
en geef je images een border="0" mee..
hmm oke, ja ik vind dit echt lastigquote:Op zondag 11 januari 2009 21:55 schreef veldmuis het volgende:
Ik denk dat je er toch wat over moet gaan lezen nu. Je divt alles aan elkaar, en dat hoeft helemaal niet.
Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.quote:Op zondag 11 januari 2009 18:00 schreef Roy_T het volgende:
[..]
Ik heb even in de CSS specs gekeken, maar zag het er niet in staan
Ik had begrepen dat je eerst iets een id moest geven voordat je de rest een class wilt geven? Maar dat hoeft dus niet?quote:Op zondag 11 januari 2009 22:09 schreef veldmuis het volgende:
Om een voorbeeld te geven, je hebt die ul staan waar je menu in staat. Die kun je gewoon een id (of class, want waarom werk je met id's?) meegeven en positioneren.
Als het de enige ul is die in je container staat dan geef je geen class mee maar dan doe je .container ul: weer een class minder nodig.
1 2 3 4 5 6 7 | color: red; } p { color: blue; } |
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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | ul, li { padding: 0; margin: 0; } ul{ list-style:none; } li{ float:left; } .klier{clear:both;} body { background-image:url(bg.jpg); margin-top:0; } img { border: none; } #container { width:758px; margin-left:auto; margin-right:auto; } #header { background-image:url(images/ani_01.jpg); height:248px; } #midden{ width:702px; float:left; } #menu li a{ background-image:url(images/ani_06.jpg); width:120px; height:41px; display:block; border:0; text-decoration:none; } /* Menu li */ #menu li a.buik{ background-image:url(images/ani_07.jpg); width:224px; } #menu li a.home{ background-image:url(images/ani_03.jpg); width:118px; height:41px; display:block; border:0; text-decoration:none; } #menu li a.historie{ background-image:url(images/ani_04.jpg); width:120px; height:41px; display:block; border:0; text-decoration:none; } #menu li a.studio{ background-image:url(images/ani_05.jpg); width:121px; height:41px; display:block; border:0; text-decoration:none; } #menu li a.studio{ background-image:url(images/ani_05.jpg); width:120px; height:41px; display:block; border:0; text-decoration:none; } #content{ background-image:url(images/ani_10.jpg); width:556px; height:495px; float:left; } #menubalk{ background-image:url(images/ani_09.jpg); float:left; } #menurechts{ background-image:url(images/ani_11.jpg); width:146px; height:495px; float:left; } /* Extra Balken */ #sidebalkleft{ background-image:url(images/ani_02.jpg); width:27px; height:575px; float:left; } #onderbalk{ background-image:url(images/ani_12.jpg); height:45px; clear:both; } #rechterbalk{ background-image:url(images/ani_08.jpg); height:575px; width:29px; float:left; } |
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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Animatie</title> <link href="div.css" rel="stylesheet" type="text/css" /> </head> <body><div id="container"> <div id="header"> </div> <div id="sidebalkleft"> </div> <div id="midden"> <div id="menu"> <ul> <li><a href="index.html" class="home"></a></li> <li><a href="historie.html" class="historie"></a></li> <li><a href="studiolfc.html" class="studio"></a></li> <li><a href="contact.html" class="contact"></a></li> <li><a href="#" class="buik"></a></li> </ul> </div> <div id="menubalk"></div> <div id="content"> </div> <div id="menurechts"> </div> </div> <div id="rechterbalk"></div> <div id="onderbalk"> </div> </div> </body> </html> |
Gaat hier gewoon goedquote:Op dinsdag 13 januari 2009 @ 17:53 schreef Mailbox het volgende:
Nagekeken
Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?
Dit is hoe het er nu uitziet
http://www.mediavormgever.net/~thillart86/animatie/
http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )
CSS
[ code verwijderd ]
HTML
[ code verwijderd ]
Dus is het geen css, en hoort het niet in dit topic.quote:Op zondag 11 januari 2009 22:08 schreef Mirel het volgende:
[..]
Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.
http://www.habbers.nl/redirect.php?url=http://www.bittybotanic.com/red/index.htmlquote:
ah nu zie ik wat je bedoelt.quote:Op dinsdag 13 januari 2009 @ 20:16 schreef Veeltje het volgende:
Bedankt mcDavid,
Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html
Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | background: url(images/logo.png) no-repeat; width: 300px; height: 200px; margin: 0 auto; float: left; } #ster { background: url(images/ster.png) no-repeat; width: 190px; height: 152px; float: right; } |
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 | <html> <head> <title>test</title> <style type="text/css"> BODY { text-align: center; } #logo { position: absolute; width: 200px; height: 200px; margin: 0 auto; border: 1px solid green; } #ster { position: relative; left: 225px; width: 150px; height: 150px; border: 1px solid red; } </style> </head> <body> <div id="logo"></div> <div id="ster"></div> </body> </html> |
1 2 3 4 5 6 | <li><a href="/" id="home" class="active">home</a></li> etc. </ul> |
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 | background: url(images/bg-navigation.gif) no-repeat right top; list-style: none; overflow: hidden; height: 70px; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 12px; } #navigation li{ float: left; } #navigation a{ display: block; text-decoration: none; border-top: none; line-height: 400px; overflow: hidden; } #navigation a#home{ background: url(../images/nav-home-off.png) no-repeat; width: 117px; } #navigation a#home:hover,#navigation a#home.active{ background: url(../images/nav-home-on.png) no-repeat; |
Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".quote:Op woensdag 14 januari 2009 16:50 schreef mcDavid het volgende:
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
1 2 3 4 5 6 7 8 | <li class="agendalinks"><a href="#">optreden1</a></li> <li class="agendalinks"><a href="#">optreden2</a></li> <li class="agendalinks"><a href="#">optreden3</a></li> <li class="agendalinks"><a href="#">optreden4</a></li> <li class="agendalinks"><a href="#">optreden5</a></li> <li class="agendalinks"><a href="#">optreden6</a></li> <li class="agendalinks"><a href="#">optreden7</a></li> |
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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | } body { background: #dcc57f url(images/header.jpg) repeat-x; font-size: 11px; font-family: verdana, calibri, tahoma; text-align: center; color: #444444; } h2 { font-size: 11px; font-family: verdana, calibri, tahoma; color: #444444; margin: 0; padding-left: 2px; padding-top: 25px; text-align: left; font-weight: bold; } h3 { font-size: 24px; font-family: verdana, calibri, tahoma; color: #413387; margin: 0; padding: 2px; text-align: left; font-weight: normal; } h4 { background: url(images/agendabalk.png) no-repeat; font-size: 11px; font-family: verdana, calibri, tahoma; line-height: 18px; padding-left: 18px; color: white; margin: 0; text-align: left; font-weight: bold; } #menu { background: url(images/menubalk.jpg); text-align: left; width: 1000px; height: 22px; line-height: 20px; font-family: century gothic; font-size: 18px; color: white; } #container { text-align: left; width: 1000px; margin: 0 auto; } #inhoud { padding-left: 10px; padding-right: 10px; background: white repeat-y; border-left: 1px solid #444444; border-right: 1px solid #444444; } #inhoud div { overflow: hidden; } #linker { float:left; width: 74%; margin-right: 10px; margin-top: 10px; margin-left: 0px; } #rechter { float: right; width: 24%; margin-right: 0px; margin-top: 10px; } #kop1 { margin-bottom: 10px; background: white; } #kop2 { margin-bottom: 10px; background: white; } #agenda { width: 184px; height: 400px; border: 1px solid #4263ba; color: black; background: #66c7d9; margin-bottom: 10px; } li{ display:inline; padding-left:15px; padding-right:15px; } #nav { margin-bottom: 1px; } #agendalijst { font-family: calibri; font-size: 13px; padding-left: 2px; } a{ text-decoration: none; color: white; } a:hover{ text-decoration: underline; } #footer { background: url(images/footerbalk.jpg) repeat-x; color: #eaeaea; font-size: 11px; font-family: verdana, tahoma; text-align: right; height: 16px; border-left: 1px solid #444444; border-right: 1px solid #444444; border-bottom: 1px solid #444444; } #logo { background: url(images/logo.png) no-repeat; width: 300px; height: 200px; margin: 0 auto; } #ster { background: url(images/ster.png) no-repeat; width: 190px; height: 152px; position: absolute; margin-left: 950px; } |
Dat maakt toch geen reet uit?quote:Op woensdag 14 januari 2009 16:57 schreef Roy_T het volgende:
[..]
Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
Google weet ik niet zeker, maar er zijn wel alternatieve user agents die een element met "display: none" volledig negeren. En een extra element gebruiken is gewoon ranzigquote:Op maandag 19 januari 2009 18:59 schreef veldmuis het volgende:
Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
1 2 3 4 5 6 7 | height: 290px; width: 471px; background-color: #99cc66; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; padding: 5px; } |
Gewoon in de bron van je paginacode kijken (dus in de browser kiezen voor iets als bron weergeven). Als er een doctype is, staat het op de eerste regel. En als je wilt weten hoe zoiets eruit hoort te zien kun je ook de broncode van deze pagina bekijken.quote:
1 2 3 4 5 6 7 8 9 | <head> <!-- InstanceBeginEditable name="doctitle" --> <title>index_layout</title> <!-- InstanceEndEditable --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- @import url("menu/Menu.css"); |
1 2 3 4 5 6 7 8 9 | <head> <!-- TemplateBeginEditable name="doctitle" --> <title>index_layout</title> <!-- TemplateEndEditable --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- @import url("../menu/Menu.css"); |
1 2 3 | <jdoc:include type="module" name="usermenu" /> </div> |
1 2 3 4 5 6 7 8 9 10 11 | background: white; width: 120px; height: 300px; font-family: verdana, calibri; font-size: 11px; color: black; margin-left: 1000px; margin-top: 100px; position: absolute; } |
Het menu komt bij mij rechts buiten de pagina te staan..quote:Op zondag 25 januari 2009 23:55 schreef Mirel het volgende:
Hey ik heb in Joomla een 2e menu aangemaakt en heb in de index en de css het uitgewerkt, maar de menu items zijn niet te zien. Als ik even wat tekst type binnen de div dan zie je die wel verschijnen maar de menu items niet. Ik weet zeker dat ik alle instellingen in de backend van joomla goed heb gedaan, maar toch.
In Joomla heb ik het nu usermenu genoemd, en heb in de index.php dit dus staan:
[ code verwijderd ]
En in de css dit, maar ik weet niet of dat écht wat uitmaakt.
[ code verwijderd ]
Het is dan meer een joomla probleem maar hier op fok krijg ik altijd betere en snellere reacties dan op joomla sites.
(www.mirelmasic.nl/joomla)
1 2 3 4 5 6 7 8 | <div class="img"><a href="/8549.html"><img src="/view.php?t=1&id=8549" alt=" afbeelding 8549 in categorie Dieren" height="98" /></a></div> <div class="img"><a href="/8550.html"><img src="/view.php?t=1&id=8550" alt=" afbeelding 8550 in categorie Dieren" height="98" /></a></div> <div class="img"><a href="/8551.html"><img src="/view.php?t=1&id=8551" alt=" afbeelding 8551 in categorie Dieren" height="96" /></a></div> <div class="img"><a href="/8552.html"><img src="/view.php?t=1&id=8552" alt=" afbeelding 8552 in categorie Dieren" height="96" /></a></div> <div class="img"><a href="/8553.html"><img src="/view.php?t=1&id=8553" alt=" afbeelding 8553 in categorie Dieren" height="100" /></a></div> <div class="img"><a href="/8554.html"><img src="/view.php?t=1&id=8554" alt=" afbeelding 8554 in categorie Dieren" height="96" /></a></div> <div class="img"><a href="/8555.html"><img src="/view.php?t=1&id=8555" alt=" afbeelding 8555 in categorie Dieren" height="96" /></a></div> |
1 2 3 4 5 6 7 8 9 | width: 180px; margin: 5px; height: 175px; float: left; display: block; text-align: center; border: 3px solid #676767; } |
1 2 | height: 125px; |
Er is niets vies aan tabellen.quote:Op maandag 26 januari 2009 @ 10:30 schreef Chandler het volgende:
Of ik moet gaan werken met tabellen maar dat vind ik weer vies
Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemenquote:Op maandag 26 januari 2009 09:54 schreef Chandler het volgende:
Ik zit met een CSS vraag.
[ afbeelding ]
Ik wil de plaatjes graag ook centeren verticaal, maar hoe krijg ik dat voor elkaar?
Huidige code
[ code verwijderd ]
class IMG is
[ code verwijderd ]
Weet iemand hoe ik dit kan oplossen?
You, sir, rock.quote:Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:
[..]
Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
Helaas heb het geprobeerd maar wil niet werkenquote:Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:
[..]
Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
Nee, want het is geen tabulaire data maar een opsomming.quote:Op maandag 26 januari 2009 17:02 schreef Chandler het volgende:
Maar voor dit geval is het gebruik van tabellen volgens jullie de enige simpele en juiste oplossing?
IE7: Werkt.quote:Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:
[..]
Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
Ik zie eigenlijk ook geen andere manier om verticaal te centreren?quote:Op maandag 26 januari 2009 20:25 schreef Roy_T het volgende:
[..]
Nee, want het is geen tabulaire data maar een opsomming.
Scheiding van structuur en presentatie enzoquote:Op maandag 26 januari 2009 21:05 schreef veldmuis het volgende:
Ik zie eigenlijk ook geen andere manier om verticaal te centreren?
Semantisch is het wellicht netter om <ul><li><table><tr><td><a><img></a></td></tr></table></li><li><table><tr><td><a><img></a></td></tr></table></li></ul> te doen. Ik zou echter voor een gewone ouderwetse table gaan hoor. Kan hier prima imo. Het is niet helemaal table-data wat je daar hebt, maar zolang het één tabel is in een keurige html, boeiend toch?quote:Op maandag 26 januari 2009 22:03 schreef Roy_T het volgende:
[..]
Scheiding van structuur en presentatie enzoHet is een lijst, dus het zou gewoon (zoals hierboven staat) een <ul> moeten zijn. Dat je dat niet in de look krijgt die je wil, maakt nog niet dat tabellen hier "dus" correct zijn.
quote:Op maandag 26 januari 2009 21:04 schreef veldmuis het volgende:
[..]
IE7: Werkt.
IE8: Werkt niet.
FX: Werkt niet.
Het één is wat mij betreft niet ondergeschikt aan het andere. De HTML moet goed zijn, de CSS moet net zo goed zijn en de JavaScript ook. Er zit natuurlijk altijd wat rekbaarheid in, maar tabellen gebruiken enkel en alleen voor positionering is plain evil imo.quote:Op maandag 26 januari 2009 22:15 schreef veldmuis het volgende:
Klopt. Maar gaat netheid dan boven ontwerp? Stel je dan niet een beetje verkeerde prioriteiten?![]()
Werkt in FF 3.0.5 en Safari 3.2.1, ondanks het foutje in je HTML (staat een dubbele quote verkeerd).quote:Op maandag 26 januari 2009 22:17 schreef Swetsenegger het volgende:
http://test.xploise.nl/align.html
Die had ik al gevonden jaquote:Op maandag 26 januari 2009 22:21 schreef Roy_T het volgende:
[..]
Werkt in FF 3.0.5 en Safari 3.2.1, ondanks het foutje in je HTML (staat een dubbele quote verkeerd).
Ik zit hier op Mac, dus kan IE8 niet testen nu. Maar IE8 is beta en weigert wel meerquote:Op maandag 26 januari 2009 22:34 schreef veldmuis het volgende:
IE8 weigert nog wel.
Wat betreft FX heb je gelijk.
Ik heb volgens mij beta 1 nog geinstalleerd staan, maar zal morgen ff kijken. Zou wel vreemd zijn als IE8 het niet doet, want dit is standaard CSS. En wat ik tot op heden van IE8 heb gezien stemt positief.quote:
Is dat zo? Dat wist ik eigenlijk niet, ik zie in ieder geval dat ik nu transparante PNG's hebt zonder dat ik zelf een workaround moet verzinnen.quote:Op maandag 26 januari 2009 22:39 schreef veldmuis het volgende:
Ik vind IE8 ook zeker een vooruitgang. Alleen jammer dat bijvoorbeeld opacity nog niet ondersteund wordt, maar dat ze daar nu een filter voor pakken wat weer op een andere manier werkt als IE7. Dat soort dingen stellen me wel teleur.
Transparante PNG's gaan ook in IE7 al gewoon goed, zonder vage workarounds.quote:Op maandag 26 januari 2009 22:44 schreef Swetsenegger het volgende:
[..]
Is dat zo? Dat wist ik eigenlijk niet, ik zie in ieder geval dat ik nu transparante PNG's hebt zonder dat ik zelf een workaround moet verzinnen.
Ja precies.quote:Op maandag 26 januari 2009 22:49 schreef Light het volgende:
[..]
Transparante PNG's gaan ook in IE7 al gewoon goed, zonder vage workarounds.
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |