Webseite ausrichten, wie?

[kornyclown]

Hallo ihr Webprofis, ich mit meinem Web-Basiswissen hab mal eine Frage.
Ich habe damals für meinen einfachen Webauftritt meine Seite mit Flash Catalyst gebastelt (www.thomasmanz.de), möchte jetzt aber dahin kommen, meine Seite in HTML und CSS zu bauen. Das hat mehrere Gründe aber ich hätte es gerne, schon allein weil ich so den Inhalt auf meinen Seiten einfacher austauschen kann und nich ständig den Weg über Flash Catalyst und "als SWF exportieren" gehen muss. Aber auch weil ich in die Zukunft denke und damit rechne das die Seite Stück für Stück wachsen wird und ich so den Content einfacher verwalten könnte, sowas halt.

Zu meiner Frage:
Ich habe schon erste Tests gemacht die auch grundsätzlich ganz gut verlaufen sind. Ich habe diese Seite im Prinzip 1:1 in HTML und CSS nachgebaut nur stoße ich da noch auf ein Problem, mal abgesehen dass ich mir wegen das Costom-Scrollbar noch was einfallen lassen muss. Ich hatte alles genau so am Platz wie es seien soll aber wenn man das Browserfenster verkleiner oder der ausgebende Bildschirm eine andere Auflösung hat als meiner, verschieben sich die einzelnen Elemente untereinander. Wie kann man das vermeiden. Ich habe schon überlegt ob ich die ganze Seite einfach am Ursprung bastel (x:0, y:0), dann alles zusammen in einen div-Container steck und den dann mittig ausrichte aber geht das so überhaupt oder gibt es da andere (bessere) Wege?

[Myhar]

Das ist das Wesen des Internets, bzw. des Browsers. Man weiß nie, welche Auflösung der User benutzt bzw. wie groß sein Browserfenster ist. ^Deshalb geht der Trend auch immer mehr in Richtung responsive Designs (Mediaqueries)
Klicke dich auf der verlinkten Seite einmal durch und verkleinere deinen Browser dabei immer wieder mal, dann siehst du, was ich meine.
So etwas umzusetzen ist für einen Anfänger jedoch nicht trivial, deshalb gebe ich dir den Rat: Verabschiede dich davon, dass deine Elemente immer gleich angeordnet sind, die Seite muss bei allen Auflösungen benutzbar für den User bleiben.
Man kann mit min-width/min-height arbeiten, um ein Grundraster zu bewahren, aber sich verändernde Container sind jetzt keine große Tragik.

[patrick_l]

Hi kornyclown,

du schlägst auf jeden Fall schon mal den richtigen Weg ein. Was nun das zentrieren (d)einer Website angeht, ist dies schnell mit CSS erledigt. Hier mal ein Beispiel:

<div class="wrap">
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

/* Mit einem Div als Hauptcontainer */

.wrap {width:960px; margin:0 auto;}

/* oder den Body-Tag als Container */

body {width:960px; margin:0 auto;}

Ansonsten kann ich mich Myhar anschließen. Vor allem was responsive Designs mit Mediaqueries angeht. Da du ja noch am lernen bist, habe ich hier für dich auch noch mal ein paar nützliche Links zum Thema:

- HTML5-Handbuch - Webkompetenz
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- CSS 4 You - The Finest in Stylesheets

Grüße Patrick

[kornyclown]

Also erstmal danke für die schnellen Antworten. Diese responsive Designs sehen interessant aus. Sind das if/else Anweisungen, falls es die in HTML überhaupt gibt?
@ Patrick: Die Links sind echt gut. Ichglaube die können sehr hilfreich sein. Besonderen Blick hab ich ja auf das HTML5 geworfen. Habt ihr damit schon erfahrungen gemacht. Speziell auch weil ich ja ein (oder mehrere) Videos einbinden möchte und es ja dort das neue <video> Element gibt. Taugt das was?

[Myhar]

Nein, responsive Webdesign hat nichts mit HTML zu tun. Das wird rein über CSS gesteuert.
Bsp:

@media screen and (max-width: 980px) {
#meineID{width:40%}
}

Sagt im Prinzip, dass bei einer max-width von 980px dieserStil angewandt wird. Ein kleines tutorial für den Anfang
Mediaqueries, HTML5, CSS3 taugen natürlich etwas. Man muss nur wissen, welche Browser welche Funktionen etc. unterstützen. Und ob man damit leben kann, wenn ein Browser eine Funktion nicht unterstützt.

[patrick_l]

Zitat von kornyclown

Habt ihr damit schon erfahrungen gemacht. Speziell auch weil ich ja ein (oder mehrere) Videos einbinden möchte und es ja dort das neue <video> Element gibt. Taugt das was?

Die neue HTML5 Media-Tags (<video> <audio>) habe ich bis jetzt noch nicht verwendet. Was die Umsetzungen von Websites in HTML5 angeht, nutze ich eigentlich so gut wie immer das HTML5 Boilerplate.

Um mehr darüber zu erfahren würde ich auch hier unter den Tutorials und Video-Trainings schauen. Vor allem hat Pascal Bajorat hier einiges zum Thema HTML5 und CSS3 veröffentlicht.

Edit:
Und natürlich das von mir verlinkte HTML5 Handbuch von selfHTML Mitgründer Stefan Münz Wobei es im Internet noch viele andere freie Ressourcen gibt.

Grüße Patrick

[schnullerbacke]

Für das Video-Element schau dir mal das an:
http://videojs.com/

Ich hab das mal verwendet, das ist wirklich gut. Da hast du auch einen Fallback für die älteren Browser.
Zu html5 video gibts hier auch ein Videotutorial.

Für das video-Tag muss die Seite aber nicht unbedingt html5 sein.

[mindraper]

moinsen allerseits!

Zitat von schnullerbacke

Für das video-Tag muss die Seite aber nicht unbedingt html5 sein.

das mag richtig sein, soll heissen: das video-/audio-tag wird auch in pages mit html 4/xhtml 1 doctype gerendert, allerdings ist das ein fehler den dir der validator erstmal fett ankreidet. zu recht nebenbei bemerkt.

für die verwendung von html5-tags sollte man auch den rest der page als html5 deklarieren.

gruß

[kornyclown]

Ich hab mir jetz hier erstmal alle Tutorials zu HTML5 runtergeladen und die sind echt richtig gut. Endlich mal so erklärt, dass es nich darum geht sich toll reden zu hören sondern etwas zu vermitteln, was bei mir sehr gut ankommt.
Was das Videotag betrifft, meine Seite ist als HTML5 deklariert und ich bin echt gespannt das alles auszuprobieren.
@ Schnullerbacke: Dir auch, danke für den Link. Der Player sieht echt gut aus.

Schade das ich jetz so viel anderen Kram zu erledigen hab, ich freu mich zum ersten mal darauf mein HTML Projekt anzugehen. Nachdem ich mir gestern schon die HTML5/CSS3 Tutorials angesehen hab, hab ich das Gefühl dass bei mir echt EIN, wenn nich sogar DER Knoten geplatzt is.

Danke erstmal, das Ergebnis werde ich hier selbstverständlich präsentieren.

[patrick_l]

Zitat von kornyclown

Nachdem ich mir gestern schon die HTML5/CSS3 Tutorials angesehen hab, hab ich das Gefühl dass bei mir echt EIN, wenn nich sogar DER Knoten geplatzt is.

Das hört man doch gerne. Wenn du dich erst einmal damit auseinandergesetzt hast und die Basics sitzen, macht es wirklich Spaß zu sehen was man alles damit anstellen kann.

Zitat von kornyclown

Danke erstmal, das Ergebnis werde ich hier selbstverständlich präsentieren.

Ich bin schon gespannt darauf. Sollte es dann doch mal hier und da Probleme geben, darfst du uns gerne wieder mit deinen Fragen löchern. Also gutes gelingen und

Liebe Grüße, Patrick