nicht angemeldet
Icons zerschießen meine Buttons
Ich habe Textbuttons die ich per CSS ansprechend gestaltet habe, nur leider kann ich Dort keine Icons mit aufnehmen, sonst sehen die Buttons zerstückelt aus. Ich kapiere einfach nicht warum. Mit Text geht es doch wunderbar.
<div id="EditContent" >
<a href="#" style="margin-left:130px;"><span class="ui-icon ui-icon-triangle-1-n"></span>Gross</a>
</div>
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
div#EditContent {
float: left;
margin-right: 10px;
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
text-transform: uppercase;
}
div#EditContent a {
padding: 3px 8px 3px 8px;
background: url(../css/fantasy-theme/images/ui-bg_highlight-soft_25_2f3865_1x100.png) 50% 50% repeat-x;
background-color: #4A4A6F;
color: #fff;
border: solid 1px #6A6A8F;
-moz-border-radius: 2px; -webkit-border-radius: 2px;
}
div#EditContent a:hover {
background: url(../css/fantasy-theme/images/ui-bg_highlight-soft_60_3f487d_1x100.png) 50% 50% repeat-x;
border: 1px solid #8d95cc;
background-color: #FFCC00;
color: #000;
}
Ohne das UI-Icon gehts... Was kann das sein?
-
Sobald ich ein UI-Icon hinzufüge, wird der Button zerschossen. So schauts aus:
Hier, ich hab's in eine eigene Html gepackt, um das Problem zu analysieren:
[url:http://www.maleska.de/tmp/Testbutton/Testbutton.html]
Der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <style type="text/css"> .ui-icon { background-image: url(ui-icons_ffffff_256x240.png); display:block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; width:16px; height:16px; } .ui-icon-triangle-1-n { background-position: 0 -16px; } div#EditContent { float: left; margin-right: 10px; font-size: 0.8em; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; } div#EditContent a { padding: 3px 8px 3px 8px; background: url(ui-bg_highlight-soft_25_2f3865_1x100.png) 50% 50% repeat-x; background-color: #4A4A6F; color: #fff; border: solid 1px #6A6A8F; -moz-border-radius: 2px; -webkit-border-radius: 2px; } div#EditContent a:hover { background: url(ui-bg_highlight-soft_60_3f487d_1x100.png) 50% 50% repeat-x; border: 1px solid #8d95cc; background-color: #FFCC00; color: #000; } </style> </head> <body style="background-color:black;"> <div id="EditContent" > <a href="#" style="margin-left:130px;">Nur Text</a> </div> <body style="background-color:black;"> <div id="EditContent" > <a href="#" style="margin-left:130px;"><span class="ui-icon ui-icon-triangle-1-n"></span>Mit Icon</a> </div> </body> </html>-
Om nah hoo pez nyeetz, Hexodus!
erster Verdacht: Es liegt an display: block. Verwende stattdessen inline-block. Da ich aber nicht ganz so genau weiß, wie es am Ende aussehen soll, weiß ich auch nicht, ob das das richtige ist.
Zudem möchtest du die Navigation als eine Liste auszeichnen.
Du hast außerdem 2 mal <body> im Quelltext, was sicher nur ein Versehen ist.
Matthias
--
-
Hi,
Sobald ich ein UI-Icon hinzufüge, wird der Button zerschossen. So schauts aus:
Validiere deinen Code, beseitige die Fehler.
<a href="#" style="margin-left:130px;"><span class="ui-icon ui-icon-triangle-1-n"></span>Mit Icon</a>
Verzichte auf das überflüssige SPAN-Element.
Gebe A ein padding, und richte in diesem Bereich das Hintergrundbild aus.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-