[Html] divs en floaten - Softwareontwikkeling

maandag 12 juli 2004 15:32

Acties:

Topicstarter

Okay, ik ben hier dus erg nieuw mee, tot nu toe alles gedaan in tabellen, maar ik moet wel overstappen. Het idee is dat ik op een site een achtergrond wil die bestaat uit 4 kleurvlakken, waarvan het midden altijd het midden is.

Een beetje kloten met CSS leverde me de volgende code:

code:

BODY { 
    background-color: #555858;
    margin: 0;
    padding: 0;
}

#container {
    left: 0;
    top: 0;
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position:absolute;
}

.topleft { 
    background-color: #353B3B;
    width: 50%;
    height: 50%;
    float: left;
    clear: left;
    position:relative;
}

.topright { 
    background-color: #3C3F3E;
    width: 50%;
    height: 50%;
    float: right;
    clear: right;
    position:relative;
}

.bottomleft { 
    background-color: #555858;
    width: 50%;
    height: 50%;
    float: left;
    clear: left;
    position:relative;
}

.bottomright { 
    background-color: #636261;
    width: 50%;
    height: 50%;
    clear: right;
    float: right;
    position:relative;
}

waarvan ik twijfel of het netjes is. Nu werkt het in Firefox prima met het volgende stukje html:

code:

    <div id="container">

      <div class="topleft">topleft
      </div>

      <div class="topright">topright
      </div>

      <div class="bottomleft">bottomleft
      </div>

      <div class="bottomright">bottomright
      </div>

    </div>

Maaaarrrrrrrrr..... in IE krijg ik 2 scrollbalken voor zo ongeveer 1 pixel in de breedte en 5 in de hoogte... waarom!?!? 100% van de pagina delen in 2x 50% levert toch gewoon 100% ruimte? Waar komen die extra pixels ineens vandaan?

maandag 12 juli 2004 15:41

Acties:

André

Analytics dude

Het rare is dat ik op een hoge resolutie op mijn 21" geen scrollbalken heb. Als ik dan het scherm kleiner maak zie ik 1 voor 1 de beide scrollbalken verschijnen.

Hmm, maak ik het scherm dan nog weer 1px kleiner zijn ze er niet, weer een px kleiner zijn ze er weer wel, lijkt dus een bug te zijn. Ik heb het ook ergens op 1 van mijn sites: een afbeelding die rechts is uitgelijnd maar die @ random 0 of 1 pixel van de kant af staat.

maandag 12 juli 2004 15:50

Acties:

Verwijderd

dat probleem heb ik ook wel eens gehad.. ik denk dat het komt door die 50%.. want wat is 50% van 1px??? dan zal je browser dus meoten afronden...

wat ik toen heb gedaan is een javascriptje schrijven die afhankelijk van de breedte van je scherm de content on-the-fly aanpast.. misschien geen nette oplossing, maar het werkte wel

dinsdag 13 juli 2004 15:07

Acties:

jsiegmund

Topicstarter

Heb niet echt zin om nu daarvoor Javascript te moeten leren... los het wel op door er 49% neer te zetten en de overige content op een creatieve manier op te vullen

Tenzij iemand anders nog een idee heeft hierover.

dinsdag 13 juli 2004 18:31

Acties:

T-MOB

Een ander ideetje

:

code:

<body>
 <div id="container">

   <div id="top">
     topleft
     <div id="topright">
     topright
     </div>
   </div>

   <div id="bottom">
    bottomleft
     <div id="bottomright">
    bottomright 
    </div>
   </div>

  </div>
</body>

Oftewel in plaats van 2 divs van 50% naast elkaar zetten plaats je één div van 50% in een div van 100% breed. Voor de hoogte biedt dit nog geen oplossing. Voor de breedte wel...

Regeren is vooruitschuiven

dinsdag 13 juli 2004 20:36

Acties:

Verwijderd

als je dit bij de css zet denk ik dat het wel goed werkt, bij firefox wordt de border namelijk niet meegerekent met de hoogte van je div en bij IE wel.

code:

div {
   box-sizing:          border-box;
   -moz-box-sizing:     border-box;
}

[ Voor 6% gewijzigd door Verwijderd op 13-07-2004 20:37 ]