HTML-eksperter noen?

[ingeborg]

Hei der, jeg har et lite problem når det gjelder en kode som ikke funker i opera eller safari, men bare i Internet Explorer. Driver å koder på macen min, men det blir ikke som det skal.. Her er koden;

/* structure */
.container {
font-size: 1.2em;
background: url(img/bakgrunn.gif) repeat-y;
margin: 0 auto;
width: 644px;
height: 100%;
border: 12px solid #0e0e0e;
}

Den i FEIT, grønn skrift er det som bestemmer litt selv... (: Takk på forhånd! PS: koden ligger i min CSS-fil om det har noe å bety. Hvis noen som vil hjelpe trenger mer info, si i fra!

[martin Administrator]

Kode: Merk alt

.container {
   font-size: 1.2em;
   margin: 0 auto;
   width: 644px;
   height: 100%;
   border: 12px solid #0e0e0e;
}


Du trenger denne lille snutten:

Kode: Merk alt

* html .container {
   background: url(img/bakgrunn.gif) repeat-y;
}


Her har du full oversikt over mulige css filtere/hacks:
http://centricle.com/ref/css/filters/

[ingeborg]

Takk for hjelp, men det er fortsatt like svart... nå er det svart både på IE og Opera jeg undres...

[martin Administrator]

Hjelper deg gjerne videre om du kan utdype litt nærmere hva problemet dreier seg om

* html [klasse]/[id] {
background: #000;
}

Stjerne + html + klasse eller ID skal bare leses av IE.
I tillegg må man selvfølgelig legge tilsvarende og stil på klassen uten stjerne + html.

[ingeborg]

Nei det fungerte ikke.. jeg vet ikke hva som er galt. Hjelper det om du sjekker css-en min og siden og ser om det er noe du kan finne ut? hadde vert kjempegreit! Du skjønner, jeg vil at bakgrunnen min (en tynn, hvit en) skal vise slik at den henger fast i topplogoen, nå ser layouten liksom ikke helt ferdig ut..

min URL: http://ugaa.no/layout/css.css
Siden: http://ugaa.no/layout

[kolby]

Jeg hadde startet med å kodet HTMLen slik at den Validerte. Da vil plutselig CSSen fungere bedre.

[martin Administrator]

Her er en liten del av smørbrødlisten:

<p> tagger strødd utover, ingen avsluttningstagger </p>
<img> tagg uten alt=""
<img> tagg uten "" rundt src
<img> tagg ikke avsluttet med />
<a> tagg uten "" rundt mailto
løse </u> uten noen <u> start

og mye mer.

Kolby har helt rett når han anbefaler deg å validere koden din (HTML)
Linken har du her: http://validator.w3.org/check?uri=http% ... o%2Flayout

Retter du de 31 feilene i HTML'en, vil CSS'en straks oppføre seg bedre. Uten at jeg garanterer at problemet blir borte. Rett og slett fordi HTML'en må være riktig før CSS'en kan fikses.

CSS'en validerer bortsett fra dette: font-decoration, som ikke er noen deklarasjon som finnes, såvidt jeg vet.

Lykke til med rettelsene

[fredrikhl]

Er ingen CSS-ekspert men trodde det ble gjort slik:

Kode: Merk alt

.container {
font-size: 1.2em;
background: url("img/bakgrunn.gif");
background-repeat : repeat-y;        /*slik*/
margin: 0 auto;
width: 644px;
height: 100%;
border: 12px solid #0e0e0e;
}

[martin Administrator]

Det går fint å skrive slik:

Kode: Merk alt

background: url(bildemappe/bilde.gif) repeat-y top left #DEF;

Forslaget ditt er heller ikke galt, men litt lengre enn å bruke den sammentrekte versjonen

[ask]

CSS'en validerer bortsett fra dette: font-decoration, som ikke er noen deklarasjon som finnes, såvidt jeg vet.

Skal sikkert være text-decoration.

[niz]

Jøss, verden er liten! Hadde ansvaret for ugaa.no i 2003 og 2004, morsomt å se at arbeidet går videre

Når det gjelder spørsmålet ditt har du fått mye god hjelp her ser jeg, men jeg ville aller først sjekka om bakgrunnsbildet ditt er slik det skal. I firefox vises det ikke grunnet "feil i bildet".

Er det bare en hvit linje det er snakk om bør denne gjøres i ren CSS.

Lykke til!

[martin Administrator]

@ niz:
For at CSS'en skal fungere må HTML'en være riktig. Den inneholder foreløpig 31 grunnleggende feil. Hvis noen browser likevel viser siden riktig, er dette bare med på å forvirre ytterligere

@ ask:
Det er nok text-decoration som er riktig, ja.

@ ingeborg:
Hvis det er ønskelig kan svært mye av denne koden brukes.
http://mac1.no/forum/viewtopic.php?p=432496#432496
Det er kun små endringer som skal til for å få menyen over på venstre side. Med denne teknikken kreves ikke engang noe bakgrunns-gif.

Ta kontakt på chat, for å få mere hjelp om du vil.

iChat/AIM: martinmacbruker
MSN: macbruker @ hotmail.com

[niz]

Martin: Ja, det stemmer at HTML bør være riktig, men det er ikke HTML som forårsaker problemet her, selv om det trengs en del rydding.

Til trådstarter: Problemet med at bakgrunnen ikke vises er fordi det ikke er noe som heter 100% height i CSS. En nettside er uendelig høy (med mindre definert på forhånd) og dette skaper trøbbel når man sier at siden skal være 100% av uendelig. Derfor bør du enten omstrukturere siden din slik at høyden bestemmes av innholdet, eller at du setter en definert høyde i pixels. min-height hadde vært noe her, hvis bare IE hadde støtta den funksjonen.

Men, det er som nevnt noe muffins med selve bakgrunnsbildet også. Du bør nok lage det på nytt og sjekke at det blir riktig lagret.

Igjen, lykke til!

[ingeborg]

Oiameg! Så mye svar! Jeg takker så mye for alles interesse! Prøverå få orden på det i morgen - jeg er målløs jeg har liksom aldri tenkt på at det må være så korrekt i kodene. Har sikkert bare hatt flaks de andre gangene jeg har kodet sider hehe. Håper det blir bra nå!

Ingeborg

[martin Administrator]

I følge det jeg nettopp leste her, http://www.bigbaer.com/css_tutorials/css_three_column_liquid_maxheight_02.htm, stemmer det dårlig at det ikke finnes noe som heter height 100%. Det som er tilfelle er at effekten av en DIV med 100% height ikke vil eksistere uten at en "utenpåliggende" tagg også har verdien 100% height. Dette kan være f.eks. BODY.

For mere info om temaet, kan du lese gjennom dette googlesøket:
http://i1.no/042a/

Ingeborg:
Her har du den fiksede versjonen av nettsiden:

Kode: Merk alt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">


/* standard elements */
* {
   margin: 0;
   padding: 0;
}

a {color: #EB8B0F; text-decoration: none;}

a:hover {color: #EB8B0F;}

body {
   background: #0e0e0e;
   color: #555;
   font: normal 62.5% "Lucida Grande", Arial, sans-serif;
   margin: 3% 0;
   text-align: center;
}

p,ul {
   padding-bottom: 1em;
}

ul {margin-left: 1.2em;}

h1 {font-size: 1.2em;}

blockquote {
   background: #FFFFFF;
   border-bottom: 1px solid #EEE;
   border-top: 1px solid #EEE;
   color: #000;
   display: block;
   font-size: 0.9em;
   margin-bottom: 1.2em;
   padding: 6px 12px;
}
blockquote p {padding: 3px 0;}

h1,h2,h3 {color: #1CC71C;}

/* misc */
.clearer {
   clear: both;
   display: block;
   width: 100%;
}
.main_right .padded {padding: 6px 2px 6px 16px;}
.main .padded {padding: 18px 24px;}
.meta {font-size: 0.8em; color: #0e0e0e;}
.left {float: left;}
.right {float: right;}

/* structure */

.container {
   background: url('http://ugaa.no/layout/img/bakgrunn.gif') repeat-y top left;
   font-size: 1.2em;
   margin: 0 auto;
   width: 644px;
    text-align: left;
   border: 12px solid #0e0e0e;
}

/* header */

.header {
   float: left;
   width: 639px;
   background: url(http://ugaa.no/layout/img/header.png) no-repeat;
   font: normal 2.4em Verdana,sans-serif;
   line-height: 150px;
   text-align: center;   
}

/* structure */

.top {
   background: #FFFFFF;
   color: #FFFFFF;
   float: left;
   font: normal 1.4em Verdana;
   height: 50px;
   text-align: center;
   width: 639px;
}
.subnav {
   float: left;
   width: 160px;
}
.main {
   float: left;
   width: 480px;
}
.main_right {
   float: right;
   width: 200px;
   color: #0e0e0e;
}
/* sub-navigation */
.subnav h1 {
   background: #0e0e0e;
   color: #FFF;
   font: bold 1.1em Verdana,sans-serif;
   line-height: 24px;
   padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
   border-bottom: 1px solid #696755;
   list-style: none;
}
.subnav li a {
   background: #89866f;   
   color: #111;
   display: block;
   padding: 8px 0 8px 12px;
   width: 148px;
   text-decoration: none;
}
.subnav li a:hover {
   background: #9C997C;
   color: #0e0e0e;
}
</style>
<title>Ugå 2007</title>
</head>

<body>
<div class="container">
   <div class="header">&nbsp;</div>
   <div class="main_right">
      <div class="padded">
      </div>
   </div>

   <div class="subnav">
      <h1>Navigasjon</h1>
      <ul>
         <li><a href="index.php">Nyheter</a></li>
         <li><a href="program.php">Program Ugå 2007</a></li>
         <li><a href="info.php">Ka e Ugå?</a></li>
         <li><a href="studentrevy.php">Studentrevy</a></li>
         <li><a href="linker.php">Linker</a></li>
         <li><a href="stillinger.php">Vi søker..</a></li>
         <li><a href="presse.php">Presse</a></li>
      </ul>
      <p>&nbsp;&nbsp;</p>
      <img src="http://ugaa.no/layout/img/kystbussen.gif" width="150" alt="" />
      <img src="http://ugaa.no/layout/img/sistransp.gif" width="150" alt="" />
      <img src="http://ugaa.no/layout/img/stavanger.png" width="150" alt="" />
   </div>
      
   <div class="main">
      <div class="padded">
         <h1>Ugå 2007, 15.-25.mars</h1>
         <p class="meta"></p>
         <p>&nbsp;</p>
     </div>
   </div>
     <div class="footer clearer">
         <p>Layout: <a href="mailto:ihaarr@gmail.com">ihaarr</a>.</p>
     </div>
</div>
</body>
</html>


Jeg har fjernet unødvendig HTML, lagt til en slutt </div> + en footer.
Problemet med at bakgrunnen ikke ville repetere seg nedover var at container ble liggende som en tynn strek på toppen, mens alle elementene skled utenfor. Footeren med en "clearer" sørger for at container pakker seg rundt alt innholdet.