[CSS] Position relative en scrollbar - Softwareontwikkeling

dinsdag 3 augustus 2004 12:07

Acties:

Verwijderd

Topicstarter

Dag allemaal,

Ik heb het volgende probleem: Ik heb een pagina waarin binnen een container div een drietal kolom div's staan. Boven de twee linker kolommen hangt een float (logo) dmv de z-index. Om de kolommen toch op hun plaats te houden heb ik de kolommen met position:relative en een negatieve waarde op hun plek 'onder' de float gezet. Nu denken FFox en IE beiden dat de pagina langer is dan hij is, namelijk precies de hoogte van de float komt onderaan de pagina te hangen terwijl daar niets meer staat. Met als resultaat een ongewenste actieve vert. scrollbar in IE en een totaal ongwenste in FFox. scrollbar uitzetten is geen optie want mensen met minder dan 1024x moeten wel kunnen scrollen uiteraard...

Als iemand een oplossing hiervoor weet ben ik die eeuwig dankbaar!

alvast bedankt

dinsdag 3 augustus 2004 12:47

Acties:

André

Analytics dude

Heb je iets online staan, ik kan me er moeilijk wat bij voorstellen, volgens mij kan dit veel netter.

dinsdag 3 augustus 2004 13:04

Acties:

RwD

kloonikoon

hoe groot is die "container div"

Laat in ieder geval een voorbeeld met code zien....

[ Voor 51% gewijzigd door RwD op 03-08-2004 13:06 ]

dinsdag 3 augustus 2004 13:12

Acties:

Verwijderd

Topicstarter

Een testje staat online Het groene gifje met tekst is dus de float (140px hoog) en je ziet danm onderaan de pagina 'white'space onstaan welko ook zo'n 140 px hoog is. In de div's heb ik even hun respectievelijke namen gezet: contentheader, contentleft, contentcenter & contentright.

css staat hier:

Alvast bedankt!!

ps, als er een nettere manier is om die float boven de kolommen te krijgen hou ik me ook zeker aanbevolen...

[ Voor 13% gewijzigd door Verwijderd op 08-08-2005 10:45 ]

dinsdag 3 augustus 2004 13:14

Acties:

André

Analytics dude

Als je die Test image absoluut positioneerd ben je ook al een heel eind volgens mij.

dinsdag 3 augustus 2004 13:19

Acties:

Verwijderd

Topicstarter

André,

Als ik dat doe verschijnt het testplaatje toch niet op dezelfde plek bij browsers met lagere/hogere resoluties? Bijvoorbeeld bij 800x600 mist de site de sidebars links en rechts en dus verschuift het testimage ook naar rechts. Tenminste, dat gebeurde toen ik 't absolute probeerde...

Kan dit ondervangen worden met position:absolute; ??

Alvast bedankt!

dinsdag 3 augustus 2004 13:34

Acties:

André

Analytics dude

Haal de float uit je #contentheader.

[ Voor 55% gewijzigd door André op 03-08-2004 13:36 ]

dinsdag 3 augustus 2004 13:46

Acties:

Verwijderd

Topicstarter

Dat lukt niet, als de float uit de div contenheader wordt gehaald explodeert de hele lay-out. Alle kolommen breken dan uit de container #frame

dinsdag 3 augustus 2004 13:55

Acties:

André

Analytics dude

Bij mij is het op deze manier goed (ik kan alleen in IE testen):

HTML:

<html>
  <head>
    <title>test6</title>
    <style>
      body {
        text-align:center;
        background:#8080ff;
        margin:0px;
      }

      #frame {
        position: relative;
        width:779px;
        height:499px;
        text-align:left;
      }
        
      #contentleft {
        position:relative;
        top:0px;
        width:160px;
        height:499px;
        float:left;
        background:#fff;
      }

      #contentcenter {
        position:relative;
        top:0px;
        width:470px;
        height:499px;
        float:left;
        background:#c0c0ff;
      }

      #contentright {
        position:relative;
        top:0px;
        width:149px;
        height:499px;
        float:left;
        background:#fff;
      }

      #contentheader {
        position:relative;
        top:0px;
        width:779px;
        height:100px;
        padding:0px;
        background:#fff;
      }

      #logofloat  {
        position:absolute;
        top:10px;
        left:10px;
        width:300px;
        height:140px;
        z-index:2;
      }
    </style>
  </head>
  <body>
    <div id="frame">
      <div id="logofloat">[img]"bla.gif"[/img]</div>
      <div id="contentheader">contentheader</div>
      <div id="contentleft">contentleft</div>
      <div id="contentcenter">contentcenter</div>
      <div id="contentright">contentright</div>
      <br clear="all" />
    </div>
  </body>
</html>

dinsdag 3 augustus 2004 14:01

Acties:

RwD

kloonikoon

kweet niet of bovenstaande manier werkt (niet getest), maar dit kan ook nog (maar is soms niet wenselijk). Het houdt echter wel je frame op de ingestelde grootte...
.

Cascading Stylesheet:

#frame {
    width:779px;
    height:499px;
    margin-right:auto;
    margin-left:auto;
    margin-top:0px;
    padding:0px;
    text-align:left;
    overflow: hidden;
    }

[ Voor 10% gewijzigd door RwD op 03-08-2004 14:03 ]

dinsdag 3 augustus 2004 14:04

Acties:

Verwijderd

Topicstarter

Ik testte 'm eerst in Firefox, vandaar. En daar centreert ie de container niet meer. In IE ziet het er inderdaad helemaal goed uit.

Moet ik alleen nog wat voor FFox bedenken.

Bedankt!!

dinsdag 3 augustus 2004 19:37

Acties:

Verwijderd

Topicstarter

Met de overflow:hidden is ie uiteindelijk gelukt..

André en RwD, beiden bedankt voor jullie tijd en advies!!