[css] Parent div stretchen naar absoluut child - Softwareontwikkeling

maandag 14 augustus 2006 12:13

Acties:

Verwijderd

Topicstarter

Hallo mensen,

ik kom er weer eens niet uit met css, mijn parent div stretched niet mee met mijn child, dat komt omdat het child absoluut gepositioneerd is, maar ik heb geen flauw idee hoe ik dat zou moeten aanpakken.

even voor de duidelijkheid een vbtje:

Cascading Stylesheet:

<style type="text/css" title="defaultStyle">
.parent {
    border:dashed 1px #000;
    background-color:#FFFFFF;
    position:relative;
}
.child  {
    position:absolute;
    left:0px;
    top:0px;
    border:1px #000 solid;
    background-color:#000066;
    width:500px;
}
</style>

HTML:

<body>
<div class="parent">
lorem ipsum etc
<div class="child">
Content content Content content Content content Content
content Content content Content content Content content
 Content content Content 
    </div>
</div>
</body>

maandag 14 augustus 2006 12:53

Acties:

XWB

Devver

Wat wil je juist bereiken want het is niet echt duidelijk uit dat voorbeeld? Die parent div moet evenbreed zijn als je child div?

March of the Eagles

maandag 14 augustus 2006 13:31

Acties:

Verwijderd

Topicstarter

nee in de lengte, content word later met php toegevoegd dus hoe meer 'nieuws' berichten hoe langer de container moet worden, maar omdat de content div absoluut gepositioneert is stretched de container niet mee..

Ziet voorbeeld

[ Voor 4% gewijzigd door Verwijderd op 14-08-2006 13:31 ]

maandag 14 augustus 2006 13:35

Acties:

marko77

als je een element absoluut positioneert heeft deze geen invloed meer op zijn parent.

Waarom moet de div absolute zijn? Het is een stuk makkelijker als je dat niet doet in dit geval.

Mijn rig

maandag 14 augustus 2006 13:38

Acties:

XWB

Devver

Vervang die position: absolute eens door display: inline.

March of the Eagles

maandag 14 augustus 2006 14:12

Acties:

Verwijderd

Topicstarter

Ok, nou de div is absoluut, omdat ik op mn index pagina binnen de container div 3 colommen moet uitlijnen, een links , een rechts, en een in het midden. En dat lukte niet met float, en met absolute wel.

even ter info, dit is mn eerste niet table page dus vandaar de misschien wat rare acties.

ik zal hier even een code voorbeeld geven van mijn site zodat het misschien wat duidelijker wordt. Dit klopt niet helemaal met de werkelijkheid maar, het is een beetje onhandig om de hele page hier te posten.

Cascading Stylesheet:

<style type="text/css" title="defaultStyle">
html,body   {
    text-align:center;
    background-image:url(img/bg.jpg);
    background-repeat:repeat;
    height:100%;
}
div.container   {
    text-align:left;
    width:960px;
    margin:auto;
    border:1px solid #000;
    background-color:#FF6600;
    position:relative;
    min-height: 96%; /* For Modern Browsers */
    height: auto !important; /* For Modern Browsers */
    height: 96%; /* For IE */
}
div.header  {
    background-image:url(img/header.jpg);
    height:251px;
}
div.main    {
    position:relative;
    top:-20px;
    height:auto;
}
div.content {
  background-color: #f60;
  padding: 5px;
  position:relative;
  z-index:101;
  top:0px;
  height:auto;
  border-top:1px solid #000;
  margin-left:0px;
}
div.middle  {
    padding:0px;
    position:absolute;
    top:-4px;
    width:440px;
    margin-left:240px;
    margin-right:225px;
    border:0px;
}
div.colleft {
    border:1px solid #000;
    background-color:#FFFF99;
    position:absolute;
    left:0px;
    top:0px;
    width:220px;
}
div.colright    {
    border:1px solid #000;
    background-color:#FFFF99;
    position:absolute;
    right:0px;
    top:0px;
    width:220px;
}
div.colright , div.colleft, div.middle  {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    padding:5px;
}
div.colright , div.colleft  {
    margin-right:5px;
}
div.page    {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    height:auto;
}
div.newswrap    {
    border:1px solid #000;
    background:#FFFF99;
    padding:5px;
}
</style>

HTML:

<body>
<div class="container">
    <div class="header">
        header
    </div>
    <div class="main">  
        <div class="menu">
        </div>
        <div class="container">
            <div class="page">
                <div class="colleft">
                links
                </div>
                <div class="colright">
                rechts
                </div>
                <div class="middle">
                    <div class="newswrap">
                        nieuws item
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

maandag 14 augustus 2006 14:16

Acties:

mithras

• Waarom heb je zoveel div's genest?
• Waarom heb je 2x een container?

Kan je het niet veel makkelijk zo doen:

HTML:

<div id="container">
   <div id="header"></div>
   <div id="menu"></div>
   <div id="leftCollum" style="float:left;"></div>
   <div id="content" style="float:left;"></div>
   <div id="rightCollum" style="float:right;"></div>
   <br style="clear:both">
</div>

maandag 14 augustus 2006 14:34

Acties:

Verwijderd

Topicstarter

Omdat dat nodig is om mijn menu goed te laten zien, met tabs. dat komt niet naarvoren uit het vb. ik dacht ik hou het simpel.

Maar niemand een idee dus?

[ Voor 10% gewijzigd door Verwijderd op 15-08-2006 08:24 ]