Div ID + zusätzliche Klasse funktioniert nicht

dn3d_fanboy · 09.01.2014

Hallo zusammen,
ich habe mal wieder ein Problem. Und zwar habe ich eine statische Website mit diversen Unterseiten.
Da jede Unterseite unten rechts ein eigenes Hintergrunbild bekommen soll, sonst aber alles gleich bleibt, wollte ich zusätzlich zur DIV ID="content" noch zusätzlich die CLASS="startseite" (oder "impressum", "kontakt", etc.) hinzufügen, über die dann das Hintergrundbild ausgegeben werden soll.

Leider funktioniert das nicht. Ist das generell nicht möglich, oder habe ich wieder irgendwo einen Denkfehler?

Hier mal das HTML:

Code:

<body>
    <div id="wrapper">
        
        <div id="header">
            <div id="meteor-slides"></div>
        </div>
      
        <div id="main">
        
            <div id="sidebar">
        
                <ul id="navi">
                    <li><a href="#">ajdljad</a></li>
                    <li><a href="#">ajdljad</a></li>
                    <li><a href="#">ajdljad</a></li>
                    <li><a href="#">ajdljad</a></li>
                </ul>
        
            </div>
            
            <div id="content" class="impressum">
                <h3>TEST</h3>
            </div>
            
        </div>

        <div id="footer" class="clearfix">
    
        
        </div>
        
    </div>
       
</body>

und die CSS-Angaben dazu:

Code:

#wrapper    {width: 960px;
            min-height: 500px;
            margin: 0 auto;
            padding: 0 0 100px 0}
            
#header {
position: relative;
width: 960px;
height: 270px;
padding-top: 30px;
background: url(images/header-bg.jpg);
margin: 0 auto;
-webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.6);
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.6);
}

#meteor-slides     {width: 600px;
                height: 250px;
                margin: 0px 0px 0px 330px;
                background: #fff;}
                

#main    {
        width: 830px;
        min-height: 600px;
        margin: 0 auto;
        margin-left: 130px;
        float: left;
        background: #f3e0bd;
        -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
        box-shadow: 0 0 6px 0 rgba(0,0,0,0.4);
        }
        
#content    {/*position: relative;*/
            width: 585px;
            min-height: 600px;
            padding: 20px 20px 275px 0;
            float: right;
            }
            
#content h1, #content h2, #content h3    {color: #991914;
                                        font-family: "Cabin", sans-serif;
                                        font-size: 18px;
                                        font-weight: bold;
                                        text-shadow: 1px 1px 0px rgba(255,255,255,1);
                                        margin: 15px 0px 0px 0px;}
                                        
#content p    {color: #615a4c;
            font-family: "Cabin", sans-serif;
            font-size: 14px;
            margin: 15px 0px 0px 0px;
            text-shadow: 1px 1px 0px rgba(255,255,255,0.7);}
            
#content strong    {color: #615a4c;
            font-family: "Cabin", sans-serif;
            font-weight: bold;
            font-size: 14px;
            text-shadow: 1px 1px 0px rgba(255,255,255,0.7);}
            
#content a    {color: #991914;
            font-family: "Cabin", sans-serif;
            font-size: 14px;
            text-decoration: none;
            text-shadow: 1px 1px 0px rgba(255,255,255,0.7);}
            
#content a:hover    {font-style: italic}

#content ul    {margin: 10px 0 0 40px;}

#content ul li    {list-style-type: circle;
                color: #615a4c;
                font-family: "Cabin", sans-serif;
                font-size: 14px;
                margin: 5px 0px 0px 0px;
                text-shadow: 1px 1px 0px rgba(255,255,255,0.7);}
                
#content td    {color: #615a4c;
            font-family: "Cabin", sans-serif;
            font-size: 14px;
            margin: 15px 0px 0px 0px;
            text-shadow: 1px 1px 0px rgba(255,255,255,0.7);}
            
/*KLASSEN fuer background-image in diversen Subtemplates */

.startseite        {background-image: url(images/bl2.jpg) bottom right no-repeat;}
.aussen            {background-image: url(images/bl_aussenanlage.jpg) bottom right no-repeat;}
.umgebung        {background-image: url(images/bl_umgebung.jpg) bottom right no-repeat;}
.freizeit        {background-image: url(images/bl_freizeit.jpg) bottom right no-repeat;}
.gaestebuch        {background-image: url(images/bl_gastbuch.jpg) bottom right no-repeat;}
.galerie        {background-image: url(images/bl_galerie.jpg) bottom right no-repeat;}
.kontakt        {background-image: url(images/bl_kontakt.jpg) bottom right no-repeat;}
.facebook        {background-image: url(images/bl_aussenanlage.jpg) bottom right no-repeat;}
.impressum        {background-image: url(images/bl_umgebung.jpg) bottom right no-repeat;}

Da es einige Unterseiten werden, wäre es gut zu wissen, ob das Ganze überhaupt möglich ist, oder ob ich immer wieder die ID "content" auf die einzelnen Unterseiten zuschneidern muss.

Ich danke euch im Voraus.

Mereel · 09.01.2014

AW: Div ID + zusätzliche Klasse funktioniert nicht

Ändere "background-image" in "background" und es sollte funktionieren.

EDIT: vgl. http://www.css4you.de/backgroundproperty.html

Micky261 · 09.01.2014

AW: Div ID + zusätzliche Klasse funktioniert nicht

Ich meine es wird so geschrieben:

Code:

[COLOR=#cf4820]background-image[/COLOR]: [COLOR=#4f76ac]url([/COLOR][COLOR=#4f76ac][I]images/bcd.jpg[/I][/COLOR][COLOR=#4f76ac])[/COLOR];
[COLOR=#cf4820]background[/COLOR]: [COLOR=#4f76ac]bottom[/COLOR] [COLOR=#4f76ac]right[/COLOR] [COLOR=#4f76ac]no-repeat[/COLOR];

patrick_l · 09.01.2014

AW: Div ID + zusätzliche Klasse funktioniert nicht

Micky261 schrieb:

Ich meine es wird so geschrieben:

Code:

[COLOR=#cf4820]background-image[/COLOR]: [COLOR=#4f76ac]url([/COLOR][COLOR=#4f76ac][I]http://www.psd-tutorials.de/forum/images/bcd.jpg[/I][/COLOR][COLOR=#4f76ac])[/COLOR];
[COLOR=#cf4820]background[/COLOR]: [COLOR=#4f76ac]bottom[/COLOR] [COLOR=#4f76ac]right[/COLOR] [COLOR=#4f76ac]no-repeat[/COLOR];

Nö, entweder mit background zusammengefasst (Kurschreibweise):

Code:

* {background:url(path/to/image/example.jpg) bottom left no-repeat #444;}

oder:

Code:

* {
    background-color:#444;
    background-image:url(path/to/image/example.jpg);
    background-repeat:no-repeat;
    background-position:bottom left;
}

Bei der Vergabe von Klassen und ID nicht vergessen, das der ID eine höhere Bedeutung/Wertigkeit zugeordnet wird.

Liebe Grüße, Patrick

dn3d_fanboy · 10.01.2014

AW: Div ID + zusätzliche Klasse funktioniert nicht

Vielen Dank euch allen!

Manchmal sieht man den Wald vor lauter Bäumen nicht, natürlich musste ich background schreiben anstatt background-image.