Zur Navigation

Elemente im zentrierten Layout anordnen

1 scibby

Ich bin leider noch nicht so wirklich fit, was CSS- Programmierung betrifft, jetzt drückt der Schuh & ich komme nicht weiter.

Folgendes Problem: Ich habe eine Seite erstellt, deren Inhalt unabhängig von der Auflösung zentriert dargestellt wird. Der verwendete Container nimmt den gesamten Seiteninhalt auf.

#container {

width: 920px;
height: 604px;
margin: 0 auto;

}

Der Layoutbereich soll variabel gestaltet werden, den unteren Abschluß bildet die über der Fußzeile angeordnete Navigationsleiste. Die Fußleiste selbst enthält ein Banner und eine variable Grafik am rechten Seitenrand des Containers (rahmenlos verbunden). Das Layout enthält Textelemente, die teilweise in den Eckbereich hineinfließen bzw. diesen überlappen.

/* ----------------Layoutbereich------------------ */

#layout {

float: left;
width: 920px;
height: 450px;

}

/* ----------------Navigation---------------------- */

#navbar {

float: left;
width: 739px;
height: 100px;
padding-left: 0px;
padding-top: 450px;
}

/* ----------------Banner---------------------- */

#banner {

float: left;
width: 739px;
height: 54px;
padding-left: 0px;
padding-top: 550px;
}

/* ----------------Eckbild---------------------- */

#corner {

float: left;
width: 181px;
height: 258px;
padding-right: 0px;
padding-top: 345px;
}

1. Problem: Eine Staffelung der CSS- Elemente im Containerrahmen wie: 1. Layoutbereich, 2. Navigation, 3. Banner & 4. Ecke führt zu einem Zeilenumbruch und zerreißt die Struktur.

2.Problem: Inhalte lassen sich nur als Ebenen in den Layoutbereich einfügen. Diese werden aber als "Layer" absolut positioniert, somit werden alle Inhalte nach links verschoben.

+++ Ich komme nicht weiter, bitte um kurzfristige Hilfe +++

07.05.2007 12:02

2 Jörg

Hallo scibby,

1. Problem: Eine Staffelung der CSS- Elemente im Containerrahmen wie: 1. Layoutbereich, 2. Navigation, 3. Banner & 4. Ecke führt zu einem Zeilenumbruch und zerreißt die Struktur.

Wenn du diese Elemente wie im Code angegeben mit der Eigenschaft float:left ausstattest, werden sie entsprechend ihrer Reihenfolge im HTML-Quelltext von links nach rechts positioniert. Ohne diese Eigenschaft automatisch von oben nach unten

2.Problem: Inhalte lassen sich nur als Ebenen in den Layoutbereich einfügen. Diese werden aber als "Layer" absolut positioniert, somit werden alle Inhalte nach links verschoben.

Wieso lassen sich die Layer nur absolut positioniert einfügen?

07.05.2007 12:28

3 scibby

Danke für die schnelle Antwort. Vielleicht stelle ich mich einfach zu ungeschickt an. Mein Problem ist die Positionierung aller Elemente im fixierten Grundgerüst (Container). Der Seitenaufbau ist wie folgt (von oben nach unten):

1. Seitenrahmen (Container)
1.1. Layout
1.2. Navi (horizontal)
1.3. Fußzeile (Banner) mit
1.4. Sidebar (variable Grafik)

Ich war der Meinung, das sich die DIV-Bereiche, vom Containerrand ausgehend, frei positionieren lassen. Da es sich aber bei allen Bereichen um Block-Level-Elemente handelt, die einen Zeilenumbruch erzeugen, funktioniert die Bindung im zentralen Seitenrahmen nicht.

Verhindert die Auffüllung vom Rand (padding) bei #banner & #corner eine korrekte Abfolge der Elemente im Rahmen?

Ach ja ... ich arbeite mit Dreamweaver, dieser positioniert Layer als absolute Bereiche. Um den Einsatz von Ebenen werde ich wohl nicht herumkommen, denn Textpassagen & Bilder nehmen Teilbereiche der Grafik im Eckbereich mit ein.

07.05.2007 13:53

4 Jörg

Wenn du mit Dreamweaver im WYSIWYG-Modus die Layer erstellst, wirst du wahrscheinlich gewissen Beschränkungen unterliegen - das macht dann auch den CSS-Code verständlich.

Du kannst den Code aber auch manuell erstellen, so dass du Bereiche nicht absolut positionierst, sondern mithilfe von float, clear, margin oder padding arbeitest. Eine absolute Positionierung ist hier auch nicht zu gebrauchen, da der äußerste Container ja zentriert werden soll und sich die inneren Elemente daran ausrichten sollen

Verhindert die Auffüllung vom Rand (padding) bei #banner & #corner eine korrekte Abfolge der Elemente im Rahmen?

Sie sorgt nur für den Innen-Abstand zwischen den Elementen, bei padding-top nach oben, bei padding-left nach links etc.

Mir ist aber noch nicht so ganz klar, wie die Elemente denn nun angeordnet werden sollen und wo die Probleme liegen, könntest du gegebenenfalls hierzu einen Entwurf (als Bilddatei) verlinken?

07.05.2007 14:16 | geändert: 07.05.2007 14:23

5 Jörg

Noch ein Nachtrag:

Ach ja ... ich arbeite mit Dreamweaver, dieser positioniert Layer als absolute Bereiche. Um den Einsatz von Ebenen werde ich wohl nicht herumkommen, denn Textpassagen & Bilder nehmen Teilbereiche der Grafik im Eckbereich mit ein.

Du meinst absolut positionierte Ebenen? dies wird wohl nicht so funktionieren, wenn der äußere Container zentriert wird, denn der Eckpunkt wird sich dann wohl je nach Auflösung verschieben. Besser wäre es, die Ecke als Hintergrundbild von #container einzubinden (im folgenden Fall unten rechts):

#container {

background-image:url(ecke.gif);
background-repeat:no-repeat;
background-position:bottom right;

/* sonstige Angaben */

}

07.05.2007 14:31 | geändert: 07.05.2007 14:33

6 scibby

Sorry ... die Familie hat Vorrang, deshalb die Verzögerung. Ich habe den noch sehr frühen Entwurf der Seite ins Netz gestellt, findest Du hier www.mega-stone.info, vielleicht erleichtert das die Korrespondenz.

Markant ist sowohl das Wegdriften der Eckgrafik als auch das Verschieben des Seiteninhalts über das zentrierte Layout (Container). Die Navigation ist vorerst als Layer eingebunden, das sollte per CSS passieren, zumal der Code schon enthalten ist.

Da diese Seite eine Auftragsarbeit ist möchte ich das Konzept doch baldmöglich umsetzen ...

07.05.2007 17:20

7 Jörg

Die Ecke würde ich so positionieren, wie in Beitrag 5 bereits beschrieben.

1. Die Definitionen von #container erweiterst du entsprechend um Angaben für ein Hintergrundbild und erhöhst auch die Angabe für height in der Höhe des Bildes:

#container {

width: 924px;
height: 664px;
margin: 0 auto;
background-image:url(Grafik/Banner%20Willkommen%20-%20Rechts.gif);
background-repeat:no-repeat;
background-position:bottom right;

}

2. Dafür schmeißt du das Eckbild im HTML-Code raus:

	<div id="banner"><!-- Banner -->
	  <a href="Index.html"><img src="Grafik/Banner Willkommen - Links.gif" width="739" height="54" border="none"/>
	</div>



</div> <!-- Ende Seitenrahmen -->

07.05.2007 20:34

8 scibby

Sensationell, einfach aber effizient. Das Ergebnis ist fast perfekt, im IE passt es haargenau, in Firefox ist noch ein Versatz zu sehen. Deine Lösung hat lediglich den Nachteil, das das Hintergrundbild immer gleich bleibt.

Das ist das kleinere Übel, wichtiger noch die Frage nach der pixelgenauen Positionierung der Layoutobjekte im Container. Werde morgen deinen Tip aus Beitrag 4 probieren.

Zunächst herzlichen Dank.

07.05.2007 22:57

9 scibby

So, ich glaub jetzt passt es. Die Positionierung der Layoutelemente erfolgt entsprechend Deinen Tips aus Beitrag 4. Falls Dir nochwas einfällt, wie man den Wechsel des Hintergrundbildes galant lösen könnte bin ich natürlich für jeden Tip dankbar.

08.05.2007 10:07

10 Jörg

Wodurch soll der Wechsel eingeleitet werden, durch einen Mouse-Hover? Das wäre theoretisch möglich, aber der Effekt würde eintreten, sobald die Maus irgendeinen Bereich von #contentarea überfährt, nicht nur die Ecke, und das wäre wohl, nehme ich an, nicht gewollt?

Es gäbe noch eine andere Möglichkeit, die Ecke als img Element korrekt zu positionieren - indem dieses durch position:relative verschoben wird. Du fügst das Bild im HTML-Code wieder ein:

<div id="corner">
          <img src="Grafik/Banner Willkommen - Rechts.gif" width="181" height="259" border="none" alt="">
         </div>

... und entfernst entsprechend die Hintergrundeignschaften von #contentarea. Danach wird #corner folgendermaßen nach oben rechts verschoben:

#corner {
width: 181px;
height: 258px;
padding-right: 0px;
padding-top: 45px;
position:relative;
top:-304px;
left:739px;
}

Damit durch die Verschiebung unten kein freier Platz entsteht, erhält #contentarea die Eigenschaft overflow:hidden

#container {
width: 924px;
height: 664px;
overflow:hidden;
margin: 0 auto;
}

08.05.2007 10:58