Hintergrundgrafik für Kommentare

cologneking71

Hallo !

Ich würde gerne eine Hintergrundgrafik bei den Kommentaren einbauen, im Prinzip die gleiche, die auch hinter meinen Posts eingebaut ist.

Diese Grafik besteht aus 3 Teilen (oben, unten, mitte). Wie schaffe ich es, diese auch hinter die Kommentare zu bringen ?

Ein Hintergrundbild mit nur einer Grafik geht doch bestimmt nicht, weil die Größe dann bestimmt nicht an die Länge des Kommentars angepaßt wird oder ?

Hier der Link zu meinem Blog: go New York City

Und hier noch meine style.css:

Code

/*
Theme Name:connexion
Description: city theme
Author: Jinsona designs
Author URI: http://web2feel.com/
*/


body {
    margin:0;
    padding-top:0px;
    background:#000 url(images/wrap.jpg);
    font-family:"Myriad web",Arial,Tahoma,Verdana,sans-serif;
    color:#e7e7e7;
    font-size:12px;
    }
img {
    border:0;
    }
a {
    color:#ae0000;
    text-decoration:none
    }
a:hover {
    color:#fff;
    text-decoration:none
        }
h1, h2, h3, h4, h5, h6 {


    }
blockquote {
    padding-left:0px;
    color:#411d00;
    font-style: normal;
    
    }
.clear {
    clear:both;
    }
.alignleft {
    float:left;


    }
.alignright {
    float:right;
    }


/* The Wrapper */


.wrapper {
    width:1000px;
    margin:0 auto;
    background:#fff;
        }
.content {
    width:1000px;
    margin:0 auto;
    background:#464646;
    
        }
/* The Top */


.top {
    height:238px;
    margin-top:0px;
    background:url(images/top.jpg);
    
    }
.blogname {
    float:left;
    width:700px;
    font-family:"Century gothic",Tahoma,Verdana,sans-serif;
    }
.blogname h1  {
    font-size:40px;
    font-weight:normal;
    margin:150px 0 0 40px;
    color:#787878;
    text-decoration: none;
    }


.blogname h1  a:link, .blogname h1  a:visited{ 
    
    color: #fff; 
    text-decoration: none; 
    background-color:transparent;
    }
    


.blogname h1  a:hover { 
    color: #fff; 
    text-decoration: none; 
    background-color:transparent;
    }    


.blogname h2 {
    margin:0px 0 0 50px;
    font-size:16px;
    font-weight:normal;
    color:#ae0000;
    }


/* Menu */
#mainmenu{
    height:20px;
    background:#1a1613;
    display:block;
    padding:6px 0 0px 14px;
    }
#mainmenu ul {
    margin:0px;
    padding:0px;
}


#mainmenu ul li {
    margin:0px;
    list-style:none;
    float:left;
    margin-left:8px;
    font-size:11px;    
}


#mainmenu ul li a {
    text-decoration:none;    
    color:#b8af8b;
    padding:3px;
    padding-left:6px;
    padding-right:6px;
    position:relative;
}


#mainmenu ul li a:hover, #mainmenu ul li a.active {
    color:#ffffff;
    background-color:#1a1613;
    text-decoration:none;    
    
}


#mainmenu ul li a span {
    display:none;
}


#mainmenu ul li a:hover span, #mainmenu ul li a.active  span{
    display:inline;
    position:absolute;
    right:-1px;
    top:0px;


}




/* The Content */
#content {
    float: left;
    width: 765px;
    margin: 0 0 3px 0;
    padding: 0 0;
    
    }


.post {
    margin: 20px 10px 0 10px;
    padding:0px 0px 0px 0px;
    height: 100%;
    text-align: justify;
    color:#333;
    
    }


.post h2 {
    margin: 0 0;
    padding: 0px 0px 0px 25px;
    height:28px;
    background: url(images/title.png);
    background-repeat:repeat-y;
    text-align: left;
    font: normal  18px "Tahoma", Arial, sans-serif;
    
    }


.post h2 a, .post h2 a:link, .post h2 a:visited  {
    color: #ae0000;
    background-color: transparent;
    }


.post .date {
    margin: 0 0;
    padding: 10px 20px 0 15px;
        text-align:right;
        height: 24px;
    background: url(images/date3.png) no-repeat left top;
    font: normal 1.0em Arial, "Tahoma", sans-serif;
    color: #ffffff;
    background-color: transparent;
    }


.post .postmetadata {
    padding: 2px 15px 0px 15px;
    background:url(images/meta.png) no-repeat left top;
    font: normal 12px Arial, Verdana, sans-serif;
    text-align: right;
    height:34px;
    
    }
.p_comments {
height:25px;
width:100px;
line-height:26px;
text-align:center;
float:right;
padding:0 5px 0 27px;


}


.p_comments a:link,
.p_comments a:visited {
    color: #fff;
    background-color: transparent;
}




.post a:link,
.post a:visited {
    color: #ae0000;
    background-color: transparent;
}


.post a:hover {
    color: #ff0000;
    background-color: transparent;
    text-decoration: none;
}


.entry {
    display:block;
    margin: 0 0;
    padding: 5px 25px;
    }
.cover{
    margin: 0 0;
    background: url(images/content.png);
    background-repeat:repeat-y;
    }
/* The Sidebar */


#sidebar {
width:200px;
float:right;
font-size:12px;
color:#999;
margin: 10px 10px 0px 0px;
font-family:century gothic,Verdana,sans-serif;


}


#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}


#sidebar  h2 {
font-size:16px;
height:25px;
font-weight:bold;
padding:3px 0px 0px 5px;
background:#323232;
Margin: 10px 0 0 0;
color:#fff;
font-variant:small-caps;
}


#sidebar li a {
display:block;
line-height:160%;
padding:4px 0 4px 0;
color:#b8af8b;
background:#5a5a5a;
border-bottom:1px solid #464646;
}


#sidebar li a:hover {
text-decoration:none;
background-color:#5a5a5a;
color:#fff;


}


#sidebar ul li a {
background:#none;
padding-left:10px;
}
#sidebar table {
    width:100%;
    text-align:center;
    background-color:#464646;
    }




/* --- FOOTER --- */


#footer {
    height:20px;
    padding:10px 0 0 0px;
    margin:2px 0 0 0;
    color:#333333;
    font-size:9px;
    font-weight:normal;
    letter-spacing:1px;
    background:#555;
    text-align:center;
    }


#footer a {
    color:#f99999;
    text-decoration:none;
    }


#footer a:hover {
    color:#999999;
    
    }


/* The Navigation */


.navigation {
    height:10px;
    padding:0 20px;
    }
.navigation a {
    font-weight:bold;
    text-decoration:none;
    font-size:14px;
    color:#fff;
    }
.navigation a:hover {
    color:#fff;


    }


/* The Attachment */


.contentCenter {
    text-align:center;
    }


/* The Page Title */


h2.pagetitle {
    padding:0;
    margin:0 0 20px 0;
    font-size:24px;
    text-align:center;
    }


/* The Comments */


.comments {
    padding: 22px 32px 23px 10px;
    line-height:16px;
    }
    
.comments ol {
    margin: 0 0 30px 0;
    padding: 20px 0 0 40px;
    font-weight: bold;
    color: #000;
        width: 747px;
        background: url(images/title.png);
    background-repeat:repeat-y;
}    


div.comments ol li {
    padding-bottom: 9px;
}


.comments form {
    }
.comments textarea {
    width:96%;
    height:156px;
    background:#ccc;
    border:2px solid #777;
    color:#000;
    overflow:auto;
    padding:10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    }
#commentform {
    padding-left:23px;
    }
#commentform input {
    background:#dcdcdc;
    border:1px solid #ababab;
    color:#484849;
    padding-left:10px;
    }
.comments input#submit {
    padding:0;
    width:72px;
    height:29px;
    }
.comments h2 {
    font-size:19px;
    line-height:30px;
    margin:24px 0 0 0px;
    padding:0;
    font-weight:normal;
    
    }
.comments ol li p {
    padding:0;
    margin:10px 0;
    }
.comments ol li {
    padding-bottom: 9px;


}

Alles anzeigen

Habe schon ein wenig rumgespielt, habe es aber nur geschafft, ein Teil der Grafik einzubauen und nicht das komplette Hintergrundbild :-(

Danke schonmal.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

cologneking71

So, hab es geschafft bei den Kommentaren eine Hintergrundgrafik einzubauen, siehe hier.

Solange der Kommentar nur so kurz ist, kein Problem. Aber wenn jemand einen längeren Kommentar schreibt, geht der Text über die Grafik hinaus.

Wie kann ich das lösen ???

codestyling

Also da empfehle ich pures CSS und den besten Referenzseiten zu CSS Machbarkeiten: Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style
(Stu Nicholls, allerdings alles englisch)
Unter Boxes solltest du was Passendes finden können.

cologneking71

Danke für die schnelle Antwort, aber ich befürchte das überfordert meine css-Kenntnisse und auch meine Fremdsprachenkenntnisse ebenfalls.

Eigentlich kann es ja nicht so schwer sein, da es eigentlich in meinem Blog bereits bei meinen Beiträgen eingebaut ist:

Code

.post {
    margin: 20px 10px 0 10px;
    padding:0px 0px 0px 0px;
    height: 100%;
    text-align: justify;
    color:#333;
    
    }


.post h2 {
    margin: 0 0;
    padding: 0px 0px 0px 25px;
    height:28px;
    background: url(images/title.png);
    background-repeat:repeat-y;
    text-align: left;
    font: bold  16px Arial,Tahoma,Verdana,sans-serif;
    
    }


.post h2 a, .post h2 a:link, .post h2 a:visited  {
    color: #ae0000;
    background-color: transparent;
    }


.post .date {
    margin: 0 0;
    padding: 10px 20px 0 15px;
        text-align:right;
        height: 24px;
    background: url(images/date3.png) no-repeat left top;
    font: normal 1.0em Arial,Tahoma,Verdana,sans-serif;
    color: #ffffff;
    background-color: transparent;
    }


.post .postmetadata {
    padding: 2px 15px 0px 15px;
    background:url(images/meta.png) no-repeat left top;
    font: normal 12px Arial,Tahoma,Verdana,sans-serif;
    text-align: right;
    height:34px;
    
    }

Alles anzeigen

Die Grafik setzt sich aus diesen drei Bildern zusammen und somit paßt sich die Grafik immer dem Inhalt an.
Genauso möchte ich das auch für die Kommentare umsetzen. Ich weiss nur nicht wie ich das hinkriege. Eigentlich müßte das ganze hier irgendwie rein:

Code

/* The Comments */


.comments {
    padding: 22px 32px 23px 10px;
    line-height:16px;
    }
    
.comments ol {
    margin: 0 0 30px 0;
    padding: 20px 0 0 40px;
    font-weight: bold;
    color: #000;
        height: 100px;
        width: 747px;
        background: url(images/bgcomment.jpg);
    background-repeat:no-repeat;
}    


div.comments ol li {
    padding-bottom: 9px;
}


.comments form {
    }
.comments textarea {
    width:96%;
    height:156px;
    background:#ccc;
    border:2px solid #777;
    color:#000;
    overflow:auto;
    padding:10px;
    font-family:Arial,Tahoma,Verdana,sans-serif;
    font-size:14px;
    }
#commentform {
    padding-left:23px;
    }
#commentform input {
    background:#dcdcdc;
    border:1px solid #ababab;
    color:#484849;
    padding-left:10px;
    }
.comments input#submit {
    padding:0;
    width:72px;
    height:29px;
    }
.comments h2 {
    font-size:19px;
    line-height:30px;
    margin:24px 0 0 0px;
    padding:0;
    font-weight:normal;
    
    }
.comments ol li p {
    padding:0;
    margin:10px 0;
    }
.comments ol li {
    padding-bottom: 9px;


}

Alles anzeigen

Aber wo und wie genau ?

codestyling

Ein Beitrag sieht etwa strukturell so bei dir aus:

Code

<div class="date">


<div class="cover">


<div class="postmetadata">

Wobei die Klasse date den oberen Teil des Beitrags einfasst, cover den streckbaren Mittelteil und postmetadata den Abschluss unten bildet.
Also 3 Bilder oben/mitte/unten.
Um das in den Kommentaren zu machen, brauchst du vor dem Kommentar ein <div>, der Kommentar selbst bekommt das streckbare Bild und ein <div> nach dem Kommentar. Dann "wächst das auch mit.

cologneking71

Danke, das werde ich probieren und ein bißchen rumspielen ... learning by doing :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hintergrundgrafik für Kommentare

Jetzt mitmachen!