Opbygge side i DIVS

Tags:    div scroll javascript

Hejsa,

Jeg er ved at opbygge en hjemmeside, så det hele bliver opbygget i tabeller og divs, og jeg skal i den forbindelse bruge lidt hjælp.

Hjemmesiden bliver opbygget i top og bund, også har jeg et spørgsmål da jeg bruger en del scripts på siden også, om et javascript SKAL stå i headeren, eller om jeg kan få det ind på de enkelte sider, når det skal bruges?

Derudover skal jeg høre om man kan sætte en fast højde på en <div>, og hvis indholdet så overstiger denne højde, så laver den en scroll.



10 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 9 karma
Sorter efter stemmer Sorter efter dato
Angående javascript, så er det bedst at vente med at køre javascript til dokumentet er indlæst helt. Så du har to muligheder:

1) At have dine scripts i headeren og tjekke om DOM'en er klar før du kører dit javascript.

2) At have dine scripts umiddelbart før du lukker dit bodytag - så er du sikker på at de først bliver læst når dokumentet er klar.

Hvis det handler om inline funktioner, som den i dit eksempel, så er det bedst at holde den ude af dit indhold og enten i head eller før body-luk. Du kan stadig kalde den inline i attributter som onClick.

Angående div med statisk højde og scrollbars, så kan du godt bruge overflow-y: scroll - men overflow: auto er mere korrekt. Det burde give præcis samme resultat.



Spørgmål 1.
Du kan godt få det ind på de enkelte sider.
Du skal bare gøre som normal.

Spørgmål 2.
Fold kodeboks ind/udCSS kode 




Så lærte man da lige noget nyt.

Så må den ultimative kode jo være.
Fold kodeboks ind/udCSS kode 




Fantastisk Anders. Så jeg kører bare en:

Fold kodeboks ind/udJScript kode 

Selvom den ikke er i <head> ?




Indlæg senest redigeret d. 07.02.2012 18:42 af Bruger #17035
Hvorfor er overflow: auto; mere korrekt?



For det første er overflow-x/y CSS3 - hvor overflow er CSS2.

For det andet, så virker scroll og auto stort set ens, udover at scroll altid tilføjer en scrollbar - også når den ikke er nødvendig.

For det tredje, så vil der i stort set alle tilfælde kun være overflow på den vertikale akse (y) og derved er det unødvendigt at specificere at det er y-aksen der er tale om.

Hvis der alligevel er overflow på x aksen, er det tosset at den er defineret anderledes end y - hvorfor overflow visible på den ene og scroll på den anden...

Overflow på x aksen, vil sjældent opstå, fordi block elementer fungerer på den måde, at de bruger den bredde der er til rådighed (hvis andet ikke er specificeret) og at de automatisk tilpasser højden. Eneste undtagelser jeg kan komme på er billeder der er for bredde eller block elementer der bruger CSS3 columns property inden i andre blocks med fast defineret højde*.

*columns-span: 2; på et p tag i en div med fast defineret højde vil lave overflow på x aksen frem for y aksen ved at lave 3, 4 eller et endnu højere antal kolonner. Det kan fixes med et lille positioning hack...



Så i den ultimative verden, når jeg tager højden på 435px og bredde på 655px, vil min kode så være:

Fold kodeboks ind/udCSS kode 


Er det forstået korrekt?

Hvis jeg bruger denne kode, tager mit indhold udgangspunkt i midten af siden, også udvider sig derfra, er der en metode, så det starter i toppen??
Edit, havde lige glemt at uploade min style.css -.-', men overstående gør sig stadig gældende.



Indlæg senest redigeret d. 08.02.2012 19:58 af Bruger #17035
@Anders, du kan godt bruge din overflow-y som ekstra lag - men jeg vil nu mene at det ikke er nødvendigt. Den tilføjer ikke nogen ny funktionalitet.

I forhold til word-wrap break-word er det kun nødvendigt med meget lange ord i meget smalle kasser - eller ved meget lange urls i dit indhold... :-) Men ja - du har sådan set ret - fin tilføjelse.

@Morten - tager udgangspunkt i midten? Mener du at teksten er centreret? I så fald er det fordi du har inherited en text-align fra et andet element- fix det med at definere den som text-align: left; i din kode. Hvis ikke, så må du lige uddybe dit problem.

Et live eksempel vil være perfekt. evt bare på jsfiddle eller dabblet.



Teksten starter ligesom midt i, en centreret tekst, men centreret i den mening mellem toppen af diven og bunden af diven.

Desuden har jeg fået det problem, at den scroll som skulle komme frem ikke virker i google chrome, det virker fint i FF og IE, men i chrome vil den ikke komme frem.



Et live eksempel vil være perfekt. evt bare på jsfiddle eller dabblet.




t