• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

bildgrösse an div anpassen

sileo

New member
Hallo,

ich versuche eine box hinzukriegen, welche aussehen soll, wie das bild im anhang. dabei soll die vertikale grösse der box dynamisch vom inhalt abhängig sein, sprich der verlauf seitlich der box muss quasi skaliert werden.

was ich bisher habe sieht wie folgt aus:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000">

<div id="breaking_news" style="position: absolute; left: 50%; top: 50%; width: 184;">
  <img src="top_news.gif" width="184" height="30">  
  <div class="content" style="padding: 0px; background-color: #BCBCBC;"> <img src="boarder_left.gif" hspace="0" vspace="0" align="left"> 
    <img src="boarder_right.gif" hspace="0" vspace="0" align="right"> 
    <div class="news"> 
	  <span class="date">06.03.2005 - 13:00</span><br>
      <span class="text">i'm stock...</span>
	</div>
    <div class="news">
	  <span class="date">06.03.2005 - 13:00</span><br>
      <span class="text">i'm stock...</span>
	</div>
  </div>
</div>

</body>
</html>

das problem dabei liegt darin, dass die beiden border-bilder länger sind als das div. kann mir jemand einen tipp geben?

danke!
 

Anhänge

  • box.gif
    box.gif
    8,1 KB · Aufrufe: 12
Zuletzt bearbeitet:
Hallo,

Du hast doch schon für den Div Container class Content mit einer style erweitert, dort shreibe mal zusätzlich border-left:1px solid Black und border-right:1px solid black rein.

Ich würde an deiner stelle mal ein Stylesheet schreiben und deine Classen darin definieren, damit wird der QT übersichtlicher.

<style>
<!--
breaking_news {
position:absolute;
margin-left: 50%;
margin-top: 50%;
width:184px;
}

content {
background-color: #BCBCBC;
padding: 0px;
border-left: 1px solid black;
border-right: 1px solid black;
}


//-->
</style>

<div class="breaking_news" id="breaking_news">
<img src="top_news.gif" width="184" height="30">
<div class="content"> <img src="boarder_left.gif" hspace="0" vspace="0" align="left">
<img src="boarder_right.gif" hspace="0" vspace="0" align="right">
//kannst Du dir dann sparen
<div class="news">
<span class="date">06.03.2005 - 13:00</span><br>
<span class="text">i'm stock...</span>
</div>
<div class="news">
<span class="date">06.03.2005 - 13:00</span><br>
<span class="text">i'm stock...</span>
</div>
</div>
</div>
 
Eben das will er nicht.
Er will, das sich die beiden Bilder (grafischer Rahmen) links und rechts mit skalieren,
sobald sich der Inhalt des divs erhöht...

Ich würde mal versuchen, mir so eine Rahmengrafik zu machen, die 1x1 Pixel groß ist.
Dann gibst Du in Deinem Quelltext an:
Code:
<img src="boarder_left.gif" [B]width="1px" height="70%" [/B] hspace="0" vspace="0" align="left"> 
<img src="boarder_right.gif" [B]width="1px" height="70%"[/B] hspace="0" vspace="0" align="right">
Wobei die 70% jetzt nur ein Bsp-Wert sind.
Ob's allerdings funktioniert, weiß ich nicht.
Ist nur so ein Gedanke...
 
Zuletzt bearbeitet:
Zurück
Oben