[Erledigt] bild als link mit mouseover ohne zeilenumbruch

[Forumsgast]

Hallo

ich habe ein kleines Prob. mit der Darstellung von meinem Hintergrundbild von einem Link

Hier mal die CSS:

/*  
Theme Name: Ginger Ninja! v2
Description: The new Ginger Ninja! theme.
Version: 1.0
Author: Donny Burnside
Author URI: http://www.ginger-ninja.net/
*/

/* Generic Styling */

body {
    background:url(images/bg-body.png) repeat-x top center #E8F7F9;
    font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
    font-size:62.5%; /* Sets default font size to 10px */
    color:#222222;
    }

* {
    margin:0;
    padding:0;
    }

img {
    border:0;
    }

p {
    font-size: 2em;
    margin-bottom:0.75em;
    padding: 5px 10px 0 10px 
    }

a {
    text-decoration:none;
    color:#B4C835;
    }
a:hover {
    text-decoration:none;
    color:#6CC7DC;
    }

/* Structure */

#wrapper {
    margin:0 auto;
    width:700px;
    background:#ffffff;
    font-size:1.20em;

    }
#header {
    height:140px;
    background:url(images/bg-header.jpg) no-repeat;
    }
#menu {
    height:35px;
    line-height:35px;
    background:url(images/bg-menu.png) repeat-x;
    padding:0 10px;
    }
#sidebar {
    float:right;
    width:180px;
    background:#efefef;
    margin-right:10px;
    }
#content {
    float:left;
    width:500px;
    min-height:400px;
    }
#footer {
    clear:both;
    height:100px;
    background:url(images/bg-footer.jpg) no-repeat;
    }

/* Entries */

.entry {
    padding:5px 10px;
    text-align:justify;
    line-height:1.75em;
    }
.entry-title {
    font-size:1.90em;
    font-weight:normal;
    letter-spacing:-1px;
    }
.date {
    font-size:0.9em;
    color:#bbb;
    cursor:default;
    letter-spacing:1px;
    }
.comments {
    margin-top:-1em;
    }
.comments a {
    color:#6CC7DC;
    background:url(images/icon-comment.png) no-repeat 0px 2px;
    padding-left:20px;
    padding-right:2px;
    }
.comments a:hover {
    color:#B4C835;
    }


/* Menu */

#menu ul {
    list-style-type:none;
    }
#menu li {
    float:left;
    }
#menu li a {
    padding:0 15px;
    display:block;
    color:#ffffff;
    margin-right:2px;
    }
#menu li a:hover {
    background:url(images/bg-menu-hover.png) no-repeat center center;
    }

/* Sidebar */

#sidebar ul {
    list-style-type:none;
    margin-top:10px;
    }
#sidebar li {
    
    }
#sidebar li a {
    display:block;
    height:20px;
    line-height:20px;
    color:#222222;
    padding-left:5px;
    border-bottom:1px solid #dddddd;
    }
#sidebar li a:hover {
    background:#edebed;
    color:#6CC4D8;
    }
#sidebar-bottom {
    height:20px;
    background:url(images/bg-sidebar-bottom.gif) no-repeat top center;
    }

/* Footer */

#footer-valid {
    float:left;
    padding-top:55px;
    padding-left:20px;
    cursor:default;
    color:#ffffff;
    }
#footer-valid a {
    color:#ffffff;
    text-decoration:none;
    }
#footer-valid a:hover {
    color:#ffffff;
    text-decoration:underline;
    }

/* Heading's */

h1 {
    font-size:2.5em;
    font-weight:normal;
    cursor:default;
    position:relative; top:50px; left:30px;
    letter-spacing:1px;
    color:#aaaaaa;
    font-style:italic;
    }

/* Feed */

#feed {
    height:25px;
    width:126px;
    background:url(images/bg-feed.gif) no-repeat;
    margin:0 auto;
    padding-left:26px;
    }
a.feed-button {
    display:block;
    width:100px;
    height:25px;
    background:url("images/button-feed.png") 0 0 no-repeat;
    text-decoration: none;
    }
a:hover.feed-button {
    background-position:0 -25px;
    }

/* Extra's */

#ad-top {
    width:480px;
    height:72px;
    background:url(images/bg-ad-top.png) no-repeat;
    padding:5px;
    }
    
/* Tabellen */

table{
    margin: 30px 0 0 30%;
    height: 100%;
    border-style: ridge;
    border-color: #FAEBFF;
    background-color: #F0F8AF;
    text-align: center;
}
tr{
    background-color: #F0F8FF;
}

.button180{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 17px;
color: #6464B4;
text-align: center;
vertical-align: middle;
background-image:url(images/button.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px; 
margin: 0px 0px 0px 30%;
height: 22px;
width: 152px;
display: block;
}

.button180:visited {
color:#000000;
}

.button180:hover {
color:#FF007F;
/* hier könnte man den andersfarbigen Button einbinden */
}

.button181{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 17px;
color: #6464B4;
text-align: center;
vertical-align: middle;
background-image:url(images/button2.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px; 
margin: 0px 0px 0px 30%;
height: 22px;
width: 152px;
display: block;
}

.button181:visited {
color:#000000;
}

.button181:hover {
color:#FF007F;
/* hier könnte man den andersfarbigen Button einbinden */
}
.button182{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 17px;
color: #6464B4;
text-align: center;
vertical-align: middle;
background-image:url(images/button3.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px; 
margin: 0px 0px 0px 30%;
height: 22px;
width: 152px;
display: block;
}

.button182:visited {
color:#000000;
}

.button182:hover {
color:#FF007F;
/* hier könnte man den andersfarbigen Button einbinden */
}

p
{
    font-size: 1.4em;
    color: red;
    text-align: center;
}







/* Tooltip */

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 17px;
color: #6464B4;
text-align: center;
vertical-align: middle;
background-image:url(images/14.jpg);
background-position:0px 0px;
text-decoration:none;
height: 30px;
width: 130px;
display: block;
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
    font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 17px;
color: #6464B4;
text-align: center;

background-image:url(images/14.jpg);
background-position:0px 0px;
text-decoration:none;
height: 30px;
width: 130px;
display: block;

z-index: 100;
}

a.tooltip span {
    font-size: 13px;
display: none;
text-decoration: none;
}

a.tooltip:hover span {
    font-size: 13px;
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

dazu noch der Quelltexteil:

echo '<br /> <br /> <br /> <br /> Aktuell sind <a class="tooltip" href="#">'.$menge_eintraege.' <span><b>Auflistung der '.$menge_eintraege.' Einträge</b> <br />  ';while($a = mysql_fetch_object($eintraege)){echo ''.$a->Name.'<br/>';}echo '</span></a>Einträge eingetragen. ';

Wenn ich das ganze so schreibe bricht er mir vor und nach dem bild die Zeile um. das will ich aber nicht:



Er soll das bild ganz normal in die Laufenden Zeilen einfügen.

wenn ich das

display: block;

wegnehme wird das bild zwar fliesend angezeigt, aber das bild wird nur noch so lange angezeigt wie der link ist. und noch 100% vom bild. wenn ich jetzt z.b. link mit dem namen 1 habe dann seh ich nur eine ganz kleine ecke vom bild. Wie kann ich das umstellen?

Danke

[Forumsgast]

Was hat das mit PHP zu tun?

Themenmoderation:
[→] Verschoben von PHP-Einsteiger

[Forumsgast]

display:block;
und
float:left;
sollten es bringen.

[Forumsgast]

Geht leider auch nicht ganz:

[Forumsgast]

Ach so, ja. Entweder Du setzt die Texte auch in ein gefloatetes Blockelement oder Du setzt die <a> als Inlines mit einer festen Breite.

[Forumsgast]

Ach so, ja. Entweder Du setzt die Texte auch in ein gefloatetes Blockelement oder Du setzt die <a> als Inlines mit einer festen Breite.

ok das versteh ich jetzt nicht ganz

[Forumsgast]

Was genau?

[Forumsgast]

was ich mit welchem teil machen soll

[Forumsgast]

Statt

display: block;

kannst du

display: inline-block;

verwenden und dann auf Floats verzichten. Kennt der IE 6 aber nicht.

@nikosch: ganz inline geht nicht, weil man Inline-Tags keine Breite zuweisen kann.

[Forumsgast]

Ja stimmt, Images sind ja so Zwitterwesen. inline-block kennt nicht nur der IE nicht. Mir war das bis dato auch nicht bekannt.

[Forumsgast]

ok was muss ich machen damit er IE das auch kennt?

[Forumsgast]

Der IE 7 kennt das eingeschränkt, für deine Zwecke aber durchaus ausreichend.
Im IE 6 kannst du, denke ich nur mit viel Float-Krams und relativer Positionierung (ist oft ein Wundermittel) etwas machen. Einfach mal ausprobieren. Der IE 6 ist in solchen Sachen immer schwer berechenbar.

[Forumsgast]

Danke es geht