Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.quote:Op dinsdag 3 augustus 2010 20:22 schreef Black-Hole het volgende:
[..]
Laat eens wat van je code zien, cross browser compatability is een bitch soms.
Met HTLM5 is dat nu ontzettend simpelquote:Op dinsdag 3 augustus 2010 22:13 schreef Light het volgende:
Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.
1 |
Je laatste alinea is twee keer zichbaar hier in FF, loopt hele maal door van links naar rechts achter je main content om. Ook in Chrome is je laatste alinea niet goed gecentreerd. Hij neemt de hele pagina in beslag.quote:Op woensdag 4 augustus 2010 10:39 schreef Gitaarmat het volgende:
Dit is 'm dus, in Firefox ziet hij er netjes uit, niks geen pro website ofzo maar voor ons is het goed genoeg. Als jullie 'm in Firefox openen ziet hij er dan ook redelijk uit? Ik bedoel, rechte stukjes tekst en geen blauwe lijnen om de afbeeldingen heen?
En nu dan? Bij mij ziet het er nu zo uit:quote:Op woensdag 4 augustus 2010 20:55 schreef Black-Hole het volgende:
[..]
Je laatste alinea is twee keer zichbaar hier in FF, loopt hele maal door van links naar rechts achter je main content om. Ook in Chrome is je laatste alinea niet goed gecentreerd. Hij neemt de hele pagina in beslag.
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 | .container { background-color: #000000; /* the background */ filter:alpha(opacity=60); /* Internet Explorer */ -moz-opacity:0.6; /* Mozilla 1.6 and below */ opacity: 0.6; /* newer Mozilla and CSS-3 */ } .opaquetext { filter:alpha(opacity=100); /* discarded */ -moz-opacity:1.0; /* discarded */ opacity: 1.0; /* discarded */ color: #FFFFFF; } </style> <div class="container" style="margin-bottom: 10px;"> <div class="opaquetext"> This is a normal text on a translucent background </div> </div> <div style="background-color: #FF0000; height: 100px;"> <div class="container" style="margin-bottom: 10px;"> <div class="opaquetext"> This is a normal text on a translucent background </div> </div> </div> |
Als je een div (half)transparant maakt geldt dat voor alles daar binnen in, ookal maak je dat weer 100% zichtbaar.quote:Op donderdag 5 augustus 2010 16:37 schreef Pakspul het volgende:
Waarom werkt tekst transparantie in de volgende situatie niet?
[ code verwijderd ]
Zoals te zien is dat bij de eerste div situatie de tekst gewoon mooi wit is, maar bij de twee is de tekst ineens roodachtig ook al zou je anders verwachten
Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?quote:Op donderdag 5 augustus 2010 16:51 schreef mstx het volgende:
[..]
Als je een div (half)transparant maakt geldt dat voor alles daar binnen in, ookal maak je dat weer 100% zichtbaar.
Dat die bovenste tekst wel mooi wit is komt omdat de achtergrond daar ook wit is, wit+wit blijft altijd wit. Daaronder echter zit alles in een container die een rode achtergrondkleur heeft. Wit+rood = roze.
- Halftransparante PNG als achtergrond nemen en geen opacity instellenquote:Op donderdag 5 augustus 2010 16:54 schreef Pakspul het volgende:
[..]
Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?
Nu ziet het er prima uit, zowel in FF als Chrome.quote:Op donderdag 5 augustus 2010 11:24 schreef Gitaarmat het volgende:
En nu dan? Bij mij ziet het er nu zo uit:
Toch in IE blijven er vage dingen, de tekst staat niet geheel in het midden, het lettertype van de agenda is ook ineens groter. Echt vage dingen.quote:Op donderdag 5 augustus 2010 22:25 schreef Black-Hole het volgende:
[..]
Nu ziet het er prima uit, zowel in FF als Chrome.
Dan moet je eerst zorgen dat je pagina's (de frameset en ook de achterliggende pagina's) valide html zijn. Met doctype. Het heeft geen zin om problemen op te willen lossen als de basis niet goed is.quote:Op vrijdag 6 augustus 2010 13:17 schreef Gitaarmat het volgende:
[..]
Toch in IE blijven er vage dingen, de tekst staat niet geheel in het midden, het lettertype van de agenda is ook ineens groter. Echt vage dingen.
Daar begrijp ik het al niet.quote:Op vrijdag 6 augustus 2010 13:25 schreef Light het volgende:
[..]
Dan moet je eerst zorgen dat je pagina's (de frameset en ook de achterliggende pagina's) valide html zijn. Met doctype. Het heeft geen zin om problemen op te willen lossen als de basis niet goed is.
Hier staat meer informatie: http://www.w3.org/QA/2002/04/valid-dtd-list.htmlquote:
Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.quote:
Maar daarmee wordt de html gegarandeerd niet valide.quote:Op vrijdag 6 augustus 2010 14:09 schreef Black-Hole het volgende:
[..]
Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
quote:Op vrijdag 6 augustus 2010 14:34 schreef Light het volgende:
[..]
Maar daarmee wordt de html gegarandeerd niet valide.Fonts stijl je toch met css? Ik zie het probleem niet.SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
De link die Gitaarmat gaf, gaat naar een frameset. Daar wordt dan 1 pagina geladen: http://ageless.nu/andthegodsmadecoffee/index.html . Die pagina is niet html4, niet xhtml1 en zeker niet html5.quote:Op vrijdag 6 augustus 2010 14:42 schreef Black-Hole het volgende:
[..]
Fonts stijl je toch met css? Ik zie het probleem niet.
1 2 3 4 | margin-top: 30px; background: url('../images/line.png') repeat-x; } |
1 2 3 4 5 | background:url(../images/line.png) repeat-x; display:block; height:1px; } |
Dat werkt inderdaadquote:Op maandag 9 augustus 2010 21:29 schreef PimD het volgende:
[ code verwijderd ]
Zou moeten werken. Overigens raad je ik aan om hier het horizontal rule element voor te gebruiken (<hr />), aangezien het daarvoor bedoeld is en die dan een background e.d. geven. Wel zo netjes
Wat margins links en rechts kan toch gewoon?quote:Op maandag 9 augustus 2010 21:44 schreef Black-Hole het volgende:
[..]
Dat werkt inderdaad
Nadeel van de <hr> tag is dat ik hm niet goed gestyled krijg en heel de ruimte inneemt en dat terwijl ik nog wat margins nodig heb links en rechts.
1 2 3 4 5 6 7 | height: 2px; margin: 0 50px; background-color: #f00; border: 0; border-bottom: 1px solid #00f; } |
De styling ervan zorgt voor problemen in IE als ik ga werken met een background image, wat je weer kan verhelpen met een div maar dat maakt het allemaal nog complexer.quote:Op maandag 9 augustus 2010 22:05 schreef Light het volgende:
[..]
Wat margins links en rechts kan toch gewoon?
[ code verwijderd ]
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 | display:inline-block; padding: 0; margin: 0; white-space: no-wrap; } #menu ul li{ display: inline; list-style-type: none; float:left; } #menu ul li a{ display:block; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color:#000000; padding:10px 0px 10px 0px; text-indent:0px; font-size:15px; font-weight:bold; margin-right:30px; margin-left:60px; } #menu ul li a:hover{ background-image:url(img/linkhovermenu.png); background-repeat:no-repeat; background-position:center; } |
Div 1(wat eigenlijk eigenlijk een UL is wat ook een blokelement is) en div 2 zitten in de container die niet wordt gepositioneerd d.m.v. een float, maar door text-align: center.quote:Op woensdag 18 augustus 2010 07:17 schreef PimD het volgende:
Je moet de container "overflow:hidden" geven om de floats te clearen. Of de clearfix gebruiken (Googlen op clearfix) als je de bulletproof oplossing wilt gebruiken.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="container"> <ul id="menu"> <li><a href="cam1.html">CAMERA 1</a></li> <li class="active"><a href="cam2.html">CAMERA 2</a></li> <li><a href="cam3.html">CAMERA 3</a></li> <li><a href="cam4.html">CAMERA 4</a></li> </ul> <div id="camera"> <!-- hier staat een stukje javascript --> </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 | * { margin: 0; padding: 0; } body { text-align: center; font-family: Verdana; } #container { margin: 0 auto 0 auto; width: 800px; heigth: auto; background-color: #FF0000; } ul#menu { float: left; margin: 0 auto 0 auto; list-style-type: none; } ul#menu li { margin: 0 0 10px 0; } ul#menu li a { display: block; color: #28549E; font-size: 14px; font-weight: bold; background-color: #FFFFFF; border: solid 2px #28549E; width: 125px; padding: 0.3em 0.2em 0.3em 0.3em; text-decoration: none; } ul#menu li a:hover { background-color: #E6EEF9; } ul#menu li.active a { color: #FFFFFF; background-color: #28549E; } ul#menu li.active a:hover { color: #28549E; background-color: #E6EEF9; } #camera { float: right; margin: 0 auto 0 auto; border: solid 1px #000000; width: 640px; height: 480px; } ?> |
Een div positioneren met text-align? Text-align is bedoeld voor tekst, niet voor divs. Dus hoe je dat wilt gebruiken, snap ik niet.quote:Op woensdag 18 augustus 2010 15:07 schreef F4T4L_3RR0R het volgende:
[..]
Div 1 en 2 zitten in de container die niet wordt gepositioneerd d.m.v. een float, maar door text-align: center.
Dit is een erg handige video guide die wel alle basics uitlegt (wel betaald) http://net.tutsplus.com/t(...)mplete-video-series/quote:Op vrijdag 20 augustus 2010 20:04 schreef ZwarteSteen het volgende:
Welke tut raden jullie een complete noob aan? Vroegah een beetje geklooid met frontpage maar dat is verschrikkelijk. Ik neem aan dat ik genoeg heb aan dreamweaver?
1 |
1 |
Het is al opgelost, het stond inderdaad niet goed in de HTMLquote:Op woensdag 1 september 2010 18:00 schreef PimD het volgende:
Geen idee, klinkt als een z-index probleem. Kun je ook je HTML online zetten?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | width:820px; min-height:400px; margin:0 auto; background-color:#FFF; padding-top:30px; position:relative; } #footer{ width:790; height:11px; background-image:url(img/bottomswirls.png); background-repeat:no-repeat; position: absolute; bottom:0; } |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |