XHTMLforum - Richtige Größe der HP

XHTMLforum (http://xhtmlforum.de/index.php)

- Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)

- - Richtige Größe der HP (http://xhtmlforum.de/showthread.php?t=71820)

Richtige Größe der HP

Hallo zusammen,
ich weiss nicht ob dies hier hingehört, aber ich versuchs mal. Falls ich hier falsch bin bitte verschieben. ;)

Ich bin gerade dabei eine Website zu gestalten. Das Outfit selbst habe ich im Großen und Ganzen. Allerdings bin ich mir nicht sicher wie man das heut zu Tage mit der Größe macht. Also welche Auflösung die Richtige ist, sodass es auf Tablet und Handy auch ansehnlich angezeigt wird. Ich habe es nun auf die Breite von 900px (vorher 1024) ausgelegt. Habe aber auch schon öfters von automatischer Anpassung gelesen.
Wie macht ihr das? Und wie funktioniert die automatische Anpassung? Wo gibts den passenden Code?

Gruss, mofi

Das was du suchst nennt sich "Responsive Webdesign".

Damit sich die Seite dem Gerät anpasst, musst du bei den Breitenangaben mit Prozenten arbeiten.

Außerdem brauchst du sogenannte Media Queries, mit denen du festlegen kannst, auf welchen Geräten und bei welcher Größe des Browserfensters bestimmte CSS-Anweisungen zutreffen sollen.

Wenn du beispielsweise auf dem Desktop eine Hauptspalte und daneben eine Marginalspalte hast, kannst du diese per Media Query bei einer Browserbreite von z.B. 480px und kleiner untereinander darstellen.

Beispiel:

Code:

#linke-spalte,

#rechte-spalte {

   float: left;

}



@media screen and (max-width: 480px) {

   #linke-spalte,

   #rechte-spalte {

      float: none;

   }

}

Wie breit du deine Seite machst, ist dir überlassen. Es spricht nichts dagegen bei 900px zu bleiben. Wichtig ist jedoch, dass du diesen Wert nicht als width sondern als max-width angist und als width vergibst du den Wert 100%. Dadurch ist die Seite immer so breit wie das Gerät, allerdings nicht breiter als 900px, was für große Geräte (Desktop) sinnvoll ist.

Danke für die schnelle Antwort ;)

Hi zusammen,
jetzt bin ich zwar schon ein Stück schlauer, dennoch ist das Responsive Webdesign totales Neuland für mich.

Kennt jemand ein gutes Tutorial oder ein Template, welches mir hierbei weiterhelfen könnte? Hab mir schon einiges bei YouTube angeschaut aber da war nicht das richtige für mich dabei. Wird meistens nur angeschnitten was es ist und das man media queries verwendet. Wie genau das allerdings in der Praxis eingebunden wird bzw. am einfachsten realisiert wird..... tja.... kein Plan. :oops:

LG, mofi

Nicht bei youtube suchen sondern text-Tutorials suchen. Da wirst du bestimmt eines finden, mti dem du arbeiten kannst. Und nein, so simpel, dass du es in kurzer Zeit kannst, ist es leider nicht. Die Grundlagen solltest du jetzt aber schon wissen dank der YT-Videos.

schade.... :mrgreen: wäre ja auch zu einfach gewesen..... ;)

na dann heisst es durchkämpfen und sucheeeeennnn..... naja hab ja noch ein klein wenig zeit um es zu kapieren..... dennoch wäre ich über gute tutorials dankbar.

gruss, mofi

Flexible Boxes - Eine Einführung in moderne Websites von Peter Müller (Autor und Dozent) und Responsive Webdesign ? Reaktionsfähige Websites gestalten und umsetzen liefern zusammenhängende Infos. Kommt halt drauf an, ob es einem die Investition wert ist. Schau doch mal ins Inhaltsverzeichnis.

Dankeschön, werde ich mir gleich mal ansehen ;)

Und ich schon wieder :P

Kann ich mittels CSS mein Logobild austauschen?
Das Originalbild hat 900px in der Breite, wenn ich das Browserfenster aber so klein mache, dass es einem Smartphone ähnelt, dann sollte sich ein komplett neues Bild zeigen. Geht das? Wenn ja wie?

Gruss, mofi

Das steht nicht in den verlinkten Einführungen?