Avatar billede rasmuslh Nybegynder
12. juli 2006 - 13:16 Der er 6 kommentarer og
1 løsning

CSS: Positionering i højre bunds hjørne i centreret design

Hejsa

Jeg har et design hvor hvor jeg har delt mit hovedfelt ind i tre subfelter. Designet er centreret.

Til venstre er navigationen.
Midt i er brødteksten.
Til højre er der nyheder.

Jeg vil gerne positionere et billede i nederste højre hjørne. Problemet er at min højre spalte ikke er den højeste. Højden bliver typisk bestemt af midtersektionen. Jeg vil altså gerne have at min <div> i højre side får den maksimalt mulige højde - altså at den folder sig helt ud.

Hierarkiet:

<div class="middle">
  <div class="middleLeft"></div>
  <div class="middleCenter"></div>
  <div class="middleRight">
    <div class="middleRightText"></div>
  </div>
</div>

Det er altså middleRight jeg gerne vil have til at "fylde" middle helt ud.

På forhånd tak
Avatar billede milandt Nybegynder
12. juli 2006 - 14:26 #1
brug en tabel.

det skal ikke forstås en lappeløsning, men forstås sådan at en tabel simpelthen er en bedre løsning til netop det du prøver at opnå. Det er præcis en tabels egenskaber du efterspørger.
Avatar billede rasmuslh Nybegynder
12. juli 2006 - 14:32 #2
Hmmmhh - det er jeg godt nok ikke meget. Bruger som udgangspunkt ikke tabellerne til layout.
Avatar billede milandt Nybegynder
12. juli 2006 - 17:13 #3
Man kan sagtens bruge en tabel til layout hvis man gør det "pænt". Problemet er at der tidligere har været en tendels til et helvede af nestede tabeller fyldt med transparante 1x1px giffer til at spænde dem ud med. Det er ikke længere nødvendigt i dag - for vi har fået css.

Du behøver blot een tabel, med 3 celler, og evt en klasse på hver af de tre celler.

Du kan ikke umiddelbart løse det med 3 div-elementer og css. Du vil ikke kunne løse problemet med højden på de tre div'er, med mindre du brugere javascript til at rette på højden efter at siden er skrevet ud. Dette er heller ikke nødvendigvis en dårlig løsning.. men når nu problemet kan løses pænt med markup, så synes jeg at det ville være dumt at begynde at skrive javascript til det samme.
Avatar billede rasmuslh Nybegynder
12. juli 2006 - 18:04 #4
Der har du selvfølgelig en pointe. Jeg har aldrig brugt tabeller til layout da jeg altid er blevet slået i hoved med vigtigheden af at bruge CSS. Jeg ser lige tiden an om der kommer andet input og ellers må jeg bide i det sure æble. Gider du lægge et svar så jeg kan give dig point ved en senere lejlighed.
Avatar billede milandt Nybegynder
12. juli 2006 - 18:24 #5
svar der..

lad mig vide hvad du ender med at bruge
Avatar billede jannek_ek Nybegynder
13. juli 2006 - 23:33 #6
Jeg må give milandt ret i at til visse ting er tabeller bare bedre. Der er mange der siger at div er det eneste rigtige, og det er det også i mange tilfælde, men i lige præcis dit tilfælde bør du bruge en tabel, da det klart er bedst til skalerbart design.
Avatar billede rasmuslh Nybegynder
14. juli 2006 - 11:25 #7
Jeg valgte en lidt anden løsning. Nederst i mit design lavede jeg en footer med et img i højre side. Det image positionede jeg så relativt:

#print {
    margin: 0;
    padding: 0;
    width: 820px;
}

#print img {
    clear: both;
    float: right;
    position: relative;
    left: -4px;
    bottom: 28px;
}

Det ser pænt ud i alle de browsere jeg har testet. Ulempen er at der kommer hvid margin i bunden på billedets højde (6px), men da baggrundsfarven er hvid ses det ikke.

Tak for hjælpen.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester