Lexi Help
Partner
www.forumieren.com

Themenicon richtig anordnen?!

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Themenicon richtig anordnen?!

Beitrag von Gast am Mi 4 Mai 2011 - 21:55

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 Very Happy

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von LouiXIV am Mi 4 Mai 2011 - 22:03

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;
}

LouiXIV
Kaiser
Kaiser

Männlich Beiträge : 5210
Hinweis : kommt ab und zu aus dem OFF hervor
Anmeldedatum : 22.03.09

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 0:21

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.

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 0:32

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.

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von LouiXIV am Do 5 Mai 2011 - 8:19

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 Wink

LouiXIV
Kaiser
Kaiser

Männlich Beiträge : 5210
Hinweis : kommt ab und zu aus dem OFF hervor
Anmeldedatum : 22.03.09

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 11:55

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. Very Happy

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

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 cat

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von LouiXIV am Do 5 Mai 2011 - 12:16

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:


LouiXIV
Kaiser
Kaiser

Männlich Beiträge : 5210
Hinweis : kommt ab und zu aus dem OFF hervor
Anmeldedatum : 22.03.09

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 13:08

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;
}
.

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von LouiXIV am Do 5 Mai 2011 - 13:25

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.

LouiXIV
Kaiser
Kaiser

Männlich Beiträge : 5210
Hinweis : kommt ab und zu aus dem OFF hervor
Anmeldedatum : 22.03.09

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 13:41

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* Embarassed

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 13:47

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;
}

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 13:51

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


Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von LouiXIV am Do 5 Mai 2011 - 14:05

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 Wink

LouiXIV
Kaiser
Kaiser

Männlich Beiträge : 5210
Hinweis : kommt ab und zu aus dem OFF hervor
Anmeldedatum : 22.03.09

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Do 5 Mai 2011 - 17:35

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

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 Embarassed

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;
}

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von LouiXIV am Do 5 Mai 2011 - 21:00

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

LouiXIV
Kaiser
Kaiser

Männlich Beiträge : 5210
Hinweis : kommt ab und zu aus dem OFF hervor
Anmeldedatum : 22.03.09

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Fr 6 Mai 2011 - 11:18

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 Sad

danke dir trotzdem für alles

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Zuckerpuppe am Fr 6 Mai 2011 - 11:31

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. Smile

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Fr 6 Mai 2011 - 12:52

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! Sad Smile

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! Embarassed

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Zuckerpuppe am Fr 6 Mai 2011 - 15:07

so, da bin ich wieder Smile
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 Wink



Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am So 8 Mai 2011 - 20:21

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 Smile cat Embarassed

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Gast am Di 10 Mai 2011 - 15:21

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 I love you

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

Gast
Gast


Nach oben Nach unten

Re: Themenicon richtig anordnen?!

Beitrag von Zuckerpuppe am Di 10 Mai 2011 - 19:29

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

ich mach dann hier zu
-closed-

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten