Layout zu klein, an einem anderen Computer sieht es anders aus!

[SchokoBrunnen]

Hey,

ich hatte dieses Problem schon einmal, jedoch hab ich es wieder, nur mit einem anderen Design.

Bei mir sieht es so aus:

Bei einem Freund der einen deutlich größeren Bildschirm hat sieht es so aus:

Ich finde einfach keine Lösung, kann mir da einer helfen?

Schaut es euch am besten selber an:
HabboLayout - 2

CSS:
http://schokosprojekte.bplaced.net/css/global.css

Index.html :
view-source:http://schokosprojekte.bplaced.net/

 

[Elroy]

Hallo.

Also da spielen mehrere Faktoren eine Rolle.

Zuerst einmal solltest du die 102 HTML Fehler beseitigen die du hast: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Dann hast du viele Elemente absolut positioniert was absolut unnötig ist, da musst du dich nicht wundern das es an jedem Viewport anders aussieht.

Ausserdem sieht dein Code aus als wenn du der Divitis verfallen bist. Bitte benutze HTML zum Auszeichnen deines Inhalts und nicht dazu mit vielen kleinen Div Boxen ein Layout zu erstellen.

Gruss
Elroy

 

[SchokoBrunnen]

Hallo.

Also da spielen mehrere Faktoren eine Rolle.

Zuerst einmal solltest du die 102 HTML Fehler beseitigen die du hast: [Invalid] Markup Validation of http://schokosprojekte.bplaced.net/ - W3C Markup Validator

Dann hast du viele Elemente absolut positioniert was absolut unnötig ist, da musst du dich nicht wundern das es an jedem Viewport anders aussieht.

Ausserdem sieht dein Code aus als wenn du der Divitis verfallen bist. Bitte benutze HTML zum Auszeichnen deines Inhalts und nicht dazu mit vielen kleinen Div Boxen ein Layout zu erstellen.

Gruss
Elroy

Ich verstehe es nicht, wenn ich die Elemente nicht absolut positionieren soll wie dann ?

 

[Cheffchen]

Hallo,

Die Zauberwörter sind:

float, clear, margin, padding

einfach mal suchen +css.
Selfhtml ist zwar recht alt aber die erklärungen passen noch immer und sind verständlich.

Hast dir das mal im IE angeschaut, autsch.

Cheffchen

 

[SchokoBrunnen]

Ich benutzte das auch, aber wenn nicht nicht position:absolute; eingebe passiert nichts, sprich die Box positioniert sich nicht.

 

[Tronjer]

Es existiert eine ganz einfache Möglichkeit, ein Basis-Layout zu erstellen, das in allen Auflösungen ordentlich aussieht, ohne dass man dazu auch nur eine einzige Zeile CSS schreiben müsste.

Verlinke diese Datei im Head:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">

und schau dir hier unter den Topics Scaffolding und Base CSS an, wie man damit umgeht.

Bootstrap

Wenn du das einmal verstanden hast, gibt es keine Probleme mehr mit der Positionierung von Elementen, und solange du das nicht verstanden hast, kannst du keine Webseiten bauen.

 

[Cheffchen]

Hallo,

geht einfacher als man denkt, hier mal ein grundgerüst:
x_float_beispiel - jsFiddle

Cheffchen

Edit: ich hasse es das ich nicht gewarnnt werde wenn ich mal wieder zu langsam was :O(

 

[Tronjer]

Hallo,

Edit: ich hasse es das ich nicht gewarnnt werde wenn ich mal wieder zu langsam was :O(

Von dem Template mal abgesehen verwende ich dort, wo der IE 7 nicht im Mittelpunkt steht, mittlerweile lieber display: inline-block. Floaten hat einerseits den Nachteil, dass ich öfter mal ein leeres HTML-Tag erzeugen muss, um einen .clearfix anzuhängen und außerdem werden gefloatete Elemente aus dem Textfluss genommen. Was bedeutet, dass das Eltern-Div in der Höhe nicht mitwächst.