Avatar billede strikerdk Novice
06. november 2007 - 13:54 Der er 22 kommentarer og
1 løsning

2 Div ved siden af hinanden - den ene skal give sig

Hej eksperter.

Nu har jeg brudt min knold med 200 forslag på nettet til hvordan dette lille problem kan løses, men uden held.

Problemet er:

Jeg kører bredder og højder via CSS med DIV´s.

Et simpelt layout, hvor den div til venstre har en bredde på 150px og divén til højre med en bredde på, ja - 100%.

Det virker logisk nok at dette ikke funker i praksis - men i teorien skal DIVén til venstre ikke blive bredere end 150px, og DIVén til højre skal så give sig efter browservinduets størrelse.

Er dette virkelig ikke muligt?

Anvende jeg 100% på DIVén til højre, smider den sig jo nedenunder DIV,en til venstre.
Avatar billede strikerdk Novice
06. november 2007 - 13:55 #1
Og det skal lige nævnes - at jeg gerne vil løse dette problem UDEN brug af tabel og celler, da bundlinien på siden skal følge bunden af browseren afhængig af opløsning.
Avatar billede Slettet bruger
06. november 2007 - 13:56 #2
kan vi ikke få et kode eksempel, gerne en side på nettet
Avatar billede strikerdk Novice
06. november 2007 - 13:57 #3
Jeg har forsøgt at løse problemet med tabel og celler - det fungerer selvf. fint - men det skulle efter hvad jeg har læst ikke være muligt at få en (hight: 100%) til at følge bundlinien. IE7 klapper simpelthen tabellen sammen, hvis indholdet er "mindre" end højden på browservinduet
Avatar billede strikerdk Novice
06. november 2007 - 13:58 #4
laver et...
Avatar billede strikerdk Novice
06. november 2007 - 14:02 #5
Et eksempel:

<body>

<div id="venstre">Her er der en menu</div>


<div id="højre">Her er indholdet</div>



</body>
</html>

CSS:

****Denne div skal have en fast bredde på 150px****
#venstre

{
    float:left;
    width:150px;
}


****Denne div skal udvide sig efter browservinduets bredde****
#højre

{
    float:right;
    width:100%;
}
Avatar billede mall Nybegynder
06. november 2007 - 14:19 #6
Jeg har rodet lidt med en kode her:

CSS:

#holder {
  position:absolute;
  top:0px;
  left:0px;
  height:auto;
  width:auto;
}

#menu {
  float:left;
  height:100%;
  width:150px;
  border:#000000 solid 1px;
}

#content {
  width:100%;
  height:100%;
}

HTML:

<body>

<div id="holder">

<div id="menu">Her er der en menu</div>

<div id="content">Her er indholdet</div>

</div>

</body>

Hvis jeg har forstået din forklaring rigtigt.. Så er det sådan du vil ha det til at se ud..
Avatar billede strikerdk Novice
06. november 2007 - 14:27 #7
Det tror jeg du har - der er bare lige det problem, at den smider DIVéne neden under hinanden - i stedet for ved siden af hinanden. :)
Avatar billede mall Nybegynder
06. november 2007 - 14:29 #8
Hmm.. På min stiller de sig ved siden af hinanden..
http://www.malls.dk/1.html
Avatar billede strikerdk Novice
06. november 2007 - 14:40 #9
Dette her giver OVERHOVEDET ingen mening. Nøjagtig samme kode giver 2 forskellige resultater? Jeg har simpelthen copy / paste din kode flere gange nu - de smider sig under hinanden.
Hvis stylesheetene er ens ja så....ehhh
Avatar billede mall Nybegynder
06. november 2007 - 14:46 #10
Har du mulighed for at ligge det ud på nettet?
Avatar billede strikerdk Novice
06. november 2007 - 14:49 #11
Sorry sorry - Jeg kan se det nu. Problemet er at jeg anvender visual studio ( .NET ) - og den har det med at vælge efter egen mening når den skal render. Jeg kan sagtens se det nu. Problemet er bare stadig - at når sitet bliver smallere end den tekst du har liggende i #content, så smider den DIVéne ned under hinanden. Er der en løsning på det - eller er det bare sådan?
Avatar billede mall Nybegynder
06. november 2007 - 14:57 #12
Okay;)

Hmm.. Jeg tygger lige lidt på den, og så vender jeg tilbage om lidt:)
Avatar billede martin_moth Mester
06. november 2007 - 14:58 #13
Ellers kan du da lave det med frames, og give dem bredden 150,*

Så kan du stadig have en bundlinie hvor du nu vil
Avatar billede strikerdk Novice
06. november 2007 - 14:59 #14
Hvis du kan give et svar på det har du løst et problem jeg har kæmpet LÆNGE med! *g*
Avatar billede strikerdk Novice
06. november 2007 - 15:00 #15
Frames dur ikke. en frame vil jo også skulle have en width på 100% for at følge skærmen ud til siden - det giver samme resultat. :(
Avatar billede mall Nybegynder
06. november 2007 - 16:05 #16
Hmm.. Frames ville da være en meget god løsning?
De klarer da problemet med det samme..

http://www.malls.dk/1.html

Er ikke den store haj til frames.. Så har ikke rigtig forstand på hvordan de fungere.
Avatar billede roenving Novice
06. november 2007 - 16:26 #17
I css findes der ikke en bredde, der hedder 100% - noget (og heller ikke en tilsvarende højde !-)

Derfor skal du arbejde med 'skygge-elementer' for at udføre tingen ...

-- men er det ikke meget lettere at arbejde med et layout, der har en fast bredde, og så f.eks. placeret det centreret ?-)
Avatar billede sibbelone Nybegynder
06. november 2007 - 17:32 #18
ved ikke om det her kan bruges
http://ryanfait.com/sticky-footer/
Avatar billede strikerdk Novice
06. november 2007 - 19:19 #19
mall: Jeg er ikke særlig glad for frames i det hele taget - og nok slet ikke da jeg arbejder med .Net.

Roenving: Jeg ved der har været meget skriverier omkring de 100% i vidde og højde. Og de ****** jo helt op efter IE7 kom på banen.
Bredden fungerer dog nu alligevel med de 100%

Mit problem er hovedsagligt, at jeg har en tabel øverst indeholdende billede og tekst.

Herunder smider jeg så en navigationbar i venstre side i en DIV - og en contentholder i højre side i en DIV.

Navigationsbaren har en fast vidde på de 150px; - hvorimod jeg ønsker at contentholderen udvider sig ELLER ligger centreret med en fast vidde mellem navigationen og højre side.

HOVEDÅRSAGEN til at jeg har valgt at smide dem i hver sin DIV er, at jeg ønsker bunden af sitet skal ligge helt ned til kanten på browseren - uanset hvor lidt indhold der er i contentholderen.
Avatar billede strikerdk Novice
06. november 2007 - 19:20 #20
Altså: Formålet er at DIVéne skal "strække" sig til bundkanten af browseren.
Avatar billede strikerdk Novice
06. november 2007 - 19:25 #21
Hmm - måske begynder jeg at udvide mit spørgsmål med denne beskrivelse - jeg skal nok kompenserer med point til de rette - også dig Mall da du egentligt svarede på det oprindelige spørgsmål
Avatar billede strikerdk Novice
07. november 2007 - 12:08 #22
Okay - vi afslutter her. Vil du smide et svar Mall :-)
Avatar billede mall Nybegynder
07. november 2007 - 12:37 #23
Svar :)
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