  |
|
|
 |
 Ohne Frames und Tabellen, aber wie? |
Lili0312
Neuling
Dabei seit: 19.02.2006
Beiträge: 5
 |
|
 Ohne Frames und Tabellen, aber wie? |
|
Ich habe einen Entwurf meiner Homepage mit Photoshop gestaltet. Das Bild soll nun in verschieden Slices unterteilt werden. Den mittleren Teil (rot markiert) möchte ich als iframe errichten, dass ich dort die Inhalte der einzelnen Unterseiten anzeigen kann.
Jeder rät von Frames und Tabellen ab. Mache ich das ganze in CSS erhalte ich auch nur eine "Div-Suppe".
Wie stelle ich das ganze am geschicktesten an, dass kein ellenlanger Div-Quellcode zustandekommt?
Als Webeditor nutze ich Adobe GoLive.
Liebe Grüße
Lili0312
| Dateianhang: |
 hp_neu1.jpg (14 KB, 157 mal heruntergeladen)
|
__________________
Der Computer arbeitet deshalb so schnell, weil er nicht denkt.
|
|
19.02.2006 13:44 |
|
|
Champus 
BlackBoarder
Dabei seit: 24.03.2002
Beiträge: 1.649
Herkunft: Karlsruhe
|
|
Ist doch korrekt so mit der "Div-Suppe".
In den Div-Elementen wird der CSS Style angegeben, also die Positionierung.
Wo ist das Problem?
__________________
CorvusCorone -> Champus
|
|
|
19.02.2006 14:00 |
|
|
LX
El Comandante en Jefe
Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx
|
|
Das Problem ist, dass das ein sehr organisches Design ist, viele geschwungene Linien und Rundungen. Nicht sehr geeignet, um in Rechtecke gepresst zu werden 
Ich würde vorschlagen, die Seite erstmal in 3 Bereiche zu gliedern (wie mit den roten Linien bereits gemacht): Kopf, Fuß und Inhalt. Für jeden dieser Bereiche erstellst du ein DIV, das du dann mittels CSS entsprechend positionierst (alle haben eine feste Breite, der obere und untere eine feste Höhe).
Den Inhalts-DIV zu füllen ist ja nicht das Problem, für die Navigationen in Kopf und Fuß muss man sich aber was einfallen lassen. Entweder du machst haufenweise Grafikschnipsel, die du dann absolut positionierst oder du machst eine Image-Map aus den Navigationen (was zumindest von dem Code, der rauskommt, der wesentlich übersichtlichere Weg sein dürfte).
__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett
|
|
|
19.02.2006 14:10 |
|
|
Lili0312
Neuling
Dabei seit: 19.02.2006
Beiträge: 5
Themenstarter 
|
|
Die Idee mit den Imagemaps hatte ich auch. Ich wollte aber für die einzelnen Button auch einen Rollovereffekt haben und diesen kann ich nur erstellen, wenn ich eine einzelne Grafikdatei habe, oder geht das dann mit den Imagemaps auch?
Liebe Grüße
Lili0312
__________________
Der Computer arbeitet deshalb so schnell, weil er nicht denkt.
|
|
|
19.02.2006 14:13 |
|
|
Champus
BlackBoarder
Dabei seit: 24.03.2002
Beiträge: 1.649
Herkunft: Karlsruhe
|
|
Image-Maps sind aber extrem für'n Arsch, zumindest habe ich schon bei diversen Browser- und Auflösungsänderungen festgestellt dass da einiges verzerren kann.
Mache das lieber mit den "Bildschnippseln".
Dazu empfehle ich dir Adobe Image Ready, das ist bei Photoshop dabei. Kann man ganz einfach solche Bildschnippsel (Slices genannt) erstellen.
__________________
CorvusCorone -> Champus
|
|
|
19.02.2006 14:14 |
|
|
PygoscelisPapua
BlackBoarder
Dabei seit: 20.12.2003
Beiträge: 1.309
Herkunft: Kiel, Schleswig-Holstein, Germany
|
|
Eine "Div-Suppe" würde es auch nicht geben, wenn man Sinnvoll mit CSS und den Elementen umgeht. Ein Kopfteil Beispielsweise, der nur aus einer Überschrift besteht, kann auch mit CSS so gestalltet werden, dass man für den bereich kein extra DIV braucht. Die meisten Leute haben auf der linken Seite ein Menü, das im Prinzip nur aus einer Liste besteht. Warum sollte man die in ein Div packen? man kann diese ebensogut ohne Div über CSS links positionieren.
Wenn man verstanden hat, warum man keine Tabellen und Frames benutzen soll, und wenn man diese Gründe auch darauf anwendet, dann sollte man zu keiner Div-Suppe kommen...
__________________
There are only two kinds of programming languages: those people always bitch about and those nobody uses.
(Bjarne Stroustrup)
*
Moving on to pastures new
GPG Key
|
|
|
19.02.2006 14:16 |
|
|
LX
El Comandante en Jefe
Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx
|
|
| Zitat: |
| Ich wollte aber für die einzelnen Button auch einen Rollovereffekt haben und diesen kann ich nur erstellen, wenn ich eine einzelne Grafikdatei habe, oder geht das dann mit den Imagemaps auch? |
Nee, in dem Fall kommst du um die Schnipselei nicht herum. Beschränke dich dann aber wenigstens auf die Links mit dem rumschnippeln (alles außer den Beschriftungen auf den Bögen kann eigentlich eine Hintergrundgrafik bleiben). Dann brauchst du nur die Handvoll Links ausrichten.
__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett
|
|
|
19.02.2006 14:16 |
|
|
Lili0312
Neuling
Dabei seit: 19.02.2006
Beiträge: 5
Themenstarter
|
|
Verstehe ich das richtig?
Ich kann die Grafik in drei Teile unterteilen, Kopf, Inhalt, Fuß und brauche dann nur die Buttonschnipsel auf der Hintergrundgrafik ausrichten?
Das würde ja in Adobe GoLive mit der Ebenenfunktion gehen.
Liebe Grüße
Lili0312
__________________
Der Computer arbeitet deshalb so schnell, weil er nicht denkt.
|
|
|
19.02.2006 14:23 |
|
|
LX
El Comandante en Jefe
Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx
|
|
| Zitat: |
Original von Lili0312
Ich kann die Grafik in drei Teile unterteilen, Kopf, Inhalt, Fuß und brauche dann nur die Buttonschnipsel auf der Hintergrundgrafik ausrichten? |
So würde ich es machen. Ob GoLive da nun sinnvollen Code ausspuckt, der in den verschiedenen Browsern auch funktioniert, weiß ich aber nicht, normalerweise bedarf sowas manueller Nachbearbeitung. Aber versuchen kannst du's zumindest.
__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett
|
|
|
19.02.2006 14:26 |
|
|
Lili0312
Neuling
Dabei seit: 19.02.2006
Beiträge: 5
Themenstarter
|
|
Ich werde mich heute abend mal ransetzen und es ausprobieren.
Noch eine Frage: Es gibt im Internet ein Validierungsprogramm oder eine Validierungsseite in der man seinen Quellcode checken lassen kann. Kennt jemand dieses Programm oder diese Seite?
Greetz
Lili0312
__________________
Der Computer arbeitet deshalb so schnell, weil er nicht denkt.
|
|
|
19.02.2006 14:29 |
|
|
LX
El Comandante en Jefe
Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx
|
|
Für (X)HTML und für CSS...
__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett
|
|
|
19.02.2006 14:31 |
|
|
Lili0312
Neuling
Dabei seit: 19.02.2006
Beiträge: 5
Themenstarter
|
|
So, die ersten Schritte sind getan.
Leider kenne ich mich in CSS überhaupt nicht aus und vertraue da voll und ganz auf GoLive.
Aber ist dieser Quellcode in sich logisch?:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Unbenannte Seite</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--
#Ebene1 { background-image: url(../pics/head.jpg); height: 288px; width: 1024px; left: 0; top: 0; position: absolute; visibility: visible; }
#Ebene2 { background-image: url(../pics/content.jpg); height: 344px; width: 1024px; left: 0; top: 288px; position: absolute; visibility: visible; }
#Ebene3 { background-image: url(../pics/foot.jpg); height: 136px; width: 1024px; left: 0; top: 632px; position: absolute; visibility: visible; }
--></style>
</head>
<body>
<div id="Ebene1"></div>
<div id="Ebene2"></div>
<div id="Ebene3"></div>
<p></p>
</body>
</html>
Was muß ich ändern, dass die Seite mittig angezeigt wird. Normalerweise geht das doch mit <body align="center">, aber leider funktioniert das nicht.
Greetz
Lili0312
__________________
Der Computer arbeitet deshalb so schnell, weil er nicht denkt.
|
|
|
20.02.2006 20:43 |
|
|
teetrinker
Neuling
Dabei seit: 02.01.2006
Beiträge: 15
Herkunft: Ceylon
|
|
Bin mir nicht sicher, ob das geht. Deine Divs sind absolut angelegt. Die Koordinaten stehen fest. Das Ganze in eine Tabelle zu packen und diese mittig auszurichten könnte theoretisch klappen (eine Zelle gilt dann als Elternelement). Aber da sind wir wieder bei Tabellen, die du ja vermeiden willst.
Wieso willst du die divs eigentlich mittig setzen. Deine Seite ist mit 1024px Breite schon breit genug. Nur die Leute, die eine höhere Auflösung benutzen, würden davon erst "profitieren".
Wie dem auch sei, um eine sinnvolle und strukturierte CSS-Dateí kommst du früher oder später nicht herum. Lies dich da ein - es ist nicht so schwer. Dein Projekt sieht ja grafisch auf den ersten Blick nach "ehrgeizig" aus. So etwas sollte auch innerlich ein Konzept haben. Also nur zu...
__________________
...schlürf ...schlürf...
|
|
|
20.02.2006 22:20 |
|
|
LX
El Comandante en Jefe
Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx
|
|
Die "left"-Angaben solltest du dann weglassen, denn ansonsten ist ja auch nix mit mittig
margin: auto in allen 3 DIVs sollte das ganze dann aber in den meisten Browsern zentrieren, text-align: middle auch im IE.
__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett
|
|
|
21.02.2006 12:18 |
|
|
|
|
|
|
|
