✔ Probleme beim Überlappen von Box und Bild

Status
Nicht offen für weitere Antworten.
D

DirkHo

Erfahrenes Mitglied
Hi,

ich will folgendes: Und zwar soll in einer Div-Box die als Überschrift fungiert ein Bild angefügt werden, das nach oben hin über die Div-Box hinaussteht. So weit habe ich das auch.
Problem ist jetzt nur, daß in der Div-Box die darunter angrenzt bis zu einem best. Punkt der Text eingerückt wird. Da die Überschrift die Überschrift meiner Termine-Newsbox ist und die Box darunter die eingerückt wird die, die die Termine beinhaltet, würde ich das gerne ändern.

Wer es sich nicht so genau vorstellen kann, was ich meine, kann sich ja mal den Quellcode kopieren:

Code: 
<html>
<head>
<style type="text/css">
* {
font-family: verdana, sans-serif;
font-size: 10px;
}

div.newsOthersCont {
width: 177px;
background-color: #ADC7E4;
border-left: 1px solid #233C69;
border-right: 1px solid #233C69;
border-top: 1px solid #233C69;
padding: 0px;
color: #000000;
}

div img {
position: relative;
top: -11px;
left: -4px;
z-index: 1;
float: left;
margin: 0;
margin-right: 0px;
}

div#newsOthersHead {
text-align: left;
background-color: #233C69;
color: #ffffff;
font-weight: bold;
padding-left: 3px;
}
</style>
</head>
<body>
<div style="float: right;">
	<div id="newsOthersHead" style="width: 176px;"><img src="date.png" alt="" height="28" border="0" style="padding: 0px;" />Termine</div>
		<div class="newsOthersCont" style="padding: 0px; margin-top: 0px;">
			ABCDEF<br />Bli bla blubb<br />Bli bla blubb
		</div>
	</div>
</div>

</body>
</html>

Wie kann ich hinbekommen, daß der Text in der Box darunter nicht eingerückt wird (ich will NICHT, daß das Bild noch weiter nach oben gerückt wird!)

Danke und Grüße,

Dirk
 
Hi,

deklariere mal für das DIV newsOthersCont die clear:left-Eigenschaft.

Zudem hast du da ein schliessendes </div> zu viel notiert.
 
Hallo Michael,

danke für die Tipps! Das mit dem clear: left; hatte ich auch schon probiert. Problem ist dann nur, daß die untere Box nicht mehr direkt an der oberen dran hängt. Da kommt bei mir dann immer ein recht großer Abstand (im Firefox).

Wegen dem DIV zu viel: War ein Kopierfehler, weil ich zu viel markiert habe - eigentlich sind da noch paar Div-Boxen und anderes Gedöns außen rum... ;)

Noch jemand Ideen/Tipps?

Danke und Grüße,

Dirk
 
Erweiter mal das Stylesheet mit den folgenden Regeln:

Code: 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
und rufe die Klasse clearfix im DIV newsOthersHead auf:

Code: 
<div id="newsOthersHead" class="clearfix" style="width: 176px;">...</div>
 
Hallo Michael,

danke! Aber leider das bringt auch nicht die erwünschte Lösung. Jetzt ist es zwar so, daß der Text links steht, aber dafür ist die blaue Überschriften-Box (die das Bild enthält) doppelt so hoch wie vorher. Sieht halt ziemlich kacke aus... :(

Danke und Grüße,

Dirk
 
Dann versuch es mal hiermit:

Code: 
<div class="newsOthersCont" style="padding: 0px; position: relative; top: -11px;">...</div>
und spiele mit dem top-Wert, falls die Höhe noch nicht stimmt.
 
HTML: 
<div style="float: right;">
	<div id="newsOthersHead" style="width: 176px;">
	<img src="date.png" alt="" width="100" height="28" border="0" style="" />Termine</div>
		<div class="newsOthersCont" style="position:absolute">
			ABCDEF<br />Bli bla blubb<br />Bli bla blubb
		</div>
	</div>

Im FF passt es IE hab ich gerade nicht zur Hand.
 
Hi Michael und ssurfer,

danke für die Antworten!

@Michael: Geht leider auch nicht :(

@ssurfer: Im FF geht's, im IE wird mir jedoch auch die Überschriftenleiste doppelt so hoch gemacht wie "gewollt".
Aber schon mal ein guter Ansatz! Vielleicht hat ja jmd. noch eine Idee, wie's auch im IE (6.0.29 - ist im Geschäft, also bitte keine Fragen warum kein IE7, o.ä. :D) geht. Werd's auch noch weiterprobieren, sobald ich daheim.

Danke auf jeden Fall nochmal und Grüße,

Dirk
 
Schau mal so.

Das rechts ausgerichtete der Übeschrift Termine kannst ja anders positionieren.

HTML: 
<html>
<head>
<style type="text/css">
* {
font-family: verdana, sans-serif;
font-size: 10px;
}

div.newsOthersCont {
width: 177px;
background-color: #ADC7E4;
border-left: 1px solid #233C69;
border-right: 1px solid #233C69;
border-top: 1px solid #233C69;
padding: 0px;
color: #000000;
}

#newsOthersHead img {
position: absolute;
margin-top:-11px;
margin-left: -4px;
float: left;
margin: 0;
margin-right: 0px;
}

div#newsOthersHead {
width: 176px;
text-align: left;
background-color: #233C69;
color: #ffffff;
font-weight: bold;
padding-left: 3px;
text-algin:right;
}
#newsOthersHead h3 {
text-align:right;margin:0;padding:0
}
</style>
</head>
<body>
<div style="float: right;">
	<div id="newsOthersHead" style="position:relative">
	<img src="date.png" alt="" width="100" height="28" border="1" style="" /><h3>Termine</h3></div>
		<div class="newsOthersCont" style="position:absolute">
			ABCDEF<br />Bli bla blubb<br />Bli bla blubb
		</div>
	</div>

</body>
</html>
 
Hi ssurfer,

cool! So klappt's - zumindest wenn ich statt "margin-top" nur "top" mache, sowohl im IE, als auch im FF.

Werd's daheim auch noch in einer anderen FF- und IE-Version testen.

Danke und Grüße,

Dirk
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück