Gå til innhold

Hjelp med dynamisk høyde i css.

AndersGustav

Anbefalte innlegg

AndersGustav

AndersGustav

Skrevet
Skrevet

Æ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....

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Haraldson

Haraldson

Skrevet
Skrevet

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. :)

Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet (endret) 

* {
 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! :D

 

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

Endret av PoleCat
Lenke til kommentar
Simon Zimmermann

Simon Zimmermann

Skrevet
Skrevet

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.

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
×
×
  • Opprett ny...