Themenicon richtig anordnen?!

Hallo ihr Lieben,

ich habe schon wieder ein Problem welches ich nicht alleine lösen kann -> habe es durch die Suchfunktion und dem LexiHelp probiert aber nix passendes gefunden.

Es geht um die Themenicons. Ich habe heute neue Themenicons wie z.B. Smilies, Blinkies etc. hinzugefügt aber leider sieht das Resultat nicht so aus wie gewünscht.

Hier mal ein Beispiel wie ich es gerne haben möchte:
http://www.karins-traumwelt.com/f7-plauderecke

Also nehmen wir da gleich mal das erste Thema "Neue Forenregeln bitte hier akzeptieren", da steht ganz links das Rosen-Icon und dann rechts das Themenicon "Sonnen-Smilie".

Bei mir sieht es allerdings so aus:
http://tanjas-bastelzauber.forumieren.com/f11-herzlich-willkommen-liebes-mitglied

Mein Wunsch ist einfach dass das Themenicon, in meinem Falle das "New-Blinkie", nicht auf dem eigentlichen Icon drauf liegt.

Könnt ihr mir da bitte helfen?

Liebe Grüße, Tanja

Leider ist dein erster Link nur für registrierte User, aber versuch mal folgenden CSS-Code:

Code:

dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}

Hallo Louie,

danke erst mal für deine schnelle und nette Hilfe.

Soll ich den Code so hienein kopieren wie er da steht oder das bereits geschriebene ändern damit es so aussieht?

Sorry für die evtl. doofe Frage aber ich kenn mich mit dem CSS-Sheet nicht aus.

Und hier nochmal zum Verständnis weil der Link ja leider nicht geht:
Bei mir im Forum siehst du ja bei "Herzlich Willkommen liebes Mitglied" dass da zwei Icons aufeinander geklatscht wurden. Ich will die Icons aber nebeneinander stehen haben, so dass das "New"-Icon und das "Rosen"-Icon nebeneinander sind und nicht aufeinander.

Nachtrag: Ich habe den Code genauso kopiert und in das CSS-Stylesheet kopiert aber es ist nichts passiert. Vielleicht kann es sein dass ich schon mal so einen Code von einem deiner Kollegen bekommen hatte, da ging es damals darum dass mein selbstgebasteltes Icon zu groß war und deshalb sendete mir der Frank auch so einen ähnlichen Code - wenn du möchtest kann ich ihn dir mal hier zeigen?

Aber mein eigentliches Problem ist ja gerade dass die zwei Icons aufeinander liegen und ich möchte gerne dass die nebeneinander stehen.

schau mal, mit dem Code sollte es so aussehen:



Solltest du natürlich schon CCS eingetragen haben, dann musst du den Code entsprechend ändern.

Da du ja ein BB3-Forum hast, kann ich Templates-Änderungen ja ausschliessen.

Du kannst aber gerne deinen gesamten CSS-Code hier reinposten, aber bitte in

Code:

[code][/code]

einpacken.

Wenn du die Icons direkt nebeneinander haben willst und dann erst die Schrift bedarf es noch mehr Änderungen. Da muss man dann auch die Schrift nach rechts versetzen, was aber dauerhaft so ist, ob "New"-Icon da ist oder nicht. Deshalb hab ich das mal hinter die Schrift gesetzt. Ich finde das hat auch was

Hallo nochmal lieber Louie,

also genauso wie in deinem screenshot hätte ich es echt gerne, muss nicht unbedingt rechts sein, aber hauptsache einfach nicht mehr zwei icons auf einmal draufgeklatscht.

jetzt bin ich richtig verwirrt - wie hast du denn das so hinbekommen in meinem forum? wow bei mir sieht es leider nicht so aus...

soll ich nun mein komplettes stylesheet hier posten oder nur das welches ich gemeint hatte? naja ich geb dir mal das dass mir frank mal gab um es in das css hinein zu kopieren als ich das icongrößenproblem hatte.

Code:

dl.icon {
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 50px;
}
.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}


ich hoffe sehr dass das das richtige ist. sorry für mein evtl. unverständnis, aber ich kenne mich echt nicht mit diesem css aus

ich verwende ein Browser-Addon für den Firefox, genannt FireBug.
Mit dem kann man CSS verändern und sich das Ergebniss ansehen, ohne wirklich die Seite anpacken zu müssen.

Ist das dein gesamter CSS-Code? Wenn ja, dann müsste es eigentlich funktionieren, wenn du den Code oben einfach darunter schreibst ...

PS: mit folgendem Code

Code:

dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: -25px 50%;
    background-repeat: no-repeat;
}

ul.topics dd.dterm, ul.topics dt {
    display: block;
    float: left;
    padding-left: 80px;
    width: 50%;
}

sollte das Ergebnis wie folgt aussehen:

mensch bei mir klappt es einfach nicht - find es so lieb von dir wie hilfsbereit du doch bist und es tut mir echt leid dass du es so schwer mit mir hast.

darf ich dir mal mein komplettes aktuelles css-sheet zeigen??

wenn es nicht ok ist lösch ich es gleich wieder, aber ich versteh nun echt nicht was ich falsch mache,denn ich hab den code oben kopiert und ganz unten eingefügt...

Code:

.buttons img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr10.png) no-repeat center;}

.buttons img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr110.png) no-repeat center;}

.i_post{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt10.png) no-repeat center !important;}

.i_post:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt110.png) no-repeat center !important;}

.i_reply, #new-message-link img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr10.png) no-repeat center !important;}

.i_reply:hover, #new-message-link img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr110.png) no-repeat center !important;}

img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok10.png') no-repeat center !important;}
img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]:hover{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok110.png') no-repeat center !important;}

.i_msg_newpost{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm10.png) no-repeat center !important;}

.i_msg_newpost:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm110.png) no-repeat center !important;}

#wrap {
width:970px;
border: 1px solid #ee66aa;
background-color: #f6bbf6;
margin-top: 5px;
padding-top:15px;
padding-right:20px;
padding-left:20px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
}

body {
color:#550022;
background-color:#f699cc;
}

a.mainmenu {
font-weight : normal;
letter-spacing : -1px;
font-size : 12px;
color: #550022;
}

.navbar a:hover {
text-decoration: none;
color: #550022;
}

.navbar {background-color: #f6aaf6;}

ul.navlinks{
border-bottom-color: #d55b7d;
}

.headerbar {
background-color: #f699cc;
background-image: url("http://i72.servimg.com/u/f72/14/52/34/74/bgh10.gif");
}

.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}

li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #d55b7d;
}

li.row:hover dd {
border-left-color: #f6bbf6;
}

li.row:hover {
background-color: #ffd4ff;
}

li.row {
border-top-color: #FFFFFF;
border-bottom-color: #d55b7d;
background-color: #f6bbf6;
}

.row dl dd.dterm {
border-left: none;
}

a.forumtitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.forumtitle:hover {
color: #aa4400;
text-decoration: underline;
}

a.topictitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.topictitle:hover {
color: #aa4400;
text-decoration: underline;
}

dl.codebox {
background-color: #FFFFFF;
border-color: #d55b7d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

dl.codebox dt {
border-bottom-color: #f699cc;
}

dl.codebox code {
color: #2E8B57;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #f699cc;
background: #ffd4ff url(http://i32.servimg.com/u/f32/14/52/34/74/quote10.gif) no-repeat 1px 6px !important;
padding-left: 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.postprofile {
border-left-color: #e27392;
}

.inputbox {
background-color: #ffd4ff;
border-color: #d55b7d;
color: #550022;
}

.inputbox:hover {
border-color: #550022;
}

.inputbox:focus {
border-color: #d55b7d;
color: #550022;
}

button.button2, input.button2{
background: #f9c8da url(http://i34.servimg.com/u/f34/14/74/84/24/bb10.png);
font-weight: bold;
padding: 2px;
}


#page-footer{background: url(http://i72.servimg.com/u/f72/14/52/34/74/cr-mak11.png) bottom right no-repeat;
height: 61px;}


/*--hover-glitzer-beginn-*/
a:hover {
            POSITION: relative; 
            TOP: 1.0px; LEFT: 1.0px;}
a:hover {
            background-image:url(http://i69.servimg.com/u/f69/11/49/29/60/196_st10.gif);
            }
/*--hover-glitzer-end--*/

dl.icon {
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 50px;
}
.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}
.


Jetzt wird es kompliziert und ich kann nur noch "Versuch + Irrtum" spielen.

Ich würde den Code

Code:

dl.icon {
        background-position: 0 50%;
        background-repeat: no-repeat;
        height: auto;
        min-height: 50px;
    }

rausschmeissen und durch oben den ersetzen.

Aber speicher dir das vorher mal als Textdatei weg, damit du es wiederherstellen kannst.

EDIT: Der Punkt ganz zum Schluss ist auch überflüssig. Den würd ich löschen. Vielleicht nimmt das System deshalb nachfolgende Codes nicht richtig an.

so nun hat es geklappt, aber nur mit diesem code hat es geklappt

Code:

dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}.

mit dem anderen code, also so dass der icon gleich rechts vom eigentlichen icon steht hat nicht geklappt,der war dann eher nach links geschoben. allerdings habe ich jetzt wieder das problem dass ich damals mit frank gelöst hatte - das eigentliche icon ist viel zu groß für die kleine spalte...

gibt es da nicht eine möglichkeit um alles zu vereinen?

hier nochmal mein aktuelles css-stylesheet so wie es jetzt im moment aussieht

Code:

.buttons img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr10.png) no-repeat center;}

.buttons img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr110.png) no-repeat center;}

.i_post{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt10.png) no-repeat center !important;}

.i_post:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt110.png) no-repeat center !important;}

.i_reply, #new-message-link img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr10.png) no-repeat center !important;}

.i_reply:hover, #new-message-link img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr110.png) no-repeat center !important;}

img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok10.png') no-repeat center !important;}
img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]:hover{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok110.png') no-repeat center !important;}

.i_msg_newpost{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm10.png) no-repeat center !important;}

.i_msg_newpost:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm110.png) no-repeat center !important;}

#wrap {
width:970px;
border: 1px solid #ee66aa;
background-color: #f6bbf6;
margin-top: 5px;
padding-top:15px;
padding-right:20px;
padding-left:20px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
}

body {
color:#550022;
background-color:#f699cc;
}

a.mainmenu {
font-weight : normal;
letter-spacing : -1px;
font-size : 12px;
color: #550022;
}

.navbar a:hover {
text-decoration: none;
color: #550022;
}

.navbar {background-color: #f6aaf6;}

ul.navlinks{
border-bottom-color: #d55b7d;
}

.headerbar {
background-color: #f699cc;
background-image: url("http://i72.servimg.com/u/f72/14/52/34/74/bgh10.gif");
}

.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}

li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #d55b7d;
}

li.row:hover dd {
border-left-color: #f6bbf6;
}

li.row:hover {
background-color: #ffd4ff;
}

li.row {
border-top-color: #FFFFFF;
border-bottom-color: #d55b7d;
background-color: #f6bbf6;
}

.row dl dd.dterm {
border-left: none;
}

a.forumtitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.forumtitle:hover {
color: #aa4400;
text-decoration: underline;
}

a.topictitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.topictitle:hover {
color: #aa4400;
text-decoration: underline;
}

dl.codebox {
background-color: #FFFFFF;
border-color: #d55b7d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

dl.codebox dt {
border-bottom-color: #f699cc;
}

dl.codebox code {
color: #2E8B57;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #f699cc;
background: #ffd4ff url(http://i32.servimg.com/u/f32/14/52/34/74/quote10.gif) no-repeat 1px 6px !important;
padding-left: 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.postprofile {
border-left-color: #e27392;
}

.inputbox {
background-color: #ffd4ff;
border-color: #d55b7d;
color: #550022;
}

.inputbox:hover {
border-color: #550022;
}

.inputbox:focus {
border-color: #d55b7d;
color: #550022;
}

button.button2, input.button2{
background: #f9c8da url(http://i34.servimg.com/u/f34/14/74/84/24/bb10.png);
font-weight: bold;
padding: 2px;
}


#page-footer{background: url(http://i72.servimg.com/u/f72/14/52/34/74/cr-mak11.png) bottom right no-repeat;
height: 61px;}


/*--hover-glitzer-beginn-*/
a:hover {
            POSITION: relative; 
            TOP: 1.0px; LEFT: 1.0px;}
a:hover {
            background-image:url(http://i69.servimg.com/u/f69/11/49/29/60/196_st10.gif);
            }
/*--hover-glitzer-end--*/

.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}
dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}.

das ist echt zum haare raufen, wie dumm dass ich mich mit diesen codes so überhaupt nicht auskenne, wo hast du das alles eigentlich gelernt?? *liebfrag*

Nachtrag: Hat doch geklappt, kannste ja mal schauen, habe das was ich vorher rausgemacht habe einfach noch reinkopiert und nun hat der icon auch wieder platz! und das themenicon steht jetzt wieder ganz weit rechts. und du hattest recht, es lag am punkt.

danke dir für deine mühe! danke!

ps: wenn ich das themenicon nun doch links haben möchte geht das auch?

Code:

.buttons img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr10.png) no-repeat center;}

.buttons img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr110.png) no-repeat center;}

.i_post{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt10.png) no-repeat center !important;}

.i_post:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt110.png) no-repeat center !important;}

.i_reply, #new-message-link img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr10.png) no-repeat center !important;}

.i_reply:hover, #new-message-link img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr110.png) no-repeat center !important;}

img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok10.png') no-repeat center !important;}
img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]:hover{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok110.png') no-repeat center !important;}

.i_msg_newpost{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm10.png) no-repeat center !important;}

.i_msg_newpost:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm110.png) no-repeat center !important;}

#wrap {
width:970px;
border: 1px solid #ee66aa;
background-color: #f6bbf6;
margin-top: 5px;
padding-top:15px;
padding-right:20px;
padding-left:20px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
}

body {
color:#550022;
background-color:#f699cc;
}

a.mainmenu {
font-weight : normal;
letter-spacing : -1px;
font-size : 12px;
color: #550022;
}

.navbar a:hover {
text-decoration: none;
color: #550022;
}

.navbar {background-color: #f6aaf6;}

ul.navlinks{
border-bottom-color: #d55b7d;
}

.headerbar {
background-color: #f699cc;
background-image: url("http://i72.servimg.com/u/f72/14/52/34/74/bgh10.gif");
}

.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}

li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #d55b7d;
}

li.row:hover dd {
border-left-color: #f6bbf6;
}

li.row:hover {
background-color: #ffd4ff;
}

li.row {
border-top-color: #FFFFFF;
border-bottom-color: #d55b7d;
background-color: #f6bbf6;
}

.row dl dd.dterm {
border-left: none;
}

a.forumtitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.forumtitle:hover {
color: #aa4400;
text-decoration: underline;
}

a.topictitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.topictitle:hover {
color: #aa4400;
text-decoration: underline;
}

dl.codebox {
background-color: #FFFFFF;
border-color: #d55b7d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

dl.codebox dt {
border-bottom-color: #f699cc;
}

dl.codebox code {
color: #2E8B57;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #f699cc;
background: #ffd4ff url(http://i32.servimg.com/u/f32/14/52/34/74/quote10.gif) no-repeat 1px 6px !important;
padding-left: 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.postprofile {
border-left-color: #e27392;
}

.inputbox {
background-color: #ffd4ff;
border-color: #d55b7d;
color: #550022;
}

.inputbox:hover {
border-color: #550022;
}

.inputbox:focus {
border-color: #d55b7d;
color: #550022;
}

button.button2, input.button2{
background: #f9c8da url(http://i34.servimg.com/u/f34/14/74/84/24/bb10.png);
font-weight: bold;
padding: 2px;
}


#page-footer{background: url(http://i72.servimg.com/u/f72/14/52/34/74/cr-mak11.png) bottom right no-repeat;
height: 61px;}


/*--hover-glitzer-beginn-*/
a:hover {
            POSITION: relative; 
            TOP: 1.0px; LEFT: 1.0px;}
a:hover {
            background-image:url(http://i69.servimg.com/u/f69/11/49/29/60/196_st10.gif);
            }
/*--hover-glitzer-end--*/

.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}
dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}

dl.icon {
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 50px;
}


schau mal so sieht es aus wenn ich das mit dem code probiert hab, damit es weiter links steht...

Willst du das denn jetzt so lassen, oder soll sich das nochmal wer anderes vom Team ansehen? Ich weiss hier jetzt auch nicht weiter.

Aber wenn du mit dem, was du hast zufrieden bist, dann bin ich auch zufrieden

also lieber louie ich danke dir sehr für deine geduldige und freundliche hilfe und ich stehe wohl tief in deiner schuld

mir würde diese anordnung recht gut gefallen, ist echt mal was anderes, aber nun habe ich ein bissl weitergearbeitet in meinem forum und habe zum ersten mal ne globale ankündigung gestartet und nun ist das icon von schrift überdeckt. würde das "globale ankündigung" nicht dran stehen wäre ja alles in ordnung aber ich denke es ist trotzdem eine gute option.
also wenn jemand evtl. noch nen tipp hätte wie man das icon so einbinden kann dass es niemanden stört wär ja genial.

hier mal mein link zu dem problem
http://tanjas-bastelzauber.forumieren.com/f3-herzlich-willkommen-lieber-gast

danke im voraus und sorry dass ich hier solche umstände mache aber ich will doch auch ein tolles forum haben

hier mein aktuelles css

Code:

.buttons img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr10.png) no-repeat center;}

.buttons img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr110.png) no-repeat center;}

.i_post{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt10.png) no-repeat center !important;}

.i_post:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt110.png) no-repeat center !important;}

.i_reply, #new-message-link img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr10.png) no-repeat center !important;}

.i_reply:hover, #new-message-link img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr110.png) no-repeat center !important;}

img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok10.png') no-repeat center !important;}
img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]:hover{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok110.png') no-repeat center !important;}

.i_msg_newpost{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm10.png) no-repeat center !important;}

.i_msg_newpost:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm110.png) no-repeat center !important;}

#wrap {
width:970px;
border: 1px solid #ee66aa;
background-color: #f6bbf6;
margin-top: 5px;
padding-top:15px;
padding-right:20px;
padding-left:20px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
}

body {
color:#550022;
background-color:#f699cc;
}

a.mainmenu {
font-weight : normal;
letter-spacing : -1px;
font-size : 12px;
color: #550022;
}

.navbar a:hover {
text-decoration: none;
color: #550022;
}

.navbar {background-color: #f6aaf6;}

ul.navlinks{
border-bottom-color: #d55b7d;
}

.headerbar {
background-color: #f699cc;
background-image: url("http://i72.servimg.com/u/f72/14/52/34/74/bgh10.gif");
}

.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}

li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #d55b7d;
}

li.row:hover dd {
border-left-color: #f6bbf6;
}

li.row:hover {
background-color: #ffd4ff;
}

li.row {
border-top-color: #FFFFFF;
border-bottom-color: #d55b7d;
background-color: #f6bbf6;
}

.row dl dd.dterm {
border-left: none;
}

a.forumtitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.forumtitle:hover {
color: #aa4400;
text-decoration: underline;
}

a.topictitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.topictitle:hover {
color: #aa4400;
text-decoration: underline;
}

dl.codebox {
background-color: #FFFFFF;
border-color: #d55b7d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

dl.codebox dt {
border-bottom-color: #f699cc;
}

dl.codebox code {
color: #2E8B57;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #f699cc;
background: #ffd4ff url(http://i32.servimg.com/u/f32/14/52/34/74/quote10.gif) no-repeat 1px 6px !important;
padding-left: 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.postprofile {
border-left-color: #e27392;
}

.inputbox {
background-color: #ffd4ff;
border-color: #d55b7d;
color: #550022;
}

.inputbox:hover {
border-color: #550022;
}

.inputbox:focus {
border-color: #d55b7d;
color: #550022;
}

button.button2, input.button2{
background: #f9c8da url(http://i34.servimg.com/u/f34/14/74/84/24/bb10.png);
font-weight: bold;
padding: 2px;
}


#page-footer{background: url(http://i72.servimg.com/u/f72/14/52/34/74/cr-mak11.png) bottom right no-repeat;
height: 61px;}


/*--hover-glitzer-beginn-*/
a:hover {
            POSITION: relative; 
            TOP: 1.0px; LEFT: 1.0px;}
a:hover {
            background-image:url(http://i69.servimg.com/u/f69/11/49/29/60/196_st10.gif);
            }
/*--hover-glitzer-end--*/

.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}
dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}

dl.icon {
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 50px;
}


Mit diesem Code kannst du die Schrift nach recht rücken:

Code:

ul.topics dd.dterm, ul.topics dt {
    display: block;
    float: left;
    padding-left: 55px;
    width: 50%;
}

je mehr px, desto weiter nach rechts

huhu nochmal,

also bei mir verändert sich leider gar nix, das icon bleibt so wie es ist. habe den kompletten code den du mir hier gegeben hast ins sheet kopiert und es mal mit 80px und 100px probiert aber das icon bleibt so wie es ist... komisch...

schade dann werde ich wohl in zukunft keine globale ankündigungen machen können

danke dir trotzdem für alles

Hallo,

ich werde mir das nachher mal ansehen. Ich bin sicher, dass wir da eine Lösung finden werden.
Allerdings muss ich jetzt weg, sodass ich erst später Zeit habe.
Ich meld mich dann hier, sobald ich mir das angesehen habe, o.k.

hallo zuckerpuppe,

find ich richtig nett von dir dass du dir nachher mal die zeit nimmst und dir das ansehen wirst. dein kollege hat schon so tolle arbeit geleistet und ich hab echt schon ein schlechtes gewissen aber ich kenn mich nun mal überhaupt nicht damit aus - leider!

ok bis später dann!

vielleicht hilft dir das mal weiter wenn ich dir mein aktuelles css-sheet zeige:

Code:

.buttons img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr10.png) no-repeat center;}

.buttons img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/sr110.png) no-repeat center;}

.i_post{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt10.png) no-repeat center !important;}

.i_post:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nt110.png) no-repeat center !important;}

.i_reply, #new-message-link img{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr10.png) no-repeat center !important;}

.i_reply:hover, #new-message-link img:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/pr110.png) no-repeat center !important;}

img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok10.png') no-repeat center !important;}
img[src="http://i33.servimg.com/u/f33/15/33/29/01/i_post12.gif"]:hover{background: url('http://i32.servimg.com/u/f32/14/52/34/74/lok110.png') no-repeat center !important;}

.i_msg_newpost{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm10.png) no-repeat center !important;}

.i_msg_newpost:hover{background: url(http://i32.servimg.com/u/f32/14/52/34/74/nm110.png) no-repeat center !important;}

#wrap {
width:970px;
border: 1px solid #ee66aa;
background-color: #f6bbf6;
margin-top: 5px;
padding-top:15px;
padding-right:20px;
padding-left:20px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
}

body {
color:#550022;
background-color:#f699cc;
}

a.mainmenu {
font-weight : normal;
letter-spacing : -1px;
font-size : 12px;
color: #550022;
}

.navbar a:hover {
text-decoration: none;
color: #550022;
}

.navbar {background-color: #f6aaf6;}

ul.navlinks{
border-bottom-color: #d55b7d;
}

.headerbar {
background-color: #f699cc;
background-image: url("http://i72.servimg.com/u/f72/14/52/34/74/bgh10.gif");
}

.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}

li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #d55b7d;
}

li.row:hover dd {
border-left-color: #f6bbf6;
}

li.row:hover {
background-color: #ffd4ff;
}

li.row {
border-top-color: #FFFFFF;
border-bottom-color: #d55b7d;
background-color: #f6bbf6;
}

.row dl dd.dterm {
border-left: none;
}

a.forumtitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.forumtitle:hover {
color: #aa4400;
text-decoration: underline;
}

a.topictitle {
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #0033aa;
text-decoration: none;
}

a.topictitle:hover {
color: #aa4400;
text-decoration: underline;
}

dl.codebox {
background-color: #FFFFFF;
border-color: #d55b7d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

dl.codebox dt {
border-bottom-color: #f699cc;
}

dl.codebox code {
color: #2E8B57;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #f699cc;
background: #ffd4ff url(http://i32.servimg.com/u/f32/14/52/34/74/quote10.gif) no-repeat 1px 6px !important;
padding-left: 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.postprofile {
border-left-color: #e27392;
}

.inputbox {
background-color: #ffd4ff;
border-color: #d55b7d;
color: #550022;
}

.inputbox:hover {
border-color: #550022;
}

.inputbox:focus {
border-color: #d55b7d;
color: #550022;
}

button.button2, input.button2{
background: #f9c8da url(http://i34.servimg.com/u/f34/14/74/84/24/bb10.png);
font-weight: bold;
padding: 2px;
}


#page-footer{background: url(http://i72.servimg.com/u/f72/14/52/34/74/cr-mak11.png) bottom right no-repeat;
height: 61px;}


/*--hover-glitzer-beginn-*/
a:hover {
            POSITION: relative; 
            TOP: 1.0px; LEFT: 1.0px;}
a:hover {
            background-image:url(http://i69.servimg.com/u/f69/11/49/29/60/196_st10.gif);
            }
/*--hover-glitzer-end--*/

.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}
dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}

dl.icon {
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 50px;
}


Und lass dir schön zeit, ich kann warten.

danke euch allen im voraus, ihr seid echt ein tolles team!

so, da bin ich wieder
zuerst einmal musst du folgenden Code wieder aus dem CSS entfernen:

Code:

.topic-title {
    padding-left: 19px;
}
.span-tab {
    padding-left: 19px;
}
dl.icon dd.dterm, dl.icon dt {
    background-origin: content-box;
    background-position: 300px 50%;
    background-repeat: no-repeat;
}

dl.icon {
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 50px;
}

und fügst stattdessen diesen hinzu:

Code:

dl.icon dd.dterm, dl.icon dt {
    background-position: 65px 50%;
    background-repeat: no-repeat;
}

ul.topics dd.dterm, ul.topics dt {
    display: block;
    float: left;
    padding-left: 125px;
    width: 45%;
}

mit diesem Code steht das Icon vor dem Thema, wie hier in meinem Testforum zu sehen:


Man kann das Icon auch ans Ende setzen, also ganz rechts, aber dann besteht weiterhin die Gefahr, dass ein sehr langer Thementitel doch ins Icon ragen würde...

dazu musst du diesen Code einsetzen:

Code:

ul.topics dd.dterm, ul.topics dt {   
    padding-left: 75px;
    width: 45%;
}

dl.icon dd.dterm, dl.icon dt {
    background-position: 370px 50%;
background-repeat: no-repeat;   
}

und es würde dann so aussehen:


wie gesagt: ich würde die erste Variante nehmen, da du so sicher bist, dass der Titel nicht ins Icon ragt

Hallo liebe Zuckerpuppe,

erst mal möchte ich mich bedanken dass dumir helfen möchtest. Allerdings war ich am Wochenende weg und werde erst morgen dazu kommen deine Hilfe auszuprobieren,wollte nur Bescheid geben, nicht dass du denkst ich melde mich nicht mehr oder so.

Morgen werde ich das dann so machen wie du beschrieben hast und dir auch davon berichten!

Vielen Dank im Voraus und bis morgen!

Ein schönes Wochenende noch!

Liebe Grüße,

Tanja

Nachtrag: Oh mann bin ich glücklich!!!!!!! Es hat geklappt!!!!!!! Ich sage ganz lieben Dank an euer super-tolles Team, besonders an Zuckerpuppe und an Louie!

DANKE für die Mühen! Ich vergesse das nicht und stehe tief in eurer Schuld! DANKE

Liebe Grüße, Tanja

PS: Ich habe die Variante genommen, dass das Icon ganz rechts steht

du meinst zwar ganz links...
aber es freut mich trotzdem, wenn es geklappt hat...

ich mach dann hier zu
-closed-