zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Richtige Größe der HP

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.03.2015, 17:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.03.2015, 17:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.

Geändert von dazzle89 (12.03.2015 um 17:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.03.2015, 18:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard

Danke für die schnelle Antwort
Mit Zitat antworten
  #4 (permalink)  
Alt 16.03.2015, 09:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard

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.

LG, mofi
Mit Zitat antworten
  #5 (permalink)  
Alt 16.03.2015, 10:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.03.2015, 12:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard

schade.... 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
Mit Zitat antworten
  #7 (permalink)  
Alt 16.03.2015, 15:42
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2009
Beiträge: 433
Austen sorgt für eine eindrucksvolle AtmosphäreAusten sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.03.2015, 10:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard

Dankeschön, werde ich mir gleich mal ansehen
Mit Zitat antworten
  #9 (permalink)  
Alt 17.03.2015, 11:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.03.2015, 11:47
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das steht nicht in den verlinkten Einführungen?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
anpassung, auflösung, größe, website

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div Container größe anpassen backdra CSS 3 27.10.2014 16:08
Größe des Hintergrund-Elements bei absoluter Positionierung CodeMonkey CSS 2 20.01.2011 20:19
Größe eines versteckten divs herausbekommen wuschba Javascript & Ajax 6 31.01.2008 15:34
iframe Größe bei Laden des Inhalts an dessen Größe anpassen wiseguy Javascript & Ajax 0 24.06.2007 23:04
CSS Layout mit fester und variabler Größe Xavier CSS 7 18.01.2005 14:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:43 Uhr.