Html Website wird beim verkleinern zusammengequetscht

[korbmeister]

Hey Ich wollte mich mal daran versuchen meine eigene Website zu erstellen. Bisher hat auch alles ganz gut geklappt nur habe ich jetzt das Problem, dass wen ich die Seite verkleinere oder die Auflösung verringere , dass dann die Seite total zusammengequetscht wird. Was kann ich machen damit die Seite sich beim verkleinern anpasst und in jeder Auflösung gut aussieht?

Meine Seite http://korbmeister.ko.funpic.de/
Meine Auflösung 1920x1080

 

[threadi]

Webseiten passt man nicht an Auflösungen an. Webseiten nehmen nämlich in 99% der Fälle nie die Auflösung eines Bildschirms ein. Es sind immer Randpixel vom Fenster dran. Den Bereich nennt man dann Viewport. Den Gedanken eine Webseite an eine Auflösung anzupassen solltest Du dir abgewöhnen.

Weiterhin ist es nicht HTML was für die Gestaltung zuständig ist, sondern CSS. Wie ich sehe wendest Du CSS auch schon teilweise an, aber noch nicht ausreichend.

Dein HTML-Code ist zudem fehlerhaft:
[Invalid] Markup Validation of http://korbmeister.ko.funpic.de/ - W3C Markup Validator
Korrigiere das, besonders den fehlenden Doctype. Und schau dir danach mal einige CSS-Grundlagen an (z.B. hier: CSS 4 You - The Finest in Stylesheets). Mit denen wird es dir dann auch möglich sein ein Design zu erstellen, welches sich flexibel an verschiedene Viewports. Bedenk dabei aber, dass derzeit die meisten Internetnutzer mit Computern eine Auflösung von 1024x768 und höher haben. Eine Webseite sollte folglich auf mindestens rund 980 Pixel Breite im Viewport darstellbar sein. Alles darunter ist irrelevant, es sei denn Du optimierst auch für mobile Endgeräte.

 

[Cheffchen]

Hallo,

in dem nicht mit absolute Position Arbeitest.
Das ist nur Positionierung besonderer sachen in einem div und nicht da für alle divs damit zu machen.
Schau die mal Lieber float an.

ps: aber gleich 2 counter drin, willst uns helfende ausspionieren :O)

Cheffchen

pps. oh threadi war etwas schneller aber wie immer total recht.

 

[korbmeister]

Ok erstmal danke für die Hilfe!
Ich werde mir dann mal css angucken.

@cheffchen nein ich will niemanden ausspionieren ^^ hab nur den link von der Seite kopiert.

Ps: Kennt ihr noch ein paar gute Seiten wo ich HTML und CSS dann nochmal schritt für schritt lernen kann?

 

[threadi]

Siehe: Quellensammlung

 

[korbmeister]

Mhh ich hab mir die Tutorials mal angeguckt wirklich weiter geholfen haben sie mir nicht wirklich. Soviel habe ich verstanden (hoffe ich zumindest) ich brauche eine HTML und eine CSS Datei ok soweit nur an manchen stellen wird gezeigt, dass man CSS auch in einer HTML Datei verwendet und ihr habt gesagt das ich CSS auch schon ein wenig verwende aber ich habe doch nur eine einzige HTML Datei wie soll das den dann gehen? Nur wie ich mein Problem löse hab ich immer noch nicht herausgefunden wie ich es hinkriege das die Seite in jeder Auflösung gut aussieht ich habe auch Google benutzt wo bereits unzählige Themen dazu zu finden sind nur leider hat mir auch davon keins Weitergeholfen. Gibt es auch eine etwas einfachere Möglichtkeit mein problem zu lösen?

Ps: Tut mir Leid das ich mich so Dumm stelle aber ich bin noch ein absoluter neuling in diesem Gebiet.

 

[threadi]

In einem Tag kann man das auch nicht unbedingt "alles" verstehen. Schau dir mal ein Tutorial an, experimentiere mit dem was Du gelesen hast. Teste etwas aus, kaputt machen kannst Du mit HTML und CSS nichts.

Und wg. deinem "Auflösungs"-Problem. Wie schon gesagt, solltest Du dich von dem Gedanken verabschieden. Du musst Dich bei der Erstellung eines Designs dafür entscheiden bei welchen Viewports es gut aussehen soll. Also passt Du es entweder auf eine Mindestbreite (z.B. 980 Pixel) an oder lässt es komplett dynamisch (verwendest keine Breitenangaben in Pixeln). In letzterem Fall musst Du jedoch dann höllisch darauf achten, dass Texte nicht aus versehen zu schmal angezeigt werden oder die Elemente sich gegenseitig verschieben.

 

[korbmeister]

Es geht mir im Moment nur um mein "Auflösungs-Problem" Ich kann meine Seite Doch nicht nur für eine Auflösung/ Viewport erstellen das wäre doch dann Sinnlos Wen nur jeder meine Seite Angucken kann der auch eine bestimmte Auflösung hat . Ausserdem wie macht es z.b diese Seite ich kann in jede Auflösung wechseln und kann immer alles erkennen.

 

[threadi]

Wie schon gesagt: dafür wäre es nötig auf absolute Angaben zu verzichten und Prozentuale zu verwenden. Je nachdem wie die Boxen dargestellt werden, müsste einzelne auch feste Breiten haben und gleichzeitig muss man darauf achten, dass sie sich nicht verschieben.

Tipp: nimm dir Firebug im Firefox oder Dragonfly im Opera. Damit kannst Du den Quellcode von Seiten wie dieser hier per Klick anschauen und vlt. erkennen wo hier prozentuale Einheiten verwendet werden.