[CSS] voor dummies - deel 6

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_49459223
Vraagje, is het mogelijk om een frameset te vervangen door divs inclusief de mogelijkheid om een cell breder of minderbreed te maken? bv?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_49463162
quote:
Op woensdag 16 mei 2007 21:34 schreef Chandler het volgende:
Vraagje, is het mogelijk om een frameset te vervangen door divs inclusief de mogelijkheid om een cell breder of minderbreed te maken? bv?
Niet met CSS alleen. Daar heb je (flink) wat javascript voor nodig.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  woensdag 16 mei 2007 @ 23:05:41 #203
12880 CraZaay
prettig gestoord
pi_49463240
quote:
Op woensdag 16 mei 2007 21:34 schreef Chandler het volgende:
Vraagje, is het mogelijk om een frameset te vervangen door divs inclusief de mogelijkheid om een cell breder of minderbreed te maken? bv?
Met Javascript ja (DOM bewerken = gedrag = Javascript)

Er zijn ongetwijfeld genoeg libraries waarmee dat eenvoudig kan.
pi_49722174
Hallo,

ik zit met een klein CSS probleem dat in FF de kop op steek. Ik heb de volgende exteren stylesheet :

1
2
3
4
5
6
7		A:link {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#cccccc;text-decoration:none;font-weight: bold;}

A:visited {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#cccccc;text-decoration:none;font-weight: bold;}

A:hover {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#ffffff;text-decoration:none;font-weight: bold;}

A:active {font-family: verdana, Helvetica, sans-serif;font-size: 11px;color:#ffffff;text-decoration:none;font-weight: bold;}


In MSIE werkt deze code prima, alleen in Firefox is het net of A:active 'niet werkt'. Zodra ik over een link ga, wordt ie mooi wit, maar als ik klik en de muis weg beweeg blijft ie niet wit. In MSIE doet ie dit wel. Iemand suggesties hoe ik dit op kan lossen?? Alvast hartelijk dank.

edit: In Opera werkt de active ook niet.
pi_49722783
probeer het eens met kleine letters. Dit werkt wel in FF (net getest)
En het kan sowiezo een stuk netter.

1
2
3
4
5
6
7
8
9		a {font-family: verdana, Helvetica, sans-serif;font-size: 11px; font-weigth: bold; text-decoration:none; }

a:link {color:#cccccc;}

a:visited {color:#cccccc;}

a:hover {color:#ffffff;}

a:active {color:#ffffff;}


Ik vind het trouwens best ranzig gecode, zo alles op 1 regel.
Steam - SC2
pi_49722964
quote:
Op donderdag 24 mei 2007 13:33 schreef super-muffin het volgende:
probeer het eens met kleine letters. Dit werkt wel in FF (net getest)
En het kan sowiezo een stuk netter.
[ code verwijderd ]

Ik vind het trouwens best ranzig gecode, zo alles op 1 regel.
dank voor de opschoning, maar hij werkt nog steeds niet bij mij :/ Hover gaat wel goed, maar na klikken blijft ie niet wit...
pi_49741956
quote:
Op donderdag 24 mei 2007 13:38 schreef dewitteparel het volgende:

[..]

dank voor de opschoning, maar hij werkt nog steeds niet bij mij :/ Hover gaat wel goed, maar na klikken blijft ie niet wit...
Je moet niet uitgaan van het gedrag dat Internet Explorer vertoont, dat is niet-standaard. :active voor links geldt zolang je de muis erop ingedrukt houdt en hoort niet langer toegepast te worden als je de muis weer loslaat.
  donderdag 24 mei 2007 @ 22:09:05 #208
12880 CraZaay
prettig gestoord
pi_49742226
quote:
Op donderdag 24 mei 2007 22:01 schreef AnGabhar het volgende:

[..]

Je moet niet uitgaan van het gedrag dat Internet Explorer vertoont, dat is niet-standaard. :active voor links geldt zolang je de muis erop ingedrukt houdt en hoort niet langer toegepast te worden als je de muis weer loslaat.
Volgens W3C is dat een mogelijkheid waarop een client om kan gaan met a:active. De implementatie van IE is net zo geldig. Neemt niet weg dat dit browsergedrag is, en niet verder te beinvloeden met CSS.
pi_49742690
quote:
Op donderdag 24 mei 2007 22:09 schreef CraZaay het volgende:

[..]

Volgens W3C is dat een mogelijkheid waarop een client om kan gaan met a:active. De implementatie van IE is net zo geldig. Neemt niet weg dat dit browsergedrag is, en niet verder te beinvloeden met CSS.
Dat ben ik niet met je eens. W3C schrijft voor:
quote:
The :active pseudo-class applies while an element is being activated by the user.
Nadat een gebruiker op een link geklikt heeft, of er een deel van heeft geselecteerd, valt niet meer te rijmen met de bewoording "is being activated".

Intussen heeft het gedrag van IE geleid tot talloze script kiddies die een gefocuste link (zij het per muis of per toetsenbord) scriptmatig weer ontfocussen, wat tot grote toegankelijkheidsproblemen leidt voor toetsenbordgebruikers. Maar ik dwaal af...
pi_49743182
Internet Eplorer 6 vertoont veel rare fratsen met :hover en :focus, IE7 gelukkig al wat minder. Misschien toch beter om er een Javascriptje achter te hangen wat reageert op een onclick/onkeyup attribuut.
  donderdag 24 mei 2007 @ 22:37:33 #211
104583 cyberstalker
Een krachtig neen!
pi_49743233
quote:
Op donderdag 24 mei 2007 22:36 schreef Tuvai.net het volgende:
Internet Eplorer 6 vertoont veel rare fratsen met :hover en :focus, IE7 gelukkig al wat minder. Misschien toch beter om er een Javascriptje achter te hangen wat reageert op een onclick/onkeyup attribuut.
Of je gebruikt http://www.xs4all.nl/~peterned/csshover.html .
Hope for the best, prepare for the worst.
pi_49745378
Klein vraagje; ik krijg in mijn MAP (image map) de cursor niet veranderd van de area's

1cursor: cross;


bv, of een van de vele anderen niet :{
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_49745985
quote:
Op donderdag 24 mei 2007 23:34 schreef Chandler het volgende:
Klein vraagje; ik krijg in mijn MAP (image map) de cursor niet veranderd van de area's
[ code verwijderd ]

bv, of een van de vele anderen niet
Voor zover ik weer is het stylen van een <area> niet mogelijk. Het is immers geen normaal block HTML element, en is enkel bedoeld om een klikbaar gebied van je <map> aan te duiden.

[ Bericht 1% gewijzigd door Tuvai.net op 25-05-2007 08:41:47 ]
pi_49750615
jammer... ik had al gezocht maar niet echt iets kunnen vinden
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_49751648
Je kunt wel de <img> van de map een cursor:cross; meegeven, dat zou wel moeten werken.
pi_49761171
Dat is helaas niet de oplossing die ik zoek, want vaak gebruik ik niet een hele afbeelding qua areamap maar een gedeelte er van
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 25 mei 2007 @ 14:29:12 #217
12880 CraZaay
prettig gestoord
pi_49763893
Eventueel zou je dit met javascript kunnen oplossen, of wanneer de toepassing het toe laat geen map gebruiken? Ik zou niet weten wanneer ik voor het laatst een map gebruikt heb
pi_49765385
Ik wil het voor GFXPOLL gebruiken, dat je ook op het plaatje kan klikken ivm de keuze eventueel met een kleur over de image heen...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_49773345
Ik heb ook een css probleempje.. ik heb een div met een logootje erin, die ik onderaan de pagina wil plaatsen.. dat betekent onderaan het scherm indien de inhoud van de pagina korter is dan het scherm, en helemaal onderaan de pagina als de inhoud langer is.
Zoals ik het nu voor elkaar heb blijft het logo, ook als de inhoud hoger is dan het scherm, onderaan het venster staan, en niet onderaan de pagina..
Huidige code:

1
2
3
4
5
6		div#logo {
   position: absolute;
   clear: both;
   right: 0;
   bottom: 0;
}


Deze div zet ik helemaal onderaan in de code, net voor het afsluiten van de body tag. De body heeft een hoogte van 100%.

Situatie doet zich overigens voor in zowel IE6, IE7 als FF

Hoe krijg ik dit voor elkaar? :)
pi_49778935
Zoiets in je css:

1
2
3
4		html {height: 100%; margin: 0; padding: 0}
body {min-height: 100%; position: relative; margin: 0; padding: 0}
div#content {padding: 8px 8px 150px 8px}
div#logo {position: absolute; bottom: 0; width: 100%; height: 150px}


Alle inhoud in een div#content zetten, het logo daarna in een div#logo.
Lijkt te werken in Opera, Firefox en IE7.

Zorg ervoor dat de padding-bottom van div#content even groot is als (of iets groter dan) de hoogte van de div#logo, anders verdwijnt de tekst erachter.
pi_49780105
Helaas, dat werkt niet.. een dergelijke constructie had ik al uitgeprobeerd, maar de browser lijkt niet te snappen dat ik met bottom: 0; de onderkant van de pagina, en niet het venster bedoel

edit: wat overigens heel vaag is is dat als ik de div#logo opneem in de content-div, het logo helemaal bovenaan de pagina terecht komt

edit2: wat overigens een goed alternatief zou zijn is position: fixed, waardoor het logo als het ware meescrollt met de pagina, maar dat wordt niet ondersteund in IE6, en ik ben genoodzaakt ook die browser te ondersteunen..

[ Bericht 25% gewijzigd door Intrepidity op 25-05-2007 23:21:27 ]
pi_49781242
Tja, in alle andere browsers werkt dit. Toch maar een tabel dan?

Hoe lang blijven mensen IE6 ondersteunen trouwens? Die achterlijke browser houdt het web al vijf jaar tegen. Nu IE7 een klein half jaar uit is mag er wat mij betreft best een tweede browser upgrade campaign komen waarbij IE6 met zachte dwang het ravijn in wordt geduwd. Mensen die IE6 blijven gebruiken ondanks de uitleg moeten dan maar met iets minder grafisch genoegen tevreden zijn.
pi_49781775
Totaal mee eens, maar de klant wil dit zo..
Achja ik pruts wel wat.. doe wel gewoon position: fixed, en dan heeft IE6 last van een niet meescrollend logootje, pech..
  zaterdag 26 mei 2007 @ 16:21:34 #224
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_49793806
Hey hallo,

Ik ben maar weer een poging gaan wagen om met div's te gaan werken. Tot nu toe ukt het redelijk, alleen zit ik met een probleem.

Ik had dit bericht ook al eerder geplaatst in een los topic, maar bij deze ook hier... Kom er nog steeds niet uit namelijk.

Op de volgende site http://www.huttenbouw.nl/2007/ zie je een voorbeeld van de site, is Firefox zie dit er goed uit, alleen in IE zit ik met een probleem met de plaatsing van de content div. Ik kom er niet uit wat dit nu moet zijn. Kan iemand mij helpen?

Ik heb trouwens als voorbeeld deze site gebruikt: http://blog.html.it/layoutgala/

Alvast bedankt.
Gretsch fan
pi_49794189
is float: right; een oplossing?

edit: laatmaar, je hebt al float: left; op de menu's staan..
pi_49794526
tvp, ben wel benieuwd naar de oplossing voor het probleem van Leujel
Motorrijden is beter dan sex.Elke bocht een nieuw hoogtepunt.
pi_49794820
Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.
pi_49794927
quote:
Op zaterdag 26 mei 2007 17:05 schreef AnGabhar het volgende:
Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.
Erven de elementen daaronder die positionering toevallig? dan zou het wel logisch zijn
pi_49795105
Positionering wordt niet geërfd.

Maar geheel afgezien daarvan is dit gewoon een bug in IE. Iedere verklaring die poogt op 'logisch' uit te komen is daarom overbodig, we hoeven alleen een würgaround te vinden waardoor het wel werkt .
  zaterdag 26 mei 2007 @ 17:32:51 #230
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_49795440
quote:
Op zaterdag 26 mei 2007 17:05 schreef AnGabhar het volgende:
Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.
mmm dan weet ik niet wat je doet, maar bij mij werkt het niet.... Zit er weer zwaar over te twijfelen of ik niet moet overstappen naar tables e.d.

Maar het zou zo gewoon moeten kunnen lijkt me
Gretsch fan
pi_49796005
quote:
Op zaterdag 26 mei 2007 17:18 schreef AnGabhar het volgende:
Maar geheel afgezien daarvan is dit gewoon een bug in IE. Iedere verklaring die poogt op 'logisch' uit te komen is daarom overbodig, we hoeven alleen een würgaround te vinden waardoor het wel werkt .
IE gebruikt (in quirks mode) een ander box model (content box) dan Firefox (border box). Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past. IE draait hier in quirksmode door het commentaar dat voor de DTD staat. Als je dat weg haalt draait IE ook in strict mode en gebruikt dan ook de content box methode. Het ziet er dan hetzelfde uit als in Firefox.

Zie Box model tweaking.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_49801313
quote:
Op zaterdag 26 mei 2007 17:55 schreef SuperRembo het volgende:
IE gebruikt (in quirks mode) een ander box model (content box) dan Firefox (border box).
Aha, dat had ik nog niet gezien. Dat verklaart het inderdaad.
quote:
Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past.
Nou ja, dat hoeft hij in feite ook niet, als het niet past moet het gewoon over de rand heen lopen. Maar blijkbaar houden de quirks van IE niet op bij box sizing...
  zondag 27 mei 2007 @ 12:09:27 #233
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_49814397
quote:
Op zaterdag 26 mei 2007 17:55 schreef SuperRembo het volgende:

[..]

IE gebruikt (in quirks mode) een ander box model (content box) dan Firefox (border box). Hierdoor wordt de content div te breed waardoor die niet meer naast de andere twee divs past. IE draait hier in quirksmode door het commentaar dat voor de DTD staat. Als je dat weg haalt draait IE ook in strict mode en gebruikt dan ook de content box methode. Het ziet er dan hetzelfde uit als in Firefox.

Zie Box model tweaking.
oe moet deze doctype er dan uit komen te zien?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ik ben ff de weg kwijt...
Gretsch fan
  zondag 27 mei 2007 @ 12:29:34 #234
3677 SuperRembo
Sinds 1998
pi_49814861
Die DTD is op zich goed, maar het moet wel meteen de eerste regel zijn.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zondag 27 mei 2007 @ 12:43:48 #235
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_49815182
quote:
Op zondag 27 mei 2007 12:29 schreef SuperRembo het volgende:
Die DTD is op zich goed, maar het moet wel meteen de eerste regel zijn.
Ahh oke, dat was dus alles.... nu werkt het inderdaad!! Dank je!
Gretsch fan
pi_49884146
Ik zit met het probleem dat ik een semi transparante achtergrond wil, maar de tekst moet wel 100% zichtbaar zijn. Ik heb t nu zo:

Achtergrond v/d tekst:
1
2
3
4
5
6
7
8
9
10
11		#bg
{
background-color:#95cc00;
width:135px;
padding:2px;
padding-left:3px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
margin-top:1px;
}


En voor de tekst zelf:
1
2
3
4
5
6
7
8
9
10		#content
{
color:black;
font-family:arial;
font-size:8pt;
text-align:left;
filter:alpha (opacity=100);
-moz-opacity:.100;
opacity:.100;
}


Maar in ie en ff blijft de tekst 50% transparant :?. Iemand een idee?
  dinsdag 29 mei 2007 @ 12:58:34 #237
12880 CraZaay
prettig gestoord
pi_49884989
De #content erft de transparantie. De eerste optie is de #content niet in maar op de #bg te plaatsen, of (wat ik prefereer, omdat het tagsoup voorkomt) een semi-transparante png als achtergrondafbeelding gebruiken (voor IE6 met de CSS 'filter'-property).
pi_49888331
Ja, ik las t ook al op de meeste sites het beter was om het met een png te doen, dan probeer ik dat maar .
pi_49906933
Ik heb een probleem:



Ik heb een container div (#5), genaamd "container" wat relative als eigenschap heeft en geen height. Wel een min-height en wel 700px, wat meer dan op de screenshot te zien is.

Ik heb een div (#1), genaamd "links" wat absolute is. Hier heb ik wel vaste maten opgegeven. Zo is hij 0px van de bovenkant en linkerkant. Zoals je ziet klopt dat. Deze div is IN de container div geplaatst. Evenals div #2, #3 en #4.

Ik heb de container div een achtergrond kleur gegeven. Hoe kan het zijn dat hij niet mee gaat met de hoogte van de divs erin?

Om het wat duidelijker te maken hier de css code:

Div #5 - container div:
1
2
3
4
5
6
7		#container{
   position:relative;
   margin:auto;
   width:860px;
   top:0px;
   left:0px;
}


Div #1 - left:
1
2
3
4
5
6
7		#left {
   position:absolute;
   top:0px;
   left:0px;
   width:200px;
   background:#000000;
}


Div #2, #3, #4: (allemaal bijna hetzelfde)
1
2
3
4
5
6
7
8		#leftcontent {
   position: absolute;
   left:0px;
   width:200px;
   height:300px;
   top:0px;
   background:#000000;
}


Wie kan me helpen?
  dinsdag 29 mei 2007 @ 23:09:13 #240
104583 cyberstalker
Een krachtig neen!
pi_49909692
quote:
Op dinsdag 29 mei 2007 22:05 schreef Qunix het volgende:
Ik heb een probleem:

[afbeelding]

Ik heb een container div (#5), genaamd "container" wat relative als eigenschap heeft en geen height. Wel een min-height en wel 700px, wat meer dan op de screenshot te zien is.

Ik heb een div (#1), genaamd "links" wat absolute is. Hier heb ik wel vaste maten opgegeven. Zo is hij 0px van de bovenkant en linkerkant. Zoals je ziet klopt dat. Deze div is IN de container div geplaatst. Evenals div #2, #3 en #4.

Ik heb de container div een achtergrond kleur gegeven. Hoe kan het zijn dat hij niet mee gaat met de hoogte van de divs erin?

Om het wat duidelijker te maken hier de css code:

Div #5 - container div:
[ code verwijderd ]

Div #1 - left:
[ code verwijderd ]

Div #2, #3, #4: (allemaal bijna hetzelfde)
[ code verwijderd ]

Wie kan me helpen?
Dat komt doordat alle elementen in je container absoluut gepositioneerd zijn. Absoluut gepositioneerde elementen nemen geen ruimte in. De container gedraagt zich dus alsof er geen elementen in zitten.
Hope for the best, prepare for the worst.
pi_49917637
quote:
Op dinsdag 29 mei 2007 23:09 schreef cyberstalker het volgende:

[..]

Dat komt doordat alle elementen in je container absoluut gepositioneerd zijn. Absoluut gepositioneerde elementen nemen geen ruimte in. De container gedraagt zich dus alsof er geen elementen in zitten.
Als ik hem relative maak gaat het niet goed geloof ik.... Hoe los ik dit dan op?
pi_49956436
Iemand?

Het is alleen in Internet Explorer zo....
pi_49959125
<br clear="all" /> en het is opgelost.
  donderdag 31 mei 2007 @ 11:37:22 #244
104583 cyberstalker
Een krachtig neen!
pi_49959181
quote:
Op donderdag 31 mei 2007 11:35 schreef Qunix het volgende:
<br clear="all" /> en het is opgelost.
Je bedoelt
1<br style="clear: all;">


De / is enkel nodig in XHTML.
Hope for the best, prepare for the worst.
pi_49963384
quote:
Op donderdag 31 mei 2007 11:37 schreef cyberstalker het volgende:

[..]

Je bedoelt
[ code verwijderd ]


De / is enkel nodig in XHTML.
Bedoel ik ja
  donderdag 31 mei 2007 @ 15:41:04 #246
12880 CraZaay
prettig gestoord
pi_49967113
Er is niets gefloat, dus er zijn ook geen floats te clearen volgens mij
pi_49968785
quote:
Op donderdag 31 mei 2007 15:41 schreef CraZaay het volgende:
Er is niets gefloat, dus er zijn ook geen floats te clearen volgens mij
Hij is nu wel goed....
  donderdag 31 mei 2007 @ 22:17:06 #248
12880 CraZaay
prettig gestoord
pi_49981293
Of ik begrijp de clear property verkeerd Heb 'm nog nooit hiervoor gebruikt iig.
  zondag 3 juni 2007 @ 19:34:36 #249
107951 JortK
Immer kwaliteitsposts
pi_50068547
Ik heb een table element in mijn CSS:

1
2
3
4
5
6
7
8		table.login
   {
   width: 300px;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #4d7bd6;
   border-collapse: collapse;
   }


Hiermee zou die de tabel moeten centreren op het scherm (vanwege margins die op auto staan).

Nu doet hij dit in Firefox wel, maar in IE7 niet, heeft iemand enig idee wat er verkeerd gaat?
Overzicht van alle maandcijfers van het fokforum, voor de stats freaks!
Een goede Fok!search met de kracht van Google!
pi_50069143
Doe anders eens gewoon margin:0 auto;. Ik ondervind met oude IE versies ook wel eens problemen als ik left/right/top/bottom declareer bij bijvoorbeeld padding, margin, etc.

Voorbeeld:
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;

werkt niet.

padding:5px; of padding:5px 5px 5px 5px; weer wel.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 6
Index

» digital corner

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