[CSS]Vaste ruimte tussen schalende div's - Softwareontwikkeling

vrijdag 9 januari 2004 13:36

Acties:

Verwijderd

Topicstarter

Ben hier nu een tijdje mee aan het knoeien, maar misschien dat een van jullie mij kan helpen, ben op zoek naar een manier om tussen de vier div's op de voorbeeldpagina een ruimte van 10 pixels te creeren, dus die ruimte moet hetzelfde blijven als je het venster uitrekt.

Ik vroeg mij af of het uberhaupt mogelijk is zonder extra divs toe te voegen, op dit ogenblik zit ik een beetje vast.

Oh ja geen IE gebruiken, want die snapt er helemaal niks van.

linkje

vrijdag 9 januari 2004 13:37

Acties:

dominic

will code for food

div.style.margin ?

Download my music on SoundCloud

vrijdag 9 januari 2004 13:42

Acties:

André

Analytics dude

Verwijderd schreef op 09 januari 2004 @ 13:36:
Ben hier nu een tijdje mee aan het knoeien, maar misschien dat een van jullie mij kan helpen, ben op zoek naar een manier om tussen de vier div's op de voorbeeldpagina een ruimte van 10 pixels te creeren, dus die ruimte moet hetzelfde blijven als je het venster uitrekt.

Ik vroeg mij af of het uberhaupt mogelijk is zonder extra divs toe te voegen, op dit ogenblik zit ik een beetje vast.

Oh ja geen IE gebruiken, want die snapt er helemaal niks van.

linkje

Ik wil niet vervelend doen maar in IE6 doet de pagina het niet goed.
En ik zou met margins werken.

vrijdag 9 januari 2004 13:47

Acties:

Verwijderd

André schreef op 09 januari 2004 @ 13:42:
[...]

Ik wil niet vervelend doen maar in IE6 doet de pagina het niet goed.
En ik zou met margins werken.

Dat zegt ie ook

geen IE gebruiken...

vrijdag 9 januari 2004 14:12

Acties:

Verwijderd

Topicstarter

Dominic bedankt voor je reactie, maar ik zou liever een pure CSS oplossing gebruiken. En Andre ik concentreer me voorlopig even op browsers die het wel snappen, IE is een latere zorg.

De oplossing zal idd iets met margin worden (mooi zou zjin margin-left:50%+5px; voor de div die linksboven staat).

Ik kan wel weer 4 extra Divs plaatsen in de bestaande divs, maar ik zou het liever oplossen met het huidig aantal divs.

vrijdag 9 januari 2004 14:13

Acties:

André

Analytics dude

Verwijderd schreef op 09 januari 2004 @ 13:47:
[...]

Dat zegt ie ook
[...]

LEZEN Andre LEZEN

vrijdag 9 januari 2004 15:48

Acties:

Verwijderd

Kan niet. Wellicht ooit met ::outside oid. Is nog een reden om box-sizing niet te gebruiken aangezien het nog gewoon niet af is. 'margin-box' oid bestaat bijvoorbeeld niet, maar het is natuurlijk de vraag of dat soort dingen op zo'n manier opgelost moeten worden of gewoon met een ander box-model.

Bovenstaande is gewoon een mening, oplossing voor dit probleem anders dan de markup veranderen is er niet.

vrijdag 9 januari 2004 16:02

Acties:

Verwijderd

Topicstarter

Het ging mij er om een goede oplossing te bedenken, om i.p.v. een tabel (waarin dit uber-easy is) een div oplossing te bedenken, dat het nu niet kan is gewoon een tekortkoming van CSS.

Het is jammer, dan maar met 4 extra divs.

vrijdag 9 januari 2004 16:04

Acties:

Verwijderd

Klopt, ben ik volledig met je eens. Maar je kunt in CSS ook gewoon display:table; gebruiken hoor ;-). Dus wel structuur behouden, maar met tabellen opmaken.

vrijdag 9 januari 2004 16:51

Acties:

Verwijderd

in de cel type je: style="padding-left:10px"

Lijkt mij makkelijk zat, maar ik weet niet of dit CSS is

vrijdag 9 januari 2004 17:01

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 09 januari 2004 @ 16:51:
in de cel type je: style="padding-left:10px"

Lijkt mij makkelijk zat, maar ik weet niet of dit CSS is

padding is van toepassing op de content binnen het item waarop je het toepast en dus geen optie.

enniewees, heb een nieuwe versie online gezet, het werkt nu, maar is niet zoals ik het bedacht had

vrijdag 9 januari 2004 17:03

Acties:

Verwijderd

Ik heb nu zoiets, het werkt eigenlijk alleen helemaal goed in Mozilla, maar dat vind je geloof ik geen probleem

PHP:

<html><head>
<title>scaling</title>
<style type="text/css">
body, html {
    height:100%;
    overflow:hidden;
}
div {
    position:absolute;
}   
#contdiv {
    left:25px;
    top:25px;
    right:25px;
    bottom:25px;
    width:auto;
    height:auto;
    border:8px solid;
-moz-border-top-colors: red transparent;
-moz-border-bottom-colors: red transparent;
-moz-border-left-colors: red transparent;
-moz-border-right-colors: red transparent;
}
#leftsq-top {
    right:50%;
    bottom:50%;
    width:50%;
    height:50%;
margin-bottom:5px;
margin-right:5px;
    border:1px #0000ff dotted;
}
#rightsq-top {
    left:50%;
    bottom:50%;
    width:50%;
    height:50%;
margin-bottom:5px;
margin-left:5px;
    border:1px #0000ff dotted;
}
#leftsq-bottom {
    right:50%;
    top:50%;
    width:50%;
    height:50%;
    border:1px #0000ff dotted;
margin-top:5px;
margin-right:5px;
}
#rightsq-bottom {
    left:50%;
    top:50%;
    width:50%;
    height:50%;
    border:1px #0000ff dotted;
margin-top:5px;
margin-left:5px;
}
</style></head>

<body>
<div id="contdiv">
<div id="leftsq-top">left-top</div>
<div id="rightsq-top">right-top</div>
<div id="leftsq-bottom">left-bottom</div>
<div id="rightsq-bottom">right-bottom</div>
</div>
</body></html>

edit:

Wooah, met het fix_css bookmarkletje werkt die opeens ook heel aardig in ie.
http://home.hccnet.nl/m.wargers/csshover/bookmarklet.htm

[ Voor 16% gewijzigd door Verwijderd op 09-01-2004 17:06 ]

vrijdag 9 januari 2004 17:11

Acties:

Verwijderd

Topicstarter

Nice one!! saved the day

dank je wel $_/-\o_$

Zal die van jou gebruiken.