[CSS] voor dummies #15

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_84831326
Uit het vorige topic:

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.
Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.
fokstok.nl
pi_84832274
Waarom is HTML/CSS toch iets geworden dat iedere gebruiker met een computer denkt te moeten kunnen zonder enige relevante research te doen? Ik ga toch ook niet een tafel in elkaar timmeren zonder daar op z'n minst een boek over te lezen of research over te doen :D
Bleuh.
  woensdag 4 augustus 2010 @ 10:00:53 #4
71610 Black-Hole
Deep in my soul
pi_84843354
quote:
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.
Met HTLM5 is dat nu ontzettend simpel :)
1<!doctype HTML>
pi_84844298
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?
  woensdag 4 augustus 2010 @ 10:40:52 #6
84244 Scorpie
Abject en infaam!
pi_84844326
Pom pom :P
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
pi_84860290
Bij mij in Firefox 3.6 op de Mac lijkt hetnaar behoren te werken.
Bleuh.
  woensdag 4 augustus 2010 @ 20:55:32 #8
71610 Black-Hole
Deep in my soul
pi_84868082
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?
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.
pi_84868164
Wel mooie Mystery Meat Navigation trouwens, chapeau! :D
Bleuh.
pi_84887646
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.
En nu dan? Bij mij ziet het er nu zo uit:

pi_84898893
Waarom werkt tekst transparantie in de volgende situatie niet?

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		<style>
        
    .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>
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 :?
  donderdag 5 augustus 2010 @ 16:51:34 #12
91039 mstx
2x1/2 = 1/2 x 1/2
pi_84899364
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 :?
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. ;)
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_84899455
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. ;)
Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?
  donderdag 5 augustus 2010 @ 17:00:23 #14
91039 mstx
2x1/2 = 1/2 x 1/2
pi_84899649
quote:
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?
- Halftransparante PNG als achtergrond nemen en geen opacity instellen
- Tekst in een aparte div er absoluut/relatief overheen plaatsen
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_84902311
Of gewoon rgba-kleuren gebruiken.
Bleuh.
  donderdag 5 augustus 2010 @ 22:25:22 #16
71610 Black-Hole
Deep in my soul
pi_84913671
quote:
Op donderdag 5 augustus 2010 11:24 schreef Gitaarmat het volgende:

En nu dan? Bij mij ziet het er nu zo uit:

Nu ziet het er prima uit, zowel in FF als Chrome.
pi_84934596
quote:
Op donderdag 5 augustus 2010 22:25 schreef Black-Hole het volgende:

[..]

Nu ziet het er prima uit, zowel in FF als Chrome.
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. :@
pi_84934922
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. :@
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.
fokstok.nl
pi_84935170
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.
Daar begrijp ik het al niet. :@
pi_84936429
quote:
Op vrijdag 6 augustus 2010 13:30 schreef Gitaarmat het volgende:

[..]

Daar begrijp ik het al niet. :@
Hier staat meer informatie: http://www.w3.org/QA/2002/04/valid-dtd-list.html
fokstok.nl
  vrijdag 6 augustus 2010 @ 14:09:04 #21
71610 Black-Hole
Deep in my soul
pi_84936860
quote:
Op vrijdag 6 augustus 2010 13:30 schreef Gitaarmat het volgende:

[..]

Daar begrijp ik het al niet. :@
Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.
pi_84938014
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.
Maar daarmee wordt de html gegarandeerd niet valide.
SPOILER
Om 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.
fokstok.nl
  vrijdag 6 augustus 2010 @ 14:42:52 #23
71610 Black-Hole
Deep in my soul
pi_84938386
quote:
Op vrijdag 6 augustus 2010 14:34 schreef Light het volgende:

[..]

Maar daarmee wordt de html gegarandeerd niet valide.
SPOILER
Om 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.
Fonts stijl je toch met css? Ik zie het probleem niet.
pi_84940099
quote:
Op vrijdag 6 augustus 2010 14:42 schreef Black-Hole het volgende:

[..]

Fonts stijl je toch met css? Ik zie het probleem niet.
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.
fokstok.nl
  maandag 9 augustus 2010 @ 21:23:12 #25
71610 Black-Hole
Deep in my soul
pi_85067661
Vraagje over hoe jullie dit zouden aanpakken.

Voor de site die ik aan het bouwen ben ga ik gebruik maken van horizontale lijnen die de gedeeltes van de pagina's moeten scheiden. hiervoor gebruik ik een png-file van 1px die ik over de hele breedte wil herhalen. Alleen lukt het me niet goed om dit voor elkaar te krijgen aangezien de div die ik hiervoor gebruik verder leeg is. De volgende opmaak werkt wel maar is dus niet zichtbaar vanwege de lege div.

1
2
3
4		#lijn{
margin-top: 30px;
background: url('../images/line.png') repeat-x;
}
Werken met borders is geen optie aangezien de png-file bestaat uit 2 kleuren zodat de lijn een soort schaduweffect meekrijgt.

Hoe zouden jullie dit oplossen?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies #15
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')