[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.
  zondag 3 juni 2007 @ 20:02:35 #251
107951 JortK
Immer kwaliteitsposts
pi_50069337
quote:
Op zondag 3 juni 2007 19:56 schreef Tuvai.net het volgende:
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. :)
Ik heb m nu zo:

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


Doet het ook niet :N
Overzicht van alle maandcijfers van het fokforum, voor de stats freaks!
Een goede Fok!search met de kracht van Google!
  zondag 3 juni 2007 @ 20:17:54 #252
46275 Castor
Obey the rules, miss the fun
pi_50069763
quote:
Op zondag 3 juni 2007 19:34 schreef JortK het volgende:
Ik heb een table element in mijn CSS:
[ code verwijderd ]

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?
Vreemd, bij mij doet dit het wel. Zowel in IE7 als FireFox 2...
Castor's Photostream op Flickr
  zondag 3 juni 2007 @ 20:20:29 #253
46275 Castor
Obey the rules, miss the fun
pi_50069842
Laat anders je volledige css en html eens zien, wellicht zit de fout ergens anders?
Castor's Photostream op Flickr
pi_50074112
Ook dit is in IE afhankelijk van standaard- vs. compatibiliteitsmodus. Gebruik je de juiste doctype?
http://www.quirksmode.org/css/quirksmode.html
pi_50074788
over dat table verhaal

je moet het parent element
position:relative;
meegeven

en

margin:0 auto

is ongeldig, aantal een einheid noemen dus bv 0px

(heb niet alles gelezen, excuses als het er al stond)
Zon, zee en strandvakanties
pi_50075363
quote:
Op zondag 3 juni 2007 22:53 schreef ErikN het volgende:
margin:0 auto

is ongeldig, aantal een einheid noemen dus bv 0px

(heb niet alles gelezen, excuses als het er al stond)
0 is geldig. 0 is 0. Of het nou 0 px, em, %, pt, of wat dan ook is.
pi_50165406
2501ste view

Maar gelijk met een vraagje.



Je ziet dat de select door het overlappende gedeelte heen komt.. Hoe kan ik dit voorkomen?

Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  woensdag 6 juni 2007 @ 15:44:17 #258
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50166623
wellicht een z-index aan het element waar die select in zit?
laat eens wat code zien
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_50166899
quote:
Op woensdag 6 juni 2007 15:14 schreef Chandler het volgende:
[...]
Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
Gaat 't alleen fout in IE6 of ouder?

In dat geval kan je het (voor IE5.5 en IE6) "oplossen" door er een iframe achter te plakken (zie voorbeeldje)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_50167610
Er zit een z-index aan het select element. met -1

En inderdaad gaat het fout in IE6 kon FF niet testen omdat ik daar het overvallende element niet werkend ik kreeg, waarom weet ik nog niet

Maar een iframe is helaas niet voor mij de juiste oplossing
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50167972
quote:
Op woensdag 6 juni 2007 16:08 schreef Chandler het volgende:
Maar een iframe is helaas niet voor mij de juiste oplossing
Waarom is dat geen oplossing?

(De iframe wordt niet gebruikt om iets in te zetten, het wordt alleen gebruikt om die comboboxen af te dekken. Een vreemde constructie, maar het werkt echt)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_50170184
Omdat ik niet precies weet hoe ik het moet inbouwen

Tevens kan ik zelf wel leven met het idee dat het er gewoon even doorheen te zien is...

Als je wilt kan ik wel een voorbeeld online zetten (via PB dan)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50177223
Het wordt eens tijd de tabellen te vervangen, hoe gemakkelijk ze ook zijn.

1
2
3
4		   <div class="message">
      <span class="leftcolumn">Username:</span>
      <span class="rightcolumn">Bla</span>
   </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		   .leftcolumn{
      width: 50%;
      text-align: left;
   }
   .rightcolumn{
      width: 50%;
      text-align: right;
   }
   .message{
      width:             281px;
      
      margin-bottom:       2px;
      padding-left:      4px;
      
      font-family:       verdana;
      font-size:          11px;
      color:             #000000;
      line-height:       18px;
   
      border:          1px #000000 solid;
      background-color:    #F5F5F5;   
   }


Helaas blijven de twee spans angstig dicht bij elkaar.... iemand tips?

[ Bericht 12% gewijzigd door Geqxon op 06-06-2007 20:49:04 ]
  woensdag 6 juni 2007 @ 21:25:11 #264
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50179093
je wilt die recht span echt helemaal rechts uitgelijnd in je div hebben?
Dan moet je niet text-align gebruiken, maar een float:right
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_50179133
Het nadeel van floaten, is dat als de hoofdtekst leeg is, de complete div 2 pixels hoog wordt, en de gefloate tekst maar wat rondzweeft. Geen float dus
  woensdag 6 juni 2007 @ 21:32:05 #266
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50179384
dan moet je met een padding of margin left gaan werken met de rechter vrees ik
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
  woensdag 6 juni 2007 @ 21:32:26 #267
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50179402
of je div een vaste hoogte geven
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_50179478
Is het niet mogelijk om het zonder "gekke" truuks zo simpel als een tabel te maken?
  woensdag 6 juni 2007 @ 22:41:51 #269
12880 CraZaay
prettig gestoord
pi_50182785
Zo te zien is het gewoon tabulaire data. Waarom zou je dan geen tabel gebruiken?
pi_50182935
Het is geen tabulaire data, het is een inlog / registreer box. Dus:


1
2
3
4
5
6
7		+----------+----------+
| Username:| [______] |
+----------+----------+
| Password:| [xxxxxx] |
+----------+----------+
|    [ Inloggen ]     |
+----------+----------+


En in web 2.0 zijn tabellen voor niet tabulaire data verboden, dus zoek ik een manier hoe ik het anders kan doen :)
pi_50183336
Wat is er 'gek' aan een float div te gebruiken en die een hoogte mee te geven? Gebruik ik zelf ook vrij vaak.
pi_50183485
Omdat ik juist geen vaste hoogte wil hebben, maar ik het dynamisch wil hebben. Zodat ik het over mijn complete website kan toepassen, alles met dezelfde klasse
  woensdag 6 juni 2007 @ 23:41:27 #273
12880 CraZaay
prettig gestoord
pi_50185170
Het is een formulier, dus <label>'s gebruiken? Maakt het toegankelijker en is goed te stylen.

Heeft overigens niets met "Web 2.0" te maken, maar met semantiek.
pi_50187034
quote:
Op woensdag 6 juni 2007 21:26 schreef Geqxon het volgende:
Het nadeel van floaten, is dat als de hoofdtekst leeg is, de complete div 2 pixels hoog wordt, en de gefloate tekst maar wat rondzweeft. Geen float dus
Als je de div waar je float inzit overflow: auto; meegeeft zou dat opgelost moeten zijn. Tenminste als ik je goed begrijp (dat de parent div onder de float 'inklapt'). Als dat niet werkt kun je onder de div met float ook gewoon een div met clear: both; zetten (zonder float), maar dat kan extra ruimte opleveren.
pi_50209234
Even iets anders m.b.t. CSS. Je kunt ook je tabel headers locken.

Ik heb meerdere sites gevonden maar kan er niet achter komen hoe ik dit kan inbouwen in mijn eigen tabel. Dit omdat ik graag de hoogte van het scherm wil aanhouden.

Ik heb al geprobeerd met een vaste hoogte (tbody) met z-index en dergelijke zaken maar helaas het wil niet lukken,..

http://web.tampabay.rr.co(...)cked-column-csv.html hier heb ik wat mee gespeeld maar kom er echt niet meer uit..

Anyone die mij kan vertellen wat ik moet toevoegen aan

thead, tbody en eventueel table?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50209714
Je kunt je TBODY een hoogte en overflow: scroll; meegeven, maar hier werkt het alleen in Firefox, niet in Safari. Dus ik denk dat het in IE ook niet gaat werken.

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		   <table>
      <thead>
         <tr>
            <th>Kolom1</th>
            <th>Kolom2</th>
         </tr>
      </thead>
      <tbody style="max-height: 5em; height: 5em; overflow: scroll;">
         <tr>
            <td>Rij 1</td>
            <td>Rij 1</td>
         </tr>
         <tr>
            <td>Rij 2</td>
            <td>Rij 2</td>
         </tr>
         <tr>
            <td>Rij 3</td>
            <td>Rij 3</td>
         </tr>
         <tr>
            <td>Rij 4</td>
            <td>Rij 4</td>
         </tr>
         <tr>
            <td>Rij 5</td>
            <td>Rij 5</td>
         </tr>
      </tbody>
   </table>


Die max-height heb ik erin gezet omdat ik meen dat IE daar wel iets mee doet
pi_50211275
Nee, het werkt idd niet. Vind het zelf raar... Jammer dat er niet een stap voor stap tutorial over te vinden is

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		<div style="overflow:auto; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%">
 <thead>
  <tr style="position:relative; top:expression(this.offsetParent.scrollTop);background-color:#dddddd;">
   <th nowrap>Header A</th>
   <th nowrap>Header B</th>
   <th nowrap>Header C</th>
  </tr>
 </thead>
 <tbody>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr>
  <tr><td>a</td><td>bbbbbbb</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
 </tbody>
</table>
</div>


Dit werkt weer wel maar weer niet in FF

[ Bericht 87% gewijzigd door Chandler op 07-06-2007 19:54:50 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 7 juni 2007 @ 20:24:23 #278
12880 CraZaay
prettig gestoord
pi_50213360
Wat wil je nou bereiken? Dat de tbody een scrollbar krijgt?
pi_50214004
Heb het al klaar..

Beiden de top veranderd met position; absolute...

[ Bericht 81% gewijzigd door Chandler op 08-06-2007 11:34:57 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50231834
Geqxon heeft weer eens een probleempje .


Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
pi_50232078
Ja tuurlijk is dat mogelijk maar schets je voorbeeld eens
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50232157
Ik snap je probleem niet.
Steam - SC2
  vrijdag 8 juni 2007 @ 11:53:33 #283
46794 Berkery
Fat bastard
pi_50232650
quote:
Op vrijdag 8 juni 2007 11:39 schreef super-muffin het volgende:
Ik snap je probleem niet.
Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.

tvp
No Dukes of Hazzard in the classroom
pi_50232716
quote:
Op vrijdag 8 juni 2007 11:29 schreef Geqxon het volgende:
Geqxon heeft weer eens een probleempje .


Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.
pi_50233128
quote:
Op vrijdag 8 juni 2007 11:53 schreef Berkery het volgende:

[..]

Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.

tvp
Ja dat wist ik, maar je kan ze toch gewoon floaten?
Steam - SC2
pi_50234124
quote:
Op vrijdag 8 juni 2007 11:55 schreef Bigs het volgende:

[..]

Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.
Bedankt, dat was hem! Weer een stukje verder met de website
  vrijdag 8 juni 2007 @ 17:34:03 #287
73232 De_Hertog
Aut bibat, aut abeat
pi_50244999
Is het mogelijk om een link te maken die niet aan de standaard link instelling voldoet? Die dus geen css opmaak mee krijgt, zonder daar een aparte class voor te maken?
Mary had a little lamb
Then Mary had dessert
pi_50245351
quote:
Op vrijdag 8 juni 2007 17:34 schreef De_Hertog het volgende:
Is het mogelijk om een link te maken die niet aan de standaard link instelling voldoet? Die dus geen css opmaak mee krijgt, zonder daar een aparte class voor te maken?
Gewoon een style attribuut meegeven? Bv.

1<a style="text-decoration: none; color: black; cursor: default;" href="#">bla</a>
  vrijdag 8 juni 2007 @ 17:54:54 #289
73232 De_Hertog
Aut bibat, aut abeat
pi_50245731
quote:
Op vrijdag 8 juni 2007 17:44 schreef Bigs het volgende:

[..]

Gewoon een style attribuut meegeven? Bv.
[ code verwijderd ]
Klinkt als een heel goed idee. Behalve dan dat het CMS systeem hier het hele attribuut lekker weg smijt. Grr. Maar toch bedankt voor het meedenken Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.
Mary had a little lamb
Then Mary had dessert
pi_50246899
quote:
Op vrijdag 8 juni 2007 17:54 schreef De_Hertog het volgende:

[..]

Klinkt als een heel goed idee. Behalve dan dat het CMS systeem hier het hele attribuut lekker weg smijt. Grr. Maar toch bedankt voor het meedenken ;) Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.
Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :

1
2
3		#boekhouding a{
text-decoration: none
}


:)
  vrijdag 8 juni 2007 @ 19:21:47 #291
73232 De_Hertog
Aut bibat, aut abeat
pi_50248904
quote:
Op vrijdag 8 juni 2007 18:29 schreef Geqxon het volgende:

[..]

Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :
[ code verwijderd ]

Oh, als ik bij de css kom is het geen probleem, maar daar moet ik toestemming voor hebben. Maar maakt niet uit, dat ga ik morgen regelen, dan is het zo opgelost. Ik probeerde het eerst te omzeilen, maar ja, als het cms niet mee werkt..
Mary had a little lamb
Then Mary had dessert
pi_50408141
Ik zit met een klein vaag iets.



Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....

Stylesheet
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		.comment {
    padding: 0; 
    margin-bottom: 20px; 
    height: 75px; 
    background-color: #d0c3ac; 
    border: 1px solid #c8b99e; 
    width; 90%;
}

.comment .big {
    position: absolute;
    top: 0;
    color: #d8cfbd;
    font-family: "Times New Roman", Times, serif;
    font-size: 77px;
    z-index: 10;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    width: 100%;
    text-align: right;
}

.comment .body {
    padding: 5px;
    z-index: 10;
}

.comment .date   { 
    font-style: italic;
    font-size: 10px;
    display: inline;
    font-weight: bold;
}

.comment .author {
    font-size: 13px;
    padding: 0 0 2px 0;
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

div {
    position: relative;
}


:Y)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50451839
Situatie: Ik heb een div met tekst erin. Links er rechts IN de div een lang en smal menu, die via absolute waarde ingesteld is.


Probleem: Als de tekst kleiner dan het menu, dan wordt de div uiteraard even groot als de tekst, de menu's boren zich dan dwars door de complete website heen.

Gewenst: De div wil ik het liefst zo maken dat hij altijd even lang als de menu's is, en als de tekst langer is dat hij de net zo lang als de tekst is.

Kan dit? Dus een clear:both voor een float zeg maar
pi_50453280
Waarom absoluut? De de ene div links en de andere rechts floaten kan toch ook?
En omdat jij het bent:
http://www.danielpunt.nl/geqxon.html

Als ik je tenminste goed begrepen heb.
Steam - SC2
pi_50454158
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
pi_50455154
quote:
Op donderdag 14 juni 2007 16:19 schreef Geqxon het volgende:
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Dit is al de tweede keer dat floaten de oplossing voor je probleem is. Als ik jou was zou ik me eens wat meer verdiepen in de mogelijkheden van floats
pi_50456060
quote:
Op donderdag 14 juni 2007 16:19 schreef Geqxon het volgende:
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Dat hebben we allemaal wel eens. En meestal zijn het dan ook van die lullige oplossingen, dan denk je gewoon te moeilijk.
Voor de rest wat Bigs zegt dus
Steam - SC2
pi_50456693
quote:
Op dinsdag 20 maart 2007 13:12 schreef Geqxon het volgende:
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*
Dat is *volgens mij* om bandbreedte uit te sparen. Door de indents, quotes en doctype ed weg te laten scheelt dat heel wat. Zeker voor een pagina als de Google startpagina die zo'n beetje overal als startpagina staat.
Steam - SC2
pi_50468598
quote:
Op donderdag 14 juni 2007 16:41 schreef Bigs het volgende:

[..]

Dit is al de tweede keer dat floaten de oplossing voor je probleem is. Als ik jou was zou ik me eens wat meer verdiepen in de mogelijkheden van floats
Nu is dit wel een heel ander voorbeeld .

Mijn probleem zat hem er meer in dat ik een statische pagina dynamisch wou maken, en door de bergen code dacht ik gewoon even niet fris
  vrijdag 15 juni 2007 @ 08:56:50 #300
12880 CraZaay
prettig gestoord
pi_50476532
quote:
Op donderdag 14 juni 2007 17:20 schreef super-muffin het volgende:

[..]

Dat is *volgens mij* om bandbreedte uit te sparen. Door de indents, quotes en doctype ed weg te laten scheelt dat heel wat. Zeker voor een pagina als de Google startpagina die zo'n beetje overal als startpagina staat.
Gedeeltelijk waar, maar semantisch gezien klopt er ook gewoon geen hol van en de html voldoet op tig punten niet aan de standaarden
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 6
Index

» digital corner

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