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

zaterdag 26 mei 2007 @ 16:52:02 #226

Cageon

tvp, ben wel benieuwd naar de oplossing voor het probleem van Leujel

Motorrijden is beter dan sex.Elke bocht een nieuw hoogtepunt.

zaterdag 26 mei 2007 @ 17:05:26 #227

AnGabhar

Geen idee waarom, maar IE doet het ineens goed als je een div met position:absolute om de div#content heen wikkelt.

zaterdag 26 mei 2007 @ 17:10:25 #228

Intrepidity

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

zaterdag 26 mei 2007 @ 17:18:34 #229

AnGabhar

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

Leujel

Citroen C2 1.4i VTR SensoDrive

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

zaterdag 26 mei 2007 @ 17:55:07 #231

SuperRembo

Sinds 1998

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.

zaterdag 26 mei 2007 @ 20:58:09 #232

AnGabhar

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

Leujel

Citroen C2 1.4i VTR SensoDrive

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

SuperRembo

Sinds 1998

Die DTD is op zich goed, maar het moet wel meteen de eerste regel zijn.

zondag 27 mei 2007 @ 12:43:48 #235

Leujel

Citroen C2 1.4i VTR SensoDrive

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

dinsdag 29 mei 2007 @ 12:34:17 #236

naittun1

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

CraZaay

prettig gestoord

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

dinsdag 29 mei 2007 @ 14:31:38 #238

naittun1

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

.

dinsdag 29 mei 2007 @ 22:05:56 #239

Qunix

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

cyberstalker

Een krachtig neen!

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.

woensdag 30 mei 2007 @ 10:04:09 #241

Qunix

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?

donderdag 31 mei 2007 @ 10:09:03 #242

Qunix

Iemand?

Het is alleen in Internet Explorer zo....

donderdag 31 mei 2007 @ 11:35:40 #243

Qunix

<br clear="all" /> en het is opgelost.

donderdag 31 mei 2007 @ 11:37:22 #244

cyberstalker

Een krachtig neen!

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.

donderdag 31 mei 2007 @ 13:46:15 #245

Qunix

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

CraZaay

prettig gestoord

Er is niets gefloat, dus er zijn ook geen floats te clearen volgens mij

donderdag 31 mei 2007 @ 16:27:36 #247

Qunix

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

CraZaay

prettig gestoord

Of ik begrijp de clear property verkeerd

Heb 'm nog nooit hiervoor gebruikt iig.

zondag 3 juni 2007 @ 19:34:36 #249

JortK

Immer kwaliteitsposts

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!

zondag 3 juni 2007 @ 19:56:27 #250

Tuvai.net

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.

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

[CSS] voor dummies - deel 6

» digital corner

» digital corner