nicht angemeldet
Text genau neben einer Grafik
Hallo,
ich habe ein CSS-Menü erstellt.
Der Code ist:
<head>
<style type="text/css">
body {background:white;}
div.menu {
width:110px;
background:white;
padding:0;
margin:0;
border:1px solid cccccc;
}
div.menu a {
display:block;
margin:0;
width:100%;
padding:5px;
font-family:tahoma;
font-size:10px;
border:1px solid white
color:black;
text-decoration:none;
}
html>body div.menu a {width:auto;}
div.menu a:hover {
background:rgb(122,187,255);
color:black;
border:1px solid rgb(49,106,197)
}
div.menu a:active {
background:cccccc;
color:black;
border:1px solid cccccc
}
</style>
<base target="Hauptframe">
</head>
<div class="menu">
<a href="home.php"><font size="2" face="Tahoma" color="#000000"><img border="0" src="menu/home.gif" width="18" height="18">
<sup>[ Home ]</sup></font></a>
<a href="bilder"><font size="2" face="Tahoma" color="#000000"><img border="0" src="menu/bilder.gif" width="18" height="18">
<sup>[ Bilder ]</sup></font></a>
<a href="forum"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">
<sup>[ Forum ]</sup></font></a>
<a href="mp3.htm"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">
<sup>[ Hörproben ]</sup></font></a>
<a href="links.htm"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">
<sup>[ Links ]</sup></font></a>
<a href="presse.htm"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">
<sup>[ Presse ]</sup></font></a>
<a href="chat/chat"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">
<sup>[ Chat ]</sup></font></a>
Wie ihr seht, habe ich den Text dazu gebracht, direkt neben der Grafik zu stehen, indem ich ihn mit <sup> höhergestellt habe. Eine sehr unelegante Lösung.
Die Grafiken soll nun noch grösser werden und dadurch rückt der Text weiter nach unten.
Eine Lösung wäre eine Tabelle innerhalb der Box, aber dann wird der Text nicht mehr als Link angesehen.
Ein ähnliches Problem ist mit dem Bild selber: es ist ebenfalls kein Link.
Für Lösungen wäre ich seeeehr dankbar.
Viele Grüße,
David
-
Hallo David,
Wie ihr seht, habe ich den Text dazu gebracht, direkt neben der Grafik zu stehen, indem ich ihn mit <sup> höhergestellt habe. Eine sehr unelegante Lösung.
In der Tat. Wenn ich dich richtig verstanden habe, dürfte dir float weiterhelfen, http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float.
Eine Lösung wäre eine Tabelle innerhalb der Box, aber dann wird der Text nicht mehr als Link angesehen.
Ein ähnliches Problem ist mit dem Bild selber: es ist ebenfalls kein Link.Wenn du das mit float versuchst, dürfte es keine Probleme geben.
mfg Siechfred
--
Jedem ist klar, dass man einen Tintenfleck nicht mit Tinte und einen Ölfleck nicht mit Öl wegwischt. Warum wird dann immer wieder versucht, Blut mit Blut wegzuwischen? (B.v.Suttner)
ss:| zu:| ls:# fo:| de:[ va:| ch:? n4:& rl:? br:& js:| ie:% fl:( mo:}-
Hallo Siechfred,
In der Tat. Wenn ich dich richtig verstanden habe, dürfte dir float weiterhelfen, http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float.
Ich zeig Dir mal, wie es am Ende aussehen soll (Bild).
Oben ist es so, wie ich es kann.
Unten so, wie es werden soll :)Danke + Gruß,
David-
Hallo,
Ich kann Siechfred nur unterstützen:
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float.
Suche dann noch nach vertical-align.Kleiner Hinweis:
<img src="http://www.ki.tng.de/~grenz/menu.gif" border="0" alt=""><a href="#" style="font-family:tahoma,arial,sans-serif; font-size:.8em; line-height:50px; vertical-align:middle;"><img src="chat.gif" alt="Presse" style="width:50px; height:50px; float:left;"><span style="padding-left:1em;">[chat]<span></a>
viele Grüße
Axel
-
Hi Axel!
<a href="#" style="font-family:tahoma,arial,sans-serif; font-size:.8em; line-height:50px; vertical-align:middle;"><img src="chat.gif" alt="Presse" style="width:50px; height:50px; float:left;"><span style="padding-left:1em;">[chat]<span></a>
Super!! Da ist das mit dem mittigem Text schonmal behoben. Vielen Dank! Jetzt schliesst mein Menü nur komischerweise leider immer noch das Bild aus dem Link aus! Frag mich nicht, warum :(
Gruß,
David-
Hallo,
<a href="#" style="font-family:tahoma,arial,sans-serif; font-size:.8em; line-height:50px; vertical-align:middle;"><img src="chat.gif" alt="Presse" style="width:50px; height:50px; float:left;"><span style="padding-left:1em;">[chat]<span></a>
Super!! Da ist das mit dem mittigem Text schonmal behoben. Vielen Dank! Jetzt schliesst mein Menü nur komischerweise leider immer noch das Bild aus dem Link aus! Frag mich nicht, warum :(
Du hast die font-Elemente aus den a-Elementen entfernt und durch CSS-Eigenschaften ersetzt? Sonst solltest Du das mal machen. Das Bild steht im a-Tag, also sollte es auch zum Link gehören.
viele Grüße
Axel
-
-
-
Hallo David,
Ich zeig Dir mal, wie es am Ende aussehen soll (Bild).
Oben ist es so, wie ich es kann.
Unten so, wie es werden soll :)Kein Problem:
<p><img src="" alt="" align="center"> <a href="">Text</a></p>
Gruß,
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :-
Hallo Michael,
<p><img src="" alt="" align="center"> <a href="">Text</a></p>
ich sag ja nichts, aber mal abgesehen davon dass es align="middle" heißt, steht in der von mir verlinkten Datei warum man das nicht machen soll...
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hallo Tobias,
<p><img src="" alt="" align="center"> <a href="">Text</a></p>
ich sag ja nichts,Aber das tust du doch gerade. ;-)
aber mal abgesehen davon dass es align="middle" heißt,
Natürlich, sorry.
Gruß,
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :
-
-
-
-
-
Hallo David,
border:1px solid cccccc;
vor der Farbe fehlt noch eine Raute ('#')
font-family:tahoma;
hier fehlt eine generische Familie (z.B. sans-serif)
background:cccccc;
border:1px solid cccccchier fehlt auch zweimal eine Raute
<base target="Hauptframe">
hier fehlt href
<div class="menu">
<a href="home.php"><font size="2" face="Tahoma" color="#000000">erst kommt groß css und dann ein <font> *grusel*
<img border="0" src="menu/home.gif" width="18" height="18">
hier fehlt ein alt
<sup>[ Home ]</sup></font></a>
wie das jetzt genau aussieht, weiß ich nicht (bin ehrlichgesagt zu faul mir jetzt selbst eine testdatei zu machen, könntest du vielleicht eine url angeben unter der man sich das anschauen kan), aber dir dürfte http://selfhtml.teamone.de/html/grafiken/ausrichten.htm#css helfen. Wenn nicht könntest du mal mit margin und padding rumspielen
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hi Tobias.
Das ist alles noch "beta" :)
border:1px solid cccccc;
vor der Farbe fehlt noch eine Raute ('#')geht auch ohne, aber ich mach des Standards wegen gerne eine davor.
<div class="menu">
<a href="home.php"><font size="2" face="Tahoma" color="#000000">
erst kommt groß css und dann ein <font> *grusel*Wie gesagt, wird noch überarbeitet...
Das mit dem Ausrichten ist genau das, was ich suche! Im mittleren ist der Text ziemlich genau in der Mitte des Bildes. Aaaaber:
1.) gehört das Bild immer noch nicht zum Link
2.) ist die Schrift nun komischerweise ein bisschen zu hoch!! Ich hasse sowas. Wenn er mir schon verspricht, die genau in die Mitte zu plazieren, soll er das auch machen *strg alt entf drück* :) Probiers mal aus... Ideen?Vielen Dank.
David-
Hi,
border:1px solid cccccc;
vor der Farbe fehlt noch eine Raute ('#')
geht auch ohne, aber ich mach des Standards wegen gerne eine davor.Dann guck mal in einem Browser (nicht nur im IE). Mozilla ignoriert korrekterweise fehlerhafte Angaben.
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
-
-