Toon posts:

[CSS] Positioning Help

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hallo,

Ik ben pas bezig CSS een beetje te leren. Nu begrijp ik positioning al een beetje maar ik weet niet precies hoe het nou werkt met parent element en een child element... Is er ergens een site die goed uitleg geeft over hoe dat nou precies werkt wanneer je van een child element spreekt en wanneer van een parent..

Ik geef misschien een beetje vaag uitleg maar ik weet even niet hoe ik het beter moet uitleggen..

Alvast bedankt! _/-\o_

Verwijderd

een child zit in een parent da's alles. een parent van de een kan child zijn van een ander element, maar daar heb je eigenlijk niet direct heel veel aan (behalve in hanglooz z'n topic hier ergens). op www.w3schools.com staat een goeie css tutor

absolute positoning is tov de parent als zijn position property is geset, anders tov het document geloof ik. relatief is tov de plaats waar ie normaal gesproken geplaatst zou worden

[ Voor 30% gewijzigd door Verwijderd op 29-04-2003 18:42 ]


Verwijderd

Topicstarter
Ja maar kan een parent ook 2 Childs hebben? Dus ik heb bijvoorbeeld 1 box met daarin 2 boxes. Wat ik nu alleen maar kan doen is een parent met een child daarin en een child in een child ik kan dus geen box naast de child maken in de parent die ik als eerste heb. Want de 2de child ziet de 1ste child als parent als je begrijpt wat ik bedoel.

Dat is een beetje het onderdeel dat ik niet snap.

Verwijderd

ja dat kan (dan heten ze siblings overigens):
code:
1
2
3
4
<div id="parentDiv">
  <div id="child1" />
  <div id="child2" />
</div>


maar wat heeft dit met css te maken?

[ Voor 31% gewijzigd door Verwijderd op 29-04-2003 19:12 ]


Verwijderd

Topicstarter
Ik dacht dat dit alleen mogelijk was met CSS heb me nooit echt verdiept in tabelen enzo begin maar gelijk met css :)

Maar ik heb nu dit gemaakt http://www.sheepz.com/css/pos.htm precies zoals je zei maar ik krijg nog steeds het 2de child in de eerste child terwijl ik hem er gewoon naast wil..

hier is de code :

<code>

<html>
<head>
<title>Gewoon troep</title>
<style type="text/css">
<!--
#parentDiv {
border:solid 1px black;
position:relative;
padding:10px;
top:1%;
width:700px;
height:400px;
background-color:lightblue;
z-index:2;
}

#childDiv {
padding:2px;
position:relative;
border:solid 1px black;
width:300px;
height:380px;
background-color:lightgreen;
z-index:3;
}
#childDiv2 {
width:20px;
height:380px;
position:relative;
border:solid 1px black;
background-color:lightpink;
z-index:5;
}
//-->
</style>
</head>
<body>
<center>
<div id="parentDiv"></center>
<div id="childDiv" />
<div id="childDiv2" />
<p></p>
</div>
</div>
</div>
</body>
</html>

</code>

Verwijderd

hier klopt htmltechnisch qua markup (:P) al weinig van

gooi die center eruit als je met css aan de slag gaat (die is ook de oorzaak van je probleem denk ik, nesting klopt niet)

ow en volgens mij pikt html 4 geen <div /> maar moet het <div></div> zijn (mij fout gok ik, zit teveel in de xml)
voor derest lijkt dit te kloppen z-indexen kunnen er ook wel uit btw en een top: 1% klinkt een beetje raar, maar als je dat wilt...

Verwijderd

Topicstarter
Haha ja je kan wel zien dat ik het net een beetje begin te "leren" vandaar de dat het er rommelig uitziet zolang ik het maar begrijp :) maar ik ga het proberen.

alvast thx :P

  • Rickets
  • Registratie: Augustus 2001
  • Niet online

Rickets

Finger and a shift

HTML:
1
<div id="childDiv" />


Je opent een div en je sluit hem gelijk, en verderop sluit je hem weer? Dat kan niet de bedoeling zijn lijkt me :)

Probeer het eens zo (centrering is met css) :)

HTML:
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
<html>
<head>
<title>Gewoon troep</title>
<style type="text/css">
    #parentDiv{
        border:solid 1px black; 
        position:relative;
        padding:10px;
        top:1%;
        width:700px;
        height:400px;
        left: 50%; /* Centreer-truc */
        margin-left: -350px; /* Centreer-truc, - ( width gedeeld door 2 )*/
        background-color:lightblue;
    }

    #childDiv {
        padding:2px;
        position:absolute; /* absolute ipv relative */
        border:solid 1px black;
        width:300px;
        height:380px;
        background-color:lightgreen;
    }

    #childDiv2 {
        width:20px;
        height:380px;
        left: 350px;
        position:absolute; /* absolute ipv relative */
        border:solid 1px black;
        background-color:lightpink;
}
</style>
</head>
<body>

<div id="parentDiv">
    <div id="childDiv">Child 1</div>
    <div id="childDiv2">Child 2</div>
</div>
</body>
</html>

[ Voor 23% gewijzigd door Rickets op 29-04-2003 19:37 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.


Verwijderd

Topicstarter
Dat van Rickets heeft geholpen! bedankt daarvoor :)

Ik heb nu dit gemaakt : http://www.sheepz.com/css/sheepz.htm

maar ik wil nu in het witte kunnen schrijven en dat de tekst vanzelf om het grijze vakje heenvouwt zeg maar. maar zodra ik in het parent schrijf krijg ik hallo voor het oranje balkje zodat alles in de war raakt :'(

Verwijderd

Dat komt omdat je #boven position absolute meegeeft. Probeer voor #boven eens zoiets:

#boven{
margin-left:0px;
margin-right:0px;
/*en de rest van je stijldeclaraties*/
}
Voor #menu werkt float:left goed voor wat je wil, maar volgens mij moet je clear:right wissen in je stijldeclaratie. Position: absolute mag in ieder geval weg.

  • Rickets
  • Registratie: Augustus 2001
  • Niet online

Rickets

Finger and a shift

De absolute positionering van #menu en #boven heb je in dit geval niet nodig. Haal die maar weg en kijk maar wat er gebeurt ;)

offtopic:
Iets anders: je title staat buiten je head...


[edit] Iemand was me voor :)

[ Voor 8% gewijzigd door Rickets op 30-04-2003 01:40 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.


  • Grijze Vos
  • Registratie: December 2002
  • Laatst online: 21-02 23:50
Dit begint wel een erg 'we nemen je bij de hand' topic teworden. W3schools is een goede site, verder heb je www.w3.org, waar alle exacte specificaties staan over elke officiele HTML en CSS standaard. Probeer zelf wat door te 'klooien', en post hier de specifieke problemen waar je echt niet doorkomt.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info


Verwijderd

Topicstarter
Dat ben ik nu dus ook al aan het doen Grijze Vos

Verwijderd

Topicstarter
Maar Martijn en Rickets bedankt voor de uitleg zonder dat had ik niet verder kunnen gaan ik moest ook bij menu absolute postitioning weghalen trouwens...
:D

  • Rickets
  • Registratie: Augustus 2001
  • Niet online

Rickets

Finger and a shift

Verwijderd schreef op 30 April 2003 @ 14:54:
Maar Martijn en Rickets bedankt voor de uitleg zonder dat had ik niet verder kunnen gaan ik moest ook bij menu absolute postitioning weghalen trouwens...
:D
Dat zei ik Gamma ;)

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.


Verwijderd

Topicstarter
woooops ik hou verder mijn mond dicht :)
Pagina: 1