cascade style sheetquote:Op zaterdag 27 november 2004 11:51 schreef Omkron het volgende:
wat is css..?
Ik hoop dat je ook met FireFox / Mozilla ofzo aan het testen bentquote:Op donderdag 25 november 2004 19:39 schreef Chandler het volgende:
kleine vraag; je moet dus om zo'n boxmodel hack te hanteren de volgende regel hanteren? = hopelijk de juiste gedachte.
je moet de border*2+left&right margins/padding bij elkaar oprekenen en dan appart voor IE5/6 in en zonder quirk mode
[..]
goed gedacht, ik zie dingen graag standaard en berekenbaar
quote:Op donderdag 9 december 2004 20:29 schreef Leshy het volgende:
Nope, dit komt pas met CSS3. De beste oplossing die je tot dan toe hebt, is gebruik maken van plaatjes ipv tekst.
Geeft niet, deed ik ook eerstquote:Op donderdag 9 december 2004 21:16 schreef Roönaän het volgende:
Verkeerd gelezen
overflow: auto;quote:Op zaterdag 11 december 2004 18:08 schreef Joipoidoipoipoi het volgende:
Weet iemand hoe ik in een extern css-bestand de scrollbar op 'auto' zet? (Als ik op Google zoek, kom ik alleen maar onderwerpen over een gekleurde scrollbar tegen.)
een P is een block-level element, oftewel het neemt standaard de gehele beschikbare breedte in (tenzij specifieke width gedefinieerd is), en erna komt een automatische 'clear' (tenzij het element 'float')quote:Op dinsdag 14 december 2004 12:45 schreef ikke_ook het volgende:
Ik heb een vraagje. Als ik een bepaalt stukje tekst een bepaalde opmaak wil geven met css doet ik dit altijd met <p class="klasse"></p> maar hier zitten altijd breaks omheen, dus je kunt op deze manier niet 2 stukken tekst van verschillende klassen zonder breaks achter elkaar typen.
Hier is vast wel een oplossing voor maar die weet ik dus niet en dat is dus waarom ik hier kom.
1 2 3 | P { display: inline; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <ul id="menu"> <li> <a href="pagina1.html">linkje 1</a></li> <li> <a href="pagina2.html">linkje 2</a></li> <li> <a href="pagina3.html">linkje 3</a></li> </ul> <div id="mainBody"> <h1>Een voorbeeldje van sematische HTML</h1> <h2>eerste subtitel</h2> <p> eerste paragraaf,die een <em>stukje tekst</em> bevat...</p> <h2>tweede subtitel</h2> <p> eerste paragraaf,welk <strong>ook</strong> weer wat tekstuele inhoud bevat...</p> </div> <div id="sideNotes"> <h1> zijdelingse notities</h1> <p> bladieblah, nog wat tekst</p> </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 | <style type="text/css"> HTML, BODY { width: 100%; height: 100%; padding: 0; margin: 0; } UL { margin: 0; padding: 0; } UL LI { display: inline; list-style: none; } DIV#mainBody { float: left; width: 75%; } DIV#mainBody H1 { font-size: 18px; color: red; } DIV#mainBody H2 { font-size: 14px; color: orange; } DIV#mainBody P { font-size: 11px; color: #333; } DIV#sideNotes { width: 25%; backgroundcolor: blue; color: white; } DIV#sideNotes H1 { font-size: 12px; margin: 3px 0 5px 0; padding: 0; } DIV#sideNotes P { font-size: 10px; margin: 1px 0 2px 0; padding: 0; } </style> |
1 2 3 4 5 6 7 8 9 10 | #user { position: absolute; top: 20px; left: 246px; right: 20px; height: 14px; padding-left: 5px; border: 1px solid #000; background: #fee; } |
Leshy!quote:Op vrijdag 17 december 2004 03:21 schreef Leshy het volgende:
Ik ben dus even zo vrij geweest om wat te knutselen en heb een alternatieve versie van je site in elkaar geknutseld mbv CSS, op de manier waarop ik het zou aanpakken. Deze layout werkt zowel in Opera, MSIE als Firefox als het goed is
Ah, ik zat me al een hele tijd af te vragen waarom dat zo vreemd ging in IE. Weer wat geleerdquote:Lettergroottes nooit in pixels weergeven, sommige browsers (MSIE) kunnen dan de lettergrootte niet meer aanpassen.
Je hebt gelijk. Maar, ik had de pagina links uitgelijnd, waardoor de pagina er links (bij het logo, de navigatie en het menuutje) altijd hetzelfde uitzag en de rest mee zou resizen. Maar dat kan dus ook wel op een andere manierquote:Absoluut positioneren is eigenlijk iets wat je niet of tenminste zo min mogelijk moet gebruiken. Op lagere resoluties en onder andere vage omstandigheden kan je layout dan vreemd gaan doen.
Ik zat even te testen hoe de validators hierop zouden reageren. Als ik <b>...</b> gebruik is het fout, als ik het op deze manier deed was het wel goed. Ik vond het al zo vreemd.quote:Gebruik tags waar ze voor bedoeld zijn. <h?> tags zijn voor koppen en tussenkopjes, niet om willekeurige woorden vet en/of onderlijnd te maken.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <style type="text/css"> H5 { MARGIN: 0px; FONT: 9px Arial, Geneva, Helvetica, sans-serif; COLOR: #9a9acc; TEXT-ALIGN: left; PADDING-LEFT: 10px } H6 { MARGIN: 0px; FONT: 9px Arial, Geneva, Helvetica, sans-serif; COLOR: #9a9acc; TEXT-ALIGN: right; PADDING-RIGHT: 10px; } </style> <H5>een teskt</H5> <H6>andere tekst</H6> |
1 2 3 4 5 6 7 8 9 10 11 | <style type='text/css'> .right {text-align: right;} .left {text-align: left; float: left;} </style> [...] <div class='right'> <span class='left'>Dit staat links</span> Dit staat rechts. </div> |
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="20%" height="20"> <tr> <td width="20%" height="23" align="center"> <p align="center"><div class="menu"><a href="?surf=home">Home</a></div></td> <td width="20%" height="23" align="center"> <p align="center"><div class="menu"><a href="?surf=results">Results</a></div></td> <td width="20%" height="23" align="center"> <p align="center"><div class="menu"><a href="?surf=history">History</a></div></td> <td width="20%" height="23" align="center"> <p align="center"><div class="menu"><a href="mailto:sinan[at]sinan06[dot]nl">Contact</a></div></td> </tr> </table> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style type='text/css'> ul#menu { list-style-type: none; margin-left: 0; width: 20%; text-align: center; } ul#menu li { display: inline; padding: 0 4px; } ul#menu li a { [CSS voor de links] } </style> [...] <ul id='menu'> <li><a href='?surf=home'>Home</a></li> <li><a href='?surf=results'>Results</a></li> <li><a href='?surf=history'>History</a></li> <li><a href='mailto:sinan[at]sinan06[dot].nl'>Contact</a></li> </ul> |
En als ik dit voor je links wil toepassen;quote:Op zondag 19 december 2004 17:12 schreef Leshy het volgende:
Voor een menu is het makkelijker een unordered list te gebruiken. Dit scheelt flink wat HTML-code, zeker wanneer je de CSS netjes in een extern bestand steekt.
[ code verwijderd ]
1 2 3 4 5 6 7 8 | a { color: #FFFFFF; border-bottom: 1px none; text-decoration: none; } a:hover { border-bottom: 1px dashed #FFFFFF; } |
1 2 3 4 5 6 7 8 | ul#menu li a { color: #FFFFFF; border-bottom: 1px none; text-decoration: none; } ul#menu li a:hover { border-bottom: 1px dashed #FFFFFF; } |
Puur uit gewoontequote:Op zondag 19 december 2004 18:25 schreef Roönaän het volgende:
Wrom gebruik je overal single quotes?
Niets, zo moet het wel degelijk werkenquote:Op zondag 19 december 2004 18:00 schreef saban het volgende:
Wat doe ik verkeerd ?
Ik werk daar nog met divjes + html tabel, niet met de voorbeeld die ik kreeg, daarom werkt hetquote:Op zondag 19 december 2004 18:26 schreef Roönaän het volgende:
Maar waarschijnlijk moet je even goed refreshen, want het menu doet het hier wel..
Ik zie geen dashed underline als ik met mn muis over de links heen ga ..quote:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>index</title>
<style type='text/css'>
ul#menu {
list-style-type: none;
margin-left: 0;
width: 20%;
text-align: center;
}
ul#menu li {
font-family: tahoma;
font-size: 10px;
display: inline;
padding: 0 4px;
color: #EEEEEE;
}
ul#menu li a {
color: #EEEEEE;
border-bottom: 1px none;
text-decoration: none;
}
ul#menu li a:hover {
border-bottom: 1px dashed #EEEEEE;
}
</style>
</head>
<body bgcolor="#000000">
<ul id='menu'>
<li><a href='?surf=home'>Home</a></li>
<li><a href='?surf=results'>Results</a></li>
<li><a href='?surf=history'>History</a></li>
<li><a href='mailto:sinan[at]sinan06[dot].nl'>Contact</a></li>
</ul>
</body>
</html>
Ik wel, dus die CSS lijkt me in orde. Ondersteunt je browser wel dashed underline?quote:Op zondag 19 december 2004 18:42 schreef saban het volgende:
[..]
Ik zie geen dashed underline als ik met mn muis over de links heen ga ..
MSIE ondersteunt wel dashed borders, dat is het probleem niet.quote:Op zondag 19 december 2004 19:21 schreef Light het volgende:
Ik wel, dus die CSS lijkt me in orde. Ondersteunt je browser wel dashed underline?
1 | * html ul#menu li {height: 13px;} /* MSIE hack */ |
Aha, thx.quote:Op zondag 19 december 2004 19:52 schreef Leshy het volgende:
[..]
MSIE ondersteunt wel dashed borders, dat is het probleem niet.
Opera en Firefox hebben beiden geen probleem met het weergeven van de dashed border - en terecht omdat het gewoon correcte CSS is. MSIE echter laat weer zien dat het gewoon een drama is in het toepassen van CSS. Blijkbaar valt de border van de link buiten de <li>, ondanks dat deze er gewoon in staat.
@saban:
De oplossing is om deze regel toe te voegen aan je CSS:
[ code verwijderd ]
Dit is een stukje foute CSS dat alle browsers netjes negeren, zoals ze horen te doen. Natuurlijk weer met uitzondering van Internet Explorer, die het gewoon slikt. Let erop dat als je je tekstgrootte ooit aanpast, je ook even de hoogte in die regel verandert
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 | <style> body { margin: 0px auto; } #main { width: 100%; } #left { float: left; width: 25px; background: #EAEAEA; } #middle { width: 500px; background: #000000; } #right { width: 100%; background: #904fff; } </style> <div id="main"> <div id="left"></div> <div id="middle"> <div id="header"> <div id="headermenu"> </div> <div id="headerlogo"> </div> </div> <div id="middletext">InnerHTML</div> <div id="footer">(c) bladedieblaat</div> </div> </div id="right">Dit is de rechter kollom</div> </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 | <style> body { margin: 0px auto; } #cell { width: 100%; height: 500px; } #left { margin-left: 0px; position: absolute; width: 25px; height: 100%; background: green; background-image: url('left_bkgnd_fill.gif'); } #middle { margin-left: 25px; position: absolute; width: 675px; height: 100%; background: #3d3d32; } #right { margin-left: 700px; position: absolute; width: 100%; height: 100%; background: blue; background-image: url('bluey.gif'); } #menu { width: 250px; } #menuimage { margin-left: 250px; text-align: right; width: 425px; } #content { width: 675px; background: #ffffff; } #footer { padding-left: 10px; padding-top: 20px; height: 25px; font-size: 9px; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; } .but { margin-top: 5px; padding-left: 10px; width: 225px; height: 26px; background: #5EB5D5; font-family: arial; font-size: 18px; color: #FFFFFF; text-decoration:none } .but:hover { margin-top: 5px; padding-left: 10px; width: 225px; height: 26px; background: #5EB5D5; font-family: arial; font-size: 18px; color: #000000; text-decoration:none } </style> <div id="cell"> <div id="left"></div> <div id="middle"> <div id="menu"> <a href="#" class="but">Woei</a> <a href="#" class="but">Woei</a> <a href="#" class="but">Woei</a> </div> <div id="menuimage">IMAGE </div> <div id="content">testtest?</div> <div id="footer">(c) 2004 E. Bruggema, scripting & graphical all reserved by its rightfull owners</div> </div> <div id="right"></div> </div> |
1 2 3 4 | #menu { width: 250px; } |
http://www.w3schools.com/css/css_reference.asp#backgroundquote:Op vrijdag 24 december 2004 16:07 schreef Chandler het volgende:
ik zal het eens proberen; nog een vraagje; is het mogelijk om een plaatje in #menu te zetten
[ code verwijderd ]
maar dan moet het plaatje wel aan de rechterkant staan of moet ik daar dan ook weer een aparte 'style' voor maken?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |