Avatar billede cskoven Nybegynder
23. oktober 2005 - 20:45 Der er 49 kommentarer

100% height, vertical-scrollbar for text

Hey..
Jeg er ved at bakse noget sammen her : http://new.cskoven.com/
Istedet for det, det er nu (scrolle hele siden), skal det gerne være sådan, at man kan scrolle i højre side af 3. blok (den blå), sådan at hvis teksten fylder mere end én sidehøjde, skal man blot scrolle i den, og ikke hele siden.
Dvs. den nederste gråblok, skal hele tiden være synlig på billedet..
Siden er pt. ikke kompatibel med M$ IE.
Jeg ønsker at undgå IFrames...

Håber i forstår..
Avatar billede apo Praktikant
23. oktober 2005 - 20:57 #1
Prøv med overflow:hidden;
Avatar billede apo Praktikant
23. oktober 2005 - 20:57 #2
Rettelse: overflow:auto;
Avatar billede cskoven Nybegynder
23. oktober 2005 - 20:59 #3
har jeg prøvet... virker ikke..
Avatar billede apo Praktikant
23. oktober 2005 - 20:59 #4
Har du angivet højde på elementet?
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:03 #5
http://new.cskoven.com/style.css
Ja, i og med jeg har sat hele dokumentet til at være have en height på 100%
Ellers kan jeg jo ikke få sitet til at fylde en hel side...
Avatar billede apo Praktikant
23. oktober 2005 - 21:06 #6
Jeg kan ikke få adgang til din style.css
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:08 #7
huh..
http://new.cskoven.com/style.css
har ellers sendt den til flere..?
Avatar billede apo Praktikant
23. oktober 2005 - 21:11 #8
Jeg får en alert om at den ikke kan finde filen, og viser en sti til mine midlertidige internetfiler.

Men du bruger altså:
html,body {margin:0; padding:0; height:100%;}

?
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:15 #9
For at den her løsning jeg nu kommer med skal virke, skal de to bokse til venstre være seperate element, dvs. ikke en del af elementet som hovedboxen er med i, i denne situation er de i samme table.

Men så er det også meget let at få gjort uden iframes, bortset fra at det ikke virker i IE. Lækkert. Men det er forholdsvis enkelt og det virker.

Du lægger box1 og box2 ind i et div, og det giver du så
postion:fixed;
top:0;
left:0;

og evt.

width: 100%;

Efter hvad jeg ved, så burde det virke, nu sidder den altid det samme sted, og menuen kører med ned når du scroller.

net.
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:16 #10
hmm strange...
hvad med denne?
http://cskoven.com/new/style.css

men ja.. jeg bruger ovennævnte "string"
Avatar billede apo Praktikant
23. oktober 2005 - 21:17 #11
Men det jeg tænkte på var, om du har sat højde på: <td valign="top" class="box3">. Du er nød til at have højde på elementet, ellers ved browseren ikke hvornår teksten gå ud over 'rammen' (Altså hvornår der er overflow).

Desuden kan du ikke benytte de oldnordiske attributter som valign="top" sammen med XHTML. Og så bør du læse oleboles artikler om XHTML: http://exp.dk/artikler/537 og http://exp.dk/artikler/538 , hvor han forklarer hvorfor man ikke kan benytte XHTML optimalt endnu. Du bør holde dig til HTML 4.01 (Evt. strict, hvis du vil være så tæt på XHTML som muligt)
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:19 #12
electricnet: de er vel i deres egne.. De har i hvertfald deres egne classes?!?
Avatar billede apo Praktikant
23. oktober 2005 - 21:20 #13
cskoven > Nu kan jeg i det mindste se noget tekst, men det ligner ikke normal CSS; Der er en masse firkanter i teksten, og det står i en lang køre, uden orden. Jeg ved ikke hvad det skyldes.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:22 #14
cskoven > Ja, men de ligger i det samme table element som box3 gør. For at det virker skal de ikke, de skal helt ud på body.

net.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:22 #15
apo > Jeg kan godt se CSS'en? Begge to endda.

net.
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:23 #16
apo: hmm det står i normal orden hos mig og andre Linuxbrugere, jeg har vist det til... jeg skriver det bare i en ganske normal editor (bluefish) til Linux...
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:24 #17
electricnet: dvs. de skal i forsk. tables - eller hva?
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:25 #18
apo > Ser du stadig CSS informationer, bare med en masse firkanter? Så er det nok p.g.a. linux linebreaks som er anderledes end Windows linebreaks, det plejer dog kun at være notesblok som ikke kan hitte ud af dem.

net.
Avatar billede apo Praktikant
23. oktober 2005 - 21:25 #19
Mærkeligt. Jeg plejer ikke at have problemer med at åbne og få vist CSS-filer korrekt. Kan det skyldes at jeg kører med Windows, og at I kører med Linux (Kan det have noget at sige)?
Avatar billede apo Praktikant
23. oktober 2005 - 21:25 #20
electricnet > Okay, det må så være derfor.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:26 #21
cskoven > Ja, det kan du godt gøre. Det skal så før det andet i koden, og da det originale tabel så kun har én celle har du dybest set ikke brug for det mere, så er det mere logisk med et <div>, som du så kan give en margin-left der svarer til bredden af de to bokse til venstre tilsammen, plus evt. margen imellem dem og dit indhold.

net.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:27 #22
apo > Hvis du kopierer det hele og sætter det ind i Wordpad skulle det meget gerne give mening. Wordpad kan nemlig af en eller anden grund godt tåle Linux linebreaks, hvorimod Notesblok som sagt ikke kan.

net.
Avatar billede apo Praktikant
23. oktober 2005 - 21:28 #23
Prøver lige...
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:29 #24
electricnet: skal jeg bare droppe tables og køre divs så? er det ikke ligeså smart?
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:32 #25
cskoven > Jo, det er det bestemt.

For at få disse divs til at ligge på samme måde, skal den længst til venstre have en float:left; og en bestemt bredde, og det <div> der skal wrappe udenom de to venstresøjler skal ligeledes have en bestemt bredde som passer til de to søjler's bredde lagt sammen.

net.
Avatar billede apo Praktikant
23. oktober 2005 - 21:32 #26
electricnet > Nu ser det bedre ud. Word kan også tolke Linux' linebreaks :-)
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:34 #27
Apo: Hvad er Word :P
Electricnet: Hmm... men gir det ikke probs, at have divs indeni divs?
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:35 #28
cskoven > Næ, det gør det ikke, du skal bare sørge for at det yderste div ingen margin eller padding har, så burde det se fint ud.

Du kan have lige så mange divs inde i divs som er inde i divs (etc ..) som du vil. :D

net.
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:49 #29
electricnet: http://new2.cskoven.com/
hvordan får jeg så menu til at stå ved siden af cskoven.com?
Avatar billede apo Praktikant
23. oktober 2005 - 21:50 #30
float:left; (på cskoven.com)
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:50 #31
NB: ny adresse, da jeg her prøver uden tables... men sys ikk det er så nemt at styre..
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:53 #32
box1and2 skal ikke have float:left; Det skal have position:fixed; og top:0; og left:0; som jeg skrev i mit første indlæg i denne thread. :)

Derimod mente jeg at det var box1 der skulle have float:left;, så burde det virke.

Og forresten, så vil jeg anbefale at du bruger <h1> tags til overskrifter istedet for <div class="headline">, da <h1> er et element der er beregnet til store overskrifter. :)
(tilsvarende er der <h2>,<h3> etc. hele vejen ned til <h6> til mindre overskrifter)

I CSS'en laver du bare .headline om til h1.

net.
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:53 #33
hmm.. sys ikk menu kommer op ved siden af cskoven.com
Avatar billede apo Praktikant
23. oktober 2005 - 21:54 #34
Nå, for mange kokke fordærver maden ;-) I'm out.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 21:56 #35
Nu skal du så give box1and2 en bestemt bredde som passer til de to søjlers bredde sammenlangt (inkl. evt. kant og margin) og en height:100%;

Hmm .. prøv også at putte en bestemt bredde på box1.

net.
Avatar billede cskoven Nybegynder
23. oktober 2005 - 21:58 #36
hmmm done.. ser ikke anderledes ud..
Avatar billede cskoven Nybegynder
23. oktober 2005 - 22:01 #37
ang. headline, var det for at kunne definere dem fuldstændigt.. men det kan man måske også.? prøver..
Avatar billede electricnet Nybegynder
23. oktober 2005 - 22:03 #38
Nu er den da ihvertfald kommet op på siden af box3. Kigger lige lidt på koden ..

net.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 22:03 #39
Hvad mener du med at definere dem fuldstændigt? Jeg kan ikke se nogen forskel mellem .headline og h1.

net.
Avatar billede electricnet Nybegynder
23. oktober 2005 - 22:05 #40
Jeg tror jeg kan se hvad fejlen er mht. de venstre søjler:

Du har glemt et semikolon efter width:
width:406px

og den løber således sammen med height: 100%; og ødelægger begge. ;)

Men hvis du fikser den, burde det virke. :D

net.
Avatar billede cskoven Nybegynder
23. oktober 2005 - 22:46 #41
hey.. så fik jeg orndet den, der er ikke grænser for mærkelige fejl når man er træt.. men nu sys jeg menu-boxen er helt væk?!
Avatar billede cskoven Nybegynder
23. oktober 2005 - 23:00 #42
Folk er måske gået i seng?
Avatar billede electricnet Nybegynder
24. oktober 2005 - 15:02 #43
Jeg vil mene at du skal have en margin-left på box2 som passer til bredden af box1 + box1's evt. margin og border. ;)

net.
Avatar billede cskoven Nybegynder
24. oktober 2005 - 23:18 #44
electricnet: thx..! Så mangler jeg bare den blå's størrelse, og at få den nederste grå til at være under alle 3. Hmm og sys ikk der er nogen afstand imellem den rød cskoven.com og menu? Selvom jeg har defineret border + givet plads til border?
Avatar billede kongknabe Nybegynder
25. oktober 2005 - 02:22 #45
Nu kunne jeg ikke lige helt finde ud at om du har fundet en løsning på dit problem, men jeg sad med noget af det samme og fandt på en god løsning forleden som endda som en lille bonus virker perfekt i IE.... :-)

Jeg er amatør så bær over med mig hvis jeg ikke forklare så godt :-)

Du sætter overflow: hidden for body.
Så smider du den blå boks ind øverst i dit html og sætter width og height til 100% - og overflow til auto ! Du laver også en venstre padding der tilsvare den grå og røde boks bredte....

Dernæst smider du simpelthen bare den grå, den røde og den grå i bunden ind i dit html og positionere det med absolute i noget css ! ... Ja, det burde være det :-)

Håber det evt. kan bruges :-)
Avatar billede kongknabe Nybegynder
25. oktober 2005 - 02:39 #46
nå, der skulle lige en anelse mere til, men det er en rimelig simpel måde at lave det på synes jeg.. har lige lavet en lille meget hurtig kladde så du kan se hvad jeg mener... Har ikke lige testet det her i IE da jeg sider med en Mac, men det burde virke.. !? :-)

http://kongknabe.users.whitehat.dk/cskoven/index.html

Mvh. Rasmus
Avatar billede kongknabe Nybegynder
25. oktober 2005 - 02:55 #47
Hmm.. Ser nu at min model har nogle problemer... Dels bliver scrollbaren lidt dækket af den grå boks i bunden ( i safari, ikke i firefox ) - og i firefox vil den ikke scrolle via mit track pad som den ellers burde !? - ved ikke lige hvordan man løser dette !?
Avatar billede electricnet Nybegynder
25. oktober 2005 - 08:09 #48
kongknabe > Interessant! Her virker det fint, bortset fra der er et lille hul mellem bunden af siden og bunden af browservinduet.

cskoven > Jeg tror ikke du kan lægge footeren nedenunder alting uden at det skal give en masse problemer. :/

Jeg så dog lidt problemer med scrollbarene, og jeg fik det løst ved at fjerne width:100%; på både box3 og box4. Jeg tror den fik dem til at gå ud over kanten, og det virker fint uden. Og så kan man ikke kommentere i CSS med //, så din overflow:hidden; blev stadig læst. Den skal også slettes, erfarede jeg. Så burde det virke perfekt. :D

net.
Avatar billede electricnet Nybegynder
25. oktober 2005 - 08:11 #49
Og den der med kanten imellem box1 og 2 er lidt svær. :/
Jeg kan ikke se hvorfor den ikke skulle være der, hvis du har lavet den rigtige bredde og de rigtige antal kanter med den rigtige tykkelse.

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