[CSS] voor dummies - deel 6 | Digital Corner (DIG)

zaterdag 17 maart 2007 @ 11:07:46 #61

mschol

quote:
Op zaterdag 17 maart 2007 10:43 schreef SuperRembo het volgende:
Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.

sinds IE7 niet meer (wordt ook op andere elementen ondersteund)
zie hier:
http://home.mschol.eu/

en hier:
http://msdn.microsoft.com(...)properties/hover.asp

zaterdag 17 maart 2007 @ 12:27:06 #62

SuperRembo

Sinds 1998

Ok, maar dan werkt het nog steeds bij 40% van de bezoekers niet

zaterdag 17 maart 2007 @ 13:03:10 #63

mschol

quote:
Op zaterdag 17 maart 2007 12:27 schreef SuperRembo het volgende:
Ok, maar dan werkt het nog steeds bij 40% van de bezoekers niet

zie de eerste link, die werkt onder FF, IE6 & 7 (daar heb ik em onder getest
dan hebbie voor grofweg 98% van de internetters em wel goed

[ Bericht 5% gewijzigd door mschol op 17-03-2007 13:12:21 ]

zaterdag 17 maart 2007 @ 13:11:57 #64

SuperRembo

Sinds 1998

Ja met javascript erbij lukt het natuurlijk in elke browser. Een pure CSS oplossing werkt alleen cross browser (inclusief IE6) als je a:hover gebruikt.

Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.

zaterdag 17 maart 2007 @ 13:12:58 #65

mschol

quote:
Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser. Een pure CSS oplossing werkt alleen cross browser (incl IE6) als je a:hover gebruikt.

das waar

zondag 18 maart 2007 @ 10:59:03 #66

CraZaay

prettig gestoord

quote:
Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ja met javascript erbij lukt het natuurlijk in elke browser.

...die javascript aan heeft staan

Als je niet zeker weet dat iedere bezoeker Javascript aan heeft staan, dan is het netjes om daar rekening mee te houden ('progressive enhancement').

zondag 18 maart 2007 @ 11:01:48 #67

mschol

quote:
Op zaterdag 17 maart 2007 13:11 schreef SuperRembo het volgende:
Ik vind bij jou die mousemove handler op de body niet bepaald een fraaie oplossing. Helemaal omdat er naar de y-coördinaat gekeken wordt.

ik heb em niet zelf gebouwd, was een kant en klaar template

zondag 18 maart 2007 @ 11:03:01 #68

mschol

quote:
Op zondag 18 maart 2007 10:59 schreef CraZaay het volgende:

[..]

...die javascript aan heeft staan Als je niet zeker weet dat iedere bezoeker Javascript aan heeft staan, dan is het netjes om daar rekening mee te houden ('progressive enhancement').

tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..
dan doet grofweg 70% v/d sites het niet (goed) meer.

zondag 18 maart 2007 @ 14:55:39 #69

CraZaay

prettig gestoord

quote:
Op zondag 18 maart 2007 11:03 schreef mschol het volgende:

[..]

tis op z'n zachts gezegd vreemd als je anno 2007 je JS uit hebt staan..
dan doet grofweg 70% v/d sites het niet (goed) meer.

Op mijn PDA staat Javascript standaard uit. Op m'n mobiel ook. Dat veel sites het dan niet meer doen is geen reden om het zelf dan niet goed te doen. Gevalletje "als hij in de sloot springt, doe jij dat dan ook".

zondag 18 maart 2007 @ 21:09:05 #70

Tijn

Powered by MS Paint

Elke keer als ik denk dat ik snap hoe CSS werkt, gebeurt er weer iets waardoor ik de haren uit m'n hoofd wil trekken

Ik ben een website aan het maken en dit is hoe het er aan de bovenkant uit moet komen te zien:

Wat ik hiervoor heb gemaakt is een div met een class die "topbar" heet, met o.a. "vertical-align: middle", een achtergrondkleur en margin en padding op 0.

Om de knopjes aan de rechterkant te krijgen, heb ik een div gemaakt met een class genaamd "topbarButtonarea" die "float: right" heeft, zodat 'ie aan de rechterkant komt te zitten. Daarin zitten twee links waaraan de class "topbarButton" hangt, die zorgt voor een randje en een achtergrondkleur, zodat het er als een knopje uitziet.

Vervolgens heb ik de div eronder, waar het supermooie plaatje in moet, een class meegegeven waarin staat "clear: both" waarmee ik hoopte dat het resultaat eruit zou zien zoals het plaatje.

Echter ziet het er vervolgens ongeveer zo uit:

Zoals je kunt zien, vallen de knopjes uit de div waar 'ie in zit, en dat is niet de bedoeling!

Hoe moet m'n HTML en CSS eruit zien om wel het resultaat te verkrijgen wat ik voor ogen heb?

Verberg de nieuwsticker

zondag 18 maart 2007 @ 21:12:38 #71

mschol

quote:
Op zondag 18 maart 2007 14:55 schreef CraZaay het volgende:

[..]

Op mijn PDA staat Javascript standaard uit. Op m'n mobiel ook. Dat veel sites het dan niet meer doen is geen reden om het zelf dan niet goed te doen. Gevalletje "als hij in de sloot springt, doe jij dat dan ook".

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

zondag 18 maart 2007 @ 21:21:06 #72

HuHu

@Tijn: je kan de topbar een vaste hoogte geven.

zondag 18 maart 2007 @ 21:28:03 #73

Tijn

Powered by MS Paint

Ah, dat is een goeie, HuHu

Dan is het denk ik wel handig om het in "em" te doen en niet in pixels ofzo, want als mensen het lettertype groter willen hebben, valt het alsnog van de balk af, right?

Verberg de nieuwsticker

zondag 18 maart 2007 @ 22:42:50 #74

SuperRembo

Sinds 1998

Floats clearen gaat het mooist met overflow: auto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.topbar {
   overflow: auto;
   background-color: #666;
}

.titel {
   float: left;
}

.topbarButton {
   float: right;
   border: 1px solid #000;
   background-color: #fff;
}

1
2
3
4
5
6
7

   <div class="topbar">
      <div class="titel">Titel</div>
      <div class="topbarButtonarea">
         <div class="topbarButton">knopje</div>
         <div class="topbarButton">knopje</div>
      </div>
   </div>

Je moet de floats clearen op de container van de titel en de knopjes, clear: both op het plaatje helpt dus niet.

[ Bericht 4% gewijzigd door SuperRembo op 18-03-2007 22:48:44 ]

zondag 18 maart 2007 @ 23:09:54 #75

Tijn

Powered by MS Paint

Bedankt, SuperRembo

Dit soort commentaar vind ik altijd prettig om te horen, want ik heb nog wel eens twijfels over de oplossingen die ik zelf bedenk

[edit] Nu heb ik overigens een probleem wat ik al eerder heb gehad... 2 rijen naast elkaar (links een lijst met links, rechts tekst) die even lang moeten worden. Het probleem is dat de ene keer de linkerkant meer inhoud heeft en de andere keer de rechterkant. Ik moet even opzoeken hoe ik het de vorige keer heb opgelost, maar als iemand nog een slimme truc heeft, hoor ik die graag

Verberg de nieuwsticker

zondag 18 maart 2007 @ 23:50:00 #76

CraZaay

prettig gestoord

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.

maandag 19 maart 2007 @ 07:51:10 #77

veldmuis

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.

maandag 19 maart 2007 @ 15:31:40 #78

mschol

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

maandag 19 maart 2007 @ 16:42:25 #79

veldmuis

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!

dinsdag 20 maart 2007 @ 13:12:55 #80

Geqxon

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

Tijn

Powered by MS Paint

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

dinsdag 20 maart 2007 @ 14:02:20 #82

super-muffin

aan de container overflow: auto; toevoegen.
Of een <br class=clear /> .clear { clear: both }

Steam - SC2

dinsdag 20 maart 2007 @ 14:06:31 #83

Tijn

Powered by MS Paint

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

dinsdag 20 maart 2007 @ 14:27:49 #84

Chandler

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 09:21:07 #85

CraZaay

prettig gestoord

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

woensdag 21 maart 2007 @ 09:26:26 #86

Chandler

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 09:30:09 #87

CraZaay

prettig gestoord

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.

woensdag 21 maart 2007 @ 09:41:18 #88

Chandler

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

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 maart 2007 @ 09:55:37 #89

CraZaay

prettig gestoord

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 ]

woensdag 21 maart 2007 @ 10:07:54 #90

Chandler

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

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?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

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

[CSS] voor dummies - deel 6

» digital corner

» digital corner