Beiträge von toto1982

toto1982

...

toto1982

Hallo, ich bins mal wieder!
Ich habe ein "kleines" Problem. Für mein Hauptmenü auf http://www.stephanrohling.com/selmi/ nutze ich folgenden css Ausschnitt:

Code

#menu .menu{
        margin: 0px;
        padding: 0px;
}


#menu .menu li.active > a {
        background:#999999;
}


#menu .menu{
        list-style-type: none;
        width: 1000px;
        background: #FFFFFF;
        }


#menu .menu li a{
        width: 127px;
        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: #FFFFFF;
        text-decoration: none;
        border-right: 0px;
        border-left: 0px;
        }


#menu .menu li a img{
        border: 0px;
        }


#menu .menu li:first-child a{
        width: 100px;
        border-left: 4px solid #FFFFFF;
        }


#menu .menu li:last-child a{
        width: 130px;
        border-right: 4px solid #FFFFFF;
        }


#menu .menu li a:hover{
        text-decoration:underline;
        }

Alles anzeigen

Im Firefox als auch im Chrome Browser wird der Befehlt aus #menu .menu li:last-child erkannt. Bedeutet also ganz rechts im letzten Menüfeld wird der rechte Kastenrand weiss angezeigt. Im IE jedoch nicht! Kann mir da jemand helfen?

Danke

toto1982

Hab mal wieder herumprobiert aber bleibe vor einem "kleinen Problem" stehen!

Ich habe in meiner css folgenden Befehl benutzt, damit die Homepage oben im Browser bündig anschließt! http://www.stephanrohling.com/joomla/

Code

*{margin: 0px;}

Allerdings wirkt sich das auf alle Klassen aus. Generell nicht so schlimm, aber für die Klasse #artikeltext optisch nicht das Beste.

Wo muss ich den Befehl platzieren, dass er den gewünschten oberen Bündigkeitseffekt zeigt. In #wrapper hab ich ihn gepackt, da passt es nicht!

Oder hab ich den Kopf einfach voll und kann durch einen weiteren Befehl in #artikeltext entgegenwirken?

Danke

toto1982

Danke! Habs hinbekommen!

toto1982

Noch was:
wäre es möglich, - und wenn wie - für alle Menüpunkte im horizontalen Hauptmenü einen Bilderwechsel bei Klick auf einen Menüpunkte im Header zu veranlassen. Sprich, dass wenn man im Menüpunkt "Home" surft, headergrafik-01 angezeigt wird, wenn man unter dem Menüpunkt "Über uns" surft, Grafik headergrafik-02 im Header angezeigt wird, und so weiter???
wenn ja, Tipps? Hilfen? Danke

toto1982

ja ne is klar!

DANKE!!!!!!!!

toto1982

Ich habe eben schon alle mir erdenklichen Codes durchprobiert .....

aber auch dein Befehl geht nicht ....

toto1982

Danke, erstmal.

Ich stehe jetzt nur auf dem Schlauch weil ich nicht genau weiss, wo ich was verändern muss!?

Ich kann styles lesen und mir meinen Teil denken aber selber schreiben ist so ein Problem. Meine Arbeit besteht daraus strg + C und strg + v und entsprechende, mir bekannte Änderungen zu erledigen. Dann hörts aber auf.

Wär jemand so nett und könnte mir detaillierter helfen?

Danke

- - - Aktualisiert - - -

so vielleicht?

Code

#main-navigation .current { background: #999999;}

toto1982

Hallo zusammen. Ich habe eine Homepage basierend auf Joomla 2.5 erstellt. Das Hauptmenü liegt unter dem Headerbild!

Ziel ist es, dass wenn man ein Menüpunkt anklickt, der Hintergrund eine andere Farbe erhält.

Ist active da nicht der richtige Befehl? Unter hover funktioniert es.

Meine css sieht so aus:

Code

/* ************************** Hauptmenü ************************
*****************************************************************/


#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: #FFFFFF;
        text-decoration: none;
        border-right: none;
        border-left: none;
        }


#main-navigation .menu li:first-child a{
        border-left: none;
        width: 128px;
        }


#main-navigation .menu li:last-child a{
        border-right: none;
        width: 128px;
        }


#main-navigation .menu li a:hover{
        text-decoration: underline;
        background: #999999;
        }


#main-navigation .menu li a:active{
        background: #999999;
        }

Alles anzeigen

der eingebundene Part in der Index lautet:

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>

Alles anzeigen

Könnt ihr mir helfen?

... und so siehts aus: http://www.stephanrohling.com/joomla/

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

!!!

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

Beiträge von toto1982

Textfluss Bild

Border Problem!

margin top

Menü hover / active

Menü hover / active

Menü hover / active

Menü hover / active

Menü hover / active

Menü hover / active

DIV Problem

DIV Problem