✔ Grundgerüst Homepage

[sarah1987]

Hallo Zusammen,

ich bin momentan an meiner eigenen Homepage dran die ich in Dreamweaver erstelle. Jetzt wo meine Site fast fertig ist, fällt mir auf, dass ich zu wenig Platz für Text und Bild habe und mit dem Design auch nicht mehr zufrieden bin.

Jetzt habe ich die Tage mal aus Neugier andere Internetseiten angeguckt
und da bin ich auf diese gelandet: http://www.orange-cube.de
Ich finde dieses Design und den Aufbau schlicht gehalten, jedoch sehr interessant.
Jetzt würde ich meine gerne so in der Art auch aufbauen.

Wie man siehst ist der Linke Balken und der Rechte Hintergrund fix an einer Stelle und auf dem rechtem Hintergrund befindet sich eine Tabelle die der Benutzer scrollen kann.

Hab schon einiges ausprobiert nur zu meinem gewünschten Ergebnis komme ich leider nicht :-(.

Kann mir jemand bitte helfen.

 

[Maik]

Hi,

unser CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken erläutert die technische Umsetzung des Grundgerüsts deiner entdeckten Seite, und hält die beiden vorgestellten Beispiele zum Download bereit

mfg Maik

 

[sarah1987]

Danke, ich denke das kann mir weiterhelfen.
Über weitere Tipps würde ich mich aber freuen.

 

[Maik]

Hallo Maik,

du hattest mir gerade geholfen bezüglich meines Homepage Grundgerüstes abgeleitet von der Seite http://www.orange-cube.de

Deine Antwort hatte mir sehr geholfen und jetzt steht soweit auch schon fast alles. Nur sag mal weiß du wie ich jetzt in der rechten Tabelle, eine Leiste platziere, der ich eine gewissen Breite angeben kann und auch noch zentriert steht?

Gruß Sarah

Wenn ich jetzt alles richtig verstanden habe, stellst du dir das wohl so vor:

<div id="leiste">...</div>

#leiste {
width:500px;
margin:auto;
}

mfg Maik

 

[sarah1987]

Hat funktioniert
Kann ich denn in diesen Balken auch noch ein Hintergrund hinterlegen?

 

[Maik]

Selbstverständlich

Hintergrundfarben und -bilder

mfg Maik

 

[sarah1987]

Das funktioniert irgendwie nicht.
Hab jetzt wie im Beispiel einen Weißen Hintergrund mit Schattierungen gebaut
um den in den Balken zu setzen.

Das habe ich oben eingesetzt:

div.bgscroll {
background-image: url(Bilder/Hintergrund-Balken.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:scroll;
}


und unten an die Tabelle

<div class="bgscroll">

Was mache ich falsch?

 

[Maik]

CSS-technisch ist da soweit alles in Ordnung.

Vermutlich besitzt dieser DIV-Block, der übrigens keine Tabelle (= <table> ... </table>) darstellt, keinen Inhalt, weshalb der Browser dessen Hintergrundbild auch nicht anzeigt.

In diesem Fall mußt du dem Element eine Höhe mit auf den Weg geben.

mfg Maik

 

[sarah1987]

oben steht jetzt

#mitte {
position: absolute;
top: 0px;
left: 250px;
bottom: 0px;
right: 0px;
overflow: auto;
}
#mitte .inhaltDiv {
width:600px;
margin:auto;
}

div.bgscroll {
background-image: url(Bilder/Hintergrund-Balken.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:scroll;
top: 0px;
width:600px;
margin:auto;
}


Und unten

<div id="mitte"><div class="inhaltDiv" "bgscroll">


Und es ist immer noch nichts zu sehen :-(

 

[Maik]

<div class="inhaltDiv" "bgscroll">

... muß zumindest schon mal so lauten:

<div class="inhaltDiv bgscroll">

Und wie ich schon schrieb, fehlt dem Block eine Höhenangabe, denn scheinbar enthält er (noch) keinen Inhalt.

mfg Maik