✔ 3 x DIV ineinander und erfolgter unerwünschte Umbruch bei A-HREF mit IMG

[Seven Secrets]

Hallo,

ich habe folgendes programmiert:

<div id="wndw">
<div id="scrollLinks1" align="center">
<a class="mouseover_left" href="#" title="to the left"><img src="images/tri-lft.gif" alt="" border="0" /></a><img src="images/spacer.gif" height="1" width="360" alt=""/><a class="mouseover_right" href="#" title="to the right"><img src="images/tri-rt.gif" alt="" border="0" /></a>
</div>
</div>

mit folgendem CSS dafür:

div#wndw {
        height: 443px;
        width: 497px; 
        overflow: auto; 
        position: relative;
}
div#scrollLinks1 {
	position: relative;
        overflow: hidden;
}
div#mouseover_left {
	position: relative;
	text-align: left;
}
div#mouseover_right {
	position: relative;
	text-align: right;
}

Leider werden die beiden Links und das Bild in der Mitte nicht nebeneinander dargestellt. Es entstehen witziger Weise Umbrüche, die ich nicht möchte und nicht beseitigt bekomme.

Wo liegt mein Fehler?

 

[Alex_T]

Grüße,

also vom Code her gibt es meiner Meinung nach nichts Auffälliges.
Ich vermute einfach mal, dass deine beiden äußeren Grafiken zu groß sind und damit den Umbruch erzeugen.

Könntest die Datein ja mal freigeben, bzw. die Maße durchgeben, damit man hier ne Art Referenz hat.

 

[Seven Secrets]

Die Schaltflächen sind jeweils 30 x 30 groß und der Spacer beim Test nur 1 x 1. das übergeordnete div ist ja mit 497px nicht aufgebraucht. Aber er bricht es trotzdem um. Wieso auch immer?

Ich habe es jetzt zwischenzeitlich "unschön" mit einer Tabelle gelöst, wobei ich das ja eigentlich verhindern, bzw. umgehen wollte.

 

[Alex_T]

Hallo nochmal,

also ich hab das jetzt einfach alles so übernommen, wie es oben steht. Habe mir zusätzlich noch ne kleine 30x30 Grafik erstellt und getestet - was soll ich sagen: bei mir bricht da nichts um und funktioniert alles einwandfrei. Ich häng dir mal eine Graik mit an....

 

[Seven Secrets]

Hier hast du nen link zu der Testversion der Seite. (Seite zum Test) In der oberen Galerie ist es die Tabellenlösung. In der unteren Galerie ist noch der CSS-Versuch. Schau es Dir da einfach mal an. Ich verstehe es einfach nicht. In diesem Test ist der Spacer 50 px breit. Und trotzdem der Umbruch. Irgendwas muß ich doch falsch machen.

 

[rd4eva]

Mach doch einfach ein align="left/right"auf die Bilder in den links. Dann brauchst du auch keinen "spacer"

<div id="wndw">
	<div id="scrollLinks1" align="center">
	<a class="mouseover_left" href="#" title="to the left">
		<img src="images/tri-lft.gif" alt="" border="0" align="left"/>
	</a>	
	<a class="mouseover_right" href="#" title="to the right">
		<img src="images/tri-rt.gif" alt="" border="0" align="right"/>
	</a>
	</div>
</div>

 

[Seven Secrets]

Stimmt, manchmal sieht man den Wald vor Bäumen nicht. Trotzdem steht noch immer die frage, warum er es in einem verschachtelten DIV nicht korrekt mit CSS macht?

 

[Alex_T]

Grüße,

also ich habe das jetzt folgendermaßen gelöst bekommen:
hier mal der CSS-Teil:

div#wn1	{ 
    position: relative; 
    width: 440px; height: 140px; 
    overflow: hidden;	
}
div#wn2	{ 
    position: relative; 
    width: 440px; height: 190px; 
    overflow: hidden;	
}
div#scrollLinks1 {
	position: relativ;
    overflow: hidden;
}
div#scrollLinks2 {
	margin-left:auto;
	margin-right:auto;
	width:110px;
	position: relativ;
    overflow: hidden;
}

und hier der entsprechende HTML-Teil:

<div id="scrollLinks2">
      	<a class="mouseover_left" href="#" title="to the left" style='float:left; margin-right:15px;'><img src="div.gif" alt="" border="0" /></a>
        <a class="mouseover_right" href="#" title="to the right" style='float:left; margin-left:15px;'><img src="div.gif" alt="" border="0" /></a>
</div>

den Spacer hab ich mal weggelassen. Kannst du aber nach belieben wieder mit einpflegen. Dies empfnad ich hier allerdings als unnötig, da ich dir das margin-Attribut reingeschrieben habe.

Hoffe es ist so geworden, wie du dir das vorgestellt hast. Ansonsten einfach nochmal anfragen.

 

[rd4eva]

Stimmt, manchmal sieht man den Wald vor Bäumen nicht. Trotzdem steht noch immer die frage, warum er es in einem verschachtelten DIV nicht korrekt mit CSS macht?

Geht schon. Ein einfaches float:left/right auf die links hat den gleichen Effekt.

 

[Alex_T]

Joar, den einen Link hätte man durchaus mit dem float:right besetzen können, ich dachte jedoch es soll mittig sein und nicht an den Seiten enden -> aber was solls sich hier um Kopf und Kragen zu reden -> es funktioniert und gut