nicht angemeldet
<DIV>'s nebeneinander positionieren (float ist bekannt)
Hallo zusammen,
ich habe ein Layout-Problem. Ich möchte eine Grafik und dazugehörigen Text nebeneinandern positionieren. Dazu habe ich die Grafik und den Text jeweils in ein eigenes <div> gepackt. Mit float habe ich dann den Text neben die Grafik bekommen, aber obwohl die Text-<div> komplett rechts neben die Grafik geschoben wurde, wird der Text innerhalb der <div> "unnötigerweise" eingerückt.
Hier mal ein Codeausschnitt mit Testdaten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="position:relative;width:984px;background-color:#eee;padding-left:16px;padding-top:30px;">
<div style="position:static;float:left;width:141px;height:26px;">
<a title="test" href="http://www.test.de" target="_blank"><img src="logos/test.jpg" alt="test" width="141" height="26" border="0" /></a>
</div>
<div style="position:relative;left:192px;top:0px;width:765px;padding-bottom:30px;">
<font size="2" color="#1a4688" face="verdana"><strong>test</strong></font><br /><br />
<font size="2" color="#1a4688" face="verdana">test:<em><a title="test" href="http://www.test.de" target="_blank">www.test.de</a></em></font><br />
<p><font size="2" face="verdana"><strong>testdaten:</strong><br />
bla blub<br />
mehr bla blub<br />
noch mehr bla blub<br />
immer noch bla blub</font></p>
<p><font size="2" face="verdana">es nimmt kein ende mit bla blub<br />
noch immer bla blub<br />
endlich zu ende mit bla blub</font><br />
</p>
<hr />
</div>
<div style="position:static;float:left;">
<a title="test" href="http://www.test.de" target="_blank"><img src="logos/test.jpg" alt="test" width="141" height="100" border="0" /></a>
</div>
<div style="position:relative;left:192px;width:765px;padding-bottom:30px;border:1px solid blue;">
<font size="2" color="#1a4688" face="verdana"><strong>test</strong></font><br /><br />
<font size="2" color="#1a4688" face="verdana">test:<em><a title="test" href="http://www.test.de" target="_blank">www.test.de</a></em></font><br />
<p><font size="2" face="verdana"><strong>testdaten:</strong><br />
bla blub<br />
mehr bla blub<br />
noch mehr bla blub<br />
immer noch bla blub</font></p>
<p><font size="2" face="verdana">es nimmt kein ende mit bla blub<br />
noch immer bla blub<br />
endlich zu ende mit bla blub</font><br />
</p>
<hr />
</div>
</div>
Ich muss dazu erwähnen, dass meine Erfahrung mit HTML eher beschränkt ist. Die Originaldaten stammen aus GoLive und waren total zerschossen, es grenzte an ein Wunder dass die Seite überhaupt noch dargestellt wurde (viele überflüssige Tags, die zum Teil nicht mal geschlossen wurden usw.). Ich habe jetzt mit meinem eingeschränkten HTML Wissen versucht die Seite etwas aufzuräumen, aber dieser Teil will mir nicht gelingen. Wie bekomme ich es also hin das der Text in der <div> linkbündig ausgerichtet wird und nicht auf Höhe der Grafik eingerückt wird. Ich möchte, wenn es geht, auf eine absolute Positionierung verzichten.
Der Rahmen um die untere <div> ist Absicht, damit man leichter erkennen kann was ich meine.
-
Hi,
Ich möchte eine Grafik und dazugehörigen Text nebeneinandern positionieren. Dazu habe ich die Grafik und den Text jeweils in ein eigenes <div> gepackt.
Klingt nicht sehr sinnvoll.
Fliesstext will in einem Absatz stehen (P) - und das Bild braucht direkt kein weitere umgebendes Element. (Als inline-Element darf es unter Strict nicht direkt im Body stehen, aber umgebende Containerelemente scheinen ja sowieso vorhanden zu sein.)
Mit float habe ich dann den Text neben die Grafik bekommen,
Was hast du gefloatet, Bild oder Text?
aber obwohl die Text-<div> komplett rechts neben die Grafik geschoben wurde, wird der Text innerhalb der <div> "unnötigerweise" eingerückt.
Was bedeutet das? (Screenshot/Online-Beispiel)
Hier mal ein Codeausschnitt mit Testdaten:
Ganz grausig.
Veraltete Elemente wie FONT, vermutlich falscher Einsatz von STRONG (statt vernünftiger Überschriften?), sehr viele BR, relative Positionierung von Elementen weg von ihrem normalen Platz ohne erkennbaren Grund, ...Ich habe jetzt mit meinem eingeschränkten HTML Wissen versucht die Seite etwas aufzuräumen,
Da sind aber noch mehr Baustellen offen.
Neu aufbauen wäre vermutlich am einfachsten und effektivsten.
Erst mal ein sinnvolles, nicht überfrachtetes HTML-Gerüst für die Inhalte erstellen. Formatierung kommt später.Wie bekomme ich es also hin das der Text in der <div> linkbündig ausgerichtet wird und nicht auf Höhe der Grafik eingerückt wird.
Weiss nicht, welche Einrückung du meinst.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Ok, ich denke ein Screenshot sagt mehr als 1000 Worte.
Das ist der Codeausschnitt im Browser.
Das ist im Original folgendes:
Links ist ein Firmenlogo als Bild und direkt daneben stehen die Kontaktdaten. Das Firmenlogo ist dabei ein <div> und der Text das zweite <div>. Wie man nun erkennen kann, ist der Text bei den beiden Pfeilen eingerückt (und zwar genau so, als würde sich das Bild dort befinden). Ich hoffe das macht die Frage verständlicher. Wie bekomme ich also den kompletten Text linksbündig zur blauen Linie formatiert?Die ganzen <br/> Tags wurden genutzt um die Adresse wie gewünscht zu formatieren. Ebenso wurde <strong> nicht für Überschriften genutzt, sondern weil es gewünscht war, dass der Firmenname hervorgehoben wird. Wobei das sowieso von meinem Vorgänger in GoLive so gesetzt wurde. Gleiches gilt für die <font> Tags. Ich wollte jetzt aber erst mal das Layout der Seite wieder hinbiegen bevor ich mich an Tags mache die zwar funktionieren aber veraltet sind. Vorher war die Seite nahezu komplett aus absolut formatierten <div>s zusammengesetzt und jetzt sollte etwas verschoben werden.
-
Hi,
Wie man nun erkennen kann, ist der Text bei den beiden Pfeilen eingerückt (und zwar genau so, als würde sich das Bild dort befinden).
Ich denke, diesen Effekt hast du dir durch die relative Positionierung eingehandelt.
Wie bekomme ich also den kompletten Text linksbündig zur blauen Linie formatiert?
Bild floaten, Div-Inhalt per margin-left (unterhalb) des Bildes auf Abstand halten.
Die ganzen <br/> Tags wurden genutzt um die Adresse wie gewünscht zu formatieren.
Sie werden teilweise nicht nur benutzt, um den Text in der nächsten Zeile weitergehen zu lassen, sondern auch, um Abstände zu erzeugen. Dafür wäre aber margin geeigneter.
Ebenso wurde <strong> nicht für Überschriften genutzt, sondern weil es gewünscht war, dass der Firmenname hervorgehoben wird.
Die Frage lautet: *Ist* der Firmenname denn an der Stelle nicht so etwas wie eine Überschrift?
Wobei das sowieso von meinem Vorgänger in GoLive so gesetzt wurde. Gleiches gilt für die <font> Tags.
Gleiches was?
Vom Vorgänger verbockt, oder aus irgendeinem bestimmten Grund eingesetzt?
Anyway, die können ersatzlos entfallen - zu Gunsten von Formatierung des Textes per CSS.Ich wollte jetzt aber erst mal das Layout der Seite wieder hinbiegen bevor ich mich an Tags mache die zwar funktionieren aber veraltet sind.
Das ist vielleicht nicht besonders sinnvoll.
Wenn du das Layout jetzt so "hinbiegst", dass es auf unbrauchbarem HTML aufsetzen wie gewünscht aussieht - dann tut es das vielleicht dann schon wieder nicht mehr, wenn das HTML korrigiert wird.
Erst sinnvolles HTML erstellen, dann wie gewünscht formatieren - das dürfte schneller und unkomplizierter gehen.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Vielen Dank für deine Hilfe,
das mit margin-left war der entscheidende Hinweis. Ich habe jetzt alles neu gemacht, den ganzen <font>-Müll entfernt (war scheinbar noch ganz alt, bei einem Teil der Seite wurde dann doch mit CSS gearbeitet).
Ich hoffe jetzt GoLive zerschießt die Seite nicht wieder wenn der Kollege zurück kommt ...
-
-
-