Div placering

Tags:    asp.net c# webdesign

Hejsa allesammen

Jeg har et lille problem med positionering af mine DIV'er :(
Indtil videre har mine DIV'er placeret sig under hinanden og flyttet sig når en har udvidet sig.
Men nu har jeg fået et problem med min nederste div efter jeg er begyndt at fylde indhold i.
Sagen er at min BodyContent-DIV er 500px høj hvori der er en content-placeholder.
Og min Footer-DIV er 30px høj og har lagt under BodyContent-DIV'en.

Nu er mit problem så at jeg har lagt noget indhold ind i den content-placeholder i BodyContent-DIV'en og pludselig udvider BodyContent-DIV'en sig ud over Footer-DIV'en istedet for at flytte den.

Jeg har prøvet at formindske min BodyContent-DIV og så snart den bliver 520 så det fint og den flytter Footer-DIV nedad, men kan ikke finde ud af hvorfor min Footer-DIV ikke flytter sig nedad når indholdet i DIV'en bliver større.
Jeg ville have troet at hvis det ikke kunne være i den, ville jeg blot få scrollbars, og mit indhold udfylder endda ikke engang hele BodyContent-DIV'en.
Nogen der kan hjælpe mig?

EKSEMPLER:
Normal uden indhold

Wierd med indhold
Lig mærke til den grå bar ude i siden går for langt ned over min footer-div..



8 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 8 karma
Sorter efter stemmer Sorter efter dato
Jeg går ud fra det er denne side det handler om: http://www.dotwest.net/PersonligProfil.aspx (Din kildekode kan vi som Morten skriver ikke bruge til meget uden en live version at kigge på)

Jeg går også ud fra at det er den grå boks til venstre i billedet http://img856.imageshack.us/img856/1442/wierddiv.jpg , som ikke må gå ned over linket "Laurits West" nederst til venstre.

Jeg kan se det virker fint i Firefox, Chrome og IE9, men at problemet ses i IE8.

Din div#BodyContent får den rigtige højde, men din table.SubMenuTable inden i bliver højere, selvom den har height:100% og derfor skulle have samme høje som den div den er inden i.

Problemet forsvinder hvis du sætter cellpadding=0 på den tabel i stedet for cellpadding=10. Så må du prøve at få den padding lagt på på en anden måde.



Indlæg senest redigeret d. 14.06.2011 09:08 af Bruger #3143
Jesper
Jeg må så prøve at lave dem om til DIV'er, men måske blot fordi jeg ikke forstår div'er lige så godt som tabeller.
Men synes ellers generelt tidligere at tabeller holder deres størrelse hvor div'er er lidt mere med de godt kan udvide sig.
Jeg prøver at lave det div-baseret istedet og hvis problemet opstår igen prøver jeg med nyt spørgsmål


UPDATE UPDATE UPDATE UPDATE UPDATE UPDATE UPDATE UPDATE UPDATE UPDATE


Fejlen er fundet!!
overflow:auto;
Tilføjede denne til Profil.Master til den div der holder content-placeholderen.
Hvis man ikke gøre dette så overrider indholdet (content pagen) blot størrelsen på den div som den skal placeres indeni uden at vise scrollbars.
Egentligt underligt da den jo burde være "begrænset" af den div, content-pagen skulle ligge indeni - men er ikke tilfældet.
Så nu er det løst og jeg er en glad mand :D

Fold kodeboks ind/udCSS kode 




Indlæg senest redigeret d. 14.06.2011 23:15 af Bruger #16651
Pastebin:
http://pastebin.com/UVkUqZnq

.header
Den grønne streg/linie i toppen.

.bannerOuter
Blot en outer-div for at kunne se placeringen

.banner
Heri er det rigtige banner-billede

.MenuOuter
Den der fylder det hele og laver de grønne kanter/linier udenom

.Menu
Selve div'en der er placeret i midten - igen for at kunne se placeringen

.MenuContent
Bruges til selve den tabel der er, der placerer menu-punkterne korrekt.

.BodyContent
Selve den DIV der indeholder alt indhold fra INDEX.Master

.Footer
Den i bunden der viser Copyright etc.

.MenuEntry
Hver celle's css i tabellen der holder menu-punkterne.

.MenuSelection
Den celle's css i tabellen der er under menu-punkterne som bliver grøn når man peger på menu'en.

.CopyrightFooter
Den tabel's css der er i bunden

.CopyrightMadeBy
Den celle der er placeret til venstre i footeren

.CopyrightText
Den celle der er placeret i midten af footeren

.CopyrightUpdatedLast
Den celle der er placeret til højre i footeren

Håber at der er nogen der måske kan se hvad der eventuelt kan være galt som gør at content udvider sig.
Siden er opbygget med en INDEX.MASTER - som har et banner, en menu, en-body-content og en footer.
Hvert menu-punkt har så deres egen nestede master (fx PROFIL.MASTER), som så har en menu og så en content-placeholder.
I denne content placeholder kommer så selve sidens indhold.

Jeg kan stadig ikke se hvad det er jeg gør galt, som gør at siden udvider sig når jeg putter noget indhold i :(



Hej Laurits,

Gider du ikke sende et link til din side istedet for et billede.

Det ville gøre det lidt nemmere, at se hvad der går galt.





Jeg går ud fra det er denne side det handler om: http://www.dotwest.net/PersonligProfil.aspx (Din kildekode kan vi som Morten skriver ikke bruge til meget uden en live version at kigge på)

Jeg går også ud fra at det er den grå boks til venstre i billedet http://img856.imageshack.us/img856/1442/wierddiv.jpg , som ikke må gå ned over linket "Laurits West" nederst til venstre.

Jeg kan se det virker fint i Firefox, Chrome og IE9, men at problemet ses i IE8.

Din div#BodyContent får den rigtige højde, men din table.SubMenuTable inden i bliver højere, selvom den har height:100% og derfor skulle have samme høje som den div den er inden i.

Problemet forsvinder hvis du sætter cellpadding=0 på den tabel i stedet for cellpadding=10. Så må du prøve at få den padding lagt på på en anden måde.

Må sige det undrer mig lidt med padding kan have den fejl.
Jeg afviser skam slet ikke det er det, der kan være årsagen (vil jeg prøve af når jeg kommer hjem), men sådan som jeg har lært det er
cellspacing = mellemrum fra tabellens kant og udaf
cellpadding = mellemrum fra tabellens kant og indaf
Er det mig der er helt forkert på den? Og hvis ikke er der så nogen der ved hvordan at der er mellemrum indeni i en tabel kan gøre at tabellen vokser? For kan godt være jeg ikke kender denne webverden nok endnu, men når jeg tænker over det giver det ikke mening for mig logisk :(

Hej Laurits,

Gider du ikke sende et link til din side istedet for et billede.

Det ville gøre det lidt nemmere, at se hvad der går galt.

Hejsa Morten

Det er nemlig Her problemet ligger som Jesper så rigtigt påpeger.
Tror fejlen ikke er synlig nu live, da ejg har ændret sidens højde til 550 (bodyContent) istedet for 450.

P.S. Tak begge to for hurtige svar og hjælp :)



Indlæg senest redigeret d. 14.06.2011 11:35 af Bruger #16651
Ja, det giver ikke rigtig mening at cellpadding skulle give problemer, men da jeg satte den til 0 virkede det. Som jeg også skrev er det kun i gamle udgaver af IE det sker, så det er nok en fejl i IE, som de har rettet, og ikke noget de har lavet med vilje. Derfor skal man nok ikke prøve at få det til at give mening.



Ja, det giver ikke rigtig mening at cellpadding skulle give problemer, men da jeg satte den til 0 virkede det. Som jeg også skrev er det kun i gamle udgaver af IE det sker, så det er nok en fejl i IE, som de har rettet, og ikke noget de har lavet med vilje. Derfor skal man nok ikke prøve at få det til at give mening.


Hejsa Jesper

Jeg har lige prøvet at hente det hele ned, og kan godt se det virker hvis jeg retter cellpadding fra 10 til 0, MEN...
Jeg har i forvejen rettet højden på BodyContent til Height:550px for at rettet problemet midlertidigt.
Da jeg nu troede problemet var løst prøvede jeg at sætte højden til 450px istedet da det så skulle gøre at den blot "krympede" og stadig fungerede, men kan se det så "lukker op" for det samme gamle problem :(

Kode:
Fold kodeboks ind/udCSS kode 




Jeg kan ikke svare på hvad der sker med ændringer til din kode som du poster her i forummet. Kun på ændringer jeg selv kan se på http://www.dotwest.net/PersonligProfil.aspx eller en anden live adresse. Firebug virker altså ikke på kode postet i forummet.

Helt generelt er det din udbredte brug af tabeller der giver problemer. Tabeller må ikke bruges til at lave layout. Tabeller skal kun bruges til at lave tabeller.



t