DIV Problem

toto1982

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

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

Alles anzeigen

und so meine css:

CSS

/* ************** 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;
}

Alles anzeigen

Vielleicht könnt ihr mir ja helfen!

Wäre super! Danke

synaptic

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

explanator

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

synaptic

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

explanator

Zitat von synaptic

Edit: der TE ist übrigens urheber...

Yepp, habs mittlerweile auch mitbekommen. Nun ja, Kirche steht immer noch, habe gerade nachgesehen.

toto1982

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

der Index sieht jetzt so aus:

PHP

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

Alles anzeigen

die css so:

CSS

*{
        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;
}

Alles anzeigen

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

!!!

synaptic

joa kein ding

Tags