[CSS] voor dummies - Deel 3quote:Op maandag 20 maart 2006 15:19 schreef Desdinova het volgende:
in je content div een overflow:auto zetten en iets van height: 100%;
wtf is er gebeurd met de layout
Hij zit netjes nu toch?quote:Op maandag 20 maart 2006 22:26 schreef Chandler het volgende:
ok, tnx... ik ga ff spelen.
-edit: gespeeld..
helpt maar een beetje... lijkt wel of ik nog meer dingen fout doe.. maar morgen weer een nieuwe dag!
Zo zou ik het ongeveer doen, zonder javascript.quote:Op zaterdag 18 maart 2006 18:31 schreef wonko het volgende:
[..]
Zover was ik nog niet. Euh...een voorbeeld of een tutorial?
[..]
1 2 3 4 5 6 7 8 9 10 11 | <ul> <li><a class="go" href="index.html">Home</a></li> <li class="test"><a href="#">Exterieur</a></li> <li><a href="#">Interieur</a></li> <li><a href="#">Hekwerkonderdelen</a></li> <li><a href="#">Tuindecoratie</a></li> <li><a href="toeleveren.html">Toeleveren</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> |
1 2 3 4 | #nav li {margin:0;padding:0;width:130px;border-bottom:1px solid white;} #nav li a {color:white;text-decoration:none;display:block;width:127px;background-color:#298CA5;line-height:2em;vertical-align:middle;padding-left:3px;} #nav li a:hover {background-color:#4AB5D6;} |
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 | } HTML { height: 100%; } BODY { font-family: tahoma; text-align: justify; } .content TABLE { padding: 10px; } .contentform TD { padding: 5px; } .tekst { font-size: 15px; } .tekstklein { font-size: 14px; } .onderschrift { font-size: 10px; } .titel { font-weight: bold; font-size: 25px; text-align: center; margin: 5px; } .koptekst { font-weight: bold; font-size: 20px; text-align: center; margin: 5px; } A:link { color: #0033CC; font-weight: bold; text-decoration: none; } A:visited { color: #FF3300; font-weight: bold; text-decoration: none; } A:hover { color: #0099CC; font-weight: bold; text-decoration: none; } UL, TD { font-family: tahoma; font-size: 15; list-style-type: disc; list-style-position: outside; margin-left: 10px; padding-left: 10px; } |
Die had ik beide al (stom toevallig overigens) geprobeerd. Doctype had ik niet (foei, ik weet niet) toegevoegd in mijn HTML documenten. Onderstaande is nu toegevoegd.quote:Op dinsdag 21 maart 2006 15:22 schreef Roönaän het volgende:
afhankelijk van je doctype is je css wel of niet case-sensitive.
Het kan dus zijn dat je
body {} moet gebruiken ipv BODY {}
-r-
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 | <html> <head> <title>Stichting Van Zessen Klaar</title> <LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css"> </head> <body> <table align="middle" width="100%" height="100%"> <tr> <td align="middle" valign="middle" width="100%"> <table border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td width="150" height="100"><img src="images/vzk-logo.gif" width="150" height="100"></td> <td width="650" height="100"><img src="images/vzk-banner.jpg" width="650" height="100"></td> </tr> <tr valign="top"> <td width="150" height="*"><img width="150" src="images/menu_v3.png" height="400" USEMAP="#menu" border="0"> <MAP NAME="menu"> <AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hoofdpagina.html" TARGET="content" TITLE="Hoofdpagina"> <AREA SHAPE="rect" COORDS="0,51,150,100" HREF="stichting.html" TARGET="content" TITLE="De stichting"> <AREA SHAPE="rect" COORDS="0,101,150,150" HREF="actueel.html" TARGET="content" TITLE="Actueel"> <AREA SHAPE="rect" COORDS="0,151,150,200" HREF="samenwoners.html" TARGET="content" TITLE="Samenwoners"> <AREA SHAPE="rect" COORDS="0,201,150,250" HREF="sponsoren.html" TARGET="content" TITLE="Sponsoren"> <AREA SHAPE="rect" COORDS="0,251,150,300" HREF="locatie.html" TARGET="content" TITLE="Locatie"> <AREA SHAPE="rect" COORDS="0,301,150,350" HREF="links.html" TARGET="content" TITLE="Links"> <AREA SHAPE="rect" COORDS="0,351,150,400" HREF="contact.html" TARGET="content" TITLE="Contact"> </MAP></td> <td width="650" height="447"><IFRAME SRC="hoofdpagina.html" WIDTH="650" HEIGHT=100%" frameborder="0" name="content">Foutmeldingstekst</IFRAME></td> </tr> </table> </td> </tr> </table> </body> </html> |
Zie het verschil nu in IE / FF dat vind ik weer niet zo netjesquote:Op dinsdag 21 maart 2006 11:52 schreef Roönaän het volgende:
Hij zit netjes nu toch?
Enige verschil is de marge onder die foeilelijke kop toch?quote:Op dinsdag 21 maart 2006 19:33 schreef Chandler het volgende:
[..]
Zie het verschil nu in IE / FF dat vind ik weer niet zo netjes
Mijn dank!!quote:Op dinsdag 21 maart 2006 12:22 schreef Castor het volgende:
[..]
Zo zou ik het ongeveer doen, zonder javascript.
HTML:
[ code verwijderd ]
CSS:
[ code verwijderd ]
Voor meer voorbeelden check: http://css.maxdesign.com.au/listamatic/
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 | <html> <head> <title>Stichting Van Zessen Klaar</title> <LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css"> </head> <body> <table align="middle" width="100%" height="100%"> <tr> <td align="middle" valign="middle" width="100%"> <center> <table border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td width="150" height="100"><img src="images/vzk-logo.gif" width="150" height="100"></td> <td width="*" height="100"><img src="images/vzk-banner.jpg" width="650" height="100"></td> </tr> <tr valign="top"> <td width="150" height="*"><img width="150" src="images/menu_v3.png" height="400" USEMAP="#menu" border="0"> <MAP NAME="menu"> <AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hoofdpagina.html" TARGET="content" TITLE="Hoofdpagina"> <AREA SHAPE="rect" COORDS="0,51,150,100" HREF="stichting.html" TARGET="content" TITLE="De stichting"> <AREA SHAPE="rect" COORDS="0,101,150,150" HREF="actueel.html" TARGET="content" TITLE="Actueel"> <AREA SHAPE="rect" COORDS="0,151,150,200" HREF="samenwoners.html" TARGET="content" TITLE="Samenwoners"> <AREA SHAPE="rect" COORDS="0,201,150,250" HREF="sponsoren.html" TARGET="content" TITLE="Sponsoren"> <AREA SHAPE="rect" COORDS="0,251,150,300" HREF="locatie.html" TARGET="content" TITLE="Locatie"> <AREA SHAPE="rect" COORDS="0,301,150,350" HREF="links.html" TARGET="content" TITLE="Links"> <AREA SHAPE="rect" COORDS="0,351,150,400" HREF="contact.html" TARGET="content" TITLE="Contact"> </MAP></td> <td width="*" height="447"><IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content">[knip errortekst]</IFRAME></td> </tr> </table> </center> </td> </tr> </table> </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 | <HTML LANG="nl"> <HEAD> <TITLE>Stylesheet</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> <META HTTP-EQUIV="content-style-type" CONTENT="text/css"> <META NAME="robots" CONTENT="noindex, nofollow"> * { box-sizing: border-box; -moz-box-sizing: border-box; } HTML { height: 100%; } BODY { font-family: tahoma; text-align: justify; } .content TABLE { padding: 10px; } .tekst { font-size: 15px; } .tekstklein { font-size: 14px; } .onderschrift { font-size: 10px; } .titel { font-weight: bold; font-size: 25px; text-align: center; margin: 5px; } .koptekst { font-weight: bold; font-size: 20px; text-align: center; margin: 5px; } A:link { color: #0033CC; font-weight: bold; text-decoration: none; } A:visited { color: #FF3300; font-weight: bold; text-decoration: none; } A:hover { color: #0099CC; font-weight: bold; text-decoration: none; } UL, TD { font-family: tahoma; font-size: 15; list-style-type: disc; list-style-position: outside; margin-left: 10px; padding-left: 10px; } </HEAD> </HTML> |
1 2 3 4 5 6 7 8 9 | <HTML LANG="nl"> <HEAD> <TITLE>Stylesheet</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> <META HTTP-EQUIV="content-style-type" CONTENT="text/css"> <META NAME="robots" CONTENT="noindex, nofollow"> </HEAD> </HTML> |
Ik ben uitgegaan van al bestaande document, dus ik heb een verkeerd voorbeeld gebruikt. Die code is nu verwijderd, maar dat maakt voor mijn probleem verder geen verschil. Bedankt voor de tip iig.quote:Op woensdag 22 maart 2006 15:30 schreef DionysuZ het volgende:
wat doet
[ code verwijderd ]
in je stylesheet?
1 |
Lang leve Opera met de 'Fit to window width'-functie Geen echte oplossing, maar ik heb er geen last vanquote:Op woensdag 22 maart 2006 17:29 schreef DaFan het volgende:
Pas als bovenstaande code-verneukers hun reply aanpassen.
(Vooral Wonko)
Dat is een oplossing, maar zorgt weer voor een ander probleem; je krijgt (logischerwijs) geen scrollbalk te zien. Maar de content is op sommige pagina's wel langer dan het iframe hoog is...quote:Op woensdag 22 maart 2006 17:27 schreef Desdinova het volgende:
<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | padding: 0px; width: 807px; background: #DDD; margin: auto; } #centercolumn { padding: 6px 0px; position: absolute; width: 600px; } #rightcolumn { position: absolute; margin-left: 600px; width: 205px; } #header { } |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |