Avatar billede fangel Nybegynder
26. maj 2004 - 18:52 Der er 14 kommentarer og
1 løsning

prob. ved brug af float

Aloha

Hmm, har et mindre problem som lettest illusteres med - tada - problemet...

tjek:
http://desi-dev.dk/mfa/CSS-float-prob/
(style: http://desi-dev.dk/mfa/CSS-float-prob/style.css)

Det jeg gerne vil have er at den blå boks får samme højde som den grønne boks (altså fylder pladsen fuldt ud!)

Den relevante kode:
--
  <div id="content">
    <div id="main_left">Her er venstre<br>h<br>e<br>j<br>lala</div>
    <div id="main_right">Her er højre</div>
  </div>
---

---
#main_left {
    background-color: green;
    float: left;
    width: 490px;
    padding: 5px;
}
#main_right {
    background-color: blue;
    width: 189px;
    float: right;
    padding-left: 5px;
    border-left: 1px dashed black;
    height: 100%; // virker _ingen_ steder
}
--

Håber nogle sagkyndige kan sige hvad der gøres galt... det har irreteret mig i en rum tid nu...

Morten
Avatar billede roenving Novice
26. maj 2004 - 18:58 #1
Synkroniser højden onload med noget javascript !-)

<script type="text/javascript">
var elms = ['left','middle','right'];

function syncronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
</script>

-- da css jo ikke kan !-)
Avatar billede fangel Nybegynder
26. maj 2004 - 19:06 #2
Det klarede det mere eller mindre...

http://desi-dev.dk/mfa/CSS-float-prob/
(klik på Sync linket, for at vise hvordan det virker)

Holder lige spm åbent i 30-60min. og ser om nogle har en CSS løsning...

Morten
Avatar billede roenving Novice
26. maj 2004 - 19:14 #3
Der findes ikke en css-løsning, for alle højder udregnes fra DOM-træet, så man kan kun gøre en højde i et element afhængigt af en defineret højde i et omkransende element !-)

Eksempelvis kan man lave et element til skærmhøjde uafhængigt af hvilken højde skærmen har ved at sætte html-, body- og selve elementets højde til 100%, men afhængigheder af en højde, som er afhængig af en højde på et objekts renderede indhold kan man ikke, der er kun javascript-muligheden !o]
Avatar billede fangel Nybegynder
26. maj 2004 - 20:20 #4
roenving: hvordan klare fx http://alistapart.com det så? kan ikke se noget JS på deres side, og aligevel klare deres side det fint...

Morten
Avatar billede roenving Novice
26. maj 2004 - 20:46 #5
Hvad er det der skal synkroniseres der ?-)

De holder jo netop deres sidebar gennemsigtig, så du ikke kan se noget forskel, uanset højden !-)
Avatar billede fangel Nybegynder
26. maj 2004 - 20:53 #6
de har da forskellige bg-color på de to? hvordan opnås det?

og et andet sp (hæver point til 60, 2x 30)...
http://fangel.linux.dk/desi_design/ (flyttet til egen server, da jeg så ikke skal uploade hele tiden)

hvordan åbnes at Copyright (#copyright) kun ligger som 15px i bunden, men en sort border mellem dem og de to main bokse... (pt er det #copyright's grå farve der ligger mellem de 2 main, og hele vejen ned... hvorfor det?))

Morten
Avatar billede roenving Novice
26. maj 2004 - 20:57 #7
sidebars background er transparent ...

Kan du ikke bare lave en border-top på #copyright ?-)
Avatar billede fangel Nybegynder
26. maj 2004 - 21:00 #8
nej, da #copyright jo strech'er sig helt op til toppen af ikke så få layers (as said, den grå farve mellem main_left og _right, er fra copyrights bg-color)

hvordan opnår ALA så den anden-farvede sidebar??

Morten
Avatar billede fangel Nybegynder
26. maj 2004 - 21:04 #9
de har benyttet denne metode:
http://alistapart.com/articles/fauxcolumns/

in-short:
lav et bg-billede der er hele sidens brede, hvor du har 2 forskellige farver, og læg så dine layers oven på dette, så ligner det at de begge går ned til bunden !! - smart ;)

Nu mangler jeg bare at få copyright ned i bunden ;)

Morten
Avatar billede roenving Novice
26. maj 2004 - 21:04 #10
Efter det, jeg har kigget på deres koder, tyder det på, at de har en stor box med den offwhite baggrund, inde i den lægger de de andre bokse, som så har en baggrund ...

-- på den måde vil kun det område, som ikke okkuperes af noget eller udfyldes af den gennemsigtige sidebar have den baggrundsfarve !-)
Avatar billede roenving Novice
26. maj 2004 - 21:07 #11
På den du linkede til sidst, er det jo ikke et problem ...

Men hvis indholdet bliver kortere end sidehøjden er problematikken måske anderledes ?-)
Avatar billede fangel Nybegynder
26. maj 2004 - 21:25 #12
nu lever det ret pænt...
http://fangel.linux.dk/desi_design/

hele layeret med indhold har et bg-billede som har en dashed border 500px fra venstre, og efter den en anden farve... når alt andet så vbre ikke har transparent background, så kan det ikke ses - på den måde ligner det at det er delt pænt op...

footer er løst ved lave den 15px høj, smide den ned i bunden med position: absolute; bottom: 0px; - og så er #min_left og _right sat padding-bottom: 20px;

Lægger du et svar, så skal du få lidt point

Morten
Avatar billede roenving Novice
26. maj 2004 - 21:29 #13
Du har da et problem med den horisontale positionering, har du ikke positioneret containeren relativt ?-)

-- og velbekomme '-)
Avatar billede fangel Nybegynder
26. maj 2004 - 21:34 #14
hvor? - (kan ikke teste i IE, sidder på Linux... go Linux go.. Det ser pænt ud i Firefox)

Tak for hjælpen

Morten
Avatar billede roenving Novice
26. maj 2004 - 21:40 #15
Copyright-tingen starter næsten præcis ved den stiplede linje (8-10 pixel før !-)

-- og tak for point ;~}
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