NickName: höchste div-breite auslesen und auf alle divs anwenden

Beitrag lesen

Hi,

danke für eure Antworten!

Klar wäre es besser von Grund auf neu anzufangen, doch da mein Wissen noch begrenzt ist dachte ich, ich mach das was vorhanden ist erst mal schick und kann dann in Ruhe mit dem Neuaufbau beginnen.

Zu sehen ist das angesprochene "Problem" hier.

Quelltext:

	<div id="nav-ukat" align="center" style="left:20px;">  
		<div id="ukat0">  
  
			<div id="beznav2l">&nbsp;</div>  
			<div id="beznav2m">  
				<div class="Stil23" id="schrift-ukat">  
					<strong>Unterkategorien</strong>  
				</div>  
			</div>  
			<div id="beznav2r">&nbsp;</div>  
									<div class="hkat" style="position:relative;left:-50px;text-align:left">  
  
				<ul style="display:table-cell;margin:auto">  
					<!-- <li style="list-style:none;"> -->  
						<li class="hkatl" style="list-style:none;float:left;">&nbsp;</li>  
						<li class="hkatm" style="list-style:none;float:left;">  
							<span style="position:relative;top:6px;left:5px;">  
								<a href="ebene_05.php?bez=fried.gif&amp;bez1=Friedrichshain-Kreuzberg&amp;ukat=B%FCrger%E4mter&amp;ukat2=2&amp;kat=Beh%F6rden&amp;einr=6&amp;id=2&amp;id_bez=1" class="Stil11">  
									Bürgerämter&nbsp;(3))								</a>  
							</span>  
  
						</li>  
						<li class="hkatr" style="list-style:none;float:left;width:30px;text-align:center;">  
							<img style="position:relative;top:4px" src="image/wappen_klein_jpg/fried.gif" alt="Wappen" width="15" height="22">  
						</li>  
					<!-- </li> -->  
				</ul>  
			</div>  
									<div class="hkat" style="position:relative;left:-50px;text-align:left">  
				<ul style="display:table-cell;margin:auto">  
  
					<!-- <li style="list-style:none;"> -->  
						<li class="hkatl" style="list-style:none;float:left;">&nbsp;</li>  
						<li class="hkatm" style="list-style:none;float:left;">  
							<span style="position:relative;top:6px;left:5px;">  
								<a href="ebene_05.php?bez=fried.gif&amp;bez1=Friedrichshain-Kreuzberg&amp;ukat=Staatliche+Einrichtungen&amp;ukat2=2&amp;kat=Beh%F6rden&amp;einr=7&amp;id=2&amp;id_bez=1" class="Stil11">  
									Staatliche Einrichtungen&nbsp;(27))								</a>  
							</span>  
						</li>  
  
						<li class="hkatr" style="list-style:none;float:left;width:30px;text-align:center;">  
							<img style="position:relative;top:4px" src="image/wappen_klein_jpg/fried.gif" alt="Wappen" width="15" height="22">  
						</li>  
					<!-- </li> -->  
				</ul>  
			</div>  
					</div>  
	</div>  

CSS:

.hkat{position:relative;top:20px;width:100%;}  
.hkatl{position:relative;float:left;top:25px;left:0px;height:33px;width:13px;background-image:url(../image/elements/kateg_hg_l.gif);}  
.hkatm{position:relative;float:left;top:25px;left:0px;height:33px;max-width:auto;background-image:url(../image/elements/kateg_hg_m.gif);}  
.hkatr{position:relative;float:left;top:25px;left:0px;height:33px;width:30px;background-image:url(../image/elements/kateg_hg_r.gif);}

ahso, das ganze bezieht sich eh erst mal aufn FF, Anpassungen für andere Browser würde ich machen, wenn ich das "Problem" im FF gelöst habe^^

Wozu? Welchen Zweck erfüllt es? Für Innenabstände gibt es padding, wenn -was ich vermute- das Hintergrundbild am Rand sitzen und nicht vom Text überdeckt werden soll.

Der einzige Zweck dieses div's war die Ausgabe des Bildes, es gibt gar keinen Text, der darüber ausgegeben wird - wie zu erkennen habe ich aus einem Hintergrundbild 3 gemacht, da das ursprüngliche HG-Bild bei einer dynamischen Anpassung (Breite) an den Text sich nur nebeneinander vervielfältigt hätte. Per float:left hängen sich die 3 Bilder lückenlos aneinander.

1. kateg_hg_l.gif
2. kateg_hg_m.gif
3. kateg_hg_r.gif

Original:

2. (kateg_hg_m.gif) ist ein Bild, welches problemlos in der Breite variieren kann, dort lasse ich auch den Text ausgeben, da dieser immer unterschiedlich breit ist... und genau um dieses Feld geht es, es soll sich nicht an den ausgegebenen Text anpassen sondern an den breitesten ausgegebenen Text (so dass das angezeigte HG-Bild aus 1. 2. und 3. in jeder Zeile so breit ist wie eben das breiteste) also:

statt

soll es so werden

Ein Möglichkeit die meinen Wunsch (in welcher Weise auch immer) realisieren kann bräuchte ich auch wenn ich die Site komplett neu aufbaue ;) - wenn mir da, trotz des Augenkrebsverursachenden Quelltextes, jemand dabei helfen könnte wäre ich schon glücklich!

MfG Nick