Menu waagerecht anordnen

**Holzbein33** · 30.03.2010 15:43

hey,

ich hab ein kleines problem mit meinem menu

http://joomlatestseite.gartenappel.de/

da wo saison-aktuell und drive in-aktuell steht, sollen je 3 menupunkte nebeneinander stehen. ich habe es nicht hinbekommen das mit einem menu zu konstruieren, somit habe ich 2 menus gemacht, eins für die obere reihe (menum1) und die andere hälte ins menum2

Nun möchte ich dass die einzelnen menufelder 30x185px (die größe sollte bei allen gleich sein) nebeneinander stehen, ich hab es mit display inline versucht und dann mit position: absolut, sah auch sehr gut aus in meiner einstellung, wenn ich das fenster jedoch verkleinert hab war dementsprechend alles verschoben, also mit position:absolut wollte ich das nicht mehr machen. was noch wichtig wäre, dass die menutitel im oberen und unteren menuteil den gleichen abstand vom dreieck haben, das problem hatte ich bei meinen ersten versuchen auch, dass dadurch dass die menutitel unterschiedlich lang waren, auch die menutitel nicht überall gleich standen.

Meine Menupunkte liegen zur Zeit untereinander. :-/

Wär schön wenn mir jemand einen hinweis geben könnte wie ich das am einfachsten realisieren kann.

Danke im Voraus

**Marcus77** · 30.03.2010 15:50

Also das mit dem Menü seh ich nicht

zu den Kasterln, erstelle dafür positionen und css, dann ist die immer gleich

Es kommt drauf an was du damit machst

weil du kannst das auch mit einer Tabelle machen, und diese genau angeben

**Holzbein33** · 30.03.2010 16:00

Hmm du siehst das Menu nicht oder? ^^ ich seh es auch nciht das ärgert mich

Dort wo "Gartenland-aktuell" steht, rechts daneben sollten eigentlich noch 2 punkte stehen "zoomarkt-aktuell" und "saison-aktuell" sie sind scheinbar garnicht da.

mit tabellen wollte ich garnicht arbeiten, es muss doch auch so gehen oder?

ich hätte vielleicht auchmal meinen css-code mitschicken sollen:

PHP-Code:


@charset "UTF-8";
/* CSS Document */

body {
    margin:10px;
    padding:0;
       background-color:#efefef;
    color:#000000;
}

body, th, tr {
    font-family:Arial, Helvetica, sans-serif;
    color:#000000;
    font-size:12px;
}

.componentheading {
    font-size:14px;
    font-weight:bold;
}

span.small, td.createdate {
    font-size:11px;
    color:#444;
}

.pagenav {
    color:#444;
}

a {
    text-decoration:none;
    color:#ffffff;

    font-size: 14px;
}

a:hover { /*Mouseover*/
    font-weight: bold;
    font-size: 14px;
    color:#ffffff;
}

.clear {
    clear:both;
}

form, fieldset, img {
    border:none;
}

input {
    margin:4px;
}

div#body_container {
    width:1024px; /*Breite der HP 1024px*/
    height: 1000px;
    border:3px solid #ffffff; /*Rand der HP: 3px*/
    background-color:#ffffff; /*Hintergrundfarbe weiß*/
    text-align:left;
    overflow:hidden;
}

div#tpl_header {
    width:1024px;
    height:100px;
    background-image: url(../images/appel_header.jpg);
    background-repeat:no-repeat;
    background-position:left top;
    overflow:hidden;
    position:relative;
}

span.site_name { /* "Hier steht ihr Firmenname", durch "font-size:0px;" ist es erstmal weg */
    padding:0px;
    display:block;
    font-size:0px;
       font-weight:bold;
       color:#DF1818;
}

div.spc_header {
    height:1px;
    border-bottom:1px solid #fff;
    background-color:#ffffff;
}


div#site_container_n {
}

div#site_container_l {
    background-repeat:repeat-y;
    background-position:left top;
    background-image:none;
}

div#site_container_r {
    background-repeat:repeat-y;
    background-position:left top;
    background-image:none;
}


div#left_container {  /* Eigenschaften linke Spalte */
    width: 200px;
    height: 900px;
    float: left;
    background-color:#0057A0;
    margin-right: 3px;
    overflow:hidden;
}

div#right_container { /* Eigenschaften rechte Spalte */
    width: 204px;
    height: 700px;
    float: right;
    background-color: #ffffff;
    margin-left: 3px;
    overflow:hidden;
}

div#middle1_container {  /* Eigenschaften mittlere Spalte 1 (Begrußung)*/
    left: 514px; top:115px; width:613px; height:24px;
    background-color:#f58220;
    overflow:hidden;
    margin: 0px 3px 3px 0px;
    padding-top:8px;
    font-weight: bold;
    font-size: 14px; /* Schriftgrosse  */
       color: #ffffff; /* Schriftfarbe */
    text-align: center;
}

div#middle2_container {  /* Eigenschaften mittlere Spalte 2 (Menu1) */
    background-color:#F58220;
    height:30px;
    margin:0 3px 3px 0;
    overflow:hidden;
    width:613px;
}

div#middle3_container {  /* Eigenschaften mittlere Spalte 3 (Menu2) */
    background-color:#F58220;
    height:30px;
    margin:0 3px 3px 0px;
    overflow:hidden;
    width:613px;
}

div#content_container {
    overflow:hidden;
    padding:5px 1px 5px 1px;
}
 /*##################################### menu #####################################*/

div.moduletable_menum1 ul, div.moduletable_menum1 li { 
    font-weight: bold;
    margin: 0;
    padding: 0;
}
div.moduletable_menum1 ul  li {
    border-bottom: 3px solid #ffffff;
}
div.moduletable_menum1 ul li a {
    background-image: url(../images/dreieckw.gif); /*Aufzahlungszeichen*/
    background-repeat: no-repeat;
    padding: 7.5px 0px 7px 19px;
    display: block;
        color: #ffffff;
    width: 185px;
}
div.moduletable_menum1 ul li a:hover {
    background-image:url(../images/dreieckb.gif);
    background position: left center;
    background-repeat: no-repeat;
    font-weight: bold;
        color: #ffffff;
    background-color: #0057a0;
}

div.moduletable_menum2 ul, div.moduletable_menum2 li {
    font-weight: bold;
    margin: 0;
    padding: 0;
}
div.moduletable_menum2 ul  li {
    border-bottom: 3px solid #ffffff;
}
div.moduletable_menum2 ul li a {
    background-image: url(../images/dreieckw.gif); /*Aufzahlungszeichen*/
    background-repeat: no-repeat;
    padding: 7.5px 0px 7px 19px;
    display: block;
        color: #ffffff;
    width: 185px;
}
div.moduletable_menum2 ul li a:hover {
    background-image:url(../images/dreieckb.gif);
    background position: left center;
    background-repeat: no-repeat;
    font-weight: bold;
        color: #ffffff;
    background-color: #0057a0;
}
 
div.moduletable_siteimp { 
    height:24px;
    background-color:#f58220;
    overflow:hidden;
    padding: 8px 5px 0px;
    margin: 0px 0px 3px;
    font-weight: bold;
}

div.moduletable_siteimp ul, div.moduletable_siteimp li { /* Eigenschaften Spalte siteimp_menu*/
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

a.mainlevel, .moduletable_siteimp a {
    padding-right: 50px;
}

div.moduletable_anfahrt ul, div.moduletable_anfahrt li { 
    font-weight: bold;
    margin: 0;
    padding: 0;
}
div.moduletable_anfahrt ul  li {
    border-bottom: 3px solid #ffffff;
}
div.moduletable_anfahrt ul li a {
    background-image: url(../images/dreieckw.gif); /*Aufzahlungszeichen*/
    background-repeat: no-repeat;
    padding: 7.5px 0px 7px 19px;
    display: block;
        color: #ffffff;
    width: 185px;
    background-color: #f58220;
}
div.moduletable_anfahrt ul li a:hover {
    background-image: url(../images/dreieckb.gif);
    background position: left center;
    background-repeat: no-repeat;
    font-weight: bold;
        color: #ffffff;
    background-color: #0057a0;
}

div.moduletable_bildr {
    height: 260px;
    overflow: hidden;
    border: 3px solid #f58220;
}

div.moduletable_menu h3, div.moduletable h3 {  /* Eigenschaften Menutitel */
        font-weight: bold;
    font-size: 12px; /* Schriftgrosse Menus */
       color: #18DF18; /* Schriftfarbe Menus Uberschrift */
    background-color: #F58220;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0px;
    padding: 4px 0px 4px 4px;
    display: block;
    border-bottom: 1px solid #000000;
    margin:0;
}

div.moduletable_menu ul, div.moduletable_menu li { /* Eigenschaften Spalte Hauptmenu*/
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

div.moduletable_menu ul li { /* Hauptmenu; Eigenschaften Linie */
    border-bottom: 3px solid #ffffff; /* Starke, Art, Farbe */
}

div.moduletable_menu ul li a {
    background-image: url(../images/dreiecko.gif); /*Aufzahlungszeichen*/
    background position:left center;
    background-repeat: no-repeat;
    padding: 7.5px 0px 7px 20px; /*Position obermenupunkte Hauptmenu*/
    display: block;
       color: #ffffff; /*Schriftfarbe Hauptmenu = weiss*/
}

div.moduletable_menu ul li a:hover { /*Eigenschaften Hauptmenu - mouseover*/
    background-image: url(../images/dreieckb.gif); /*Aufzahlungszeichen*/
    background position:left center;
    background-repeat: no-repeat;
    font-weight: bold;
    color: #ffffff; /*Schriftfarbe mouseover*/
    background-color: #f58220;
}



div.moduletable_menu ul li ul li{
    border: none;
    border-top: 3px solid #ffffff; /*Zwischenlinien Hauptmenu (Starke, Art, Farbe)*/
}

div.moduletable_menu ul li ul li a { /* Eigenschaften Untermenu*/
    background-image: none; /*Aufzahlungszeichen*/
    background position:left center;
    background-repeat: no-repeat;
    padding: 7.5px 0px 7px 30px;
    display: block;
}

div.moduletable_menu ul li ul li a:hover { /*eigenschaften untermenu - mouseover*/
    background-image: none; /*Aufzahlungszeichen*/
    background position:left center;
    background-repeat: no-repeat;
    padding: 7.5px 0px 7px 30px;
    display: block;
}

wenn ich dort positionen einsetze wie left, top etc. dann passiert nix. irgendwas fehlt da aber ich seh nicht was genau das ist.

**Marcus77** · 30.03.2010 16:08

zum menü

wenn du es nicht auf horizontal hast, ist es klar das es nicht sichtbar ist

versuch mal das zu ändern

zu den Kastln

du gibst in der CSS die zurodnung an

und in der template.xml Deines Templates gibst du die Positonen an,
die du dann in dem jeweiligen Menü auswählst (wie rechts, links, usw...)

steht dann dort

<position>kastl_1<posietion>
<position>kastl_2<posietion>

usw...

**Holzbein33** · 30.03.2010 16:16

hey,

danke für die schnellen antworten, ich stell es mal auf horizontal, dann sieht es total verkorkst aus. ist umgestellt

das andere probier ich gleich mal

meinst du mit kasterln1 *g* den einzelnen menupunkt?
soll ich dann jedem einzelnen menupunkt im prinzip eine eigenen position definieren?

sry, bin noch nicht so fit in css, ich versuch das mit 'learning by doing' zu begreifen.

soll ich das dann in der index.php mit "definieren"?

bis jetzt steht bei mir das

PHP-Code:


            <div id="left_container"><jdoc:include type="modules" name="left" style="xhtml" /></div>

            <div id="right_container"><jdoc:include type="modules" name="right" style="xhtml" /></div>

                    

            <div id="middle1_container">Herzlich Willkommen bei GartenAppel</div>

            <div id="middle2_container"><jdoc:include type="modules" name="user1" style="xhtml" /></div>

            <div id="middle3_container"><jdoc:include type="modules" name="user2" style="xhtml" /></div>

soll ich da jetzt noch die 6 kästen mit einbringen (so wie user1 und user2 etc.)? oder versteh ich das komplett falsch

**Holzbein33** · 30.03.2010 16:44

Nee ist ja Quatsch.
was ich geschrieben hab.

Mir fällt da ein dass ich ja schon user1 und user2 für jeweils die mittleren balken definiert habe

PHP-Code:


div#middle2_container {  /* Eigenschaften mittlere Spalte 2 (Menu1) */

    background-color:#F58220;

    height:30px;

    margin:0 3px 3px 0;

    overflow:hidden;

    width:613px;

}

den hab ich ja in der index.php dem user1 zugewiesen.

oder ist das garnicht das was du meinst?

Thema: Menu waagerecht anordnen

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Menu waagerecht anordnen

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen