Hjelp med dynamisk høyde i css.

AndersGustav · 13. oktober 2004

Ærede guruer (inntar ydmyk tone grunnet særdeles lav postcount),

Jeg sliter fært med et forsøk på å lage en side uten bruk av tabeller, sliter er vel rett og slett ikke riktig uttrykk, jeg er visst så inngrodd i feile metoder at jeg ikke skjønner bæret..

klarer å lage en layout med div/css som benytter seg av overflow og absolutt posisjonering, men når jeg vil ha samme siden til å ha dynamisk høyde skjærer alt seg..

kort fortalt ser det sånn ut: (enkelt bilde) og skal være midstilt, ikke noe særdeles innovativt, det skal bare funke..

Noen som kunne tenke seg til å gi en hjelpene hand til en stakkar som søker den smale sti?

Ikke nødvednigvis kode siden for meg, jeg vil nemlig helst lære selv, og tutorials type "inn med bitteliten teskje - step by step" duger sikkert også, men kan nevne at w3c-skoler og html-bikkjene er allerede besøkt, og at noe på norsk ville være å foretrekke....

Haraldson · 13. oktober 2004

Siden du vil lære koden selv, blir dette veldig overfladisk.

Dropp position:, og bruk heller float:left(/right); til å posisjonere elementene.

» http://www.w3schools.com/css/pr_class_float.asp

For å midstille siden, bør du legge en container-div rundt det hele, som starter rett etter <body> og slutter rett før </body>.

Nå som du har et utgangspunkt, kan du se hvordan du midtstiller denne boksen her: http://decalibration.net/artikler/sentrering/

Vi tar litt av gangen, ble litt «tidlig på morgenen» dette.

PoleCat · 13. oktober 2004

* {
 margin: 0;
 padding: 0;
}

body {
 text-align: center;
 background: #fff;
}

.clear {
 height: 1px;
 overflow: hidden;
 clear: both;
}

div#wrap {
 width: 750px;
 margin: 0 auto;
 text-align: left;
}

h1 {
 overflow: hidden;
 background: #000 url(header.gif) no-repeat;
 padding: 80px 0 0 0;
 height: 0 !important;
 height /**/ : 80px;
}

h2 {
 overflow: hidden;
 background: #777 url(noetext.gif) left center no-repeat;
 padding: 20px 0 0 0;
 height: 0 !important;
 height /**/ : 20px;
}

ul#menu {
  list-style: none;
}
ul#menu li {
  display: inline;
  float: left;
}

ul#menu li a {
  display: block;
  overflow: hidden;
  padding: 15px 0 0 0;
  height: 0 !important;
  height /**/ : 15px;
}
.menu1 {  background-image: url("menu1.gif");  width: 50px; }
.menu2 {  background-image: url("menu2.gif");  width: 60px;
}

div#content {
 border: 1px solid #777;
 padding: 5px;
}

div#articles {
 width: 583px;
 width /**/ : 585px;
 float: left;
 display: inline;
 margin: 0 0 0 5px;
}

div#images {
 width: 150px;
}

div#footer {
 
}

<div id="wrap">
 <h1>Header</h1>
 <ul id="menu">
   <li><a href="#" class="menu01>Meny01</a></li>
   <li><a href="#" class="menu02>Meny02</a></li>
 </ul>
 <div class="clear"></div>
 <div id="content">
 <h2>Noe text</h2>
   <div id="articles">
     <!-- innholdet i articles her -->
   </div>
   <div id="images">
   <!-- innholdet i images her -->
  </div>
   <div class="clear"></div>
 </div>
 <div id="footer">
 <!-- innholdet i footeren her -->
 </div>
</div>

Har ingen anelse om hvordan dette vil se ut, da jeg sitter på jobb uten mulighet for å teste det, men det burde gi deg en grei start. Fyr løs med spørsmål!

EDIT: Ja, jeg vet jeg gav deg koden å forklare, det har jeg rett og slett ikke tid til.

Endret 13. oktober 2004 av PoleCat

Simon Zimmermann · 13. oktober 2004

Vanskelig å finne god hjelp på norsk.

Å kode den siden er nok ganske enkelt og jeg vil anbefale deg å bygge den opp med floats.

Jeg tror denne siden kan hjelpe deg en del hvor jeg anbefaler deg å ta en titt på float tutorial delen.

Ellers så kan jeg gjøre oppmerksom på en side som etterhvert vil inneholde mye godt norsk lesestoff,

men som ennå bare er i begynnerstadiet >>unrealized.org

Hm... nå har PoleCat kodet hele siden for deg, men jeg poster noen linker allikevel.

AndersGustav · 13. oktober 2004

Takker folkens, espesialli PoleCat, det derre tror jeg nemlig at jeg skjønte noe av :w00t: *duværden*

unrealized.org ser ut som et lovende prosjekt *lagreifavoritter* - pen side var det også...

Logg inn

Hjelp med dynamisk høyde i css.

Anbefalte innlegg

AndersGustav

Lenke til kommentar

Videoannonse

Haraldson

Lenke til kommentar

PoleCat

Lenke til kommentar

Simon Zimmermann

Lenke til kommentar

AndersGustav

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer