sliter med css layout i mozilla/opera

enden · 16. november 2003

Sliter med galleriet på stormtt siden. Sånn jeg forstår det har jeg skrevet stilarket riktig, men jeg får det ikke til å virke i mozilla/opera. IE viser som vanlig riktg (what a shocker...).

Bruk IE for å få en idè om hvordan det skal være, og fortell meg hva jeg gjør feil i forhold til mozilla/opera

link: http://www.storm-tt.net/portfolio/galleri

stilark:

body { background-image: url('../../img/bakgrunn_prosjekter.jpg');
      background-attachment: scroll;
      background-position: top left;
      background-repeat: no-repeat;

      background-color: white; }
      
.innhold { position: absolute;
          top: 210px;
          left: 225px;
          width: 260px;
          height: 290px;
          overflow: auto;

          padding: 5px;

          border-style: none; }

.venstre { position: relative;
          top: 10px;
          left: 10px;
          width: 100px;
          height: 135px;
          border-style: none; }

.hoyre { position: relative;
        top: 10px;
        left: 30px;
        width: 100px;
        height: 135px;
        border-style: none; }

.tekst { position: absolute;
        top: 80px;
        left: 20px;
        width: 140px;
        height: 350px;
        overflow: auto;
        
        padding: 5px;

        border-style: none; }
        
.tilbake_portfolio { position: absolute;
                    top: 450px;
                    left: 25px;
                    width: 125px;
                    height: 50px;
                    overflow: hidden;
        
                    padding: 5px;

                    border-style: none; }

.neste { position: absolute;
        top: 90px;
        left: 400px;
        width: 75px;
        height: 30px;

        padding: 5px;
        
        border-style: none; }

.forrige { position: absolute;
          top: 90px;
          left: 230px;
          width: 90px;
          height: 25px;

          padding: 5px;

          border-style: none; }

.hjem { position: absolute;
       top: 170px;
       left: 640px;
       width: 50px;
       height: 240px;
       
       padding: 5px;

       border-style: none; }


h2 { font-family: verdana;
    color: black;
    font-size: 0.8em; }

h4 { font-family: verdana;
    color: black;
    font-size: 0.6em;
    font-weight: normal;
    margin: 0px; }

img { border-style: none; }

p { font-family: verdana, serif;
   color: black;
   font-size: 1em; }
   
p:first-letter { font-weight: bold; }
   
h1 { font-family: verdana, serif;
    color: black;
    font-size: 1.1em; }

        
        
a:link { font-family: verdana, serif;
        font-size: 0.9em;
        color: black;
        text-decoration: none;
        border-style: none; }

a:visited { font-family: verdana, serif;
           font-size: 0.9em;
           color: black;
           text-decoration: none;
           border-style: none; }

a:hover { font-family: verdana, serif;
         font-size: 0.9em;
         color: black;
         text-decoration: underline;
         border-style: none; }

a:active { font-family: verdana, serif;
          font-size: 0.9em;
          color: black;
          text-decoration: none;
          border-style: none; }

PT · 16. november 2003

Bare så det er sagt så får jeg horisontal scroll når jeg går inn fra hovedsiden (opera 7.11)

haugsand · 16. november 2003

Jeg har ikke sett mye over koden din, men jeg tipper problemet er at du har width og padding på samme element. Dette klarer IE å tolke annerledes enn mozilla og opera, så feilen ligger sannsynligvis der. Du får forandre strukturen på koden.

Smidt · 16. november 2003

kan ikke se noe som ikke stemmer når jeg åpner siden i Opera (7.22) bortsettfra at jeg får en scroll i midten hvor bildene er.. ellers ikke noe

:-)

enden · 16. november 2003

Jeg har ikke sett mye over koden din, men jeg tipper problemet er at du har width og padding på samme element. Dette klarer IE å tolke annerledes enn mozilla og opera, så feilen ligger sannsynligvis der. Du får forandre strukturen på koden.

width for å si hvor bredt elementet skal være og padding for å lage en liten marg. Er det noe galt med det? Uansett bør jo bildeme vises i full høyde... Utdyp litt hva du mente - tror ikke jeg skjønner deg helt

Hmm, må laste ned 7.22 da. trodde det var den jeg hadde...

Endret 16. november 2003 av enden

enden · 16. november 2003

Det med scrollen lurer jeg litt på: er det sånn at opera og mozilla legger scrollen ved siden av elementet med overflow? IE putter den jo inni... Da er det jo kul umulig å lage design som fungerer i ulike browsere

haugsand · 16. november 2003

Jeg var litt uklar isted. Et eksempel: Et element har bredde på 100px og padding på 10px.

Bredden til elementet er 100px i IE, siden IE beregner at padding er en del av width.

Bredden til elementet i mozilla, opera ++ blir 120px. Disse browserne tolker bredden av elementet som padding+width (og border og margin, men dette trenger vi ikke å bry oss om i dette tilfellet.)

Ble dette klarere? Jeg går utifra at dette er grunnen til den horisontale scrollen din.

enden · 16. november 2003

Det er sikker grunnen til scrollen ja. Trodde du snakket om topic jeg...Det har jeg vel ikke fått svar på enda...

For de som mener det ser bra ut i opera:

Det er ikke sånn det var ment... Bare ta en titt i IE. Er det noen som kan forklare meg hva jeg har gjort feil?

haugsand · 16. november 2003

Sett en bakgrunnsfarge på elementene som er posisjonert, enklere å feilsøke på den måten. Dessuten, det kan være padding+width som er grunnen til feilen med bildene også.

enden · 16. november 2003

da er det gjort, men på http://www.fundingsrud.net/stormtt

Det er ikke noe padding på selve bildene, men på div'en de ligger i. Der er det en bredde på 260px og en padding på 5px

Bildene er delt opp i to klasser: høyre og venstre.

Venstre er relativt palssert med 10px fra top og left med en bredde på 100px, høyre 10px fra top og 30px fra left (venstre er logisk nok elementet til venstre for høyre) og en bredde på 100px.

Totalt tar elementene i innholds-div'en 10 + 100 + 30 + 100 = 240px

Da har jeg gått ut fra at bredden på innhold er 260 - 10 (2*5px padding) = 250px. Jeg skulle da ha 10px ekstra til spacing til høyre for .høyre (tilsvarende venstre)

Endret 16. november 2003 av enden

magikern · 17. november 2003

rydda litt i stylesheetet ditt:

hvis du nå ser på .venstre og .høyre og regner litt på verdiene der vil du nok se ganske klart hvorfor høyre blir pressa ned...

body { 
   background: white url('../../img/bakgrunn_prosjekter.jpg') no-repeat scroll top left;
}
        
h1 {
   font-family: verdana, serif;
   color: black;
   font-size: 1.1em; }

h2 { 
    font-family: verdana;
    color: black;
    font-size: 0.8em; 
}

h3 { 
    font-family: verdana;
    color: black;
    font-size: 0.6em;
    font-weight: normal;
    margin: 0px; 
}

img { 
   border    : none;
}

p {
   font-family: verdana, serif;
   color: black;
   font-size: 1em; 
}
   
p:first-letter { 
   font-weight: bold;
}
 
a:link {
   font-family: verdana, serif;
   font-size: 0.9em;
   color: black;
   text-decoration: none;
   border: none;
}
a:visited {
   font-family: verdana, serif;
   font-size: 0.9em;
   color: black;
   text-decoration: none;
   border: none;
}
a:hover {
   font-family: verdana, serif;
   font-size: 0.9em;
   color: black;
   text-decoration: underline;
   border: none;
}
a:active {
   font-family: verdana, serif;
   font-size: 0.9em;
   color: black;
   text-decoration: none;
   border: none; 
}

/*classes*/
.innhold {
   position: absolute;
   top: 210px;
   left: 225px;
   width: 260px;
   height: 290px;
   overflow: auto;
   padding: 5px;
   border: none;
}

.venstre {
   position: relative;
   top: 10px;
   left: 10px;
   width: 100px;
   height: 135px;
   border: none;
}

.hoyre {
   position: relative;
   top: 10px;
   left: 30px;
   width: 100px;
   height: 135px;
   border: none;
}

.tekst {
   position: absolute;
   top: 80px;
   left: 20px;
   width: 140px;
   height: 350px;
   overflow: auto;  
   padding: 5px;
   border: none;
}
   
.tilbake_portfolio {
   position: absolute;
   top: 450px;
   left: 25px;
   width: 125px;
   height: 50px;
   overflow: hidden;    
   padding: 5px;
   border: none; 
}

.neste { 
   position: absolute;
   top: 90px;
   left: 400px;
   width: 75px;
   height: 30px;
   padding: 5px;  
   border: none;
}

.forrige { 
   position: absolute;
   top: 90px;
   left: 230px;
   width: 90px;
   height: 25px;
   padding: 5px;
   border: none;
}

.hjem {
   position: absolute;
   top: 170px;
   left: 640px;
   width: 50px;
   height: 240px;    
   padding: 5px;
   border: none;
}

et forslag til endring på .venstre og .høyre:

du kan bruke en class til begge boksene kaller den for enkelhetens skyld bare .block nå:


.block {
   position: relative;
   top: 10px;
   margin-left: 10px;
   width: 40%;
   float: left;
   height: 135px;
}

har ikke testet det, men tror det skal fungere, vil vel egentlig anbefalle å bruke div (evt p) istedet for span...

du ser kanskje jeg skrev h3 istedet for h4 i stylesheetet, grunnen til det er ganske enkelt at "headers" bruker for å dele opp sia(ikke fysisk) ikke for å endre skriftstørrelsen, og du hadde bare h1 og h2 fra før av derav kommer h3 etter. (ps: jeg har ikke sett så nøye på html koden og vet ikke hvordan du bruker det der)...

grunnen til at det skal fungere å bruke samme class på de boksene er fordi jeg setter float: left; og en viss bredde, når du da legger boksene inn i html på denne måten:

/*hver boks legger seg på første ledige plassering*/

<div class="block"></div> <-- lengst mot venstre

<div class="block"></div> <-- lengst mot venstre +plassen forrige boks tar opp

<div class="block"></div> <-- hvis du har satt riktige verdier i den omkransende boksen vil de to første ha brukt opp plassen en gang og denne kommer da lengst mot venstre under de ovenstående

<div class="block"></div> <-- lengst mot venstre +plassen forrige boks tar opp

enden · 17. november 2003

Takk takk magikern. Visste det fantes en enklere løsning. Noen ganger låser man seg til en løsning og ser seg blind på den...

Må faktisk tilstå at jeg fortsatt ikke ser feilen i det andre stilarket [gleder meg til rødmesmileyen kommer].

Skal kjøre en test på forslaget ditt når jeg får kommet meg hjem til kjære serveren min :love:

haugsand · 17. november 2003

Er kanskje litt overdrevent bruk av posisjonering her. I blant er det mye bedre å bruke float, noe du kan bruke på de bildene i midten.

enden · 17. november 2003

Er kanskje litt overdrevent bruk av posisjonering her. I blant er det mye bedre å bruke float, noe du kan bruke på de bildene i midten.

Er litt pirkete. Vil ha alt perfekt på min måte Er ikke overstyring et standard tegn på usikkerhert? Første siden min med css basert layout. Kanskje jeg slapper av litt når jeg får litt mer erfaring

Skal teste forslaget til magikern nå

enden · 17. november 2003

Full klaff. Takker og bukker for hjelpen. Tror jeg hadde slitt hardt for å klare den på egen hånd.

haugsand · 17. november 2003

Det første designet med css-basert layout er alltid vanskelig. Husker at jeg også ristet på hodet, og så meg lei på glish.com sine eksempler.

Logg inn

sliter med css layout i mozilla/opera

Anbefalte innlegg

enden

Lenke til kommentar

Videoannonse

PT

Lenke til kommentar

haugsand

Lenke til kommentar

Smidt

Lenke til kommentar

enden

Lenke til kommentar

enden

Lenke til kommentar

haugsand

Lenke til kommentar

enden

Lenke til kommentar

haugsand

Lenke til kommentar

enden

Lenke til kommentar

magikern

Lenke til kommentar

enden

Lenke til kommentar

haugsand

Lenke til kommentar

enden

Lenke til kommentar

enden

Lenke til kommentar

haugsand

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer