[H] Seite dynamisch gestalten

[Prarrior]

Hallo,

ich habe ein Problem.

Undzwar will ich eine Seite dynamisch gestalten, sprich alles soll sich an die Auflösung des Monitors/der Fenstergröße stellen.

Momentan habe ich den top bereich mit dem header und den main bereich mit der navi und dem content.

Bis jetzt ist es ja so wie ich will auf meiner Auflösung (1680x1050) habe ja auch alles auf die Auflösung eingestellt, aber verkleinere ich das Fenster jetzt geht der breite header oben natürlich kleiner so das man am Ende nur die Mitte sieht.

Allerdings wird der Content bereich einfach abgeschnitten, ich will aber das man ihn immer sehen kann, außer das Fenster wird zu klein.

Kann ich das mit html/css machen?

[boxxiebabee]

Also, die Weitenangaben natürlich in % angebenen. Dann entweder nen min-width geben, oder mit jQuery den Inhalt anpassen, z.B. die Textgröße.

[Prarrior]

Originally Posted by boxxiebabee

Also, die Weitenangaben natürlich in % angebenen. Dann entweder nen min-width geben, oder mit jQuery den Inhalt anpassen, z.B. die Textgröße.

Das mit der % Angabe habe ich am Anfang gemacht, Problem ist das der Abstand vom header zum Content ja immer gleich bleiben soll, sprich z.B. 100px.
Er soll nur vom Rand dynamisch sein. Da müsste man das dann so machen
margin: 100px auto auto 10%;

Und ich habe gelesen das man die verschiedenen Werte wie px und % nicht mischen kann.

Und noch ein Problem ist:

Das Navi und der Content gehören zusammen, also beide müssen exakt nebeneinander sein sonst passt das gesamtbild nicht mehr

[mdna]

Du kannst ja auch die margin-angaben einzeln definieren.

margin-top:100px; für deinen Content
margin-left: 5%;
margin-right: 5%;

MfG, Mdna

[Prarrior]

Also ich hab das jetzt einzeln definiert mit

#navi {
background-image: url(sidebar.png);
height: 395px;
width: 313px;
position: relative;
margin-top: 150px;
margin-left: 17%;
color: #FFF;
float: left;
}
#content {
background-image: url(main.png);
height: 670px;
background-repeat: no-repeat;
position: relative;
width: 860px;
margin-left: 33%;
margin-top: 60px;
}

Jetzt habe ich das Problem das der Content, wenn ich das Fenster verkleinere in die Sidebar reingeht, also verdeckt.

Hier mal ein Ausschnitt damit ihr seht was ich meine.

Normal:

 Spoiler

Verkleinert:

 Spoiler

Und das alte Problem besteht wetierhin, wenn ich das Fenster verkleinere wird der rechte Teil des Contents einfach abgeschnitten.
Ich habe links und rechts außerdem noch Freiraum, so das der Inhalt im Center der Seite ist.
Links ist der Freiraum, rechts wird er beim verkleinern des Fensters abgeschnitten und ich kann nicht einmal dorthin scrollen.

[boxxiebabee]

Am besten du stellst mal ein Beispiel bei hoch, kann man sich besser was vorstellen.
Und wenn der Content abgeschnitten wird, schonmal mit nem min-width probiert?

[Prarrior]

Originally Posted by boxxiebabee

Am besten du stellst mal ein Beispiel bei hoch, kann man sich besser was vorstellen.
Und wenn der Content abgeschnitten wird, schonmal mit nem min-width probiert?

Ja, min-width löst wenigstens das Problem das der Rand rechts abgeschnitten wird.
Ich hab mal eben den relevanten Teil aufm Webspace hochgeladen:

[boxxiebabee]

Originally Posted by Prarrior

Ja, min-width löst wenigstens das Problem das der Rand rechts abgeschnitten wird.
Ich hab mal eben den relevanten Teil aufm Webspace hochgeladen:

Ich weiß ja nicht welchen Browser du verwendest, aber bei mir (FF & Chrome) wird weder der Content abgeschnitten, noch verrutscht er, aber warum auch? Hat ja ne fixxe Weite. Achja, und im FF wird das Menü falsch angezeigt.

[Prarrior]

Originally Posted by boxxiebabee

Ich weiß ja nicht welchen Browser du verwendest, aber bei mir (FF & Chrome) wird weder der Content abgeschnitten, noch verrutscht er, aber warum auch? Hat ja ne fixxe Weite. Achja, und im FF wird das Menü falsch angezeigt.

Hab auch den FF benutzt als ich das Bild gemacht habe, nun verrutscht es aber nicht mehr, komisch.
Und was meinst du mit das Menü wird falsch angezeigt? Ich sehe da nichts im FF.

Aber kannst du mir noch bei dem Problem helfen das, wenn ich das Fenster verkleinere oder jemand der eine niedrigere Auflösung die Seite besucht, das sich der Content auch etwas verkleinert?

Nicht jeder hat nen 22" Bildschirm

[boxxiebabee]

Originally Posted by Prarrior

Hab auch den FF benutzt als ich das Bild gemacht habe, nun verrutscht es aber nicht mehr, komisch.
Und was meinst du mit das Menü wird falsch angezeigt? Ich sehe da nichts im FF.

Aber kannst du mir noch bei dem Problem helfen das, wenn ich das Fenster verkleinere oder jemand der eine niedrigere Auflösung die Seite besucht, das sich der Content auch etwas verkleinert?

Nicht jeder hat nen 22" Bildschirm

Gib doch einfach % angaben an, und ne mindest Weite. Wenn du den Content, z.B. Text auch verkleinern willst musst du zu Javascript greifen.

FF (aktuellste Version):

[Prarrior]

Originally Posted by boxxiebabee

Gib doch einfach % angaben an, und ne mindest Weite. Wenn du den Content, z.B. Text auch verkleinern willst musst du zu Javascript greifen.

FF (aktuellste Version):

o.O
Bei mir wird das Menü richtig angezeigt.
Ich habe beim #navi ul noch px angaben drin, die muss ich dann auch noch in % ändern damit es sich an die Auflösung anpasst.

Na gut, wenn das soweit nicht mit html geht, wars das.
Danke

Eine Frage habe ich aber dennoch.

Ich will das ganze hinterher noch in ein CMS einbinden, wahrscheinlich in Wordpress, ist ja sehr beliebt.
Am design der Seite muss ich dafür nichts ändern oder?
Ändern muss ich nur was am Code, wenn ich richtig gelesen habe?

Und kennst du dich mit Wordpress auch aus und kannst mir evtl. helfen wenn ich soweit bin und dabei noch Fragen habe?

[boxxiebabee]

Ja, kenn mich auch mit Wordpress aus. Brauchst eig. nicht viel ändern, nur paar PHP Codes reingeben fürs Menü etc., HTML aufteilen und das wars dann auch schon großteils. Gibs genügend Tutorials im Internet, einfach mal dannach googlen.

[Prarrior]

Ich muss das hier nochmal pushen weil ich das alte Problem wieder habe das sich der Content über die Navi schiebt.
Wenn ich nen #wrap mit min-width mache ist das Problem zwar nicht mehr da, allerdings soll es wenn man das Fenster verkleinert alles nach links gezogen werden, wie der Header auch.
Wenn man hier auf epvp das Fenster verkleinert geht der graue Rand links und rechts ja weg und der Content schiebt sich bis ganz nach links.
So soll es ja auch sein, beim Header ist das ja kein Problem, aber da der Content und der Navi über % width laufen, weiß ich nicht wie ich das beheben kann.

[Prarrior]

push

[FR28]

Sende mir eine Pn mit dem link zu deiner Seite, dann kann ich dir helfen.