Avatar billede marrix Juniormester
02. september 2004 - 18:41 Der er 7 kommentarer og
1 løsning

To felter med hhv. fast bredde og procentiv bredde - kan man det?

Hej eksperter

Jeg har en venstre kolonne - kald det bare en menubar - som skal være fast 200px.

Højre kolonne skal så bestå af et andet felt - et layer, DIV, CLASS el.lign - som skal fylde resten af skærmens bredde. Altså hvad der svarer til en bredde på "100% - 200px".

Kan det overhovedet lade sig gøre uden brug af javascript - og i så fald hvordan?

Allervenligst, marianne
Avatar billede knudgert Nybegynder
02. september 2004 - 18:49 #1
Din css i <head>:
<style type="text/css">
#boks1 {width: 200px; float: left}
#boks2 {float: left}
</style>

og siden
<div id="boks1">
menu
</div>
<div id="boks2">
indhold
</div>
Avatar billede marrix Juniormester
02. september 2004 - 20:05 #2
Jo, men.... hmmmm, det er lidt svært at forklare. Principielt er det følgende problem jeg har:

#boks1 skal være 200px i bredden.
#boks2 skal udfylde resten af pladsen

...men:

Indholdet af #boks2 er 800px bredt.
Således skal der ske følgende afhængig af brugerens skærmbredde:

Med en skærmbredde på 800px:
#boks1 200px
#boks2 800px-200px (altså udfylde den resterende skærmbredde)= 600px
...således skal der scrolles vandret i #boks2 (overflow: auto;) eftersom indholdet her er bredere end boksens bredde.

Med en skærmbredde på 1024px:
#boks1 200px
#boks2 1024px-200px (altså udfylde den resterende skærmbredde) = 824px
...således er der plads nok til indholdet af #boks2, og med overflow sat til "auto", skal der ikke vises en vandret scrollbar.

Dette burde nok kunne lade sig gøre, hvis man tryller lidt med javascript. Men i dette tilfælde kan jeg ikke tillade mig at have javascript med.

Nogle gode forslag?

Allervenligst, marianne
Avatar billede knudgert Nybegynder
03. september 2004 - 00:15 #3
Nej, det er ikke muligt.
Avatar billede marrix Juniormester
05. september 2004 - 18:07 #4
...okay. Kan heller ikke umiddelbart finde en løsning selv.

Gider du smide et svar?

Venligst, marianne
Avatar billede marrix Juniormester
24. september 2004 - 06:46 #5
...så har jeg - med nogen forsinkelse - fået løst problemet. Efter følgende princip:

#box1{
position:absolute;
left:0;
right:0;
width:200px;
background-color: blue;
}

#box2{
margin-left:210px;
width:100%
}

...med lidt layoutmæssige tilrettelser - og tilsyneladende virker det efter hensigten. Så points til mig selv i denne omgang ;)

Allervenligst
marianne
Avatar billede marrix Juniormester
24. september 2004 - 06:46 #6
...og mit svar...
Avatar billede roenving Novice
24. september 2004 - 14:46 #7
-- 100% skal principielt aflæse det nærmest omkransende elements definerede størrelse og tage det derfra, så du må med ovenstående forudsætte, at siden ikke er lavet med ordentlige definitioner af doctype (og evt. css !-)
Avatar billede marrix Juniormester
27. september 2004 - 06:31 #8
....giver det problemer? Jeg tror ikke, jeg helt forstår, hvad du mener...

Men ellers kan man vel bare droppe de 100% - så vidt jeg kan regne ud vil den resterende plads - i box2 - i så fald automatisk fyldes ud (og tilføjes vandret scrollbar hvis indholdet er bredere end skærmens bredde minus 200px/box1).

???

Allervenligst, marianne
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