1 2 3 4 5 6 7 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Language" content="en-us"><link rel="stylesheet" type="text/css" href="files/style.css"> <title>Untitled Document</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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Language" content="en-us"> <style type="text/css"> html { margin: 0; padding: 0; } body { margin: 95px 10px 10px 190px; padding: 0; } div.content { height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #000; } div.nav { position: absolute; top: 5px; left: 0px; right: 0px; height: 50px; border-top: 1px solid #FF0000; border-bottom: 1px solid #FF0000; width: 100%; } </style> </head> <body> <div class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div class="nav"> nav </div> </body> </html> |
quote:Op donderdag 10 maart 2005 17:58 schreef Vince-E het volgende:
als je de width van de html en body eens op 100% zet?
als je een meisje was hee!!quote:Op donderdag 10 maart 2005 18:55 schreef Vince-E het volgende:
dit moet het wel doen... waarschijnlijk geven die marges toch wat problemen in de body...
verander die 190px marge eens, en zet deze op de content... dus...
body {
margin: 95px 10px 10px 0;
padding: 0;
}
div.content {
height: 100%;
margin-left:190px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #000;
}
1 2 3 4 5 6 7 8 9 10 | <html> <head> </head> <body> <div style="height:125px; width:500px; filter:alpha(opacity=20);-moz-opacity:0.20;"> <span style="font-size:10pt; color:black;">Test <br /> Zodra ik in IE 6 een div met een vaste height en een filter alpha instel zien de letters er zo uit wanneer windows op 'cleartype' ingesteld staat voor character smoothing. </div> </body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> </head> <body> <div style="height:125px; width:500px; filter:alpha(opacity=20);-moz-opacity:0.20;"> </div> <div style="position:relative;top:-125px;height:125px;width:500px;"> <span style="font-size:10pt; color:black;">Test <br /> Zodra ik in IE 6 een div met een vaste height en een filter alpha instel zien de letters er zo uit wanneer windows op 'cleartype' ingesteld staat voor character smoothing. </div> </body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> </head> <body style="background:green;"> <div style="height:125px; width:500px; position:relative;"> <div style="position:absolute;height:100%;width:100%;top:0;left:0; filter:alpha(opacity=20);-moz-opacity:0.20; background:white;"> </div> <div style="position:absolute;height:100%;width:100%;top:0;left:0; "> <span style="font-size:10pt; color:red;">Test <br /> Zodra ik in IE 6 een div met een vaste height en een filter alpha instel zien de letters er zo uit wanneer windows op 'cleartype' ingesteld staat voor character smoothing. </span> </div> </div> </body></html> |
Ja, de div fade wel, maar de content niet!quote:Op zaterdag 12 maart 2005 16:43 schreef Roönaän het volgende:
Grin. Moet je een beetje kleurtjes invoegen:
[ code verwijderd ]
Same.quote:Op zaterdag 12 maart 2005 19:32 schreef Roönaän het volgende:
Mijn fout. Wat happens als je de fading div over die ander laat zetten? (volgorde omdraaien in code)
1 2 3 4 5 6 7 8 9 | div.nav_element_links { position: relative; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 143px; border: 1px solid #FF0000; } |
1 2 3 4 5 6 | <div class=\"nav_element_links\"> links<br /> links<br /> links<br /> links<br /> </div> |
1 2 | box-sizing: border-box -moz-box-sizing: border-box; |
heb je me weer geholpen! dank je!quote:Op zondag 13 maart 2005 18:05 schreef SuperRembo het volgende:
Dat komt door de foute (maar handige) interpretatie van IE. Dit zou \\\'t op moeten lossen
[ code verwijderd ]
Zie http://www.quirksmode.org/css/box.html
Ik denk dat box-model redelijk uit de tijd is, omdat je doormiddel van een goede doctype Internet Explorer ook gewoon uit quirksmode kan halen. Enige wat je hoeft te doen is een doctype te gebruiken waar de uri naar een dtd ook in staat, zoals bijv:quote:Op zondag 13 maart 2005 18:05 schreef SuperRembo het volgende:
Dat komt door de foute (maar handige) interpretatie van IE. Dit zou \'t op moeten lossen
[ code verwijderd ]
Zie http://www.quirksmode.org/css/box.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 | <html> <head> <title>testje1</title> <style type="text/css"> <!-- DIV.middle { position: absolute; left: 50%; top: 50%; width: 800px; height: 600px; margin-left: -400px; /* half of width */ margin-top: -300px; /* half of height */ background-color: #6699CC; } DIV.left { float: left; width: 400px; border-width: 2px 1px 2px 2px; border-style: solid; border-color: black; } DIV.right { float: right; width: 400px; border-width: 2px 2px 2px 1px; border-style: solid; border-color: black; } --> </style> </head> <body> <div class="middle"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html> |
Box model tweaking: http://www.quirksmode.org/css/box.htmlquote:Op donderdag 17 maart 2005 17:12 schreef Chandler het volgende:
SuperRembo:
1. Hoe kan ik IE in standaard mode laten draaien?
Met een CSS Hack: http://www.quirksmode.org/css/csshacks.htmlquote:2. Hoe kan ik per brouwser dit laten verschillen dan? de maten?
Je kan de borders van .left en .right wel laten. Om er dan toch een border bij te kijgen zet je er dan een extra div in die wel een border heeft.quote:3. Haha, ja ik ben helaas wel borders nodig anders zou ik het wel anders oplossen
1 2 3 4 5 6 | div#center { margin:0 auto; width:90%; min-width:800px; width:expression(document.body.clientWidth < 800? "800px": "90%" ); } |
Ik ben niet de enige. Why avoiding tables (for layout) is importantquote:Op vrijdag 18 maart 2005 19:53 schreef ikke_ook het volgende:
Alleen ik heb SuperR wel s horen zeggen dat t niet netjes is om je site uit alleen een tabel op te bouwen ofzo... Is dat zo?En is het alleen niet netjes?of werkt t ook niet goed?
Best interessant!En ik merkte inderdaad ook al dat bepaalde tabellen bij mij langzaam laden, maar dat ligt dus aan het feit dat je niet aangeeft hoe breed kolommen moeten zijn...(dat zijn trouwens grote tabellen die informatie in tabelvorm weergeven dus die moeten wel tabel blijven)quote:Op zaterdag 19 maart 2005 14:03 schreef SuperRembo het volgende:
[..]
Ik ben niet de enige. Why avoiding tables (for layout) is important
Hoe? Met floats?quote:
1 | window.onerror = function() { return true; } |
1 2 | max-width:800px; width:expression(document.body.clientWidth > 800? "800px": "auto" ); |
1 | text-align: center; |
in FireFox staat die tabel wel in het midden, maar in IE staats alles links uitgelijnd...ik bedoel dus de text niet maar gewoon de container waar de inhoud in staatquote:#container {
margin: auto;
padding: 0px;
width: 670px;
position: relative;
}
quote:Op donderdag 14 april 2005 12:07 schreef SqueaK het volgende:
gewoon de hele inhoud van de site... ik heb dit als container, waar vervolgens 3 cellen in staan:
[..]
in FireFox staat die tabel wel in het midden, maar in IE staats alles links uitgelijnd...ik bedoel dus de text niet maar gewoon de container waar de inhoud in staat
bronquote:As we know, Explorer Windows doesn't support margin: auto, so it doesn't center the site horizontally yet. Fortunately it allows us to center blocks by the (incorrect) use of text-align: center.
En zat dan wel in je andere div's weer de text-align op left, want anders is al je tekst gecentreerd.quote:Op donderdag 14 april 2005 12:51 schreef SuperRembo het volgende:
[..]
[..]
bron
Je moet dus de container van je #container (dat zal waarschijlijk de body zijn) op text-align: center zetten.
Klopt. Maar dat merk je snel genoeg.quote:Op donderdag 14 april 2005 13:27 schreef MouseInteractive het volgende:
[..]
En zat dan wel in je andere div's weer de text-align op left, want anders is al je tekst gecentreerd.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>NHome</title> <style type="text/css"> body { font: normal 10pt Trebuchet MS, Arial, sans, sans-serif, monospace; color: black; margin: auto; padding: 0px; background-image: url(images/achtergrond.jpg); margin: auto; } </style> </head> |
1 2 3 4 5 | body { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 18pt; font-style: normal; } |
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" type="text/css" rel="stylesheet" /> </head> <body> <center> <div id="main"> <div id="header"> </div> <div id="balk"> </div> <div id="content_splitter"> <div id="content_left"> L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br></div> <div id="content_right"> </div> </div> </div> </center> </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 | /* CSS Document */ body { font-family: Arial, Helvetica, sans-serif; text-align: center; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #000000; } #balk { width: 768px; height: 20px; display: block; background-color: #868686; } #content_splitter { width: 768px; min-height: 230px; background-color: #C9C9C9; display: block; } * html #content_splitter { height: 230px; } #content_left { width: 506px; min-height: 130px; background-color: #FFC9C9; display: block; float: left; } * html #content_left { height: 130px; } #content_right { width: 222px; min-height: inherit; background-color: #FFC9C9; display: block; float: right; } * html #content_right { height: inherit; } #main { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin:0 auto; display: block; top: 20px; width: 768px; min-height: 150px; text-align: left; border-style:solid; border-bottom-color:#FFFFFF; border-left-color:#FFFFFF; border-right-color:#FFFFFF; border-top-color:#FFFFFF; border-width:1px; background-color: #FFFFFF; float: center; } * html #main { height: 230px; } #header { width: 768px; height: 178px; display: block; background-image: url(images/header.gif); background-color: #FFD110; } |
Schijnt erg moeilijk te zijn om dit met CSS te realiserenquote:Op dinsdag 19 april 2005 20:12 schreef BaggerUser het volgende:
heb een probleem![]()
als content_left meer content krijgt wordt in firefox alleen content_left langer maar content_splitter niet. (en daardoor content_right ook niet)
FireFox
[[url=http://img151.echo.cx/img151/8296/werktniet14mf.th.jpg]afbeelding][/URL]
in explorer gebeurd dit wel
alleen werkt inherit voor content_right niet ..
explorer
[[url=http://img151.echo.cx/img151/862/werktniet27fd.th.jpg]afbeelding][/URL]
index.html
[ code verwijderd ]
stylesheet.css
[ code verwijderd ]
hoe heb je het opgelost ?quote:Op dinsdag 19 april 2005 21:05 schreef MouseInteractive het volgende:
[..]
Schijnt erg moeilijk te zijn om dit met CSS te realiseren
Ik kreeg het in ieder geval ook niet voor elkaar met mijn pagina.
Iemand misschien een idee hoe ik dit op kan lossen?quote:<div>
<iframe scrolling="yes" src="tekst.htm" width="700" height="349" frameborder="0">
</iframe>
</div>
dit staat dus in mn index2.htm
<link href="file:///I|/thinkquest/Thinkquest/css/thinkquest.css" rel="stylesheet" type="text/css">
</head>
<body class="inhoud" "style="margin: 0; padding: 0" width="700" height="349">
Portretfotografie.
dit is wat in mn iframe src staat, tekst.htm
quote:Op donderdag 28 april 2005 17:48 schreef SuperRembo het volgende:
En wij mogen raden wat er in thinkquest.css staat?
sryquote:.bannerbg {
background-image: url(../afbeeldingen/banner.gif);
background-repeat: no-repeat;
position: relative;
background-color: #000000;
border: none;
}
.inhoud {
background-image: url(../afbeeldingen/inhoud.gif);
background-repeat: no-repeat;
position: relative;
left: auto;
top: auto;
width: 700px;
height: 350px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
border: none;
background-attachment: fixed;
background-position: 0px 0px;
text-align: left;
text-indent: 3pt;
}
.menu_bg {
background-color: #000000;
}
.inspring {
text-indent: 3pt;
}
Ik denk eerder een FF-probleem. Firefox & scrollbars in frames/div's met overflow werken niet fatsoenlijk.quote:Op vrijdag 29 april 2005 12:00 schreef SuperRembo het volgende:
Het zal wel een IE-bug zijn dat de tekst over de scollbars loopt.
In IE loopt de tekst over de scrollbars heen, in FF niet. Dan noem ik het een IE-bug.quote:Op maandag 2 mei 2005 09:40 schreef sop het volgende:
[..]
Ik denk eerder een FF-probleem. Firefox & scrollbars in frames/div's met overflow werken niet fatsoenlijk.
Ik krijg met de code die de TS heeft aangeleverd nergens problemen. Niet bij IE en niet bij FF.quote:Op maandag 2 mei 2005 12:39 schreef SuperRembo het volgende:
[..]
In IE loopt de tekst over de scrollbars heen, in FF niet. Dan noem ik het een IE-bug.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link href="../css/thinkquest.css" rel="stylesheet" type="text/css"> </head> <body class="inhoud"> ....hier de body content.... </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .inhoud { background-image: url(../afbeeldingen/inhoud.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0px 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #FFFFFF; border: none; text-align: left; text-indent: 3pt; margin:0; padding:0; } |
Ja dat klopt. Maar hoe los ik dat op?quote:Op dinsdag 3 mei 2005 23:43 schreef DionysuZ het volgende:
ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje
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 | html { height: 100%; } body { font-family: Arial, Helvetica, sans-serif; text-align: left; background-color:#F9F9F9; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; height: 100%; } #content { width: 100%; background-color:#F9F9F9; } #content_bottom { position: relative; top: 5px; height: 30px; background-color:#FFFFFF; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: solid; border-top-color: #FABD23; border-right-color: #FABD23; border-bottom-color: #FABD23; border-left-color: #FABD23; } #content_center { height: auto; background-color:#FFFFFF; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: solid; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; } #content_top { background-color:#F9F9F9; } .font_navigatie { font-size:11px; } #main_left { width: 150px; background-color:#F9F9F9; float: left; } #main_right { width:auto; background-color:#F9F9F9; float: right; } #menu_top { width: 100%; height: 100px; background-color:#F9F9F9; } #menu_center { width: 100%; height: auto; background-color:#FFFFFF; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; } #menu_navigatie_head { position:relative; left:5px; } #top { width: 95%; background-color:#F9F9F9; text-align: right; } #wrapper { width: 100%; } |
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>-</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="top">login</div> <div id="wrapper"> <div id="main_left"> <div id="menu_top"></div> <div id="menu_navigatie_head"><font class="font_navigatie">navigatie</font></div> <div id="menu_center">A</div> </div> <div id="main_right"> <div id="content"> <div id="content_top"> <div class="menu_top_selected">selected</div> </div> <div id="content_center">kkk</div> <div id="content_bottom">kkk</div> </div> </div> </div> </body> </html> |
ja dat werkt ook niet voor mijn probleemquote:
1 2 3 4 5 6 7 | #main_left { float: left; width: 150px; } #main_right { margin-left: 150px;/* groter of gelijk aan #main_left:width */ } |
1 2 3 | body { line-height: 1.6em; } |
en dat alles ook nog verticaal gecentreerd?quote:Op donderdag 19 mei 2005 17:29 schreef DionysuZ het volgende:
er is dus geen enkele css mogelijkheid om een DIV een hoogte van 100% te geven met een minimale hoogte van x pixels?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |