Hilfe bei Positionsangaben gesucht

[GFX-Händchen]

Hi all,

ich möchte für jemanden (Thread) eine Seite machen, komme aber mit den Angaben zur (Bilder-)Positionierung (absolute, static, und relative) überhaupt nicht klar.

Egal wie oft ich in meinem CSS-Buch lese, ich schnalls nicht!

Kann mir bitte mal jemand mit Beispielen die Positionen veranschaulichen so dass es mir evtl. leichter fällt da durchzublicken?

Wie sollte ich eine Seite mit mehreren Bildern am besten aufbauen?
Zuerst alle Bilder, dann diese positionieren und erst dann Text oder wie?

Sobald ich mehrere Bilder einfüge und versuche per ID-Seketor ihr dann eine Position zuzuweisen dann ändert sich z.B. die Position meines Textes etc..

Habe ich dann doch einmal die Bilder und den Text (irgendwie) an der richtigen Stelle, dann ist z.B. der Text in meinem Menü mit dem Bild für den Menühintergrund verdeckt.

 

[Maik]

Hi,

vielleicht hilft dir das Beispiel http://de.selfhtml.org/css/eigenschaften/anzeige/position.htm weiter, wie sich die einzelnen Positionsarten im Textfluss auswirken.

 

[GFX-Händchen]

Hab oben den letzten Satz hinzueditiert da ich nicht sah, dass schon geantwortet wurde.

Den Link schaue ich mir einmal näher an - danke - ich glaube ich hab meinen Fehler entdeckt, habe kein z-index genutzt - muss ich gleich mal probieren.

 

[Maik]

Möglicherweise lässt sich das Layout auch ohne die Positionierung der einzelnen Elemente umsetzen?

Für nebeneinander liegende Elemente kann nämlich auch die float-Eigenschaft verwendet werden.

 

[GFX-Händchen]

Ja das mit dem Float-left steht im Buch.
Ich versuch dir/euch anhand eines Screens zu zeigen was ich meine.

"In" der gelben Leiste, die das Menü darstellen soll, ist mein Menütext komplett verdeckt.

PS: Bilder etc. werden logischerweise nicht geklaut - dient jetzt nur zu Testzwecken (siehe identischer Hintergrund - Link-Link im Thread oben ).

 

[Maik]

Zeig doch bitte mal den dazugehörigen HTML- und CSS-Code.

 

[GFX-Händchen]

Der ist natürlich trotz Kommentaren evtl. etwas unübersichtlich.

CSS-Code

body {background-image: url(bg.jpg)}
	
	/* id="blidmitte" */
	#bildmitte {position:absolute; margin-top: 30px; 
  margin-left: 30px; margin-bottom: 50px; }
  
  /* Das Menü */
  .menu {list-style-type: none; margin-left: 30px; padding-left: 10px; } 
  
  /* Das Menü damit es nach rechts angezeigt wird */
  .menu li {float:left; margin: 10px; margin-top:80px; font-size: 2em; position: relative;}
	
	/* keine Unterstreichung für Links! */
	a {text-decoration: none}
	
	/* Das Bild "bildmitte" und das Bild skyline.gif unten sind aneinander
	und haben keinen Zwischenraum! */
	img {vertical-align:bottom; position:relative; margin-top: 514px; margin-left: 0px}
	
	/* id="picture" */
	#picture {position: absolute; margin-top: 150px; margin-left: 40px; z-index: 3}
	
	/* Container Inhalt */
	.inhalt {position: absolute; margin-top: -450px; margin-left: 40px; }
	
	/* Text im Inhalt */
	p.inhalt {font-family: Verdana; font-size: 10pt; color: #000000; }
	
	/* Hintergrund des Menüs - kann weggelassen werden WENN im Hintergrundbild
	eine Leiste integriert wurde oder keine Leiste gewünscht wird!*/
	#navileiste {position: absolute; margin-top: -330px; margin-left: -10px; z-index: 1}

Html-Code

<p><img id="bildmitte" src="bildmitte-1.png" alt height="614" width="920" border="0" /></p>
<p><img id="picture"src="picture-1.png" alt="" height="264" width="542" border="0" />

<ul class="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Gbook</a></li>
 <li><a href="#">Forum</a></li>
 <li><a href="#">Links</a></li>
 <li><a href="#">usw.</a></li>
 </ul></p><img src="skyline.gif" alt="" height="210" width="1000" border="0" />
<div class="inhalt">
<p><img id="navileiste" src="navileiste-1.png" alt="" height="22" width="920" border="0" /></p>
<p>Test<br />
• WICHTIG:<br />
Hier dein ganzer Text<br /> blablablubb blablablubb<br />
<br />
blablablubb blablablubb blablablubb<br /> blablablubb blablablubb blablablubb<br />
<br />
Fragen? EMail an blablablubb</p>
</div>

 

[Maik]

Oh lala, da liegt aber einiges im Argen.

Versuch mal, das Layout ohne die Positionierungen und insbesondere den negativen margin-Werte umzusetzen, denn das führt in den Browsern zu einer unterschiedlichen Seitendarstellung.

Stattdessen würde ich die Elemente in ihrer chronologischen Reihenfolge im HTML-Code notieren.

Und wenn das Grafikelement "navileiste-1.png" als Hintergrundbild für die horizontale Navigation vorgesehen ist, weshalb deklarierst du es nicht als solches für das Listenelement?

 

[GFX-Händchen]

Und wenn das Grafikelement "navileiste-1.png" als Hintergrundbild für die horizontale Navigation vorgesehen ist, weshalb deklarierst du es nicht als solches für das Listenelement?

Wenn ich dich richtig verstehe und für mein Menü das Bild als background-Image einbinde dann haben ja nur die einzelnen Menüpunkte einen gelben Hintergrund, der Zwischenraum bleibt transparent und nach dem letzen Menüeintrag hört die gelbe "Leiste" auf.

Ich glaub ich bin für obiges Gesuche wohl doch der Falsche!

Versuch mal, das Layout ohne die Positionierungen und insbesondere den negativen margin-Werte umzusetzen

Ohne Positionierung...no way!

 

[GFX-Händchen]

Bis dahin stimmt alles:

body {background-image: url(bg.jpg); position: absolute; z-index:1;}
	img {vertical-align: bottom}
	
	#bildmitte {margin-left: 30px}
	#picture {position: absolute; margin-top: 150px; margin-left: 40px}
	#navileiste {position: absolute; margin-top: 60px; margin-left: 30px}
	
	a {text-decoration: none}
	
	</style>
	</head>

	<body>
		
<p><img id="navileiste" src="navileiste-1.png" alt="" height="22" width="920" border="0" /></p>	
<p><img id="picture"src="picture-1.png" alt="" height="264" width="542" border="0" /></p>	
<p><img id="bildmitte" src="bildmitte-1.png" alt height="614" width="920" border="0" /></p>

	
	
	</body>

Doch setze ich dann nach <body> und somit vor den Bildern folgendes:

<ul class="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Umfrage</a></li>
	<li><a href="#">Gbook</a></li>
	</ul>

unsd füge im CSS-Code folgendes hinzu

menu {margin-top: 80px; }
	.menu li {float: left; margin-top: 80px; margin: 30px; }

stimmt 1. die Position der Bilder nicht mehr und 2. bekomme ich den Text nicht an die gewünschte Stelle!
Bild 1 verdeutlicht es!

Bild 2 verdeutlicht nochmal obigen Satz von mir:

Wenn ich dich richtig verstehe und für mein Menü das Bild als background-Image einbinde dann haben ja nur die einzelnen Menüpunkte einen gelben Hintergrund, der Zwischenraum bleibt transparent und nach dem letzen Menüeintrag hört die gelbe "Leiste" auf.

CSS-Code

.menu li {float: left; margin-top: 80px; margin: 30px; background-image: url(navileiste-1.png) }