Ergebnis 1 bis 7 von 7

Thema: DIV Problem

  1. #1
    Youngster
    Registriert seit
    19.08.2013
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard DIV Problem

    Hallo zusammen!

    Ich habe wenig Kentnisse in CSS und HTML ... sie reichen aber aus, um folgende Homepage mit Joomla auf die Beine gestellt zu haben!

    Ich habe nun schon den halben Tag damit verbracht herauszufinden, warum sich meine sidebar-2 und sidebar-3 unter den Content in der Mitte verschieben, wenn der Inhalt von Content gering ist!

    Ich kann die beiden Container sidebar-2 und sidebar-3 nicht absolut angeben!

    Vielleicht könnt ihr mir ja helfen? Beispiel derzeit zu sehen wenn man unter http://www.stephanrohling.com/joomla/ auf Kontakt - und dann auf Kontaktformular geht!

    So lautet meine index-datei:
    PHP-Code:


    <div id="wrapper">
            <
    header id="main-header">

            <
    div id="headerbild">

            </
    div>

                    <
    nav id="main-navigation">

                                    <
    jdoc:include type="modules" name="top-navigation" style="xhtml" />
                </
    nav>


            </
    header>


    <
    div id="section-wrapper">

                    <
    section id="content">

                                <
    article id="artikeltext">
                            <
    jdoc:include type="message" />
                               <
    jdoc:include type="component" />

                        </
    article>

                     </
    section>

                         <
    section id="sidebar">

                                       <
    h4>Navigation </h4>

                                       <
    jdoc:include type="modules" name="sidebar" style="xhtml" />


                         </
    section>



                         <
    section id="sidebar-2">

                                       <
    h4>Neuigkeiten </h4>

                                       <
    jdoc:include type="modules" name="sidebar-2" style="xhtml" />
                         </
    section>


                         <
    section id="sidebar-3">

                                       <
    h4>Suchen </h4>

                                       <
    jdoc:include type="modules" name="sidebar-3" style="xhtml" />
                         </
    section>


                     <
    endlogo>

            </
    endlogo>
            <
    footer>

            </
    footer>
    </
    div>
    </
    body>
    </
    html
    und so meine css:

    Code:
    /* ************** ALLGEMEINE FORMATIERUNGEN *********************
    *****************************************************************/
    
    
    *{
            margin: 0px;
            padding: 0px;
    }
    
    html, body{
            background:url(../images/bg.png);
            background-repeat:no-repeat;
    
    }
    
    /* ************************** TYPO ****************************
    *****************************************************************/
    
     body{
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #66665E;
            list-style-type: none inside none;
    }
    
    
    
    a { color: #993333;
    }
    
    a:hover { text-decoration: none; }
    
    p{
            margin-top: 20px;
    }
    
    code{
            font-size: 11px;
            color: #66665E;
            display:block;
    
    
    
    background-size: 36px 36px;
    
    border: none;
    }
    
    
    #artikeltext p:first-child{
            margin-top: 0px;
    }
    
    
    
    
    h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 40px;
            text-align:center;
            font-weight: 700;
            line-height: 200px;
            color: #66665E;
    
    }
    
    h2 {
            margin: 0px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #66665E;
            border-bottom: 1px dotted #CCCCCC;
            line-height: 1.5;
    }
    
    h4 {
            margin: 5px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #66665E;
            border-bottom: 1px dotted #CCCCCC;
            line-height: 1.5;
    }
    h5 {
            margin: 20px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 40px;
            color: #ffffff;
    }
    
    #artikeltext{
            line-height: 18px;
            margin-top: 20px;
            margin-right: 30px;
            margin-left: 30px;
    }
    
    endlogo{
            text-align: center;
            line-height: 6px;
            font-size: 10px;
    }
    
    
    #sidebar h3 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #FFF;
            display:block;
            background: #999999;
            width: 204px;
            height: 30px;
            line-height: 30px;
            text-indent: 20px;
            border-bottom: 1px #CCC;
    }
    
    
    /* ************************** LAYOUT ****************************
    *****************************************************************/
    
    #wrapper{
      width: 1000px;
      margin: 0 auto;
      min-height: 1000px;
      height:auto !important;
      height:1000px;
      overflow: hidden !important; /* FF Scroll-leiste */
    }
    
    #main-header{
      width: 1000px;
      height:290px;
      float:left;
    }
    
    #main-navigation{
            width: 1000px;
            height: 42px;
            float:left;
            background: #666666; /* Old browsers */
    
    
            border-bottom: none;
    }
    
    #headerbild{
            background:url(../images/headerbild.png);
            background-repeat:no-repeat;
            width: 1000px;
            height: 247px;
            float:left;
    }
    
    #section-wrapper{
            width: 1000px;
            background:url(../images/content.png);
            background-repeat: repeat-y;
            float:left;
    }
    
    #content{
            width: 726px;
            padding: 20px;
            float:left;
    }
    
    #sidebar{
            width: 204px;
            float:right;
            margin-top: 30px;
            margin-right: 20px;
            margin-left: 10px;
            margin-bottom: 50px;
    }
    
    #sidebar-2{
            width: 204px;
            float:right;
            margin-top: 0px;
            margin-right: 20px;
            margin-left: 0px;
            margin-bottom: 80px;
    }
    
    #sidebar-3{
            width: 204px;
            float:right;
            margin-top: 0px;
            margin-right: 20px;
            margin-left: 0px;
            margin-bottom: 80px;
    }
    
    endlogo{
            background:url(../images/endlogo.png);
            background-repeat:no-repeat;
            width: 1000px;
            height: 25px;
            float:left;
    }
    
    
    footer{
            width: 1000px;
            height: 1px;
            background: #66665E;
            border-top: none;
            float:left;
    }
    
    
    /* ************************** NAVIGATION ************************
    *****************************************************************/
    
    #main-navigation .menu{
            list-style-type: none;
            width: 1000px;
            background: #66665E;
            }
    
    #main-navigation .menu li a{
            width: 124px;
            height: 42px;
            display: block;
            float:left;
    
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            font-weight: 400;
            line-height: 42px;
            text-align:center;
            color: #DEDEDE;
            text-decoration: none;
            border-right: none;
            border-left: none;
            }
    
    
    #main-navigation .menu li:first-child a{
            border-left: none;
    
            }
    
    #main-navigation .menu li:last-child a{
            border-right: none;
    
            }
    
    #main-navigation .menu li a:hover{
            text-decoration:underline;
            }
    
    
    
    /* ************************** SUB-NAVIGATION ************************
    *****************************************************************/
    
    #sidebar .menu{
            padding: 3px 0px 1px 0px;
            width: 204px;
            margin-left: 5px;
            list-style-type: none;
            width: 204px;
    }
    
    #sidebar .menu li a{
            width: 204px;
            height: 20px;
            display: block;
            float:left;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 0;
            line-height: 36px;
            text-indent: 5px;
            color: #993333;
            text-decoration: true;
    }
    
    #sidebar .menu li a:hover{
            text-decoration: none;
    }
    
    
    
    /* ************************** SUB-NAVIGATION 2 ************************
    *****************************************************************/
    
    
    #sidebar-2 ul {
    
            list-style-type: square;
            padding-left: 20px;
    
    
    }
    
    
    #sidebar-2 {
    
            padding: 3px 0px 1px 0px;
            width: 204px;
            margin-left: 5px;
    
    }
    
    #sidebar-2  li a{
            width: 204px;
            height: 20px;
            display: block;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 0;
            line-height: 36px;
            text-indent: 0px;
            color: #993333;
            text-decoration: true;
    }
    
    #sidebar-2  li a:hover{
            text-decoration: none;
    }
    
    
    
    /* ************************** SUB-NAVIGATION 3 ************************
    *****************************************************************/
    
    #sidebar-3 {
            padding: 3px 0px 1px 0px;
            width: 204px;
            margin-left: 5px;
    }
    
    #sidebar-3  li a{
            width: 204px;
            height: 20px;
            display: block;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 0;
            line-height: 36px;
            text-indent: 0px;
            color: #993333;
            text-decoration: true;
    }
    
    #sidebar-3  li a:hover{
            text-decoration: none;
    }

    Vielleicht könnt ihr mir ja helfen!

    Wäre super! Danke
    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 !!!!!
    Geändert von toto1982 (20.08.2013 um 01:50 Uhr)

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: DIV Problem

    pack mal alles was in der sidebar sein soll in einen wrapper und positionier den so, wie die #sidebar.
    wenn man mehrere objekte so gruppiert kann man sich viel ärger ersparen
    es gibt immer viele möglichkeiten ans ziel zu kommen
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: DIV Problem

    Mit dem publizieren urhebergeschütztem Code (Copyright) verstösst du eklatant gegen die http://www.forum-hilfe.de/forumsregeln.php#11

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: DIV Problem

    na lass dohc mal die kirche im dorf explanator, da steht doch der urheber des codes im css, es ist ja nicht so, dass der code geklaut und veröffentlicht wurde.
    copyrightverstöße hat man erst wenn man sich selber als urheber ausgibt.

    Edit: der TE ist übrigens urheber...
    Geändert von synaptic (20.08.2013 um 00:50 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: DIV Problem

    Zitat Zitat von synaptic Beitrag anzeigen
    Edit: der TE ist übrigens urheber...
    Yepp, habs mittlerweile auch mitbekommen. Nun ja, Kirche steht immer noch, habe gerade nachgesehen.

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    19.08.2013
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV Problem

    Danke euch beiden schonmal Das Problem ist jetzt leider immer noch nicht behoben:

    der Index sieht jetzt so aus:

    PHP-Code:
    <div id="wrapper">
            <
    header id="main-header">

            <
    div id="headerbild">

            </
    div>

                    <
    nav id="main-navigation">

                                    <
    jdoc:include type="modules" name="top-navigation" style="xhtml" />
                </
    nav>


            </
    header>


    <
    div id="section-wrapper">

                    <
    section id="content">

                                <
    article id="artikeltext">
                            <
    jdoc:include type="message" />
                               <
    jdoc:include type="component" />

                        </
    article>

                     </
    section>


                     <
    div id="sidebar-wrapper">

                         <
    section id="sidebar">

                                       <
    h4>Navigation </h4>

                                       <
    jdoc:include type="modules" name="sidebar" style="xhtml" />


                         </
    section>



                         <
    section id="sidebar-2">

                                       <
    h4>Neuigkeiten </h4>

                                       <
    jdoc:include type="modules" name="sidebar-2" style="xhtml" />
                         </
    section>


                         <
    section id="sidebar-3">

                                       <
    h4>Suchen </h4>

                                       <
    jdoc:include type="modules" name="sidebar-3" style="xhtml" />
                         </
    section>
                               </
    div>
                           </
    div>
                     <
    endlogo>

            </
    endlogo>
            <
    footer>

            </
    footer

    die css so:
    Code:
    *{
            margin: 0px;
            padding: 0px;
    }
    
    html, body{
            background:url(../images/bg.png);
            background-repeat:no-repeat;
    
    }
    
    /* ************************** TYPO ****************************
    *****************************************************************/
    
     body{
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #66665E;
            list-style-type: none inside none;
    }
    
    
    
    a { color: #993333;
    }
    
    a:hover { text-decoration: none; }
    
    p{
            margin-top: 20px;
    }
    
    code{
            font-size: 11px;
            color: #66665E;
            display:block;
    
    
    
    background-size: 36px 36px;
    
    border: none;
    }
    
    
    #artikeltext p:first-child{
            margin-top: 0px;
    }
    
    
    
    
    h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 40px;
            text-align:center;
            font-weight: 700;
            line-height: 200px;
            color: #66665E;
    
    }
    
    h2 {
            margin: 0px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #66665E;
            border-bottom: 1px dotted #CCCCCC;
            line-height: 1.5;
    }
    
    h4 {
            margin: 5px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #66665E;
            border-bottom: 1px dotted #CCCCCC;
            line-height: 1.5;
    }
    h5 {
            margin: 20px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 40px;
            color: #ffffff;
    }
    
    #artikeltext{
            line-height: 18px;
            margin-top: 20px;
            margin-right: 30px;
            margin-left: 30px;
    }
    
    endlogo{
            text-align: center;
            line-height: 6px;
            font-size: 10px;
    }
    
    
    #sidebar h3 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #FFF;
            display:block;
            background: #999999;
            width: 204px;
            height: 30px;
            line-height: 30px;
            text-indent: 20px;
            border-bottom: 1px #CCC;
    }
    
    
    /* ************************** LAYOUT ****************************
    *****************************************************************/
    
    #wrapper{
      width: 1000px;
      margin: 0 auto;
      min-height: 1000px;
      height:auto !important;
      height:1000px;
      overflow: hidden !important; /* FF Scroll-leiste */
    }
    
    #main-header{
      width: 1000px;
      height:290px;
      float:left;
    }
    
    #main-navigation{
            width: 1000px;
            height: 42px;
            float:left;
            background: #666666; /* Old browsers */
    
    
            border-bottom: none;
    }
    
    #headerbild{
            background:url(../images/headerbild.png);
            background-repeat:no-repeat;
            width: 1000px;
            height: 247px;
            float:left;
    }
    
    #section-wrapper{
            width: 1000px;
            background:url(../images/content.png);
            background-repeat: repeat-y;
            float:left;
    }
    
    #sidebar-wrapper{
            width: 204px;
            float:right;
            margin-top: 30px;
            margin-right: 20px;
            margin-left: 10px;
            margin-bottom: 50px;
    }
    
    
    #content{
            width: 726px;
            padding: 20px;
            float:left;
    }
    
    #sidebar{
            width: 204px;
            float:right;
            margin-top: 30px;
            margin-right: 20px;
            margin-left: 10px;
            margin-bottom: 50px;
    }
    
    #sidebar-2{
            width: 204px;
            float:right;
            margin-top: 0px;
            margin-right: 20px;
            margin-left: 0px;
            margin-bottom: 80px;
    }
    
    #sidebar-3{
            width: 204px;
            float:right;
            margin-top: 0px;
            margin-right: 20px;
            margin-left: 0px;
            margin-bottom: 80px;
    }
    
    endlogo{
            background:url(../images/endlogo.png);
            background-repeat:no-repeat;
            width: 1000px;
            height: 25px;
            float:left;
    }
    
    
    footer{
            width: 1000px;
            height: 1px;
            background: #66665E;
            border-top: none;
            float:left;
    }
    
    
    /* ************************** NAVIGATION ************************
    *****************************************************************/
    
    #main-navigation .menu{
            list-style-type: none;
            width: 1000px;
            background: #66665E;
            }
    
    #main-navigation .menu li a{
            width: 124px;
            height: 42px;
            display: block;
            float:left;
    
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            font-weight: 400;
            line-height: 42px;
            text-align:center;
            color: #DEDEDE;
            text-decoration: none;
            border-right: none;
            border-left: none;
            }
    
    
    #main-navigation .menu li:first-child a{
            border-left: none;
    
            }
    
    #main-navigation .menu li:last-child a{
            border-right: none;
    
            }
    
    #main-navigation .menu li a:hover{
            text-decoration:underline;
            }
    
    
    
    /* ************************** SUB-NAVIGATION ************************
    *****************************************************************/
    
    #sidebar .menu{
            padding: 3px 0px 1px 0px;
            width: 204px;
            margin-left: 5px;
            list-style-type: none;
            width: 204px;
    }
    
    #sidebar .menu li a{
            width: 204px;
            height: 20px;
            display: block;
            float:left;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 0;
            line-height: 36px;
            text-indent: 5px;
            color: #993333;
            text-decoration: true;
    }
    
    #sidebar .menu li a:hover{
            text-decoration: none;
    }
    
    
    
    /* ************************** SUB-NAVIGATION 2 ************************
    *****************************************************************/
    
    
    #sidebar-2 ul {
    
            list-style-image: url(../images/link-pfeil.jpg);
            padding-left: 20px;
    
    
    }
    
    
    #sidebar-2 {
    
            padding: 3px 0px 1px 0px;
            width: 204px;
            margin-left: 5px;
    
    }
    
    #sidebar-2  li a{
            width: 204px;
            height: 20px;
            display: block;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 0;
            line-height: 36px;
            text-indent: 0px;
            color: #993333;
            text-decoration: true;
    }
    
    #sidebar-2  li a:hover{
            text-decoration: none;
    }
    
    
    
    /* ************************** SUB-NAVIGATION 3 ************************
    *****************************************************************/
    
    #sidebar-3 {
            padding: 3px 0px 1px 0px;
            width: 204px;
            margin-left: 5px;
    }
    
    #sidebar-3  li a{
            width: 204px;
            height: 20px;
            display: block;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 0;
            line-height: 36px;
            text-indent: 0px;
            color: #993333;
            text-decoration: true;
    }
    
    #sidebar-3  li a:hover{
            text-decoration: none;
    }

    Und trotzdem .... es funktioniert nicht! Ich bin mit meinem Latain am Ende und auf eure Hilfe angewiesen .... Habe den halben Tag jetzt mit dem Murks verdamelt!

    - - - Aktualisiert - - -

    Es hat funktioniert!!!!

    Danke synaptic

    !!!

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: DIV Problem

    joa kein ding
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Stichworte

Berechtigungen

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