[CSS] voor dummies - deel 6

Geen idee wat het is, ik ga het eens bekijken!

Werkte perfect, tnx!

Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?

quote:

Op woensdag 14 maart 2007 21:28 schreef veldmuis het volgende:
Werkte perfect, tnx!

Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?

Het rechter woord in een span, en een float:right erin?

quote:

Op zondag 11 maart 2007 15:58 schreef Nevermind het volgende:
http://chillosophy.nl/fok/test.html

Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.

De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.

ik ben er nog steeds niet uit. met percentages werken is geen optie. iemand nog?

Heb ik weer een vraag.
Ik weet dat ik iets met een hover moet hebben, maar lees nu weer iets over dat het niet in IE gaat werken enzo: een menu-achtig iets wat weergegeven wordt als je op de knop klikt.

Is zoiets lastig te realiseren?

Iemand die me kan helpen?

Via :visited een hover-menu maken en van de link een random getal maken (zodat je niet als je nogmaals komt de menu uitgeklapt is...

:active zou hiervoor moeten werken, maar werkt niet (het werkt wel: het menu komt na de klik wel zichtbaar, maar gaat direct weer weg...

Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.

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

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

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 ]

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.

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

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

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.

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?

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

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

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?

Floats clearen gaat het mooist met overflow: auto.




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 ]

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