[CSS] Waarom werkt dit niet? - Softwareontwikkeling

woensdag 10 december 2003 17:03

Acties:

Verwijderd

Topicstarter

Waarom zet hij de image en data box nou niet naast elkaar maar onder elkaar?

http://aldi.xs4all.nl/~koen/got.html

code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #box { 
    padding: 10px;
    border: 1px;
    border-style: solid;
    }

    #image {
    position: relative;
    top: 0px;
    left: 0px;
    
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }

    #data {
    position: relative;
    top: 0px;
    left: 110px;
    
    background-color: red;
    width: 400px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }
    </style>
</head>
<body>

<div id="model">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
</div>

</body>
</html>

woensdag 10 december 2003 17:06

Acties:

TeeDee

CQB 241

relative in je css?

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 10 december 2003 17:06

Acties:

RupS

Omdat er position relative staat. Probeer eens absolute.

woensdag 10 december 2003 17:06

Acties:

bakakaizoku

ja

Verwijderd schreef op 10 december 2003 @ 17:03:
Waarom zet hij de image en data box nou niet naast elkaar maar onder elkaar?

http://aldi.xs4all.nl/~koen/got.html

code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #box { 
    padding: 10px;
    border: 1px;
    border-style: solid;
    }

    #image {
    position: relative;
    top: 0px;
    left: 0px;
    
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }

    #data {
    position: relative;
    top: 0px;
    left: 110px;
    
    background-color: red;
    width: 400px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }
    </style>
</head>
<body>

<div id="model">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
</div>

</body>
</html>

float: left; in de css toevoegen
of clear: both; / left; /right (1 vd. 3, geldt ook voor bovenstaand)

rm -rf ~/.signature

woensdag 10 december 2003 17:07

Acties:

Verwijderd

verander eens bij je style data position. (regel 26)

allemaal op 0 zetten nu staat er 110 tussen wat het uitlijnt naar rechts!

Suc6!

[ Voor 25% gewijzigd door Verwijderd op 10-12-2003 17:08 ]

woensdag 10 december 2003 17:08

Acties:

Verwijderd

Cascading Stylesheet:

#image {
  position: relative;
  float:left;
  top: 0px;
  left: 0px;

#data {
  position: relative;
  float:left;
  top: 0px;
  left: 10px;
}

edit:

*djkappi vraagt zich af waarom-ie zo traag is vandaag*

[ Voor 19% gewijzigd door Verwijderd op 10-12-2003 17:09 ]

woensdag 10 december 2003 17:10

Acties:

Hahn

Verwijderd schreef op 10 december 2003 @ 17:07:
verander eens bij je style data position. (regel 26)

allemaal op 0 zetten nu staat er 110 tussen wat het uitlijnt naar rechts!

Suc6!

Dat is de afstand vanaf links, als je die op 0 zet staat het 'data' blokje links, maar dat wil hij dus niet

relative in absolute veranderen lost het probleem op, maar ik denk toch niet dat het de ideale oplossing is, alhoewel absolute wel zo makkelijk is

The devil is in the details.

woensdag 10 december 2003 17:11

Acties:

Verwijderd

Sorry ik dacht juist precies onder elkaar.... Shame on me!

woensdag 10 december 2003 17:12

Acties:

crisp

Devver

Pixelated

div's zijn blocklevel elementen, dus je moet ze uit de reguliere flow halen wil je ze naast elkaar kunnen positioneren. Dus oftewel absoluut positioneren, of er floats van maken.

Intentionally left blank

woensdag 10 december 2003 17:40

Acties:

Skaah

Cascading Stylesheet:

1	div {display: in-line;}

Geloof ik!?!

woensdag 10 december 2003 17:42

Acties:

crisp

Devver

Pixelated

Skaah schreef op 10 december 2003 @ 17:40:
Cascading Stylesheet:
1
div {display: in-line;}
Geloof ik!?!

display:inline, maar dat is natuurlijk een beetje nonsens. Als je een anoniem inline element wilt hebben kan je net zo goed een span gebruiken. Het nadeel van inline elementen is weer dat je ze geen dimensies kan geven.

Intentionally left blank

woensdag 10 december 2003 18:32

Acties:

Verwijderd

Topicstarter

Ik heb het misschien niet helemaal goed uitgelegd. Het gaat niet om 1 stuk, maar een hele lijst van die box div's onder elkaar. Als ik position absolut doe gaat dat niet werken. Ook krijg ik hele vreemde resultaten met die float.

Ik heb de html geupdate met wat ik precies bedoel.

Zo is hij nu:
http://aldi.xs4all.nl/~koen/got.html

Zo wil ik hem hebben:
Afbeeldingslocatie: http://aldi.xs4all.nl/~koen/got.gif

Afbeeldingslocatie: http://aldi.xs4all.nl/~koen/got.gif

Ik heb er hier twee getekend, maar het moeten er dus ook 50 kunnen zijn.

woensdag 10 december 2003 18:39

Acties:

Eärendil

Als eens gaat stoeien met float:left en clear:left (voor info zie de CSS-specs), kom je er vast wel uit.

edit:
Zo bijv. (ziet er alleen nog niet hetzelfde uit in Mozilla en IE, marges zijn een beetje anders):

PHP:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">

    #box {
    background-color: gray;
    margin: 10px;
    padding: 10px;
    border: 1px;
    border-style: solid;
    }

    #image {
    position: relative;
    float:left;
    top: 0px;
    left: 0px;

    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }

    #data {
    top: 0px;
    margin-left: 110px;

    background-color: red;
    width: 400px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }
    </style>
</head>
<body>

<div id="box">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
</div>

<div id="box">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
</div>

<div id="box">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
</div>
</body>
</html>

[ Voor 104% gewijzigd door Eärendil op 10-12-2003 18:46 ]

woensdag 10 december 2003 23:02

Acties:

Verwijderd

PHP:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <title>Test</title><style type="text/css">

    #box { 
    background-color: gray;
    margin: 10px;
    padding: 10px;
    border: 1px;
    border-style: solid;
    height: 100px;
    }

    #image {
    position: relative;
    float: left;
    top: 0px;
    left: 0px;
    
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }

    #data {
    position: relative;
    top: 0px;
    left: 10px;
    text-align: left;
    float: left;
    
    background-color: red;
    width: 400px;
    height: 100px;
    border: 1px;
    border-style: solid;
    }
    </style></head>
<body>

<div id="box">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>

    <br style="clear: both" />
</div>

<div id="box">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
    <br style="clear: both" />

</div>

<div id="box">
    <div id="image">
        image
    </div>
    <div id="data">
        data
    </div>
    <br style="clear: both" />
</div>
</body>
</html>

volgens mij zoiets dan ?
Ik moest overigens de height van #box defineren anders zag ie er in IE niet uit zoals bedoeld, wat in Firebird niet het geval was.

[ Voor 20% gewijzigd door Verwijderd op 10-12-2003 23:03 ]

woensdag 10 december 2003 23:20

Acties:

Verwijderd

Eärendil schreef op 10 december 2003 @ 18:39:

heb ff gecheckt.. dit is denk ik wel de oplossing die gezocht werd.. @Eärendil: excuus voor mijn foutieve commentaar (ook maar ff gestript

)