[CSS] plaatje deels buiten layer - Softwareontwikkeling

zondag 27 april 2003 17:39

Acties:

Alles van waarde is weerloos

Topicstarter

Ik ben bezig met een site, waarbij ik kaders heb met kruisjes op de hoeken. Nu wilde ik voor de verandering de hele site eens opmaken met div-tags, om zo het gebruik van tables te vermijden. (http://www.student.io.tudelft.nl/io1144677/concept2.html voor een preview)

Ik loop alleen tegen een groot probleem aan in IE6, omdat daar, wanneer ik de breedte van een kader vaststel, de uitstekende punten van het kruisje wegvallen
In Mozilla 1.3 valt dat niet weg, maar is hij niet gepositioneerd zoals ik wil (5 pixels te laag). In Opera doet hij het wel goed.... Wie het weet mag het zeggen! Het gaat om een symmetrisch kruisje van 11x11 pixels, met armen van 5, hier te vinden voor de echte liefhebbers.

code:

<html>
<head>
<title>kruisje in het hoekje :o)</title>
<style type="text/css">
    #kader {
        background:#036;
        border:1px solid #fff;
        padding:0px;
             margin-top:10px;
        margin-left:auto;
        margin-right:auto;
             width:120px;
        color:#fff
                }
    #kruisje {
             margin-top:-5px;
        margin-left:-5px;
        }
</style>
</head><body>
<div id="kader"><div id="kruisje">[img]"kruisje.gif"></div></div>
</body></html[/img]

als ik hier width van kader niet definieer gaat het dus wel goed, maar daar kan ik niets mee, want die moet gewoon 120 zijn....

zondag 27 april 2003 18:13

Acties:

Verwijderd

voeg eens position: relative toe aan je kader

zondag 27 april 2003 18:19

Acties:

Mr_Kite

Alles van waarde is weerloos

Topicstarter

voor het kader maakt dat niets uit, maar als ik dat bij kruisje doe, steekt hij er wel boven uit, maar niet links.... *zucht*

zondag 27 april 2003 18:29

Acties:

crisp

Devver

Pixelated

Mr_Kite schreef op 27 april 2003 @ 18:19:
voor het kader maakt dat niets uit, maar als ik dat bij kruisje doe, steekt hij er wel boven uit, maar niet links.... *zucht*

HTML:

<html>
<head>
<title>kruisje in het hoekje :o)</title>
<style type="text/css">
    #kader {
        background-color:#036;
        border:1px solid #fff;
        padding:0px;
        margin-top:10px;
        margin-left:auto;
        margin-right:auto;
        width:120px;
        color:#fff;
        position: relative;
        }
    #kruisje1 {
        position: absolute;
        top: -5px;
        left: -5px;
        }
    #kruisje2 {
        position: absolute;
        top: -5px;
        right: -5px;
        }
    #kruisje3 {
        position: absolute;
        bottom: -5px;
        left: -5px;
        }
    #kruisje4 {
        position: absolute;
        bottom: -5px;
        right: -5px;
        }
</style>
</head><body>
<div id="kader">
  <div id="kruisje1">[img]"kruisje.gif"></div>
[/img][img]"kruisje.gif"></div>
[/img][img]"kruisje.gif"></div>
[/img][img]"kruisje.gif"></div>
blaat
</div>
</body>
</html[/img]

Intentionally left blank

zondag 27 april 2003 18:42

Acties:

Mr_Kite

Alles van waarde is weerloos

Topicstarter

HELD!

even evaluatie he

Dat ik position absolute bij de kruisjes en relative bij het kader moest gebruiken had ik zojuist uitgevonden, maar begrijp ik nu goed dat margin-bottom niet hetzelfde is/hetzelfde effect heeft als gewoon bottom?

zondag 27 april 2003 18:47

Acties:

crisp

Devver

Pixelated

Mr_Kite schreef op 27 April 2003 @ 18:42:
HELD!

even evaluatie he

Dat ik position absolute bij de kruisjes en relative bij het kader moest gebruiken had ik zojuist uitgevonden, maar begrijp ik nu goed dat margin-bottom niet hetzelfde is/hetzelfde effect heeft als gewoon bottom?

Je wilt ze positioneren binnen je kader, daar zijn top,right,bottom en left voor. Margin is inderdaad iets heel anders; dat geeft aan hoeveel witruimte er om je kruisje moet komen te staan.

Intentionally left blank

zondag 27 april 2003 23:43

Acties:

Mr_Kite

Alles van waarde is weerloos

Topicstarter

Ok nu was dat dus goed, maar nu denk ik dat niet alle browsers het met elkaar eens zijn over of een border bij de grootte van een veld opgeteld moet worden of dat die er binnen zit

code:

<html>
<head>
<title>randen</title>
<style type="text/css">
    body {
        font:   12px/1.2 Verdana, Arial, Helvetica, sans-serif;
        background:#ccc;
        }
    #kaderwit {
        height:122px;
        background-color:#fff;
        border:1px solid #fff;
        padding:0px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        width:122px;
        color:#000;
        position: relative;
        }
</style>
</head><body>
<div id="kaderwit">
[img]"vorm.png">
</div>

</body>
</html[/img]

Het gaat om een plaatje van 120x120px
Ik krijg weer eens in iedere browser een ander resultaat;
Mozilla 1.3: rechts en onder 2 pixels teveel (i.e. border hoort niet bij/binnen vlak?)
Opera 7: perfect!
IE6: onder 2 pixels teveel, niet weg te krijgen (in tegenstelling tot bij Mozilla maar dan is het weer niet goed in Opera)

verder wordt het in IE niet gecentreerd (nu nog geen probleem)

Ik hoop dat ik niet aan een browsercheck moet!

zondag 27 april 2003 23:50

Acties:

crisp

Devver

Pixelated

Mr_Kite schreef op 27 April 2003 @ 23:43:
Ok nu was dat dus goed, maar nu denk ik dat niet alle browsers het met elkaar eens zijn over of een border bij de grootte van een veld opgeteld moet worden of dat die er binnen zit
[knip]
Het gaat om een plaatje van 120x120px
Ik krijg weer eens in iedere browser een ander resultaat;
Mozilla 1.3: rechts en onder 2 pixels teveel (i.e. border hoort niet bij/binnen vlak?)
Opera 7: perfect!
IE6: onder 2 pixels teveel, niet weg te krijgen (in tegenstelling tot bij Mozilla maar dan is het weer niet goed in Opera)

verder wordt het in IE niet gecentreerd (nu nog geen probleem)

Ik hoop dat ik niet aan een browsercheck moet!

Dat zijn inderdaad verschillen mbt de interpretatie van het boxmodel. Mozilla volgt w3c, IE houdt er zijn eigen model op na, en Opera zweeft daar een beetje tussenin.
Voor deze 3 browsers is het overigens met CSS op te lossen, check bijvoorbeeld deze pagina maar: http://www.xs4all.nl/~ppk/css2tests/box.html

Intentionally left blank

maandag 28 april 2003 10:16

Acties:

Verwijderd

Ik heb ook een probleem. Ik heb een div in een td gegooid en de div deze class meegegven:

.layer1
{
width: 171px;
color:#fff;
top: 0px;
left: -140px;
position: relative;

}

Nu denk je misshien wat een onzin, maar de reden is dat ik een transparante flash movie heb gemaakt die over 2 tabel cellen moeten vallen.
zie:

http://www.welnet.nl/prevbrugge/index-opzet.html

Nu krijg ik alleen die td niet smal waar het vogeltje instaat.

Iemand ideeën ?

maandag 28 april 2003 13:16

Acties:

MAZZA

Barbie is er weer!

Ik snap je probleem niet echt...