Ergebnis 1 bis 8 von 8

Thema: Probleme mit der Zuordnung einer Klasse zum mehreren Divs

  1. #1
    HTML Newbie
    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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?

  4. #4
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  6. #6
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  8. #8
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

    //edit: zu spät
    Something big is coming. And there will be pirates and ninjas and unicorns...

Ähnliche Themen

  1. Probleme mit DIVs... Ich kriegs nicht hin :(
    Von -TS-design im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 08.01.2008, 12:10
  2. Probleme mit Tween-Klasse
    Von im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 27.01.2007, 15:43
  3. PHP Mysql Abfrage Problem bzw Zuordnung
    Von MP im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 08.01.2006, 00:24
  4. Voting über Videos mit mehreren Drop Downs auf einer Seite
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 04.01.2006, 03:33
  5. iFrame & divs macht Probleme! Dringend!
    Von ahaiyuta im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 22.04.2005, 00:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •