Css-plasseringsproblem i Opera 8

[bosannes]

Trodde endelig jeg hadde blitt kvitt alle bugs i designet på denne siden, men så kom Opera 8. Nå plasseres de boksene som egentlig skal stå til høyre på siden ETTER hovedinnholdet. (Ja - boksene står etter hovedinnholdet i koden, men det går fint i andre nettlesere da boksene er ment å "float"e til høyre). Om jeg plasserer de først vil de bare dytte resten av innholdet lengre ned.

Boksenes css:

.vote {
width: 204px;
float: right;
border: 1px solid #c00;
background: white;
text-align: center;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
font-style: italic;
padding: 3px;
clear: right;
}

Det er ingen andre bokser som har clear, og det hjelper heller ikke å fjerne det på disse.

 

 

Åpne selv med Opera 8, så ser dere hva jeg mener.

 

Tror det var all relevant info (dere kan jo også lese kildekoden selv)

[kroekkete]

Du, det er ikke så lenge siden jeg slet med dette selv, men jeg sitter ikke foran egen maskin akkurat nå, så jeg har ikke lenken til løsningen.

MEN, sjekk denne siden jeg fant da jeg forsøkte å finne løsningen jeg selv valgte. Hjelper den deg?

(Har overhodet ikke sjekket det endelige resultatet av hva den produserer men...)

 

Mvh Primaxx

[bosannes]

Vil ikke bruke noen generator (noe av poenget med siden er at jeg bygger alt fra bunnen av selv).

Jeg kunne jo alltids satt hver av kolonnene i hver sin div, men vil jo helst ikke tilbake til tabell-tiden da

[kroekkete]

Ser at den kjører usedvanlig mange <div>'s for å få til dette.. (Nå mente jeg vel heller ikke at du skulle lage siden din i den generatoren, men heller se på hva den genererte. Kanskje den hadde noen gode løsninger...)

 

Dette er hvordan jeg har gjort det (riktignok med tre kolonner), men det fungerer når jeg skriver HTML i "riktig" rekkefølge:

*	{
margin: o;
padding: o;}
body	{
background-color: #FFFFFF;}

#beholder /*Sentrerer siden*/{
width: 808px;
margin: 10px auto;
margin-top: 6px;
background-color: #000000;
font-family:Arial, Helvetica, Tahoma, Verdana, sans-serif;}

#topp /*---Logoen på toppen---*/ {
overflow: hidden;
clear: none;
width: 808px;
height: 243px;
background: white url(topp20.jpg) no-repeat;}


#innhold{
clear: both;
overflow: hidden;
width: 808px;
background: white url(innhold18.jpg);}

#venstre {
padding-top: 8px;
overflow: hidden;
float: left;
width: 150px;
   margin-left: 19px !important;
   margin-left: 9px;}

#senter {
padding-top: 8px;
float: left;
   width: 407px;
overflow: hidden;
   margin-right: 25px;
   margin-left: 36px;}

#hoyre {
padding-top: 8px;
overflow: hidden;
float: left;
width: 145px;}


#fot {
clear: both;
background: white url(fot18.jpg) no-repeat;
height: 79px;}

 

HTML:

<div id="beholder">

    <div id="topp">
    </div>

    <div id="innhold>
         <div id="venstre">
         </div>
         <div id="senter">
         </div>
         <div id="hoyre>
         </div>
    </div>

    <div id="fot">
    </div>
</div>

Wrapperen jeg kaller "innhold" har jeg med for at alle kolonnene skal strekke seg likt med tanke på bakgrunnsbildet, og er muligens ikke nødvendig på din side. Det bør vel kunne konverteres til to-kolonners layout dette her?

 

Mvh Primaxx

[bosannes]

Jepp. Sånn jeg tenkte på å evt gjøre, med mindre det er noen som har en enklere løsning for Opera 8?

[bosannes]

Jaja... det ble det slik da:

 

.venstre {
width: 570px;
float: left;
}

hQyre {
width: 220px;
float: left;
}