höchste div-breite auslesen und auf alle divs anwenden
N1ckN4m3
- php
Hallo,
ich versuche seit einiger zeit krampfhaft den breitesten div zu ermitteln und dann auf alle divs diese breite anzuwenden - es soll in einer navi jedes feld gleich breit sein, aber ohne eine feste breite anzugeben:
im bild ist "Staatliche Einrichtungen (14)" der breiteste div, nun soll diese breite auch auf "Bürgerämter (3)" und eigentlich auch auf "Unterkategorien" angewendet werden
ich habe es per js und php versucht aber da ich nicht so wirklich die ahnung habe, bekomme ich die ausgabe nicht hin - anscheinend kann die breite nicht ermittelt werden, da der div ja mehrmals und mit unterschiedlichen breiten ausgegeben wird - die dynamische breite hab ich durch aufteilung des background-images in 3 teile erreicht und der content geht halt in das mittlere bild:
--------------------------------------------------------
<div id="nav-ukat" align="center" style="left:20px;">
<div id="ukat0">
<div id="beznav2l"> </div>
<div id="beznav2m">
<div class="Stil23" id="schrift-ukat">
<strong>Unterkategorien</strong>
</div>
</div>
<div id="beznav2r"> </div>
<?php
$db = mysql_connect($db_server, $db_user, $db_passwort);
mysql_select_db($db_name, $db);
$sql = "SELECT * FROM `nt_unterkategorien` WHERE FK_Kateg = '$_GET[id]'";
$result = mysql_query($sql);
while($row = mysql_fetch_row ($result))
{
$db = mysql_connect($db_server, $db_user, $db_passwort);
mysql_select_db($db_name, $db);
$_GET['ukat'] = $row[1];
$_GET['ukat2'] = $row[2];
$_GET['einr'] = $row[0];
$db = mysql_connect($db_server, $db_user, $db_passwort);
mysql_select_db($db_name, $db);
$sql1a = "SELECT * FROM `zt_ukat` WHERE ((FK_UKateg='$row[0]') AND (FK_Bezirk='$_GET[id_bez]'))";
$result1a = mysql_query($sql1a);
$rowta = mysql_fetch_row ($result1a);
$menge= mysql_num_rows($result1a);
?>
<?php
if ( $row[0] == 6 OR $row[0] == 7)
{
?>
<div class="hkat">
<table width="100%"style="height:28px" border="0" cellpadding="0" cellspacing="0" summary="Unterkategorien">
<tr>
<td height="28">
<div class="hkatl"> </div>
<div class="hkatm"><span style="position:relative;top:6px;left:5px;">
<a href="ebene_05.php?bez=<?php echo $_GET['bez'] ; ?>&bez1=<?php echo urlencode($_GET['bez1']) ; ?>&ukat=<?php echo urlencode($_GET['ukat']) ; ?>&ukat2=<?php echo $_GET['ukat2'] ; ?>&kat=<?php echo urlencode($_GET['kat']) ; ?>&einr=<?php echo $row[0] ; ?>&id=<?php echo $_GET['id'] ?>&id_bez=<?php echo $_GET['id_bez'] ; ?>" class="Stil11">
<?php
echo $row[1].' ('.$menge.'))';
?>
</a></span>
</div>
<div class="hkatr" style="width:30px; text-align:center"><img style="position:relative;top:4px" src="image/wappen_klein_jpg/<?php echo $_GET['bez'] ;?>" alt="Wappen" width="15" height="22"></div>
</td>
</tr>
</table>
</div>
<?php
}
else
{
?>
<div class="hkat">
<div align="left" style="position:relative; top:5px; left:22px; width:252px;">
<span class="Stil11">
<a href="ebene_05.php?bez=<?php echo $_GET['bez'] ; ?>&bez1=<?php echo urlencode($_GET['bez1']) ; ?>&ukat=<?php echo urlencode($_GET['ukat']) ; ?>&ukat2=<?php echo urlencode($_GET['ukat2']) ; ?>&kat=<?php echo urlencode($_GET['kat']) ; ?>&einr=<?php echo $row[0] ; ?>&id=<?php echo $_GET['id'] ?>&id_bez=<?php echo $_GET['id_bez'] ; ?>">
<?php
echo $row[1].' ('.$menge.')';
?>
</a>
</span>
</div>
</div>
<?php
}
?>
<?php
}
?>
</div>
</div>
--------------------------------------------------------
ps: nich stören an: ausrichtung/aufbau (kommt noch) und den ganzen unnützen id's (hab die sitewartung nur übernommen)
ich häng da voll, aber vielleicht hilft schon ein kleiner denkanstoß?! wie kann ich also die breite des breitesten "<div class="hkatm">" ermitteln und auf alle "<div class="hkatm">" anwenden?
hoffentlich hab ich mein problem einigermaßen verständlich ausgedrückt - vielen dank schonmal
MfG
Grüße,
1)sowas hat mit PHP NIX zu tun
2)als dreckige lösung könntest du eine tabelle benutzen, nicht sauber würde es aber tun
3) müsste auch mit css gehen - zumindest wenn du table-verhalten nachahmst
4) geht sicher uach anders, aber auf keinen fall serverseitig!
MFG
bleicher
Hi!
ich versuche seit einiger zeit krampfhaft den breitesten div zu ermitteln und dann auf alle divs diese breite anzuwenden - es soll in einer navi jedes feld gleich breit sein, aber ohne eine feste breite anzugeben:
Neulich fand ich jenes Beispiel mit Spalten, das sicher auch auf Zeilen angepasst werden kann.
Lo!
hallo,
Zu allererst solltest du diese Liste von Links auch in Listen legen. Also <ul>- oder <ol>-Elemente.
Die darin liegenden <li>-Elemente kannst du dann über CSS bearbeiten (z.B. mit display und text-align) und schon sollte die Ausrichtung kein Problem mehr sein.
<?php $db = mysql_connect($db_server, $db_user, $db_passwort); mysql_select_db($db_name, $db); $sql = "SELECT * FROM `nt_unterkategorien` WHERE FK_Kateg = '$_GET[id]'";
$_GET solltest du niemals einfach so in SQL-Queries schreiben! Du musst die Variablen, die von außen kommen, immer erst sichern.
$result = mysql_query($sql); while($row = mysql_fetch_row ($result)) { $db = mysql_connect($db_server, $db_user, $db_passwort); mysql_select_db($db_name, $db);
[...]
warum versuchst du in der while-Schleife nochmals und bei jedem Durchlauf eine Datenbankverbindung aufzubauen, wenn du es doch schon davor gemacht hast?
> $\_GET['ukat'] = $row[1];
> $\_GET['ukat2'] = $row[2];
> $\_GET['einr'] = $row[0];
Was soll das??
> $db = mysql\_connect($db\_server, $db\_user, $db\_passwort);
> mysql\_select\_db($db\_name, $db);
mit Verlaub, aber wer hat das Script geschrieben?
> $sql1a = "SELECT \* FROM `zt\_ukat` WHERE ((FK\_UKateg='$row[0]') AND (FK\_Bezirk='$\_GET[id\_bez]'))";
Hier wieder, $\_GET absichern!
> ich häng da voll, aber vielleicht hilft schon ein kleiner denkanstoß?! wie kann ich also die breite des breitesten "<div class="hkatm">" ermitteln und auf alle "<div class="hkatm">" anwenden?
Deine Problembeschreibung zeigt, dass du noch zu wenig Grundlagen hast, schau dir an, was man mit CSS so alles machen kann und übe semantisches HTML.
grüße,
henman
--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
@@N1ckN4m3:
nuqneH
es soll in einer navi jedes feld gleich breit sein, aber ohne eine feste breite anzugeben:
Erstmal vernünftig als Liste auszeichnen, wie henman schon sagte.
Die 'li'-Boxen haben dann dieselbe Breite. Muss nur noch die 'ul'-Box (bzw. 'ol') nicht so breit wie möglich, sondern so breit wie nötig gemacht werden (shrink to fit).
Qapla'
Sodele, ich wieder...
Listenelemente gut und schön, aber iwie wolln die nich gleich breit werden:
CODE:
<div class="hkat" style="position:relative;left:-50px;text-align:left">
<ul style="display:table-cell;">
<li style="list-style:none;">
<div class="hkatl"> </div>
<div class="hkatm" style="">
<span style="position:relative;top:6px;left:5px;">
<a href="ebene_05.php?bez=<?php echo $_GET['bez'] ; ?>&bez1=<?php echo urlencode($_GET['bez1']) ; ?>&ukat=<?php echo urlencode($_GET['ukat']) ; ?>&ukat2=<?php echo $_GET['ukat2'] ; ?>&kat=<?php echo urlencode($_GET['kat']) ; ?>&einr=<?php echo $row[0] ; ?>&id=<?php echo $_GET['id'] ?>&id_bez=<?php echo $_GET['id_bez'] ; ?>" class="Stil11">
<?php
echo $row[1].' ('.$menge.'))';
?>
</a>
</span>
</div>
<div class="hkatr" style="width:30px; text-align:center;">
<img style="position:relative;top:4px" src="image/wappen_klein_jpg/<?php echo $_GET['bez'] ;?>" alt="Wappen" width="15" height="22">
</div>
</li>
</ul>
</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);}
hab schon alle möglichen Versuche unternommen aber da is der Schlauch, auf dem ich stehe wohl doch zu etwas groß
Hab ich irgendein notwendiges Attribut nicht gefunden oder beharken sich da welche untereinander?
Ich hoffe mir kann da doch noch jemand auf die Sprünge helfen...
Danke
PS: Absicherung habsch schon versucht, leider is alles auf register_globals = on / allow_url_fopen = On usw. ausgelegt, somit hab ich damit etwas mehr Arbeit und kümmer mich also doch erst später darum :whistle:
@@NickName:
nuqneH
Listenelemente gut und schön, aber iwie wolln die nich gleich breit werden:
Dann machst du iwie was falsch.
<div class="hkat" style="position:relative;left:-50px;text-align:left">
Du schreibst Style-Angaben inline. Das macht den Quelltext völlig unübersichtlich. Markup und Style-Angaben sollten getrennt sein.
<div class="hkatl"> </div>
Was bitte soll DAS denn? Weg damit! Der Pfeil kommt ins Hintergrundbild.
<a href="ebene_05.php?bez=<?php echo $_GET['bez'] ; ?>&bez1=<?php echo urlencode($_GET['bez1']) ; ?>&ukat=<?php echo urlencode($_GET['ukat']) ; ?>&ukat2=<?php echo $_GET['ukat2'] ; ?>&kat=<?php echo urlencode($_GET['kat']) ; ?>&einr=<?php echo $row[0] ; ?>&id=<?php echo $_GET['id'] ?>&id_bez=<?php echo $_GET['id_bez'] ; ?>" class="Stil11">
Serverseitiger Code ist bei einem clientseitigen Problem völlig irrelevant. Zeige wenn, dann den generierten HTML-Code! Noch besser aber verlinke deine Beispielseite! [ZITAT1632]
Aber wo du den serverseitigen Code schonmal gezeigt hast: Um Himmels Willen! Verwendest du Nutzereingaben unbehandelt und öffnest damit Sicherheitslöcher sperrangelweit?
Durch [link:http://de2.php.net/manual/de/function.htmlspecialchars.php@title=htmlspecialchars()]
oder [link:http://de3.php.net/manual/de/function.strip-tags.php@title=strip_tags()]
solltest du die Nutzereingaben schon schicken!
Und es wäre wohl sinnvoller (performanter), nicht ständig erneut <?php ?>-Bereiche zu öffnen, sondern den String komplett zusammensubauen und dann mit EINEM echo
auszugeben:
<a href="ebene_05.php?<?php [code lang=php]echo 'bez=' . strip_tags($_GET['bez']) . '&bez1=' . urlencode(strip_tags($_GET['bez1'])) . … ;
?>" class="Stil11">[/code]
Ich hoffe mir kann da doch noch jemand auf die Sprünge helfen...
Wie gesagt: Online-Beispiel, bitte.
Qapla'
Hallo Gunnar,
Listenelemente:
tja, wenn ich denn wüsste, was ich falsch mache :(
Style-Angaben:
diese waren nur zum Testen (siehe class-Angaben) und werden natürlich auch noch in die css ausgelagert (alle anderen auf der Site natürlich auch)
<div class="hkatl"> </div>:
Was meinst Du damit? "hkatl" beinhaltet doch das Hintergrundbild welches der Pfeil ist
<a href=...>:
<div id="beznav2r"> </div>
<div class="hkat" style="position:relative;left:-50px;text-align:left">
<ul style="display:table-cell;margin:auto">
<li style="list-style:none;">
<div class="hkatl"> </div>
<div class="hkatm" style="">
<span style="position:relative;top:6px;left:5px;">
<a href="ebene_05.php?bez=fried.gif&bez1=Friedrichshain-Kreuzberg&ukat=B%FCrger%E4mter&ukat2=2&kat=Beh%F6rden&einr=6&id=2&id_bez=1" class="Stil11">
Bürgerämter (3)) </a>
</span>
</div>
<div class="hkatr" style="width:30px; text-align:center;">
<img style="position:relative;top:4px" src="image/wappen_klein_jpg/fried.gif" alt="Wappen" width="15" height="22">
</div>
</li>
</ul>
</div>
../Alt/1 = Testumgebung (daher ist der Style net so schön^^) die korrekte Site ist sosuma.de
Nutzereingaben:
Wie schon gesagt: ich habe den Code nicht geschrieben, um des ganze php-gedöns kümmer ich mich auch noch ;) - htmlspecialchars() oder strip_tags()schau ich mir denn mal an
Die ständig aufs neue geöffneten <php? ?> Bereiche sind genauso, wie auch die ständigen DB-Verbindungen vom eigentlichen Programmierer so geschrieben worden und werden auch noch angepasst ;)
MfG
Mahlzeit NickName,
[...] und werden natürlich auch noch in die css ausgelagert (alle anderen auf der Site natürlich auch)
[...]
Die ständig aufs neue geöffneten <php? ?> Bereiche sind genauso, wie auch die ständigen DB-Verbindungen vom eigentlichen Programmierer so geschrieben worden und werden auch noch angepasst ;)
Meinst Du nicht, es wäre sinnvoller *ZUERST* für ein tragfähiges Fundament zu sorgen, *DANACH* das Haus zu errichten und erst *ZUM SCHLUSS* die Fassade zu streichen?
<div class="hkatl"> </div>:
Was meinst Du damit? "hkatl" beinhaltet doch das Hintergrundbild welches der Pfeil ist
Ein leeres <div> (bzw. eines, dass ein geschütztes Leerzeichen enthält) ist semantisch unsinnig und überflüssig und kann (und sollte!) daher weg. Es ist durchaus möglich, dem <li> selbst ein passendes Hintergrundbild zu geben ...
MfG,
EKKi
Hallo EKKi,
vielen Dank für Deine Antwort!
Meinst Du nicht, es wäre sinnvoller *ZUERST* für ein tragfähiges Fundament zu sorgen, *DANACH* das Haus zu errichten und erst *ZUM SCHLUSS* die Fassade zu streichen?
Damit hast Du natürlich vollkommen recht!
Da ich aber, wie ihr sicher schon bemerkt habt, noch zu wenig Ahnung von PHP hab (hätte wohl damals des lernen sollen statt nen MCSE zu machen) wollt ich erst mal das Aussehen anpassen sowie die ganze Site HTML-Konform machen. Es ist ja leider, so wie Site ursprünglich aufgebaut war, nicht damit getan ein paar Sachen des Fundaments anzupassen sondern ich müsste dann wahrscheinlich fast alles umschreiben - da wäre eine komplette Neuprogrammierung wahrscheinlich noch am einfachsten (außer halt bei meinen Kenntnissen ;) ).
Ein leeres <div> (bzw. eines, dass ein geschütztes Leerzeichen enthält) ist semantisch unsinnig und überflüssig und kann (und sollte!) daher weg. Es ist durchaus möglich, dem <li> selbst ein passendes Hintergrundbild zu geben ...
Danke für den Hinweis, habe ich soeben geändert - nu is zwar in dem <li> ein geschütztes Leerzeichen, aber ich wüsste nicht, wie ich das sonst machen sollte - leider hat die Aufteilung der 3 Felder in <li> auch kein Erfolg bei der Anpassung der Breite gebracht :( (deshalb wurde der Thread auch am Anfang von mir im Bereich PHP erstellt worden, da ich der Meinung war, mal etwas davon gehört zu haben, dass man mit PHP die Ausgabebreite erkennen kann - dann wäre es ja wahrscheinlich nur noch ein kleiner Schritt gewesen, dieses Ergebnis als Breite anzugeben?!)
Unabhängig vom Fundament usw. - siehst Du evtl. etwas, was ich falsch gemacht haben könnte oder welcher Parameter fehlt bzw. wieso die Breite nicht angepasst wird?
MfG Nick
Hi,
Meinst Du nicht, es wäre sinnvoller *ZUERST* für ein tragfähiges Fundament zu sorgen, *DANACH* das Haus zu errichten und erst *ZUM SCHLUSS* die Fassade zu streichen?
Da ich aber, wie ihr sicher schon bemerkt habt, noch zu wenig Ahnung von PHP hab (hätte wohl damals des lernen sollen statt nen MCSE zu machen) wollt ich erst mal das Aussehen anpassen sowie die ganze Site HTML-Konform machen.
das ist zwar für sich genommen löblich - aber was für einen Vorteil bringt es dir, jetzt die Bretterwand zu tapezieren, um sie im nächsten Arbeitsgang einzureißen und die Hütte neu aufzubauen?
Es ist ja leider, so wie Site ursprünglich aufgebaut war, nicht damit getan ein paar Sachen des Fundaments anzupassen sondern ich müsste dann wahrscheinlich fast alles umschreiben - da wäre eine komplette Neuprogrammierung wahrscheinlich noch am einfachsten
Eben!
Ein leeres <div> (bzw. eines, dass ein geschütztes Leerzeichen enthält) ist semantisch unsinnig und überflüssig und kann (und sollte!) daher weg. Es ist durchaus möglich, dem <li> selbst ein passendes Hintergrundbild zu geben ...
Danke für den Hinweis, habe ich soeben geändert - nu is zwar in dem <li> ein geschütztes Leerzeichen
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.
(deshalb wurde der Thread auch am Anfang von mir im Bereich PHP erstellt worden, da ich der Meinung war, mal etwas davon gehört zu haben, dass man mit PHP die Ausgabebreite erkennen kann
Nein, wie sollte? PHP erzeugt das HTML; der Browser erzeugt daraus unter Verwendung eines Stylesheets die tatsächliche Darstellung. Erst an dieser Stelle sind Abmessungen bekannt.
Ciao,
Martin
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"> </div>
<div id="beznav2m">
<div class="Stil23" id="schrift-ukat">
<strong>Unterkategorien</strong>
</div>
</div>
<div id="beznav2r"> </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;"> </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&bez1=Friedrichshain-Kreuzberg&ukat=B%FCrger%E4mter&ukat2=2&kat=Beh%F6rden&einr=6&id=2&id_bez=1" class="Stil11">
Bürgerämter (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;"> </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&bez1=Friedrichshain-Kreuzberg&ukat=Staatliche+Einrichtungen&ukat2=2&kat=Beh%F6rden&einr=7&id=2&id_bez=1" class="Stil11">
Staatliche Einrichtungen (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
Mahlzeit NickName,
Ich habe gerade das dumpfe Gefühl, dass Du *DRINGENDST!!!!!* einige Grundlagen von HTML nachholen solltest.
Ein aus <http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=ungeordnete Listen> bestehendes Menü sollte prinzipiell grundlegend so aufgebaut sein:
<ul>
<li>Menüpunkt 1</li>
<li>Menüpunkt 2
<ul>
<li>Menüpunkt 2.1</li>
<li>Menüpunkt 2.2</li>
<li>Menüpunkt 2.3</li>
</ul>
</li>
<li>Menüpunkt 3
<ul>
<li>Menüpunkt 3.1</li>
<li>Menüpunkt 3.2
<ul>
<li>Menüpunkt 3.2.1</li>
<li>Menüpunkt 3.2.2</li>
<li>Menüpunkt 3.2.3</li>
<li>Menüpunkt 3.2.4</li>
<li>Menüpunkt 3.2.5</li>
</ul>
</li>
<li>Menüpunkt 3.3</li>
</ul>
</li>
<li>Menüpunkt 4</li>
<li>Menüpunkt 5</li>
</ul>
Du hingegen packst das Menü in ein <div> und stellst darin jeden einzelnen Menüpunkt durch ein in noch mehr ineinander verschachtelte <div>s verpacktes <ul> dar. Das ist keine sinnvolle Struktur.
<div id="beznav2r"> </div> <div class="hkat" style="position:relative;left:-50px;text-align:left"> <ul style="display:table-cell;margin:auto">
Innerhalb des einen Menüpunkts wird dieser dann aus mehreren <li>s zusammengesetzt ... das ist erst recht keine sinnvolle Struktur.
<!-- <li style="list-style:none;"> --> <li class="hkatl" style="list-style:none;float:left;"> </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&bez1=Friedrichshain-Kreuzberg&ukat=B%FCrger%E4mter&ukat2=2&kat=Beh%F6rden&einr=6&id=2&id\_bez=1" class="Stil11"> Bürgerämter (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>
Deshalb solltest Du ja auch - wie ich bereits schrieb - *ERSTMAL* für eine sinnvolle und saubere Struktur sorgen. Vorher ist es einfach nicht sinnvoll, am Aussehen herumbasteln zu wollen.
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^^
Du solltest das Problem viel grundsätzlicher lösen - wirklich. Langfristig verschwendest Du sonst nur Zeit, Nerven und sonstige Ressourcen.
Per float:left hängen sich die 3 Bilder lückenlos aneinander.
Nein. Du hängst nicht die Bilder aneinander, sondern die einzelnen <li>-Elemente. Abgesehen davon, dass das semantischer Blödsinn ist, sorgst Du so dafür, dass das mittlere <li> immer nur genau so lang wie sein Inhalt ist - et voilà!
MfG,
EKKi
So liebe Leutz...
da ich nicht mit Eurem Tipp zu den Listenelemente klargekommen bin, habe ich das Problem nun ganz simpel gelöst ;)
Ich hab mich einfach wieder an "alte Zeiten" zurück erinnert und den Aufbau tabellarisch gestaltet - der Code sieht vielleicht nicht schön aus, aber das stört mich vorerst nicht (bis ich mir denn dann mal zutrauen kann die Seite komplett neu zu programmieren) denn es funktioniert so, wie ich es mir vorgestellt habe.
Serverseitiger Code:
<table style="position:relative;border-collapse:collapse;top:-25px;left:525px;" border="0" cellpadding="0" cellspacing="0" summary="Unterkategorien">
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:37px;" width="100%" summary="Unterkategorien">
<tr>
<td width="44" align="center" style="background-image:url(image/elements/reiter_hkat_l.jpg);"> </td>
<td align="center" style="background-image:url(image/elements/reiter_hkat_m.jpg);">
<div align="center" style="height:37px">
<table align="center" class="Stil23" border="0" cellpadding="0" cellspacing="0" style="position:relative;border-collapse:collapse;height:37px;top:2px;" width="100%" summary="Unterkategorien">
<tr>
<td style="width:100%" align="center">
<strong>Unterkategorien</strong>
</td>
</tr>
</table>
</div>
</td>
<td width="41" align="center" style="background-image:url(image/elements/reiter_hkat_r.jpg);"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table border="0" summary="Unterkategorien">
<tr>
<td> </td>
<td width="100%">
<?php
$db = mysql_connect($db_server, $db_user, $db_passwort);
mysql_select_db($db_name, $db);
$sql = "SELECT * FROM `nt_unterkategorien` WHERE FK_Kateg = '$_GET[id]'";
$result = mysql_query($sql);
while($row = mysql_fetch_row ($result))
{
$db = mysql_connect($db_server, $db_user, $db_passwort);
mysql_select_db($db_name, $db);
$_GET['ukat'] = $row[1];
$_GET['ukat2'] = $row[2];
$_GET['einr'] = $row[0];
$db = mysql_connect($db_server, $db_user, $db_passwort);
mysql_select_db($db_name, $db);
$sql1a = "SELECT * FROM `zt_ukat` WHERE ((FK_UKateg='$row[0]') AND (FK_Bezirk='$_GET[id_bez]'))";
$result1a = mysql_query($sql1a);
$rowta = mysql_fetch_row ($result1a);
$menge= mysql_num_rows($result1a);
?>
<?php
if ( $row[0] == 6 OR $row[0] == 7)
{
?>
<div align="left" style="height:33px">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:33px;" width="100%" summary="Unterkategorien">
<tr>
<td width="13" align="center" style="background-image:url(image/elements/kateg_hg_l.gif);"> </td>
<td align="center" style="background-image:url(image/elements/kateg_hg_m.gif);">
<table border="0" cellpadding="0" cellspacing="0" style="position:relative;left:5px;top:-3px;border-collapse:collapse;" width="100%" summary="Unterkategorien">
<tr>
<td width="100%">
<a href="<?php echo 'ebene_05.php?bez=' . strip_tags($_GET['bez']) . '&bez1=' . urlencode(strip_tags($_GET['bez1'])) . '&ukat=' . urlencode(strip_tags($_GET['ukat'])) . '&ukat2=' . urlencode(strip_tags($_GET['ukat2'])) . '&kat=' . urlencode(strip_tags($_GET['kat'])) . '&einr=' . strip_tags($row[0]) . '&id=' . strip_tags($_GET['id']) . '&id_bez=' . strip_tags($_GET['id_bez']) ; ?>" class="Stil11">
<?php echo $row[1] . ' ('.$menge.')' ; ?>
</a>
</td>
<td> </td>
</tr>
</table>
</td>
<td style="background-image:url(image/elements/kateg_hg_r_w.gif);width:30px;">
<img style="position:relative;width:15px;height:22px;top:-2px;left:5px;" border="0" src="image/wappen_klein_jpg/<?php echo $_GET['bez'] ;?>" alt="Wappen">
</td>
</tr>
</table>
</div>
<?php
}
else
{
?>
<div align="left" style="height:33px">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:33px;" width="100%" summary="Unterkategorien">
<tr>
<td align="center" style="background-image:url(image/elements/kateg_hg_l.gif);width:13px;"> </td>
<td align="left" style="background-image:url(image/elements/kateg_hg_m.gif);">
<table border="0" cellpadding="0" cellspacing="0" style="position:relative;left:5px;top:-3px;border-collapse:collapse;" width="100%" summary="<?php echo strip_tags($row[1]) ; ?>">
<tr>
<td width="100%">
<a class="Stil11" href="<?php echo 'ebene_05.php?bez=' . strip_tags($_GET['bez']) . '&bez1=' . urlencode(strip_tags($_GET['bez1'])) . '&ukat=' . urlencode(strip_tags($_GET['ukat'])) . '&ukat2=' . urlencode(strip_tags($_GET['ukat2'])) . '&kat=' . urlencode(strip_tags($_GET['kat'])) . '&einr=' . strip_tags($row[0]) . '&id=' . strip_tags($_GET['id']) . '&id_bez=' . strip_tags($_GET['id_bez']) ; ?>">
<?php echo strip_tags($row[1]) . ' ('.$menge.')'; ?>
</a>
</td>
</tr>
</table>
</td>
<td width="15" style="background-image:url(image/elements/kateg_hg_r.gif)"> </td>
</tr>
</table>
</div>
<?php
}
}
?>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
Bevor wieder jemand "meckert"... Die Styleangaben werden noch ausgelagert^^
Quelltext:
<table style="position:relative;border-collapse:collapse;top:-25px;left:525px;" border="0" cellpadding="0" cellspacing="0" summary="Unterkategorien">
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:37px;" width="100%" summary="Unterkategorien">
<tr>
<td width="44" align="center" style="background-image:url(image/elements/reiter_hkat_l.jpg);"> </td>
<td align="center" style="background-image:url(image/elements/reiter_hkat_m.jpg);">
<div align="center" style="height:37px">
<table align="center" class="Stil23" border="0" cellpadding="0" cellspacing="0" style="position:relative;border-collapse:collapse;height:37px;top:2px;" width="100%" summary="Unterkategorien">
<tr>
<td style="width:100%" align="center">
<strong>Unterkategorien</strong>
</td>
</tr>
</table>
</div>
</td>
<td width="41" align="center" style="background-image:url(image/elements/reiter_hkat_r.jpg);"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table border="0" summary="Unterkategorien">
<tr>
<td> </td>
<td width="100%">
<div align="left" style="height:33px">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:33px;" width="100%" summary="Unterkategorien">
<tr>
<td width="13" align="center" style="background-image:url(image/elements/kateg_hg_l.gif);"> </td>
<td align="center" style="background-image:url(image/elements/kateg_hg_m.gif);">
<table border="0" cellpadding="0" cellspacing="0" style="position:relative;left:5px;top:-3px;border-collapse:collapse;" width="100%" summary="Unterkategorien">
<tr>
<td width="100%">
<a href="ebene_05.php?bez=fried.gif&bez1=Friedrichshain-Kreuzberg&ukat=B%FCrger%E4mter&ukat2=2&kat=Beh%F6rden&einr=6&id=2&id_bez=1" class="Stil11">
Bürgerämter (3) </a>
</td>
<td> </td>
</tr>
</table>
</td>
<td style="background-image:url(image/elements/kateg_hg_r_w.gif);width:30px;">
<img style="position:relative;width:15px;height:22px;top:-2px;left:5px;" border="0" src="image/wappen_klein_jpg/fried.gif" alt="Wappen">
</td>
</tr>
</table>
</div>
<div align="left" style="height:33px">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:33px;" width="100%" summary="Unterkategorien">
<tr>
<td width="13" align="center" style="background-image:url(image/elements/kateg_hg_l.gif);"> </td>
<td align="center" style="background-image:url(image/elements/kateg_hg_m.gif);">
<table border="0" cellpadding="0" cellspacing="0" style="position:relative;left:5px;top:-3px;border-collapse:collapse;" width="100%" summary="Unterkategorien">
<tr>
<td width="100%">
<a href="ebene_05.php?bez=fried.gif&bez1=Friedrichshain-Kreuzberg&ukat=Staatliche+Einrichtungen&ukat2=2&kat=Beh%F6rden&einr=7&id=2&id_bez=1" class="Stil11">
Staatliche Einrichtungen (27) </a>
</td>
<td> </td>
</tr>
</table>
</td>
<td style="background-image:url(image/elements/kateg_hg_r_w.gif);width:30px;">
<img style="position:relative;width:15px;height:22px;top:-2px;left:5px;" border="0" src="image/wappen_klein_jpg/fried.gif" alt="Wappen">
</td>
</tr>
</table>
</div>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
Ich danke Euch trotzdem für die Versuche mir zu helfen und auch, dass Ihr die Gefahr von Augenkrebs, bei Betrachtung des Codes, nicht gescheut habt!
MfG Nick
Mahlzeit NickName,
[...] wollt ich erst mal das Aussehen anpassen sowie die ganze Site HTML-Konform machen.
Genau ist doch aber das Problem: da das Aussehen (die farbige Fassade) auf dem HTML-Code (dem Haus) beruht, der wiederum durch PHP-Code (das Fundament) erzeugt wird, ist es IMHO extrem unsinnig, das Pferd von hinten aufzuzäumen. Sorge für stabile und saubere Grundlagen, dann wird Dein HTML-Code (der wirklich mit das Grausamste ist, was ich bisher so gesehen habe - eine einzige unübersichtliche <div>-Suppe) strukturierter und es ist erheblich einfacher, passende CSS-Regeln dafür zu entwickeln.
[...] sondern ich müsste dann wahrscheinlich fast alles umschreiben - da wäre eine komplette Neuprogrammierung wahrscheinlich noch am einfachsten (außer halt bei meinen Kenntnissen ;) ).
Korrekt. Das ist IMHO sogar das einzig sinnvolle Vorgehen. Alles andere ist vergebliche Liebesmüh (zumindest langfristig gesehen).
Danke für den Hinweis, habe ich soeben geändert - nu is zwar in dem <li> ein geschütztes Leerzeichen, aber ich wüsste nicht, wie ich das sonst machen sollte - leider hat die Aufteilung der 3 Felder in <li> auch kein Erfolg bei der Anpassung der Breite gebracht :(
Wo kann man sich diese Änderung anschauen? Wie sieht der (Client-seitige) HTML-Code *jetzt* aus?
(deshalb wurde der Thread auch am Anfang von mir im Bereich PHP erstellt worden, da ich der Meinung war, mal etwas davon gehört zu haben, dass man mit PHP die Ausgabebreite erkennen kann
Das ist halber Blödsinn. ;-) Woher soll PHP wissen, welche Schriftart mit welcher Schriftgröße der jeweilige Browser letztendlich verwendet?
Unabhängig vom Fundament usw. - siehst Du evtl. etwas, was ich falsch gemacht haben könnte oder welcher Parameter fehlt bzw. wieso die Breite nicht angepasst wird?
Nein, so auf den ersten Blick nicht. Und für einen zweiten bzw. weitere Blicke sind mir meine Augen echt zu schade ... tut mir leid, aber der Code ist wirklich dermaßen grausam und unverständlich - bis ich mich da durchgekämpft habe ...
MfG,
EKKi
Hallo dedlfix,
vielen Dank, ich werd mir das mal anschauen!
Hallo henman,
wie schon gesagt: Hab die sitewartung erst übernommen, der Kollege, der diese seite erstellt hatte, hat damit sein debut gegeben^^ - über viele diinge habe ich mich auch schon gewundert und nachdem ich alles html-konform und auch vom styleaufbau angepasst habe werde ich mir auch das ganze php/mysql-gedöns ansehen ;)
<ul><ol><li> schau ich mir mal an was es genau damit auf sich hat - aber ich weiss nich genau ob wir evtl aneinander vorbeigeredet haben
$_GET und dein Hinweis sagen mir erstmal nix, aber wie schon erwähnt kümmer ich mich später noch um die struktur
DB-Verbindungen sind mir auch schon aufgefallen, aber auch das später
$_GET['ukat'] usw... tja, er hat es damals so geschrieben und funzen tut die site auch wie erwartet (auch hier: später)
tja, wer hat das script geschrieben? ein ehemaliger kollege, welcher damit seinen einstand in sachen websiteprogrammierung gegeben hat und, wie man (vielleicht nicht aus diesem codeschnipsel aber am rest der site) sehen kann auch sehr viel gekl... ähm copy&paste betrieben^^
nochmal $_GET - ohne gross suche zu müssen... was meinst du mit absichern?
Problembeschreibung: naja, wusste nich genau wie ich es erklären soll - in <div class="hkat"> wird eine datenbankabfrage gemacht und (wie auf dem screen zu sehen) in einzelnen zeilen ausgegeben, nun habe ich die feste breite entfernt und das hintergrundbild des divs in 3 einzelne aufgeteilt (hkatl, hkatm und hkatr). in "hkatm" wird nun das ergebniss der abfrage ausgegeben und "hkatm" passt sich dynamisch der breite der ausgabe an - dadurch wird jetzt jede zeile unterschiedlich breit... die dynamische anpassung wollt ich beibehalten aber es jede zeile so breit sein, wie die breiteste. da es aber nur eine hkatm gibt kann ich die breiteste zeile nicht ermitteln und auf die anderen anwenden, zumindest nicht mit den mitteln, die mir bekannt sind :(
@gunnar - Danke auch dir
ich werd mir henmans und deinen beitrag zur brust nehmen und schaun, was ich damit machen kann
Vielen Dank nochmal an alle
MfG