php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Bewertung: Bewertung: 1 Stimmen, 5,00 durchschnittlich.
Alt 29.10.2008, 19:39  
Erfahrener Benutzer
 
Registriert seit: 09.07.2008
Beiträge: 556
PHP-Kenntnisse:
Anfänger
SteiniKeule kann nur auf Besserung hoffen
SteiniKeule eine Nachricht über ICQ schicken SteiniKeule eine Nachricht über Skype™ schicken
Standard [Erledigt] bild als link mit mouseover ohne zeilenumbruch

Hallo

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

Hier mal die CSS:

Code:
/*  
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:

Code:
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

Code:
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
SteiniKeule ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 29.10.2008, 19:46  
Supermoderator HD
 
Benutzerbild von Manko10
 
Registriert seit: 16.03.2008
Beiträge: 8.425
PHP-Kenntnisse:
Fortgeschritten
Manko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende Zukunft
Standard

Was hat das mit PHP zu tun?

Themenmoderation:
[→] Verschoben von PHP-Einsteiger
__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems
Manko10 ist offline   Mit Zitat antworten
Alt 29.10.2008, 19:51  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 34.256
PHP-Kenntnisse:
Fortgeschritten
nikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz sein
Standard

display:block;
und
float:left;
sollten es bringen.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 29.10.2008, 19:57  
Erfahrener Benutzer
 
Registriert seit: 09.07.2008
Beiträge: 556
PHP-Kenntnisse:
Anfänger
SteiniKeule kann nur auf Besserung hoffen
SteiniKeule eine Nachricht über ICQ schicken SteiniKeule eine Nachricht über Skype™ schicken
Standard

Geht leider auch nicht ganz:

SteiniKeule ist offline   Mit Zitat antworten
Alt 29.10.2008, 20:04  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 34.256
PHP-Kenntnisse:
Fortgeschritten
nikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz sein
Standard

Ach so, ja. Entweder Du setzt die Texte auch in ein gefloatetes Blockelement oder Du setzt die <a> als Inlines mit einer festen Breite.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 29.10.2008, 20:13  
Erfahrener Benutzer
 
Registriert seit: 09.07.2008
Beiträge: 556
PHP-Kenntnisse:
Anfänger
SteiniKeule kann nur auf Besserung hoffen
SteiniKeule eine Nachricht über ICQ schicken SteiniKeule eine Nachricht über Skype™ schicken
Standard

Zitat:
Zitat von nikosch Beitrag anzeigen
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
SteiniKeule ist offline   Mit Zitat antworten
Alt 29.10.2008, 20:15  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 34.256
PHP-Kenntnisse:
Fortgeschritten
nikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz sein
Standard

Was genau?
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 29.10.2008, 20:18  
Erfahrener Benutzer
 
Registriert seit: 09.07.2008
Beiträge: 556
PHP-Kenntnisse:
Anfänger
SteiniKeule kann nur auf Besserung hoffen
SteiniKeule eine Nachricht über ICQ schicken SteiniKeule eine Nachricht über Skype™ schicken
Standard

was ich mit welchem teil machen soll
SteiniKeule ist offline   Mit Zitat antworten
Alt 29.10.2008, 22:14  
Supermoderator HD
 
Benutzerbild von Manko10
 
Registriert seit: 16.03.2008
Beiträge: 8.425
PHP-Kenntnisse:
Fortgeschritten
Manko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende Zukunft
Standard

Statt
Code:
display: block;
kannst du
Code:
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.
__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems
Manko10 ist offline   Mit Zitat antworten
Alt 29.10.2008, 22:28  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 34.256
PHP-Kenntnisse:
Fortgeschritten
nikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz sein
Standard

Ja stimmt, Images sind ja so Zwitterwesen. inline-block kennt nicht nur der IE nicht. Mir war das bis dato auch nicht bekannt.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[Erledigt] bild aus db und verzeichn is mit einem link löschen! litterauspirna PHP Tipps 2008 3 15.09.2008 15:46
Bild als Link Mcxreflex PHP Tipps 2008 4 15.07.2008 14:28
Bild vor Link pattern TimmaY PHP Tipps 2007 5 21.03.2007 18:06
bild mit link ohne ziel wird immer markiert kiffy HTML, Usability und Barrierefreiheit 3 16.10.2006 12:34
infos auf link oder bild wenn die maus darauf zeigt? PHP Tipps 2006 11 04.02.2006 00:17
text in bild mit zeilenumbruch PHP Tipps 2005-2 8 23.08.2005 09:02
Suche Tipps für Persormance-Steigerung (Geld für Nützliches) Beitragsarchiv 18 16.08.2005 10:57
.gif bild als button mit hiterlegtem link PHP Tipps 2005-2 11 17.06.2005 20:57
Bild (.jpg) mit Link auf Festplatte speichern PsychoEagle PHP Tipps 2005-2 11 16.06.2005 14:54
Bild mit Link aus Tabelle nebeneinander ausgeben PHP Tipps 2005 3 25.04.2005 12:19
Zentriert + Bild mit Link PHP Tipps 2005 5 24.04.2005 16:35
Bild in Zeile bei Mouseover ändern Tschuu HTML, Usability und Barrierefreiheit 7 11.03.2005 12:42
Aktuelle Seite = Link aus einer Datei => BILD? PHP Tipps 2004 2 07.09.2004 21:49
Link auf Externes Bild mit Größenanpassung PHP Tipps 2004 1 03.07.2004 15:07
[Erledigt] bild als link HTML, Usability und Barrierefreiheit 3 07.06.2004 12:48

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
ohne zeilenumbruch php, html link im text ohne zeilenumbruch, mouseover bild link, text image php ohne umbrunch, mouseover bild mit link, http://www.php.de/html-usability-und-barrierefreiheit/48563-erledigt-bild-als-link-mit-mouseover-ohne-zeilenumbruch.html, html bilder ohne umbruch, bild on mouse textfeld umbruch, rollover image in echo php einsetzen, html link kein zeilenumbruch, mouseover über link bild, html \bilder ohne zeilenumbruch\, html maus link hover image url, php link bild mouseover, maus ohne zeilensprung, image link zeilenumbruch, links und text ohne zeilenumbruch, mouseover ohne head, zwei img links ohne umbruch, maus over link wird bild angezeigt

Alle Zeitangaben in WEZ +1. Es ist jetzt 23:05 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum