|
|||
HILFE!!! Padding verschiebt background image!
Hello,
bin relativer newcomer und habe gerade ein riesen problem mit meinem css code. für jegliche hinweise wäre ich euch sehr dankbar! also, ich möchte eine aspx newslist stylen und habe hierfür verschiedene divs als container für die aspx labels angelegt. dem titelbereich (news) habe ich ein background image(roter balken) hinzugefügt. der soll rechts bündig abschließen und ich habe den divs auch die entsprechende breite und positionierung zugewiesen. wie ihr dem anhang (news.jpg) entnehmen könnt verschiebt sich allerdings mein background image um genau den wert, den ich als padding angegeben habe(um den text zu platzieren). ich habe schon etliches versucht, um das in den griff zu bekommen, habe aber bislang keine lösung gefunden. bitte um hilfe/tips anregungen!!!!! anbei noch der html und css code: HTML/apsx: <div class="newscontainer"> <div class="newsmaindiv">News</div> <aspataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <div class="newstitlediv"> <asp:Label ID="NewsTitleLabel" runat="server" Text='<%# Eval("NewsTitle") %>' /> </div> <div class="newsbodydiv"> <asp:Label ID="NewsBodyLabel" runat="server" Text='<%# Eval("NewsBody") %>' /> </div> <div class="newslinkdiv"> <asp:Label ID="NewsLinkLabel" runat="server" Text='<%# Eval("NewsLink") %>' /> </div> </ItemTemplate> </aspataList> CSS /*NEWS*/ .newscontainer { min-width:170px; max-width:170px; position:relative; top:0px; right:0px; } .newsmaindiv { min-width:170px; max-width:170px; height:30px; position:relative; right:0px; color: white; font-size:13px; font-family:Arial; font-weight:bold; vertical-align:middle; padding-right:5px; padding-top:5px; padding-left:20px; background-image: url('Images/Background_image_newslist.png'); background-repeat:no-repeat; background-position:right; } .newstitlediv { width:150px; color: #910909; font-size:12px; font-family:Arial; font-weight:bold; vertical-align:bottom; padding-left: 5px; padding-bottom:2px; } .newsbodydiv { width:150px; position:relative; color: black; font-size:11px; font-family:Arial; vertical-align:bottom; padding-left: 5px; padding-bottom:2px; } .newslinkdiv { width:150px; position:relative; color: black; font-size:11px; font-family:Arial; font-weight:bold; vertical-align:bottom; padding-left: 5px; padding-bottom:2px; border-bottom:dotted 1px black; text-decoration:underline; } Vielen herzlichen Dank! Dom |
Sponsored Links |
|
|||
Hallo auch,
die einfachste Lösung dürfte hier wohl sein, das padding-left nicht dem div selbst zu geben, sondern dem Text. Den kannst Du z.B. in ein span-Element packen und dem span-Element das padding-left geben.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Probleme mit dem IE (7) - Navigation | wunderkind | CSS | 0 | 21.04.2010 19:06 |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Float-Reihenfolge? | wolf1985 | CSS | 0 | 21.08.2008 02:35 |