[css] Margin-top runtime aanpassen

[Verwijderd]

Ik denk dat ik mijn probleem niet anders op kan lossen dan met javascript. Toch hoop ik nog op een andere oplossing. Ik heb een div die variabel is in hoogte. In deze div moet een andere div komen maar die moet altijd onderaan staan. Ik kan hem echter niet absoluut positioneren (als ik dat ga doen kan mij tekst niet meer netjes om deze div floaten.

Nu ziet mijn (relevante) css er zo uit

code:

#ret3{
    clear:both;
    background-image:url(images/ret3.gif);
    margin-right:205px;
    width:151px;
    height:42px;
    float:right;

}

Margin-top zou het probleem (denk ik) op kunnen lossen maar omdat de parent div variabel in hoogte is wordt dat lastig. Ik heb gezocht hoe je dat met javscript zou kunnen doen maar een goed voorbeeld op google en hier heb ik niet gevonden.

[Pkunk]

Volgens mij is het toch net ff wat handiger als je wat meer info geeft. Een voorbeeld online zou het fijnst zijn.

[JorzoR]

Ben al een tijdje niet meer met dat bezig, maar is dat niet op te lossen met 'position' in CSS... ?
of begrijp ik je vraag verkeerd?

[BasieP]

JorzoR schreef op vrijdag 31 augustus 2007 @ 09:53:
Ben al een tijdje niet meer met dat bezig, maar is dat niet op te lossen met 'position' in CSS... ?
of begrijp ik je vraag verkeerd?

Als je ze TS leest dan lees je dat hij niet absoluut wil positioneren. (wat logisch is)


@TS:
even voor de goede orde

Ik kan hem echter niet absoluut positioneren (als ik dat ga doen kan mij tekst niet meer netjes om deze div floaten.

tekst float sowieso niet om divjes heen tenzij je het divje zelf floating maakt.

floating divjes kan je niet positioneren, die 'floaten' met je content mee (tekst in jouw geval)

dus wat wil je nu?
tekst die om een divje float? of gewoon een 'footer' in je dynamische hoogte divje?

[Verwijderd]

Timlog schreef op vrijdag 31 augustus 2007 @ 09:52:
Volgens mij is het toch net ff wat handiger als je wat meer info geeft. Een voorbeeld online zou het fijnst zijn.

Dat heb ik helaas niet maar zal de html erbij zetten:

code:

<div id="content">
  <div id="rightcontent"></div>
  <div id="rightbot"></div>
  <div id="ret3"></div>
  <p>Hier komt de content tekst</p>
 </div>

En meer css:

code:

#content {
    position:relative;
    overflow:hidden;
    width: 728px;
    height:400px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image:url(images/bgcontent.gif);
    left: 20%;
    }

#rightcontent {
    background-image:url(images/rightmid.gif);
    width:178px;
    height:200px;
    margin-right:50px;
    float:right;
}

#rightbot {
    clear:both;
    background-image:url(images/rightbot.gif);
    margin-right:50px;
    width:178px;
    height:17px;
    float:right;
}

#ret3{
    clear:both;
    background-image:url(images/ret3.gif);
    margin-right:205px;
    width:151px;
    height:42px;
    float:right;
    bottom:0px;
}

rightcontent en rightbot staan goed. ret3 komt nu precies onder rightbot. Dat wil ik niet, hij moet helemaal onderaan #content komen. Als ik de position van ret3 naar absoute zet dan begint mijn tekst raar te doen. De bedoeling is dat die netjes tegen de div's aan float.

[gvanh]

Waarschijnlijk heb je het al geprobeerd ... maar wat gebeurt er als je je ret3 div niet meer float maar toch absoluut positioneert en dan vervolgens bottom: 0px; en right:0px;?

Dan gaat je tekst waarschijnlijk achter je divje doorlopen he? Dat is dus ook weer vervelend.

Als je die tweede div van de bovenkant heb en dan die ret3 ergens daaronder. Moet de tekst die daar tussen zit dan helemaal doorlopen naar rechts? Of moet er altijd een marge aan de rechterkant zitten? Anders zou je namelijk een margin-bottom kunnen geven aan de tweede div aan de rechterkant. Een grote margin-bottom ... zeg 300px. Dan blijft die rechterkant altijd "gereserveerd" en wordt de absoluut gepositioneerde div er altijd keurig 'overheen' gezet.

Zoals gezegd werkt dat niet als je tekst wil laten doorlopen helemaal tot aan de rechterkant wanneer er geen blokje aan de rechterkant zit.

[Verwijderd]

gvanh schreef op vrijdag 31 augustus 2007 @ 10:25:
Waarschijnlijk heb je het al geprobeerd ... maar wat gebeurt er als je je ret3 div niet meer float maar toch absoluut positioneert en dan vervolgens bottom: 0px; en right:0px;?

Dan gaat je tekst waarschijnlijk achter je divje doorlopen he? Dat is dus ook weer vervelend.

Dan zakt mijn hele tekst naar onderen. Onder de bovenste div-jes.

Als je die tweede div van de bovenkant heb en dan die ret3 ergens daaronder. Moet de tekst die daar tussen zit dan helemaal doorlopen naar rechts? Of moet er altijd een marge aan de rechterkant zitten?

Dan moet die helemaal dooropen naar rechts..... ;-)

[ Voor 20% gewijzigd door Verwijderd op 31-08-2007 10:31 ]

[BasieP]

wat je kan doen is een margin-bottom op je content divje zetten die evenveel is als de hoogte van je #ret3 divje. En vervolgens je divje absoluut aan de bottom positioneren.

Nadeel is dat je tekst er dan niet meer omheen loopt (zoals bij floating) Echter de tekst valt er iig niet achter.

edit:
ow en wtf wil je eigenlijk met je #content doen?
overflow:hidden;
lijkt me niet zo'n leuke oplossing voor een dynamische site namelijk.

[ Voor 20% gewijzigd door BasieP op 31-08-2007 10:42 ]

[Verwijderd]

BasieP schreef op vrijdag 31 augustus 2007 @ 10:40:

edit:
ow en wtf wil je eigenlijk met je #content doen?
overflow:hidden;
lijkt me niet zo'n leuke oplossing voor een dynamische site namelijk.

Klopt, foutje. daar had ik mee getest maar moest er nog uit.....

wat je kan doen is een margin-bottom op je content divje zetten die evenveel is als de hoogte van je #ret3 divje. En vervolgens je divje absoluut aan de bottom positioneren.

Nadeel is dat je tekst er dan niet meer omheen loopt (zoals bij floating) Echter de tekst valt er iig niet achter.

Dat zou wel heel erg jammer zijn want dat is juist wat dit ontwerp zo bijzonder maakt. Is Javascript dan misschien een oplossing voor mijn probleem. De hoogte van de content div uitvragen en opbasis daarvan de top-margin van mijn ret3 zetten?

[ Voor 45% gewijzigd door Verwijderd op 31-08-2007 11:34 ]

[BasieP]

Verwijderd schreef op vrijdag 31 augustus 2007 @ 11:18:
Dat zou wel heel erg jammer zijn want dat is juist wat dit ontwerp zo bijzonder maakt. Is Javascript dan misschien een oplossing voor mijn probleem. De hoogte van de content div uitvragen en opbasis daarvan de top-margin van mijn ret3 zetten?

nee, omdat margins van floating elementen niet gemeten worden vanuit de container maar vanuit het bovenliggende element (<p> in jouw geval)
Je stelt dus de ruimte in die tussen de tekst en je divje in komt te zitten.

[Verwijderd]

Dat is jammer, het ziet er dus echt naar uit dat ik de content div een vaste hoogte moet gaan geven...