[CSS] voor dummies - deel 6

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
  zondag 18 maart 2007 @ 23:50:00 #76
12880 CraZaay
prettig gestoord
pi_47419745
quote:
Op zondag 18 maart 2007 21:12 schreef mschol het volgende:

[..]

met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..
Dan is het in dit specifieke geval niet aan de orde, maar aangezien jij over "70% van alle gebruikers" begon was mijn uitspraak van toepassing op publiekssites in het algemeen.
pi_47424205
quote:
Op zondag 18 maart 2007 21:12 schreef mschol het volgende:

[..]

met dit verschil dat de site sowieso niet te bekijken valt op PDA en/of mobiel (aangezien ik zelf zo'n beetje de enige zal zijn die er iets mee doet in het begin..
Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.
pi_47437083
quote:
Op maandag 19 maart 2007 07:51 schreef veldmuis het volgende:

[..]

Dat doe je dan vast met IE, die verbergt dat je backslashes gebruikt en gooit ze direct om naar normale slashes. Firefox niet.
uhhh he


--edit--

ow wacht ik zie wat je bedoelt..

tja force of habit..
en dat FF nou gaat mierenneuken op verkeerde slashes , daar kan ik niks aan doen
en ja ik doe het grootste deel onder IE, maar ook onder FF wordt de werking getest..
pi_47440090
quote:
Op maandag 19 maart 2007 15:31 schreef mschol het volgende:

[..]

uhhh he


--edit--

ow wacht ik zie wat je bedoelt..

tja force of habit..
en dat FF nou gaat mierenneuken op verkeerde slashes , daar kan ik niks aan doen
en ja ik doe het grootste deel onder IE, maar ook onder FF wordt de werking getest..
Mierenneuken op verkeerde slashes? Nee, FF doet wat jij vraagt, IE hoopt dat je het zo bedoelt. Verschil!
pi_47469382
Mijn god, wat is de zoekpagina van Google een rotzooi. Van een bedrijf dat dergelijke kennis van AJAX heeft, een enorme omzet maakt, en imho een enorme status heeft, is de sourcecode pure bagger. Geen doctype, geen XHTML, amper quotes om HTML eigenschappen, geen indents, niet alles net op losse regels, *ril*
  dinsdag 20 maart 2007 @ 14:00:35 #81
12221 Tijn
Powered by MS Paint
pi_47470847
Ik zit nog steeds wat te kutten met m'n CSS en hoop dat iemand me in de goede richting kan wijzen.

Een gedeelte van de website die ik aan het maken ben, bestaat uit twee tekstvakken: eentje links en eentje rechts. Beiden bevinden zich in een container met een achtergrondkleur. Ik heb de vakken nu allebei floating gemaakt en het is de bedoeling dat de achtergrond mee rekt met het grootste vak.

Zoiets dus:



of zo:



Achter lukt het me niet om het voor elkaar te krijgen.

Het wordt al gauw zoiets:



Maar dat is natuurlijk niet goed.

Ik heb wat met "clear: left", "clear: right" en "clear: both" zitten rommelen in de container, maar dan komen de vakken alleen maar onder elkaar te staan in plaats van naast elkaar.

Hoe zorg ik ervoor dat de container zo lang wordt als het langste vak?
Verberg de nieuwsticker
pi_47470907
aan de container overflow: auto; toevoegen.
Of een <br class=clear /> .clear { clear: both }
Steam - SC2
  dinsdag 20 maart 2007 @ 14:06:31 #83
12221 Tijn
Powered by MS Paint
pi_47471043
Ah, hartelijk dank!

Ik had al iets geprobeerd met dat overflow: auto, maar toen had ik een typfout gemaakt zie ik nu
Verberg de nieuwsticker
pi_47471741
Ik zit weer eens met een stom css ietsje..

Ik heb de volgende lap code

1
2
3
4
5
6
7
8
9
10
11
12
13
14		        <div style='border:1px solid black; margin-bottom: 15px;'>

        <div class='head'>
            <div class='title'>C1-14</div>
            <div class='options'><a href='javascript:x(15);'><img src='./layout/images/x.gif' alt='close' border='0' /></a></div>
            <div class='clr'></div>
        </div>
        <div id='box15'>
        <ul>
            <li><a href="out.php?link=http://www.google.nl" title="googl" target="11">googl</a></li>

        </ul>
        </div>
        </div>


deze gebruik de volgende css code

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		.box {
    padding: 10px;
    width: 30%;
    float: left;
}

.box .head {
    height: 24px;
    background-color: blue;
    color: white;
}

.box .title {
    width: 70%;
    float: left;
    padding: 2px 0px 2px 5px;
}

.box .options {
    width: 30%;
    float: left;
    text-align: center;
    padding: 2px 0px 2px 0px;
}

.box .clr {
    clear: both;
}


en dan krijg je dit als uitkomst :{



nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout? :D
Just say hi!
  woensdag 21 maart 2007 @ 09:21:07 #85
12880 CraZaay
prettig gestoord
pi_47499975
quote:
Op dinsdag 20 maart 2007 14:27 schreef Chandler het volgende:
nu snap ik het niet... want padding zorgt toch voor een 'inner' werking ipv buitenwerking? of doe ik iets erg fout?
Ja, maar de padding wordt wordt wel bij de afmetingen van de box opgeteld. Dus:

box {
width: 100px;
height: 100px;
padding: 10px;
}

levert een box op van 120 bij 120 pixels.

En waarom gebruik je in hemelsnaam bijvoorbeeld een div voor de titel met class 'title'. Wat is er mis met een heading element? En doe die javascript eens netjes als <a href="#" onclick="actie(); return false">, en als je dan toch bezig bent kan dat kruisje ook mooi in de CSS en uit de HTML
pi_47500100
CraZaay; je hebt gelijk maar ik probeerde nu te werken met % ipv vaste afmetingen en hoopte dat daarvoor dus ook een methode was om de juiste grootte te krijgen

-edit- maar hoe bedoel je dit met een handig element?

Ik zal nu dan even het stukje style sheet aanpassen..
Just say hi!
  woensdag 21 maart 2007 @ 09:30:09 #87
12880 CraZaay
prettig gestoord
pi_47500174
quote:
Op woensdag 21 maart 2007 09:26 schreef Chandler het volgende:
CraZaay; je hebt gelijk maar ik probeerde nu te werken met % ipv vaste afmetingen en hoopte dat daarvoor dus ook een methode was om de juiste grootte te krijgen

-edit- maar hoe bedoel je dit met een handig element?
Die methode is of padding in percentages gebruiken, of binnen je element een div plaatsen die wel padding in pixels heeft (je hebt al elementen waarop dat zou kunnen lijkt me, zoals je ul). Dan werkt het wel.

En ik zei 'heading' element Dus een H2 ofzo.
pi_47500503
ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken

1
2
3
4
5
6
7
8		        <div class='head'>
            <p>A1-1 test</p>
            <div class='options'>
                <a href='#' class='close' onclick='x(1);'> </a>
            </div>

            <div class='clr'></div>
        </div>


met de volgende stylesheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		.box p {
    float: left;
    text-align: left;
    display:inline;
}

.box .options {
    float: right;
    text-align: right;
    padding-right: 5px;
}

.box .options .close
{
    background-image: url(./layout/images/x.gif);
    width: 20px;
    height: 20px;
}


maar wat mij dan opvalt is 1. de image is geen width: 20px;! 2. de image komt onder de blauw box..

tevens heb ik geprobeerd om het P element er bv ook onder te zetten ipv boven ivm float: maar dit resulteerde ook in niets... ik zie blijkbaar iets erg over het hoofd
Just say hi!
  woensdag 21 maart 2007 @ 09:55:37 #89
12880 CraZaay
prettig gestoord
pi_47500851
Ik snap sowieso niet waarom het allemaal zo ingewikkeld moet.

Wat kun je niet in deze opzet?:

1
2
3
4
5
6
7		<div class="boxje">
   <h2>Titel</h2>
   <a href="#" onclick="optionsdingen(); return false">kruisje</a>
   <ul>
      <li><a href="#">lijstje met links</li>
   </ul>
</div>


Lijntje en afmeting van 'boxje' in de CSS, h2 stylen en de ul stylen. Je kruisje mag je wat mij betreft dan absoluut rechtsboven positioneren ('boxje' heeft dan ook 'position: relative' nodig).

PS:
quote:
ik heb het net even met een P element geprobeerd maar dit wil ook niet echt lukken
Heb je enig idee waarom ik een H2 koos voor de titel, en niet een P?
quote:
maar wat mij dan opvalt is 1. de image is geen width: 20px;!
De A op 'display: block' zetten. Een A is namelijk een inline element en daarvan kun je de afmetingen niet aanpassen, tenzij je er een block element van maakt. Als je nou ook nog tekst toevoegt aan de link (zoals 'sluiten') en dit verbergt via CSS ('text-indent: -9999px; overflow: hidden') dan heeft iemand zonder CSS er ook iets aan. Sterker nog, je zou kunnen overwegen om de sluit-icoontjes d.m.v. Javascript te plaatsen of zichtbaar te maken, aangezien iemand zonder Javascript er toch niets aan heeft. Die hoeft ze dan ook niet te zien. Doe dit dan wel in een apart JS-bestand (waarmee je door alle 'boxje's loopt en met DOM scripting het icoontje toevoegt danwel zichtbaar maakt).

[ Bericht 13% gewijzigd door CraZaay op 21-03-2007 10:02:29 ]
pi_47501196
CraZaay; je had idd gelijk m.b.t. het P element

Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken maar dit resulteerde in slechte en brakke images nu heb ik de volgende opzet....

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		<style>

.box {
    width: 250px;
    border: 1px solid black;
}

.box .h {
    width: 100%;
    height: 22px;
    background-color: blue;
    color: white;
}

.box h2 {
    padding-top: 5px;
    padding-left: 5px;
    font-size: 14px;
    display: inline;
}

.box a {
    float: right;
    text-align: right;
    padding-right: 2px;
}

</style>


<div class="box">
    <div class="h">
        <h2><a href="#" onclick="x();"><img src="close.gif" alt="close" /></a>
            <a href="#" id='close' onclick="x(); return false;"><img src="close.gif" alt="close" /></a>
            Hier komt de BOX titel</h2>
    </div>

    <ul style="margin: 0; padding-top: 5px;">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>


Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2 als ik er tevens geen display: inline van maak krijg ik een hele diepe block....

- edit / toevoeging -

dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?
Just say hi!
  woensdag 21 maart 2007 @ 10:41:37 #91
12880 CraZaay
prettig gestoord
pi_47502176
quote:
Op woensdag 21 maart 2007 10:07 schreef Chandler het volgende:
Ik had in de tussentijd even deze opzet gemaakt om ook de image in CSS te verwerken maar dit resulteerde in slechte en brakke images nu heb ik de volgende opzet....
Dan zou ik eerder werken aan m'n skills zodat je dat alsnog goed krijgt, in plaats van dan maar een mindere oplossing te gebruiken.
quote:
Nu is de uitkomst goed, en maakt het niet uit hoeveel a'tjes ik gebruik alleen zit ik met 1 klein probleem, de padding van top wil op een of andere manier niet met H2 als ik er tevens geen display: inline van maak krijg ik een hele diepe block....
'diepe block', wat moet ik me daar bij voorstellen? Padding en 'display: inline' gaan niet echt goed samen

Waarom staat er overigens een div om die H2? Die H2 is het enige element wat in die div staat; gewoon die H2 stylen dus.
quote:
dat verbergen van de tekst is idd een handig idee, maar vraag me af of het enabelen van images m.b.t. het sluiten van velden wel echt handig is, want hoeveel gebruikers kunnen geen CSS of Javascript zien/gebruiken?
Als jij het goed web development vindt om te denken "als 90% van de bezoekers ermee kan werken vind ik het wel best", dan kun je net zo goed weer met tabellen gaan werken. Ik heb op m'n PDA in ieder geval CSS uit staan en een screenreader kan vaak weinig met Javascript. Kortom: zowat alle andere user agents dan browsers hebben er potentieel problemen mee.

Wat mij betreft moet een website toegankelijk zijn voor een zo groot mogelijk publiek. Het is niet zo dat het de dubbele hoeveelheid werk kost ofzo, als je er continu rekening mee houdt ben je net zo snel klaar.

Op jouw manier ben je een beetje halverwege: je gebruikt geen tabellen meer, maar denkt zo nog wel. Begin de volgende keer gewoon met je HTML en zorg dat die semantisch correct is (gebruik de elementen dus waar ze voor zijn), en ga dan pas aan de slag met CSS. Als het dan echt niet lukt om iets goed te stylen, dan kun je nog extra 'hooks' toevoegen (bijvoorbeeld een overkoepelende div). Nu ben je steeds je HTML aan het aanpassen t.b.v. de presentatie, en dan heb je er nog niets aan.

"Scheiding van de macht" is immers de leus: structuur in HTML, presentatie in CSS en gedrag in Javascript. Dat betekent dus ook dat elementen t.b.v. de presentatie niet in de HTML horen (je 'sluit'-icoontje) maar in de CSS, dat al je inline styles komen te vervallen en je Javascript in een aparte .js hoort te staan. Je HTML is daarmee voor iedereen bruikbaar (en niet meer dan dat), en met Javascript voeg je voor de browsers die het ondersteunen later 'progressive enhancement' toe.

Tot zover mijn betoog, en ja ik ben een purist
pi_47502555
Zow; weer een lange lap tekst

De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten.. en ik zal eens kijken hoe goed mijn javascript skills zijn

Maar je hebt blijkbaar een beter idee in je hoofd? want deels ben ik toch al aardig op de goede weg neem ik aan?
Just say hi!
  woensdag 21 maart 2007 @ 10:55:18 #93
12880 CraZaay
prettig gestoord
pi_47502669
quote:
Op woensdag 21 maart 2007 10:52 schreef Chandler het volgende:
Zow; weer een lange lap tekst

De div staat er omheen omdat ik dan de achtergrond/text kleur kan aanpassen en er eventueel een border omheen kan zetten..
En waarom zou dat bij die H2 niet kunnen

1
2
3
4		h2 {
   background: blue;
   border: solid 1px black;
}
pi_47502959
gosjimeine zeg

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		<style>

.box {
    width: 250px;
    border: 1px solid black;
}

.box h2 {
    height: 22px;
    background-color: blue;
    color: white;
    padding-top: 1px;
    padding-left: 5px;
    font-size: 15px;
    display: block;
    background-color: blue;
}

.box a {
    float: right;
    text-align: right;
    padding-right: 2px;
}

</style>


<div class="box">
    <h2><a href="#" onclick="x(); return false;"><img src="close.gif" alt="close" /></a>
        <a href="#" id='close' onclick="x();"><img src="close.gif" alt="close" /></a>
    Hier komt de BOX titel</h2>

    <ul style="margin: 0; padding-top: 5px;">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>


ziet er inderdaad heerlijk uit zonder die extra div... en dat met een blok element ik wist helemaal niet dat het eingelijk zo mooi kon!

-edit-

maar natuurlijk gaat het nooooooit zonder problemen



het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?
Just say hi!
  woensdag 21 maart 2007 @ 12:12:24 #95
12880 CraZaay
prettig gestoord
pi_47505446
quote:
Op woensdag 21 maart 2007 11:03 schreef Chandler het volgende:
gosjimeine zeg
het rode gedeelte is fout, dit komt door de H2 hoogte oid?! alleen zie ik niet waar ik dit kan veranderen?
Los hiervan: Je hebt sowieso twee keer "background-color: blue" erin staan dus dat kan eruit, en "display: block" ook, want een H2 is van zichzelf al een block element.

Ergens in je CSS heb je dat rood gedifnieerd, misschien standaard voor iedere H2 ofzo. Je browser verzint dat er niet zelf bij
pi_47506910
Nee dat rooie heb ik er zelf ik gezet daarmee wil ik eingelijk zeggen dat de ul maximaal 5px gepadd is van boven en dit zijn al ruim 20pixels... weet dus niet waar dat vandaan komt

-edit- gefixt door margin op 0 te zetten
1
2
3
4
5
6
7		    height: 22px;
    color: white;
    padding-top: 1px;
    padding-left: 5px;
    font-size: 15px;
    background-color: blue;
    margin: 0;
Just say hi!
pi_47507708
En waarom zit de onclick niet meteen op het plaatje? Dat scheelt een <a>.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  woensdag 21 maart 2007 @ 13:40:44 #98
12880 CraZaay
prettig gestoord
pi_47508654
quote:
Op woensdag 21 maart 2007 13:16 schreef SuperRembo het volgende:
En waarom zit de onclick niet meteen op het plaatje? Dat scheelt een <a>.
Dat plaatje hoort sowieso niet in de HTML, maar in de CSS. Een A is dan het meest voor de hand liggende element om die onclick aan te hangen en het achtergrondplaatje weer te geven, al kun je daar over twisten. Je zou daar ook gewoon een div voor kunnen gebruiken. Voordeel van een A is dat je 'm als normale link kunt laten werken voor gebruikers zonder Javascript.
pi_47516366
Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  woensdag 21 maart 2007 @ 17:12:04 #100
12880 CraZaay
prettig gestoord
pi_47516833
quote:
Op woensdag 21 maart 2007 17:01 schreef SuperRembo het volgende:
Maar als je er geen normale link achter zet dan is het behoorlijk nutteloos.
Klopt, en dan zou je zeker Javascript moeten gebruiken om het plaatje daar neer te zetten. Het is namelijk nog nuttelozer om een elememt op te nemen waar niet-Javascript gebruikers helemaal niets aan hebben maar toch zien
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 6
Index

» digital corner

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