Zentrieren bzw. Seitenräner beschneiden und YouTube-Videos einbinden

[Schmendreck]

Hallo,

ich versuche mich mal wieder in html und scheitere erbärmlich. Deswegen habe ich erst einmal Dreamweaver als Testversion herangezogen und habe mir dort das html erstellen lassen.

Unter folgendem Link seht ihr das Ergebnis: http://geekworldtv.de/design.html

Bis jetzt bin ich auch recht zufrieden, dennoch sollte obige Seite noch zwei Dinge erfüllen:

1) In den Bilderrahmen, also dort wo die weisse Fläche zu sehen ist, soll ein Youtube-Video eingebunden werden. Die Maße passen. Den Code zum einbinden gibt es ja zu jedem Video. Wenn ich es an der passenden Stellen mit in den html-Code schreibe, (wie sollte es auch anders sein) verschiebt sich der ganze Kram. Liegt wohl daran, dass es nicht als Hintergund deklariert ist?

2) Der Bilderrahmen und somit auch das eingebundene Video sollten bei jeder Auflösung immer (links- und rechtsseitig) mittig sein. Somit muss der Browser des Users die Seitenteile beschneiden. Die Frage ist also: Wie bekomme ich den Bilderrahmen + eingebundenes Video bei jeder Auflösung immer mittig und wie kann ich die seitlichen Bilder beschneiden lassen? Eigentlich müssen sich die seitlichen Bilder ja nur an das in der Mitte, also den Bilderrahmen, orientieren bzw. ausrichten. Und der Bilderrahmen widerum dann an den Banner bzw. die Bilderchen oberhalb. Oder sehe ich das falsch?


Sicherlich sind im Code noch viele Fehler zu finden. Der Feinschliff kommt dann später und das Impressum wird ebenfalls noch richtig angepasst.

Ich hoffe ihr mir helfen. Mein html ist unter aller Sau!

Grüße
Klaus

[simonpicos]

Joa..
Zunöchst mal sieht das natürlich ganz klar nach Dreamweaver-Tabellenlayout aus
Dat is, wie du wahrscheinlich selber weißt, ziemlich outdated. Da ist dann eher coden per Hand angesagt.
Ich hab mir grad mal euren yt-channel angeschaut, und das sieht doch schon ziemlich "professionell" aus. Und auch das Design der website (auch wenn da noch nicht allzu viel drauf ist) sieht schon ganz nett aus. Sowas hat keine so grausame technische Umsetzung verdient

Ich bin jetzt zu müde um mir euer Problem genau anzuschauen (ich schau morgen nochmal rein), möchte dir aber nur zeigen, wie eure site aussieht, wenn ich sie aufrufe:
http://i.imgur.com/MsDSj.jpg
Ich sitze halt mit meinem Notebook hier, und bin nicht vorm großen Bildschirm. Trotzdem muss die Seite ja ohne horiz. Scrollen auf allen Bildschirmgrößen erkennbar sein.

p.s. ich schick dir gleich mal ne pm

[sokie]

eigentlich ist das ne ziemlich einfache Sache - allerdings nicht mit dem Tabellenverhau.
als erstes machst Du dir einen wrapper(div) der schonmal die passende Breite für deienen Rahmen hat(966px), und zentrierst den per margin: 0 auto; . dann brauchst du noch einen div für den header, der gleichzeitig mit der entsprechenden höhe dafür sorgt, dass der Rahmen dann auch den passenden Abstand vom oberen Rand hat, und platz für deine drei grafiken(und links) bietet.
Den Hintegrund solltest du günstigerweise kachelbar machen und in den body legen.
dann noch den div mit dem hintergrund (bilderrahmen).

ich hab mal eben mit den grafiken aus deinem Entwurf die Sache hier zusammengefrickelt (wie gesagt, die grafiken müssen nochmal ünerarbeit werden - kachelbar machne etc)

[Schmendreck]

Hi, danke für eure Bemühungen!

@Sokie: Deine Lösung sieht ja ziemlich elegant und simpel aus. Aber da ich, wie schon im ersten Post zu lesen war, keine Ahnung von html habe, muss ich nochmal nachhaken:
Woher wissen Wrapper und Header wie groß sie sind und wo sie zu sitzen haben? Ist es so, dass Wrapper und Header zwei ausgelagerte Dateien sind und sozusagen daraufzugegriffen wird? Zum Hintergund: Hier hatte ich mir vorgestellt, dass der Hintergrund "aus einem Guss" kommt. Deswegen dachte ich mir ich kann drei Ränder des Bildes/der Page beschneiden lassen und der obere Rand dockt eben am Browserfenster an.

Achso: Und das Video ist btw klasse!

@simonpicos: Erst einmal Danke für dein Angebot. Evtl. werde ich nochmal darauf zurückkommen. Muss aber natuerlich in Absprachen mit meinen Kompanen geschehen.

Das Probelm, welches du beim Betrachten der Page hast, hatte ich ja Eingangs schon beschrieben und um eine Lösung gebeten.
D.h. das Video mit seinem Rahmen soll in jedem Fall und bei jeder Auflösung mittig und unter dem Header, der ja aus drei verlinkten Grafiken besteht, sitzen.

Gerne könnt ihr auch die Geekworld abonnieren!

[sokie]

Hallo Schmendreck,
die Angaben für die Grösse der Bereiche und natürlich alles weitere was grob gesagt mit der Optik, dem design zu tun haben sind in der css Datei beschrieben.
wie du siehst ist ganze vom quelltext sehr schlank und übersichtlicht geworden, und vielleicht kann das auch eine Motivation sich mit html und css näher zu befassen.

die grafiken muss man natürlich etwas anders angehen; zB hintergrund kachelbar und der Zuschnitt des Bilgerrahmens villeicht ohne Schatten, und den dann entweder mit einem png drunterlegen, oder per boxshadow im css erzeugen...