Web-Design Zentrierte Mini-Website erstellen? - Photoshop-Cafe.de :: Dein Photoshop-Forum

Darkwing-dave · #1 08.05.06, 09:21

Ich muss eine Website erstellen die von der Art her so auszusehen hat.

(Natürlich nicht mit diesen Farben...) Zentriert kommt eine Grafik hin (in diesem Fall orange dargestellt) und drumherum nur eine Farbe (oben das hautfarbene). Die eigentliche Website spielt sich dann ja nur im orangen Bereich ab...

Wie mache ich das am besten?

(Sorry für den eigenartigen Titel.. Ist mir nichts besseres eingefallen..)

Fobby · #2 08.05.06, 10:40

Das würde mich jetzt auch mal interessieren. Habe nun eine Weile herumprobiert, finde aber keine Möglichkeit, das Hauptelement auch in der Höhe zu zentrieren. Man findet zwar die CSS-Methode "vertical-align:middle" aber die scheint nicht so zu funktionieren, wie es hier gebraucht wird.

vektorpixel · #3 08.05.06, 19:35

Es gibt mindestens 2 Arten wie man deine Seite in der Mitte des Browser-Fensters zentrieren kann.

1. Positionierung mit CSS
Hierbei wird um das zu zentrierende Element (z.B eine Tabelle, Bild) ein <div>-Tag gesetzt. Dieses wird dann absolut (in Pixeln) oder relativ (wo es ohne CSS-Angaben auf der Seite stehen würde) positioniert, das heisst, am Browser-Fenster ausgerichtet:
HTML-Code:
<div style="position:absolute;top:15;left:230"><img src="#"></div>
Bei "Top" und "left" wird dabei der Pixel-Abstand von oben und von links angegeben.

oder:
HTML-Code:
<div style="position:relative;top:+19;left:+50;"><img src="#"></div>
Relative Positionierung bedeutet, dass ein Element relativ zu der Position, wo es ohne CSS-Angaben auf der Seite stehen würde, verschoben werden kann. Die Positionsänderung erfolgt durch Addition oder Subtraktion eines Wertes von top oder left.

2. Positionierung mit Hilfe einer Tabelle
Das zu zentrierende Element wird in eine Tabelle gesteckt. Diese Tabelle passt sich dann automatisch immer der Grösse des Browserfensters an, wodurch das Element immer zentriert dargestellt wird:
HTML-Code:
<table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="center">
<img src="#">
</td>
</tr>
</table>
"align" bestimmt die horizontale ausrichtung der Tabelle / Zelle und "valign" die vertikale Ausrichtung der Zelle.

Ich hoffe, alles korrekt wiedergegeben zu haben...

Gruss Vektorpixel

Darkwing-dave · #4 09.05.06, 08:46

Vielen Dank Vektorpixel!

Ist es möglich einen Tabelle zu machen in der in der 1. Spalte die Links sind und in der 2. Spalte der Inhalt der Links hinkommt? Oder wie löse ich am besten das dargestellte Problem (oranger Kasten oben im Bild)? Mit einer Tabelle und einem I-Frame?

vektorpixel · #5 11.05.06, 20:13

hmm ja. ich würde links eine Spalte für die Links machen und rechts eine für den Content. Da würde ich also ein I-Frame benützen. oder du kannst, angenommen es bleibt bei nur 4 Links, jede Seite einzeln aufbauen und dann zueinander verlinken.

Ein I-Frame würde sich hier aber besser eignen, denn auch bei "längerem" Inhalt bleibt deine Seite immer schön in der Mitte zentriert, die Besucher müssen dann halt einfach scrollen, um den Inhalt zu lesen...

Darkwing-dave · #6 14.05.06, 11:27

Ich hab's mal bis hier geschafft... Nun hab ich noch 2-3 Fragen:

-Wie kann ich die ganze Tabelle vertikal zentrieren?
-Wie entferne ich den Rahmen bei Iframe? Edit: Hab's geschafft mit frameborder="0"...
-Kann ich die Hintergrundfarbe des Iframe auf transparent stellen?

Hier der HTML-Teil:

HTML-Code:

<body>
<table width="500" border="0" align="center" cellspacing="0" background="hintergrund.jpg">
   <tr> 
    <td> 
      <p><font size="2"><a href="link1.htm" target="iframe">Link 1</a></font></p>
      <p><font size="2"><a href="link2.htm" target="iframe">Link 2</a></font></p>
      <p><font size="2">Link 3</font></p>
      <p><font size="2">Link 4</font></p>
      <p><font size="2">Link 5</font></p></td>
    <td width="400"> 
      <iframe src="link1.htm" width="400" height="300" name="iframe">Hier ist 
      das Iframe</iframe>
    </td>
  </tr>
</table>

Hier das Bild das dadurch entstanden ist:
(das orange oberhalb der Tabelle wird kleiner...)

http://img81.imageshack.us/img81/9540/sadfasdf9ke.th.jpg

**Ylloh** · #7 14.05.06, 12:49

zu 1) wie oben beschrieben haust du es entweder in ein DIV oder in eine zusätzliche Tabelle rein, die du dann via CSS-Befehl vertical-align:middle; ausrichtest.

zu 3) Da du ja eine neue HTML-Datei einfügst, kann diese nicht "Treansparent sein, denn wenn keine Hintergrundfarbe gewählt wird, dann stellt der Browser automatisch eine ein (standartmäßig weiß) bei macnchen Themes auch andere Farben...
Setze einfach das orange als Background-color von der "eingefügten HTML-Datei" und schon sollte es transparent "wirken".

Gruß
Holger

vektorpixel · #8 14.05.06, 13:04

Man kann ein I-Frame "transparent" machen. Dazu definierst du eine Farbe, die dann immer transparent dargestellt wird. Die genaue Beschreibung findest du auf http://www.nicolebauer.com/tuts/iframe.htm

Darkwing-dave · #9 16.05.06, 15:01

Danke Euch allen!! Hab heute Mittag die Tabelle mit den Bildern und dem Iframe in eine Tabelle gepackt und diese dann mit align="center" und valign="center" in die Mitte gebracht

Vielen Dank für die Unterstützung!! Werde das Endergebnis sobald es fertig ist mal psoten!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mini-Tipps für PS	Scubamarco	Werkzeuge, Bedienfelder und sonstige Grundlagen	126	12.10.17 10:39
[Sonstiges] Mini-Tipps als PDF	vepman	Materialien (Stile, Brushes, Aktionen etc.)	13	09.06.11 16:51
Mini-Blütenfraktal	Bergkristall	Fortgeschrittene Techniken	26	01.11.10 18:34

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)