Dynamische Seitenlänge (ich bekomms einfach nicht hin)

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich weiss ich bin neu hier und das Thema gabs bestimmt schon zich mal, aber ich hab wirklich alles versucht und ich bekomme es einfach nicht hin die Seitenlänge Dynamisch zu machen.
Hier meine CSS

[CODE]body {
background-image : url(‚…/pic/bg.png‘);
background-color : #000000;
text-align : center;
}
#site {
position : relative;
margin-left : auto;
margin-right : auto;
top:0px;
width : 964px;
}
#header {
background-image : url(‚…/pic/header2.png‘);
background-repeat : no-repeat;
position : absolute;
top : 0px;
height : 142px;
width : 964px;
border : 0;
}
#menu1 {
background-image : url(‚…/pic/menu1.png‘);
background-repeat : no-repeat;
position : absolute;
top : 142px;
width : 964px;
height : 50px;
}
#menu2 {
background-image : url(‚…/pic/menu2.png‘);
background-repeat : no-repeat;
position : absolute;
top : 328px;
width : 165px;
height : 343px;
}
#login {
background-image : url(‚…/pic/status.png‘);
background-repeat : no-repeat;
background-color : #ffffff;
position : absolute;
top : 189px;
width : 166px;
height : 139px;
}
#loginbt {
background-image : url(‚…/pic/login.png‘);
background-repeat : no-repeat;
cursor:hand;
cursor:pointer;
left:15px;
width: 52px;
height: 20px;
top:110px;
position: absolute;
}
#donate {
background-color : #ffffff;
position : absolute;
left : 165px;
top : 189px;
width : 632px;
height : 120px;
}
#vote {
background-image : url(‚…/pic/votebg.png‘);
background-repeat : no-repeat;
background-color : #ffffff;
position : absolute;
top : 671px;
width : 165px;
height : 204px;
}
#undervote {
background-color : #ffffff;
position : absolute;
top : 875px;
width : 165px;
height : 366px;
}
#stat1 {
background-image : url(‚…/pic/status.png‘);
background-repeat : no-repeat;
background-color : #ffffff;
position : absolute;
left : 795px;
top : 189px;
width : 169px;
height : 139px;
}
#stat2 {
background-image : url(‚…/pic/rank.png‘);
background-repeat : no-repeat;
background-color : #ffffff;
position : absolute;
left : 794px;
top : 328px;
width : 170px;
height : 204px;
}
#lastpic {
position : absolute;
top : 22px;
left : 22px;
}
#stat3 {
background-image : url(‚…/pic/scs.png‘);
background-repeat : no-repeat;
background-color : #ffffff;
position : absolute;
left : 794px;
top : 532px;
width : 170px;
height : 139px;
}
#stat4 {
background-image : url(‚…/pic/rank.png‘);
background-repeat : no-repeat;
background-color : #ffffff;
position : absolute;
left : 794px;
top : 671px;
width : 170px;
height : 204px;
z-index : 100;
}
#understat4 {
background-color : #ffffff;
position : absolute;
top : 744px;
left : 794px;
width : 170px;
height : 497px;
}
#usernamebg {
position : absolute;
top : 18px;
width : 128px;
height : 28px;
}
#userpwbg {
position : absolute;
top : 18px;
left : 130px;
width : 128px;
height : 28px;
}
#footer {
background-image : url(‚…/pic/footer.png‘);
background-repeat : no-repeat;
position : absolute;
top : 1241px;
width : 964px;
height : 10px;
}
#content {
background-color : #ffffff;
position : absolute;
top : 309px;
left : 165px;
width : 630px;
height : 932px;
}

a:link {
color : #fff;
text-decoration : none;
}
a:visited {
color : #fff;
text-decoration : none;
}
a:focus {
color : #fff;
text-decoration : none;
}
a:hover {
color : #fff;
text-decoration : none;
}
a:active {
color : #fff;
text-decoration : none;
}
a:link {
color : #fff;
font-family : Calibri, Arial, sans-serif;
font-size : 12pt;
color : #ffffff;
text-decoration : none;
}
a:visited {
color : #fff;
font-family : Calibri, Arial, sans-serif;
font-size : 12pt;
color : #ffffff;
text-decoration : none;
}
a:hover {
color : #fff;
font-family : Calibri, Arial, sans-serif;
font-size : 12pt;
color : #ffffff;
text-decoration : none;
}
a:active {
color : #fff;
font-family : Calibri, Arial, sans-serif;
font-size : 12pt;
color : #ffffff;
text-decoration : none;
}
#slideshow {
position : relative;
height : 100px;
width : 150px;
}
#slideshow IMG {
position : absolute;
top : 0;
left : 0;
z-index : 8;
}
#slideshow IMG.active {
z-index : 10;
}
#slideshow IMG.last-active {
z-index : 9;
}
[/CODE]

Könnte mir evtl dabei helfen?
Ich hätte auch Icq Teamspeak etc.

2

Lass die Höhenangaben weg, dann passen sich die Elemente ihrem Inhalt an und sind so hoch, wie sie sein müssen.

Die absolute Positionierung solltest du auch weglassen.

3

Das funktioniert ja leider nicht ganz, weil der content Div den jeweiligen Seiteninhalt darstellt und die Divs undervote und understat4 nicht den jeweiligen inhalt beinhalten sondern nur platzhalter sind, da ich links mehrere fläschen mir menüs habe und links die statusfenster. Ausserdem bleibt merkwürdigerweise immer ein gewisser bereich des contents unbedeckt selbst wenn ich ich keine höhenangabe mache.

Da ich net weiss ob ich hier einfach links posten darf, gebe ich gerne den link zu meiner seite per pm auf anfrage weiter.

Ach ja und nochwas, alle 3 Div müssen eine mindestlänge haben.

4

Klar, kannst du Links posten. Das ist die beste Möglichkeit für andere, effektiv zu helfen.
Ich hab dein Problem nicht so recht verstanden. Hilft dir vielleicht das weiter? Faux Columns

5

Wenn mir jemand konkret helfen möchte, kann er das am besten per icq tun. 280763399
Vielleicht komm ich so eher weiter wenn ich mein Problem dort genauer mit einem von euch „Gurus“ abarbeite^^
Danke aber schonmal für die antworten
@prm Hat mir leider nicht weitergeholfen :frowning: trotzdem danke

6

Die Längen verschiedener Spalten richten sich nicht automatisch nach der längsten.
Dazu brauchst du doch Faux Columns.

Allerdings hast du die Höhe deiner Spalten begrenzt. Nimm deshalb mal deren height-Wert raus, dann können sie zumindest bei ihrem eigenen Inhalt mitwachsen.

#undervote {
background-color : #ffffff;
position : absolute;
top : 875px;
width : 165px;
height : 366px;
}

#understat4 {
background-color : #ffffff;
position : absolute;
top : 744px;
left : 794px;
width : 170px;
height : 497px;
}

7

Das bringt nur leider nichts weil die beiden layer dazu da sind eine weisse fläche links und rechts des content layers zu machen, damit es nicht so aussieht (das passiert wenn ich deinem vorschlag nachgehe @pgm) :
[URL=http://img13.imageshack.us/i/sonicht.jpg/]http://img13.imageshack.us/img13/8764/sonicht.th.jpg
[/URL]

8

Genau deshalb brauchst du Faux Columns.
Unabhängig davon hat deine Seite erheblich viele Fehler und ist ziemlich wirr aufgebaut:
[Invalid] Markup Validation of http://www.kojaky.de/ - W3C Markup Validator

Mein Tipp:
Wer ernsthaft Interesse an seiner Homepage hat, der kommt nicht umhin, HTML und CSS zu lernen.
Es wird deshalb schwer sein, dir Tipps zu geben, solange du kein vernünftiges Grundgerippe hast und nicht die Zusammenhänge verstehst.

9

[Invalid] Markup Validation of http://www.ohne-css.gehts-gar.net/ - W3C Markup Validator

Schonmal die Seite Validiert die du als Signatur hast?
Hab alle errors die ich jetzt gefunden habe behoben

Hab ich und stell mich nicht so hin als wenn ich nix kapieren würde das is ja mal LOL
Dann mach doch mal einen akzeptablen Vorschlag für ein „vernünftiges Grundgerippe“.
Wie soll ich denn deiner Meinung nach die ganzen Statusfenster, Login,Menüs unterbringen?

Ich bin gerne offen für Ideen. Aber bis auf das mit Faux Columns sehe ich nur kritik.

10

Er meint damit, dass du das Wort Semantik wohl noch nie gehoert hast und HTML nicht dazu nutzt, wozu es gedacht war.
Wenn du es wirklich richtig lernen willst (ich habe gerade keine wirkliche Lust zu einem Aufsatz), dann empfehle ich dir diesen Link:

Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel

(Das ist uebrigens ein anderer Link, erklaert aber trotzdem das Wesentliche. Ich werde den anderen Link bald nachreichen.

gruesse hokage

Ps: Vll. solltest du anfangen zu lernen mit Kritik besser umzugehen… Wir tun diese Forenarbeit hier alle freiwillig. Wenn wir Kritik aeussern, dann nicht an deiner Person, sondern an deinem Code. Wenn du diese Kritik nicht verkraftest, oder nicht hoehren willst, dann bist du hier falsch…

11

Ja, hab ich natürlich. Von den 222 Fehlern auf der Startseite ist allerdings kein einziger, der den Seitenaufbau an sich betrifft.
Diese Fehler resultieren ausschließlich aus den eingeblendeten Werbebannern, auf deren Code ich keinerlei Einfluss habe.

Zum zweiten: Glückwunsch, dass deine Seite jetzt valide ist.

Schließlich:
Wenn du es vermeidest, mit den vielen absoluten Positionierungen zu arbeiten (die heißen so, weil sie meist „absolut“ unnötig sind), dann kannst du die Anordnungen mit float und margin-Angaben besser lösen.
Dann die drei Spalten in einen #wrapper packen, siehe Dreispaltiges Layout, zentriert mit fixen Breiten und diesem einen weißen Hintergrund geben. Dann stellt sich das Problem ebenfalls nicht mehr und für diesen Fall sind dann auch keine Faux Columns erforderlich.

12

Hallo Leute,

ich hab auf meiner Seite genau das gleiche Problem. (www.Marcel-Meyer-Online.de) Ich habe es zum Freck nicht hinbekommen das so variabel zu gestallten, das es keine Fehler in der darstellung gibt. Gebe ich rechts in der Hauptspalte Inhalt ein, muss ich die Höhe immer variabel setzen. Was ziemlich blöd ist, da eine HTML und CSS unerfahrenere Person die Inhalte einplegen soll. Somit brauche ich eine funktionierende Vorlage. Bitte bitte helft mir, ich muss die Seite in ein paar Tagen fertig haben und krieg das einfach nicht hin. Je nach dem wie ich die Höhe einstelle, geht links die Menüleiste auch nicht mit bis ganz unten sondern behällt ihre feste Länge.

13

Hey, also das mit den Höhen angaben rausnehmen hat jetzt geklappt. (Hatte welche vergessen) jetzt hab ich aber das Problem das die Spalte mit der Navigation links dann sofort unter dem letzten Menüpunkt endet und sie nicht bis zum Boden der Seite mitruntergezogen wird. Wie stell ich das ein?

14

Ich habs mit float:left; lösen können.

Meine Seite ist jetzt validiert, dynamisch und hat 3 fehler in der css wegen der opacity was aber ja nur kommt weils nicht css 2.1 standart ist.

Gut das mit dem Sauberen Quelltext is noch eine Aufgabe aber immerhin klappts jetzt schonmal alles so wie es soll.

15

Hmm, also das sich die Navigation mit bis unten zieht bekomme ich jetzt echt net hin =( könnt ihr mir helfen? ist die letzte Kleinigkeit die mir noch fehlt…

16

Lies dir nochmal die Tipps in diesem Thread durch.