✔ Fragen zum Aufbau

tykee

tykee

Grünschnabel
Schönen Sonntag miteinander,

ich stehe wieder einmal vor dem gleichen Problem: ich bin einfach kein Coder, sondern schlicht weg Grafiker. Ich habe gewisse Ideen im Kopf, habe allerdings nicht den blassesten Schimmer wie ich das ganze nun umsetzen kann.
Ich habe bereits versucht durch diverse Suchangaben bei google und in diesem Forum eine Antwort zu finden, aber das Problem hierbei ist ebenfalls, dass ich gar nicht weiß, wonach ich eigentlich genau suchen soll.

Mein Vorhaben ist folgendes:
ich möchte eine neue Homepage erstellen, auf der ich meine Arbeiten hochladen kann.
Um das Design einfacher verstehen zu können, habe ich einfach mal ein Muster erstellt und angehängt. Meine Hauptprobleme:

Ich schätze mal, dass man den mittleren Balken in 5 Teile einteilen muss, aufgrund des Farbverlaufs (tatsächliche Homepage ist nicht einfarbig, sondern besteht aus Texturen), der durch einen Lichtspot entsteht, der die Mitte erhellt, den Rest dunkler werden lässt. Dieser Balken soll allerdings immer komplett bis an den Rand ragen, egal wie groß das Fenster ist. Die Teile ganz links und rechts sollen daher "unendlich" sein; sie sollen immer den nötigen Platz füllen.

Oberhalb dieses mittleren Balken soll die Navigationsleiste sein.

In dem mittleren Teil (in den lila Kasten) sollen schließlich die Grafiken hin, die man allerdings noch anklicken und vergrößern können soll. Diese sollen PNGs werden, da es wichtig ist, dass sie transparent sind.

Nun gut, ich denke, damit wäre das Wichtigste erklärt.
Meine Frage ist also nun, wie ich das ganze am Besten umsetze.
Müssen es tatsächlich diese 5 Teile sein? Oder weniger / gar mehr? (auf den mittleren Balken bezogen)
Teile ich die Page an sich in 3 Teile ein (mithilfe von Frames?!) -> Hintergrund oben + Navi, mittlerer Balken, Hintergrund unten ?

Ich bedanke mich schon einmal für die Zeit und die Hilfe.

Lieben Gruß,
Riccardo
 

Anhänge

  • muster.jpg
    muster.jpg
    51,8 KB · Aufrufe: 22
Hi,

du kannst das Layout, wie von dir skizziert, in fünf Spaltenblöcke aufteilen, oder aber auch nur in drei (für links, mitte, rechts), und ein übergeordnetes Blockelement, in dem die drei Spalten eingebettet sind, erzeugt dann den unendlichen Hintergrund zum linken und rechten Fensterrand.

Von Frames würde ich hier definitiv absehen, und das Layout mit Hilfe von CSS (Stichwort: "float"-Eigenschaft) konstruieren :)

mfg Maik
 
Sodele, ich hab mal fix ein kleines Beispiel umgesetzt, das die Grundtechnik für die zweite Variante mit drei Spaltenblöcken veranschaulichen soll.

Die Dimensionsangaben zu Breiten und Höhen sind von mir hier frei gewählt :-)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_tykee</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

body {
background:#222;
}

#outerWrapper {
position:absolute;
width:100%;
height:300px;
top:50%;
margin-top:-150px;
background:#000;
color:#fff;
}

#innerWrapper {
width:800px;
margin:0 auto;
border-left:1px solid #333;
border-right:1px solid #333;
}

#left, #right, #center {
height:300px;
}

#left, #right {
width:200px;
}

#left {
float:left;
background:url(pfad/zu/hintergrundbild-links.png);
}

#right {
float:right;
background:url(pfad/zu/hintergrundbild-rechts.png);
}

#center {
margin:0 200px;
border-left:1px solid #333;
border-right:1px solid #333;
background:url(pfad/zu/hintergrundbild-mitte.png);
}
-->
</style>

</head>
<body>

<div id="outerWrapper">
     <div id="innerWrapper">
          <div id="left">left</div>
          <div id="right">right</div>
          <div id="center">center</div>
     </div>
</div>

</body>
</html>


mfg Maik
 
Okay, gerade mal ein wenig rumprobiert und es scheint tatsächlich genau wie gedacht zu funktionieren... ich muss nun nur nochmal die Grafiken bearbeiten, so dass sie nahtlos ineinander übergehen. Vielen Dank soweit...

Zwei Fragen hab ich momentan allerdings noch:

- Wie bekomme ich die Navigationspunkte an die gewünschte Stelle? (siehe angehängte Grafik im 1. Post)

- Wenn man im mittleren Bereich nun etwas schreibt, Bilder einfügt etc. dann fängt er natürlich genau am linken Rand an. Gibt es eine Möglichkeit eine Art von Contentbereich festzulegen, so dass man automatisch ein wenig vom Rand (oben, links, rechts, unten) entfernt ist? (In etwa sowas wie der lila Kasten auf der Skizze)
Oder wäre die einzige Möglichkeit den mittleren Bereich einfach ein wenig kleiner zu machen und den überschüssigen Teil (der, der frei bleiben soll) zu der Grafik von links und rechts hinzuzufügen?

Mir stellt sich gerade sogar noch eine Frage, aber dazu bereite ich besser ein Beispiel vor, damit es verständlicher ist...

Nochmals vielen Dank.

Gruß,
Riccardo
 
Kurz und schmerzlos :)

Code: 
<div id="wrapper">
     <div id="menu">menu</div>
     <div id="outerWrapper">
          <div id="innerWrapper">
               <div id="left">left</div>
               <div id="right">right</div>
               <div id="center">
                    <div id="centerContent">centerContent</div>
               </div>
          </div>
     </div>
</div>
Code: 
* {
margin:0;
padding:0;
}

body {
background:#222;
}

#wrapper {
position:absolute;
width:100%;
height:320px;
top:50%;
margin-top:-160px;
}

#outerWrapper {
position:absolute;
top:20px;
width:100%;
height:300px;
background:#000;
color:#fff;
}

#innerWrapper {
width:800px;
margin:0 auto;
border-left:1px solid #333;
border-right:1px solid #333;
}

#menu {
width:380px;
padding:0 10px;
margin:0 auto;
color:#fff;
}

#left, #right, #center {
height:300px;
}

#left, #right {
width:200px;
}

#left {
float:left;
background:url(pfad/zu/hintergrundbild-links.png);
}

#right {
float:right;
background:url(pfad/zu/hintergrundbild-rechts.png);
}

#center {
margin:0 200px;
border-left:1px solid #333;
border-right:1px solid #333;
background:url(pfad/zu/hintergrundbild-mitte.png);
}

#centerContent {
position:relative;
top:20px;
left:20px;
width:358px;
height:258px;
border:1px solid #333;
}


mfg Maik
 
Zeit für eine Zugabe, damit sich im IE6 nicht sein Three Pixel Gap Bug bemerkbar macht, was bei den drei aneinanderliegenden Hintergrundbildern für's ästhetische Auge tödlich wäre :-)

Code: 
#left {
float:left;
background:url(pfad/zu/hintergrundbild-links.png);
margin-right:0 !important;
margin-right:-3px;
}

#right {
float:right;
background:url(pfad/zu/hintergrundbild-rechts.png);
margin-left:0 !important;
margin-left:-3px;
}

#center {
margin:0 200px !important;
margin:0 197px;
border-left:1px solid #333;
border-right:1px solid #333;
background:url(pfad/zu/hintergrundbild-mitte.png);
}


Siehe hierzu auch meinen "Webmaster FAQ"-Artikel CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?

mfg Maik
 
Hey,

vielen Dank für die erneute Hilfe, du machst es einem wirklich einfach... habe alles an meine Größen angepasst und es funktioniert wunderbar :)

Ich wollte jetzt noch einmal auf die Frage zurück kommen, die mir zwischenzeitlich gekommen war. Hierbei geht es um den Contentbereich. Im Anhang hab ich mal ein ganz einfaches Beispiel gemacht... von Interesse ist erstmal Nr. 1.

Ich habe hier zwei Dinge zur Umsetzung im Kopf:

- Möglichkeit A: Ich füge die (im Beispiel weißen) Bilder ganz simpel per <img> ein und verlinke sie dann, zum vergrößern. Probleme hierbei sehe ich aber 2: zum einen dürfen sie sich dann nicht (wie im Beispiel extra gemacht) überlappen. Zum anderen bin ich mir nicht sicher, wie genau die Bilder sich dann positionieren lassen würden. Daher habe ich noch etwas Zweites im Kopf:

- Möglichkeit B: Statt dem mittleren Bereich eine Hintergrunddatei zuzuweisen, besteht der Contentbereich ganz einfach nur aus einer Bilddatei. Bestimmte Teile des Bildes werden dann verlinkt (Beispiel Nr. 2). Als Vorbild dienen mir hierbei z.B. diese Gewinnwiesen (Beispiel). Keine Ahnung wie diese funktionieren und ob das umsetzbar und für mich machbar ist.

Evtl. gibt es ja auch eine ähnliche oder andere, bessere Möglichkeit.

Vielen Dank soweit.

Gruß,
Riccardo

/edit: Achso, mir war da noch etwas aufgefallen bzgl. deinem letzten Post: ich verwende einen Mac, habe nur Safari und Firefox installiert, daher kann ich mir das mit dem IE gerade nicht anschauen, aber dieser Code wirkt sich ja auch dort aus, d.h. die Grafik ist zumindest bei mir aktuell nicht mehr ganz nahtlos. Soll das so sein?
 

Anhänge

  • 1.jpg
    1.jpg
    60,1 KB · Aufrufe: 12
  • 2.jpg
    2.jpg
    64,7 KB · Aufrufe: 13
Zuletzt bearbeitet:
Moin,

ist die Positionierung der Bilder so erwünscht, also dass das eine das andere in der gezeigten Form überlappt?

Dies lässt sich mit der z-index-Eigenschaft einrichten. In dem Kapitel findest du auch alle weiteren erforderlichen CSS-Eigenschaften, um ein Element im Viewport zu positionieren.

Was es mit der verlinkten Seite auf sich hat, bzw. worauf du dort hinaus willst, kann ich jetzt nicht nachvollziehen.

tykee hat gesagt.:
/edit: Achso, mir war da noch etwas aufgefallen bzgl. deinem letzten Post: ich verwende einen Mac, habe nur Safari und Firefox installiert, daher kann ich mir das mit dem IE gerade nicht anschauen, aber dieser Code wirkt sich ja auch dort aus, d.h. die Grafik ist zumindest bei mir aktuell nicht mehr ganz nahtlos. Soll das so sein?
Zum Vergrößern anklicken....
Normalerweise dürften die CSS-Hacks bzgl. des "3px-Gap-Bugs" keinen negativen Einfluß auf die standardkonformen Browser haben - wäre mir auch neu, wenn dies so wäre, denn das habe ich in meiner langjährigen Praxis noch nie erlebt.

mfg Maik
 
Maik hat gesagt.:
Was es mit der verlinkten Seite auf sich hat, bzw. worauf du dort hinaus willst, kann ich jetzt nicht nachvollziehen.
Zum Vergrößern anklicken....

Naja, es funktioniert evtl. so ähnlich, dachte ich mir.

Effekt bei der Giga-Win-Wiese:
Bestimmte Pixel des Bildes sind so hinterlegt, dass wenn man dort rauf klickt, das Gewinnformular erscheint.

Meine Vorstellung:
Ich dachte halt an etwas wie in Beispiel Nr. 2. Bestimmte Bereiche/Pixel des Bildes (roter, blauer, grüner Bereich) sind anklickbar. Wichtig hierbei: die Bilder wären nicht separat, sondern es gäbe nur eine Datei (Hintergrund + die Bilder schon drauf).
Ist so etwas machbar?

Aus diesem Grund habe ich auf die Giga-Win-Wiese verlinkt. Bestimmte Bereiche des Bildes sind ja offenbar anders verlinkt als die anderen bzw. was wichtig ist: überhaupt mit einem Link versehen.


Dass dieser Hack negativen Einfluss hatte, war schlicht weg mein Fehler. Funktioniert nun. :)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück