zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden HILFE!!! Padding verschiebt background image!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.05.2009, 12:19
dom dom ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2009
Beiträge: 3
dom befindet sich auf einem aufstrebenden Ast
Standard 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
Angehängte Grafiken
Dateityp: jpg News.jpg (20,0 KB, 9x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.05.2009, 16:07
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.05.2009, 20:41
dom dom ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2009
Beiträge: 3
dom befindet sich auf einem aufstrebenden Ast
Standard Funktioniert!

Danke für den Tip, es funktioniert jetzt.

Ist die Lösung aber nicht ein bisschen dirty, da ich jetzt auch noch inline stylees im code rumfliegen hab?

Danke
VG
Mit Zitat antworten
  #4 (permalink)  
Alt 07.05.2009, 11:03
Neuer Benutzer
neuer user
 
Registriert seit: 26.04.2009
Beiträge: 21
salow befindet sich auf einem aufstrebenden Ast
Standard

du kannst den background auch fix positionieren:


background-position:0px 0px;
Mit Zitat antworten
  #5 (permalink)  
Alt 07.05.2009, 12:27
dom dom ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2009
Beiträge: 3
dom befindet sich auf einem aufstrebenden Ast
Standard Perfekt, danke!!!!!

hat jetzt perfekt funktioniert! Vielen Dank!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre 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 aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:15 Uhr.