Gå til innhold

første gang med <div> - trenger hjelp med css

tilfeldig

Anbefalte innlegg

tilfeldig

tilfeldig

Skrevet
Skrevet

ok, trenger hjelp til hva som er galt med stilarket, hvorfor det er slik og hva jeg kan gjøre for å rette det opp. bruker opera 8, ser fint ut der. prøv å gjett hvilke nettlesere det ser passe funky ut i... :!:

 

utkast til nettside: http://www.tumle.net/fortborte/

 

css:

* {
margin: 0;
padding: 0;
border: 0;
}

body {
background: #000;
font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-size: 12px;
}

/* div
==============================*/

#f-wrap {
width: 780px;
margin: 0 auto;
background: url(../gfx/bg-f.gif) repeat-y;
}

#f-topp { 
clear: both;
width: 780px;
height: 180px;
padding: 64 0 0 231;
background: url(../gfx/f-topp.gif);
} 

#f-senter-v { 
float: left; 
width: 219px;
height: 322px;
background: url(../gfx/f-senter-v.gif); 
} 

#f-senter-h { 
float: right; 
width: 93px;
height: 322px; 
background: url(../gfx/f-senter-h.gif); 
} 

#f-senter { 
width: 468px;
height:322px; 
background:url(../gfx/f-senter.gif);
} 

#f-bunn { 
clear: both; 
width: 780px;
height:48px; 
background:url(../gfx/f-bunn.gif); 
}

#u-wrap {
width: 780px;
margin: 0 auto;
background: url(../gfx/bg-u.gif) repeat-y;
}

#u-topp { 
clear: both;
width: 780px;
height: 206px;
padding: 78 0 0 252;
background: url(../gfx/u-topp.gif) no-repeat top;
} 

#u-senter-v { 
float: left; 
width: 57px;
height: 368px;
background: url(../gfx/u-senter-v.gif); 
} 

#u-senter-h { 
float: right; 
width: 56px;
height: 368px; 
background: url(../gfx/u-senter-h.gif); 
} 

#u-senter { 
width: 667px;
height:368px;
padding: 40 0 0 0;
background:url(../gfx/u-senter.gif) no-repeat top;
} 

#u-bunn { 
clear: both; 
width: 780px;
height: 36px; 
background: url(../gfx/u-bunn.gif) no-repeat;
margin-top: 30px;
}

.f-navigasjon {
width: 155px;
height: 300px;
padding: 20 5 0 0;
margin-right: 5px;
float: left;
text-align: right;
}

.f-hoved {
width: 300px;
height: 300px;
padding: 20 10 0 10;
border: 1px dotted #9d9163;
background: url(../gfx/bg_f-hoved.gif) no-repeat center right;
float: right;
overflow: auto;
text-align: justify;
}

.u-navigasjon {
width: 160px;
height: 300px;
padding: 0 5 0 5;
margin-right: 5px;
float: left;
text-align: right;
font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-size: 12px;
}

.u-hoved {
width: 500px;
padding: 0 10 0 10;
text-align: justify;
float: right;
}

.tumleboks {
width: 175px;
height: 72px;
padding: 2 10 5 10;
background: #f5eed2;
border: 1px solid #cdc49d;
float: left;
}



/* fonter
==============================*/

p.tekst_tumleboks {
font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-size: 11px;
color: #9d9163;
text-align: justify;
}

p.uthev {
font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #9d9163;
}

p.fet {
font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-weight: bold;
}

p.ferdigstilt {
font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-size: 11px;
color: #9d9163;
text-align: right;
}

p.opp {
   text-align: right;
   }

p.opp a {
   padding-right: 15px;
   background-repeat: no-repeat;
background-position: center right;
background-image: url(../gfx/opp.gif);
   }



/* lister
==============================*/

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
margin: 0 5 0 0; 
padding: 0;
font-weight: bold;
line-height: 15px;
background-repeat: no-repeat;
background-position: bottom right;
background-image: url(../gfx/li-ikon.gif);
}

ul li a {
padding-right: 20px;
}


/* a
==============================*/

a:link {
color: #660033;
text-decoration: none;
font-weight: bold;
}

a:visited {
color: #660033;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #CC0066;
text-decoration: none;
font-weight: bold;
}

a:active {
color: #CC0000;
text-decoration: none;
font-weight: bold;
}



/* hdr
==============================*/

h1 {
font-family:"lucida sans unicode", verdana, arial, sans-serif;
font-size: 14px;
color: cc0000;
font-weight: bold;
margin: 0 0 25 0;
border-bottom: 1px dotted #cc0066;
padding: 2 2 3 0;
}

h2 {
font-family:"lucida sans unicode", verdana, arial, sans-serif;
font-size: 12px;
color: #660033;
font-weight: bold;
margin-bottom: 10px;
}


/* form
==============================*/

.input {
   background: #f5eed2;
   border: 1px solid #9d9163;
   font-family: "lucida sans unicode", verdana, arial, sans-serif;
font-size: 12px;
color: #666;
   }
       
.input:hover {
   border: 1px solid #cdc49d;
   }
       
.input:focus {
   border: 1px solid #cdc49d;
   }
       
.btn {
    background: #f5eed2;
    border: 1px solid #9d9163;
    margin-top: 5px;
    }


/* bilde
==============================*/

.bildeboks {
   border-bottom: 1px dotted #9d9163;
   padding-bottom: 10px;
   }

.barebilde {
   float: left;
   }

.bilde {
   padding: 5px;
   border: 1px solid #9d9163;
   margin: 0 5 5 0;
   float: left;
   }

.bilde:hover {
   border: 1px solid #cdc49d;
   }

 

nb! absolutt første gang jeg lager en nettside på denne måten! be nice. basta. :blush:

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Mira

Mira

Skrevet
Skrevet

Skjønte ikke helt hvordan dette egentlig skulle være. Ser at det blir feil sånn som det er nå, men har du et bilde eller noe av hvordan det egentlig skulle være. Har ikke tilgang til Opera på jobb.

Lenke til kommentar
tilfeldig

tilfeldig

Skrevet
  • Forfatter
Skrevet
Skjønte ikke helt hvordan dette egentlig skulle være. Ser at det blir feil sånn som det er nå, men har du et bilde eller noe av hvordan det egentlig skulle være. Har ikke tilgang til Opera på jobb.

jeg tror ikke selv den sterkeste vilje kan se hva det skal forestille, så her er et av index-siden og et av undersiden(e)

 

http://www.tumle.net/fortborte/index.jpg

http://www.tumle.net/fortborte/underside.jpg

Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)

Mulig jeg har funnet deg en løsning for forsiden ihvertfall.

 

</p>-taggen etter hovedmeny: stod litt feilplassert, men det var nok bare en glipp.

Har lagt til ekstra div-tagger innenfor tumleboks, f-navigasjon og f-hoved som tar seg av spacingen mellom border og innhold. FireFox er ikke helt enig med IE og Opera når det gjelder padding, så derfor vil disse ekstra divene bruke margin i steden for.

 

Har puttet inn en text-align:center for å få siden midtstilt i IE. Det skal ikke være nødvendig, men men. Dermed måtte det inn en text-align:left i f-topp for at tumleboksen skulle ta utgangspunkt i venstre kant og ikke senter.

 

Utklipp:

 

<div id="f-wrap">

<div id="f-topp">
<div class="tumleboks"><div><p class="tekst_tumleboks"><strong>tumle:</strong> <i>boltre (seg); ståke, styre, stelle; bakse, gå og t- med noko av kvart, t- med planar, idear</i>
</div></div>
</div>

<div id="f-senter-v">
</div>

<div id="f-senter-h">
</div>

<div id="f-senter">
<div class="f-navigasjon"><div>
<p class="uthev">hovedmeny:</p>
<ul>
 <li><a href="side.php?side=nettsider" title="nettsider | her finner du bl.a. vidar busk">nettsider</a></li>
 <li><a href="side.php?side=grafikk" title="grafikk | pixelpusling">grafikk</a></li>
 <li><a href="side.php?side=blyant" title="blyant & papir | den gammeldagse måten">blyant & papir</a></li>
 <li><a href="side.php?side=foto" title="foto | lek med digitalkamera">foto</a></li>
</ul>
<p> </p>
<p class="uthev">annet:</p>
<ul>
 <li><a href="side.php?side=dyr" title="glad i dyr? | hvordan foretrekker du dem?">glad i dyr?</a></li>
 <li><a href="side.php?side=blog" title="tumletanker | joda, internett behøver enda en blog">tumletanker</a></li>
 <li><a href="side.php?side=lenker" title="lenker | steder for inspirasjon, hygge og ettertanke">lenker</a></li>
 <li><a href="side.php?side=gjest" title="gjestebok | gi et lite pip, da vel">gjestebok</a></li>
 <li><a href="side.php?side=kontakt" title="kontakt | når flettenapping ikke fungerer...">kontakt</a></li>
 <li><a href="side.php?side=om" title="om siden | hva er tumle.net?">om siden</a></li>
 <li><a href="side.php?side=eng" title="in english, please | when norwegian is like greek">in english, please</a></li>
</ul>
</div></div>
<div class="f-hoved"><div>
<h2>header</h2>
<p>Lorem ipsum maiorum commune eloquentiam no sea, offendit detraxit elaboraret vix ad. Dolores dissentiet ad vel, mea ex novum paulo malorum, autem nonummy salutandi nec te. Id nec ubique ponderum hendrerit, oblique epicuri splendide id mel.</p>
<br>
<p>Ad nec errem graeco iracundia. Munere perfecto imperdiet eu vis, usu ex simul timeam philosophia. In putent adversarium pro, sanctus sadipscing vel ad, ne nam nibh iriure luptatum. Eu brute quaeque moderatius usu, at falli lucilius vel.</p>
</div></div>
</div>

 

Utklipp:

 

* {
   margin: 0;
   padding: 0;
   border: 0;
}

body {
   background: #000;
   font-family: "lucida sans unicode", verdana, arial, sans-serif;
   font-size: 12px;
   text-align: center;
}

/* div
==============================*/

#f-wrap {
   width: 780px;
   margin: 0 auto;
   background: url(../gfx/bg-f.gif) repeat-y;
}

#f-topp { 
   height: 180px;
   background: url(../gfx/f-topp.gif);
   text-align: left;
} 

#f-senter-v { 
   float: left; 
   width: 219px;
   height: 322px;
   background: url(../gfx/f-senter-v.gif); 
} 

#f-senter-h { 
   float: right; 
   width: 93px;
   height: 322px; 
   background: url(../gfx/f-senter-h.gif); 
} 

#f-senter { 
   width: 468px;
   height:322px; 
   float: left;
   background:url(../gfx/f-senter.gif);
} 

#f-bunn { 
   clear: both; 
   height:48px; 
   background:url(../gfx/f-bunn.gif); 
}

.f-navigasjon {
   width: 155px;
   height: 300px;
   float: left;
}

.f-navigasjon div {
   margin: 20px 5px 0 0;
   text-align: right;
}

.f-hoved {
   width: 300px;
   height: 300px;
   border: 1px dotted #9d9163;
   background: url(../gfx/bg_f-hoved.gif) no-repeat center right;
   float: right;
}

.f-hoved div {
   margin: 20px 10px 0 10px;
   height: 280px;
   text-align: justify;
   overflow: auto;
}

.tumleboks {
   position: relative;
   top: 64px;
   left: 231px;
   width: 175px;
   height: 72px;
   background: #f5eed2;
   border: 1px solid #cdc49d;
}

.tumleboks div {
   margin: 2px 20px 5px 10px;
}

 

Edit: Ser html-en ble ikke helt leselig. Lignende løsninger burde gjøre susen på de andre sidene.

Endret av balletryne
Lenke til kommentar
tilfeldig

tilfeldig

Skrevet
  • Forfatter
Skrevet

jeg la inn forandringene du foreslo, men da fikk jeg samme problem i opera. altså ingen luft mellom innhold og kanten på div. så jeg la inn igjen padding der jeg hadde lagt de fra før - i tillegg - til de ekstra divene du satte opp med margin. da ble -det- bra.

 

text-align: center i body midtstilte siden fint i ie, men det midtstilte også teksten jeg har i hovedboksen, så der la jeg inn text-align: left for å rette opp det. blir det feil?

 

nå ser det ut som om det største problemet er at de ligger litt under hverandre. i firefox og ie får jeg dette problemet. legger ved link til hvordan det ser ut i opera, firefox og ie.

 

http://www.tumle.net/fortborte/index_opera.png

http://www.tumle.net/fortborte/index_firefox.png

http://www.tumle.net/fortborte/index_ie.png

 

stilark: http://www.tumle.net/fortborte/css/stil.css

 

hjelp! :no:

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...