Probleme mit der Zuordnung einer Klasse zum mehreren Divs

    Hallo zusammen,

    Ich hätte mal eine Frage. Ihr könnt mir da sicher schnell weiterhelfen.

    Ich hab folgendes Problem. Und zwar möchte ich eine Klasse mehreren Div-Boxen zuordnen. Aber irgendwie funktioniert das nicht so, wie ich mir das vorstelle.

    ich habe folgende Codes:

    CSS-Code:


    #userblock1
    {
    width: 150px;
    height: 50px;
    border: 0px solid black;
    background: url(graphics/userblock/image_top.png) no-repeat left top;
    float: left;
    margin-top: 0px;
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;

    }


    #userblock2
    {
    width: 150px;
    height: auto;
    border: 0px solid black;
    background: url(graphics/userblock/image_top.png) no-repeat left top;
    float: left;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;
    }


    #menu
    {
    width: 150px;
    height: auto;
    border: 0px solid black;
    background: url(graphics/userblock/image_top.png) no-repeat left top;
    float: left;
    margin-top: 10px;
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;
    }


    HTML-Code


    <div id="userblock1"></div>
    <div id="userblock2"></div>
    <div id="menu"</div>


    ich möchte die im CSS-Code rot markierten Rahmen als Klasse definieren, da sie bei jedem dieser div-boxen gleich sind.


    Ich dachte da an folgende Klasse:

    .borders
    {
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;
    }

    aber das funktioniert so nicht. es funktioniert lediglich wenn ich die div-box mit der klasse kombiniere.

    #userblock1.borders
    {
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;
    }

    ist irgendwie in meinen augen nicht so wirklich sinnvoll wenn ich für jede div-box eine eigene klasse erzeugen muss. da kann ich es ja gleich im CSS-Code in die jeweiligen Div-Box Eigenschaften schreiben.

    Vielleicht habt ihr ja eine Ahnung warum das nicht so funktioniert wie ich mir das vorstelle.

    Vielen Dank schon mal

    Gruss

    Mucki

    #userblock1.borders
    das würde heißen:
    Elemente mit Klasse Borders in Element mit ID userblock1

    du musst dienen HTML-Code ändern auf:

    Code
    <div id="userblock1" class="borders"></div>
<div id="userblock2" class="borders"></div>	   
<div id="menu" class="borders"></div>

    Something big is coming. And there will be pirates and ninjas and unicorns...

    Das hab ich schon probiert. das funktioniert nicht. ich möchte die eine klasse für alle 3 Divs nutzen um die Rahmen zu hinterlegen.

    ich hab quasi im HTML folgendes geschrieben:

    <div>
    <div id="userblock1" class="borders_right"></div>
    <div id="userblock2" class="borders_right"></div>
    <div id="menu" class="borders_right"></div>
    </div>

    da passiert aber nichts wenn ich im CSS die klasse folgendermaßen definiert habe.


    .borders_right
    {
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;

    }

    es verändert bspw. nur die div-box "userblock1" wenn ich den klassenname ändere auf


    #userblock1.borders_right
    {
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;
    }

    das möchte ich aber nicht. ich möchte mit einer klasse alle div-boxen formatieren. ist dies eigentlich möglich?

    Hi,

    so wie es "Dodo" beschrieben hat ist es vollkommen korrekt und muss funktionieren.

    Wenn es bei dir nicht klappt, liegt der Fehler woanders.

    Wie wärs mit einem Link oder dem kompletten Code/CSS, damit man mal drüberschauen kann?

    koslowski

    Also hier die kompletten Codes:

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <head>
    <title>Homepage</title>

    <link rel="stylesheet" type="text/css" href="templates/current/stylesheet_site.css" />


    </head>

    <body>

    <div id="site" class="containing-float">

    <div id="main">

    <div id="logo">

    <div id="navi_top">
    <ul>
    <li><a class="aktiv" href="#1">Home</a></li>
    <li><a class="navi_top" href="#">Ueber mich</a></li>
    </ul>
    </div>
    </div>

    <div id="sidebar_left">
    <div id="userblock1" class="borders_right"></div>
    <div id="userblock2" class="borders_right"></div>
    <div id="menu" class="borders_right"></div>
    </div>
    <div id="content"></div>
    <div id="module" ><p>module</p></div>
    </div>


    <div id="right" ></div>

    <div id="footer" ></div>

    </div>

    </body>
    </html>


    Und hier der CSS-Code:


    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px auto ;
    background: ;
    font: 10px Arial;
    color: black;
    border: 1px dotted black;
    }

    p
    {
    margin: 5px auto auto 5px;
    }

    li, ul
    {
    font: 10px Arial;
    }
    h1, h2
    {

    font-family: Arial;
    font-size: 12px;
    font-style: normal;

    }


    img.banner_c
    {
    display: block;
    margin: auto;
    }

    img.banner_r
    {
    display: block;
    margin: 0px 0px 0px auto;
    }


    .containing-float:after
    {
    /* Inhalt pseudo-Element :after;
    * somit [clear] moeglich
    */
    content: "";

    /* [content] verbergen;
    */

    height: auto;

    /* Block-Level fuer [clear];
    */
    display: block;

    /* [float] clearing;
    * einbeziehen der Float-Container;
    */
    clear: both;

    padding-bottom: -10px;

    }


    #site
    {
    width: 1050px;
    height: auto;
    border: 0px dashed red;
    background:;
    display: block;
    position: relative;
    margin: auto auto auto auto;
    }

    #main
    {
    width: 890px;
    height: auto;
    border: 0px solid blue;
    background: ;
    float: left;

    }

    #banner_head
    {

    }

    #banner_side
    {
    float: left;
    width: 150px;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;
    border: 0px solid black;
    }

    #logo
    {

    height: 126px;
    width: 890px;
    background: url(graphics/logo/background_image_orange_890_70.png);
    border: 0px solid black;
    margin: 5px 0px 0px auto;
    float: left;


    }

    #logo h1
    {
    margin: 0px auto auto 0px;
    float: left;
    display: inline;
    visibility: hidden;
    }

    #logo h2
    {
    margin: 0px auto auto 0px;
    float: left;
    display: inline;
    visibility: hidden;
    }


    /*navigation top starts here */

    #navi_top
    {
    display: block;
    float: right;
    border: 0px solid red;
    width: auto;
    margin: 106px 40px auto auto;
    height: auto;
    padding-left: 0px;

    }

    #navi_top ul
    {

    float: left;
    border: 0px solid green;
    list-style: none;
    margin: 0px auto auto 0px;
    padding-left: 0px;
    height: auto;
    }

    #navi_top li
    {

    float: left;
    font-weight:bold;
    font-size: 10px;
    border: 0px solid black;
    }

    #navi_top li a
    {
    color: #999898;
    text-decoration: none;
    font-weight: 900;
    float: left;
    width: 100px;
    height: auto;
    background-color: white;
    text-align: center;
    border-right: 1px solid #F29560;
    padding: 5px 0px 3px 0px;
    opacity: ;
    }

    #navi_top li a.last
    {
    color: #999898;
    text-decoration: none;
    float: left;
    width: 100px;
    height: auto;
    background-color: white;
    text-align: center;
    border-right: 0px solid #FD4B01;
    padding: 5px 0px 3px 0px;
    }

    #navi_top li a:hover
    {
    color: #FD4B01;
    }

    #navi_top li a.aktiv
    {
    float: left;
    width: 100px;
    height: auto;
    background-color: #FD4B01;
    color: white;
    text-align: ;
    border-right: 0px solid orange;
    padding: 5px 0px 3px 0px;
    }


    /*navigation top ends here */


    .borders_right
    {
    border-top: 1px solid #3B5998;
    border-right: 1px solid #D8DFEA;
    border-bottom: 1px dotted #D8DFEA;

    }


    /*sidebar left starts here */

    #sidebar_left
    {
    width: 150px;
    height: auto;
    border: 0px solid black;
    background:;
    float: left;
    margin-top: 15px;

    }

    #userblock1
    {
    width: 150px;
    height: 50px;
    border: 0px solid black;
    background: url(graphics/userblock/image_top.png) no-repeat left top;
    float: left;
    margin-top: 0px;


    }


    #userblock2
    {
    width: 150px;
    height: auto;
    border: 0px solid black;
    background: url(graphics/userblock/image_top.png) no-repeat left top;
    float: left;
    margin-top: 10px;
    padding-top: 20px;

    }


    #menu
    {
    width: 150px;
    height: auto;
    border: 0px solid black;
    background: url(graphics/userblock/image_top.png) no-repeat left top;
    float: left;
    margin-top: 10px;


    }

    /*sidebar left ends here */


    /*content starts here */

    #content
    {
    width: 500px;
    height: 500px;
    float: left;
    border-top: 2px solid #FD4B01;
    background: #F2F4F7;
    margin: 15px auto auto 25px;

    }


    /*content starts here */


    /*sidebar right starts here */

    #module
    {
    width: 180px;
    height: 300px;
    background: url(graphics/userblock/image_top_salmon.png) no-repeat left top;
    float: right;
    margin: 15px 5px auto auto;
    border: 0px solid black;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #D8DFEA;
    }

    /*content ends here */



    #footer
    {
    width: 500px;
    height: 50px;
    margin-bottom: 0px;
    margin-top: 20px;
    margin-left: 175px;
    border: 0px solid black;
    background: white;
    float: left;
    border-top: 1px solid #3B5998;
    }


    So jetzt hab ich dir den ganzen Code drinnen. Ich hoffe es geht so für euch. wusst jetzt nich wie ich es anders machen soll.

    Danke!!

    Mucki

    Hi,

    für #userblock1, #userblock2 und #menu hast du border:0px solid #000; notiert, kein Wunder das es nicht funktioniert.
    Schmeiss das raus.

    Informier dich mal über "Spezifität", sowas ist absolutes Grundlagenwissen.

    Warum müssen diese drei Elemente floaten? Das ist sinnlos.

    Vielen Dank !!!

    Jetzt funktionierts. bin noch recht neu in der Thematik. Aber jetzt hab ich gleich mal wieder was dazu gelernt. Also vielen Dank nochmal !!

    hab auch die float befehle raus genommen