div mit abgerundeten Ecken und andere Probleme

[ingobar]

Hallo,

ich bräuchte mal eine Tipp zur Realisierung folgender Grafikvorgabe:

Das hat einen Rahmen mit abgerundeten Ecken, wobei der obere Rand (doppelte Linie) anders aussieht als der unteren (doppelte Linie mit anderem Abstand als die obere). Links und rechts gibt es nur zwei parallele Linie.

Ich habe jetzt folgendes versucht:

  
<div style="position:absolute; left:auto; right:auto; width:99%; " >  
	<div style="width:800px; height:240px; left:105px; top:0px; position:absolute; margin:0px; " >  
		<img src="images/menu_dark.gif" alt="" style="left:76px; top:151px; border:0px" usemap="#menu" id="menuImage">  
	</div>  
	<div style="top:240px; bottom:0px; height:191px; left:105px; width:800px; position:absolute; margin:0px; " >  
		<img src="images/table_left_viewer.gif" alt="" ><img src="images/table_r_photos.gif" alt="" >  
	</div>  
	<div class="content" >  
		<div class="content_top">  
			<img src="images/content_top.gif" alt="" >  
		</div>  
		<div class="content_middle">  
		test, test, test, test, test, test, test, test, test, test, test, test, test, test,  
		test, test, test, test, test, test, test, test, test, test, test, test, test, test,  
		</div>  
		<div class="content_bottom">  
			<img src="images/content_bottom.gif" alt="" >  
		</div>  
	</div>  
</div>  
  

Das css sieht so aus:

  
.content {  
	left:105px;  
	top:407px;  
	position:absolute;  
}  
  
.content_top {  
}  
  
.content_middle {  
	background-image: url(images/content_middle.gif);  
	color:#fefefe;	  
}  
  
.content_bottom {  
}  

Jetzt habe ich das Problem, dass der Text nicht innerhalb des divs bleibt, sondern drüberhinaussteht.

Das ganze soll ürbigens zB so aussehen:

Das Menü ganz oben mit dem Scheinwerfer habe ich mit einer image-map gemacht, wobei immer die ganze Grafik ausgetauscht wird. Direkt darunter befinden sich zwei Grafiken (links das Logo und rechts der dreizeilige Text), die dem User zeigen, wo er ist.

Das Problem sind einfach die vielen verschachteten und übereinander liegenden Rahmen - vor allem auch in Bezug auf die Image-Map

Gibt es da vielleicht was besseres als mein noch nicht funktionierender Ansatz? Soll ich gleich auf webkit-border etc., also css3 gehen?

Wäre schön, wenn mir da jemand einen Tipp für eine einfache Umsetzung geben kann.

ingobar

[ChrisB]

Hi,

Jetzt habe ich das Problem, dass der Text nicht innerhalb des divs bleibt, sondern drüberhinaussteht.

Du hast für das Element mit der Klasse "content" ja auch überhaupt keine Breite vorgegeben, es aber mittels absoluter Positionierung aus dem Fluss genommen - also wird seine Breite nach shrink-to-fit berechnet.

MfG ChrisB

[ingobar]

Hi,

Jetzt habe ich das Problem, dass der Text nicht innerhalb des divs bleibt, sondern drüberhinaussteht.

Du hast für das Element mit der Klasse "content" ja auch überhaupt keine Breite vorgegeben, es aber mittels absoluter Positionierung aus dem Fluss genommen - also wird seine Breite nach shrink-to-fit berechnet.

MfG ChrisB

Danke für den Hinweis.

Ich habe jetzt einfach mal die Breite von content auf 100px gesetzt, aber der Text steht immer noch drüber. Lustigerweise auch noch "zentriert", so als würde der Text zum äußersten div gehören würde.

Noch eine Idee?

ingobar

[ChrisB]

Hi,

Ich habe jetzt einfach mal die Breite von content auf 100px gesetzt, aber der Text steht immer noch drüber. Lustigerweise auch noch "zentriert", so als würde der Text zum äußersten div gehören würde.

Ohne vollständiges Online-Beispiel ist es mir zu mühsam, das jetzt nachzuvollziehen.

Noch eine Idee?

Auf absolute Positionierung solltest du weitestgehend verzichten.

MfG ChrisB

[Peter Pan]

Hi!

Lustigerweise auch noch "zentriert", so als würde der Text zum äußersten div gehören würde.

'Lustigerweise' steht über Deinem Text ein Fullquote, so als gehöre der dazu - das ist nicht schön!

off:PP

[ingobar]

So,

inzwischen habe ich das auch alles hinbekommen. Jetzt bleibt nur noch ein Problem. Der Hintergrund des einen div wiederholt sich nicht, wenn die divs immer Inneren sich in der Höhe verändern:

Entwurf

Nur wenn ich explizit die Höhe des mittleren content-Divs auf zB 300px setzen wieder holt sich das. Kann man das nicht anders machen? Ich weiß im voraus, ja nicht, wie hoch der Bereich werden wird.

Hat sonst noch jemand einen Verbesserungsvorschlag?

ingobar