+ Antworten
Ergebnis 1 bis 4 von 4

Thema: Search deplaziert

  1. 24.05.2008 12:05 #1
    KleinerEisbaer
    KleinerEisbaer ist offline
    Neu an Board
    Registriert seit
    24.10.2007
    Beiträge
    48
    Bedankte sich
    11
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard Search deplaziert

    Hallo Joomla!-Gemeinde,

    ich habe in mein selbst erstelltes Template das Search-Modul installiert. Ich möchte es quasi in meine Menüleiste integrieren, welche auf der Position user3 angesiedelt ist. Mein Menü funktioniert mit dem Extended Menu.

    Also dachte ich, ich gebe dem Search-Modul auch die Position user3 und Stelle es in der Reihenfolge an die zweite Stelle. Leider erscheint es dann aber nicht, so wie ich es mir vorgestellt habe, rechts INNERHALB der Menüleiste, sondern unterhalb des Menüs (siehe Anhang).

    Gebe ich dem Search-Modul in user3 den Rang 1, steht es vertikal zwar schon mal richtig, drückt aber meine Menüpunkte so komisch nach unten (siehe auch Anhang).

    Da ich lokal entwickle kann ich leider online nichts präsentieren, habe das beschriebene Problem aber in Form von zwei Bildern angehängt.

    Erst mal gehe ich davon aus, dass mein Menü zu viel Platz einnimmt und es deshalb das Search-Tool nach unten drückt. Ich habe meinen CSS-Code für das Menü in meiner template_css.css aber noch einmal durchforstet und habe diesbezüglich nichts erkennen können. Daher mal ganz global die Frage: hat von Euch auch schon ähnliche Probleme gehabt? Fällt jemandem auf Anhieb ein, woran die Positionierung liegen könnte?

    Vielen Dank für Eure Antworten!
    Angehängte Grafiken
    Nimm' die Mensch wie sie sind; es gibt keine anderen.
    Zitieren Zitieren
  2. 24.05.2008 13:27 #2
    maverik
    maverik ist offline
    Kommt häufiger vorbei
    Registriert seit
    18.04.2006
    Beiträge
    386
    Bedankte sich
    9
    Erhielt 58 Danksagungen
    in 46 Beiträgen

    Standard

    zeig doch mal den html code
    Zitieren Zitieren
  3. 25.05.2008 09:20 #3
    KleinerEisbaer
    KleinerEisbaer ist offline
    Neu an Board
    Registriert seit
    24.10.2007
    Beiträge
    48
    Bedankte sich
    11
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Hallo,

    der entsprechende Codeabschnitt in der index.php wäre:
    <body>

    <div id="header">
    <?php mosLoadModules('header'); ?>
    </div>

    <div class="menu">
    <?php mosLoadModules('user3'); ?>
    </div>
    ...
    Der dazugehörige CSS-Code ist schon um einiges länger.
    Er stammt aus meiner Original-Website:
    .menu { font-family: arial, sans-serif;
    width:100%;
    min-width:350px;
    height:25px;
    position:relative;
    font-size:13px;
    z-index:100;
    background: #003366; }

    .menu ul li a, .menu ul li a:visited {display:block;
    text-decoration:none;
    width:100px;
    padding-left:5px;
    /* Text vertikal mittig ausrichten */
    height:25px;
    line-height:25px;
    color: white;
    /* Hintergrundfarbe Menü */
    background: #003366;
    font-size:13px;
    overflow:hidden; }
    /* Untermenü */
    .menu ul { padding:0;
    margin:0;
    list-style: none;
    margin-left: 25px; }

    .menu ul li { float:left;
    position:relative;
    z-index:99; }

    .menu ul li ul {display: none;
    }

    .menu ul li:hover a { color: white;
    /* Hintergrundfarbe Menü Mouseover */
    background: #003366; }

    .menu ul li:hover ul { display:block;
    position:absolute;
    top:25px;
    left:0;
    width:105px;
    margin-left: 0px;}

    .menu ul li:hover ul li:hover a.hide {/* Hintergrundfarbe Untermenü Mouseover */
    background: #003366;
    color:#6699CC;}

    .menu ul li:hover ul li a { display:block;

    height: 22px;
    /* Hintergrundfarbe Menüpunkte */
    background: #003366;
    color:#99CCFF;}

    .menu ul li:hover ul li a:hover {/* Hintergrundfarbe Menüpunkte Mouseover */
    background: #003366;
    color:#fff;}

    /* Zwischenüberschriften */
    .menu ul li ul.menuwidth li.cross_heading { display:block;
    width:145px;
    color: #6699CC;
    text-align: center;
    letter-spacing: 1px;
    text-decoration:none;
    padding-left:5px;
    height:22px;
    line-height:22px;
    background: #003366; }

    .menu ul li ul li.last a{ height: 7px;
    background: #6699CC; }

    .menu ul li ul li.last a:hover{ height: 7px;
    background: #6699CC; }

    .menu ul li:hover ul.menuwidth_a li a { width: 120px; }
    .menu ul li:hover ul.menuwidth_b li a { width: 145px; }
    Nimm' die Mensch wie sie sind; es gibt keine anderen.
    Zitieren Zitieren
  4. 26.05.2008 04:01 #4
    maverik
    maverik ist offline
    Kommt häufiger vorbei
    Registriert seit
    18.04.2006
    Beiträge
    386
    Bedankte sich
    9
    Erhielt 58 Danksagungen
    in 46 Beiträgen

    Standard

    Code:
    html
----------------------------------------------------------
<div id="header"><?php mosLoadModules('header'); ?></div>
<div class="menu"><?php mosLoadModules('user3'); ?></div>
<div class="dummy">
<div id="search_modul"><?php mosLoadModules('dein_search_modul'); ?></div>
</div>



css
-------------------------------------------------
.dummy {
position: relative;
height: 0px;
width: 100%;
}
#search_modul {
z-index: 1;
position: absolute;
text-align: right;
height: 20px;	   /*Höhe der Suche - Werte bitte anpassen*/
width: 250px;	   /*Breite der Suche - Werte bitte anpassen*/
top: -19px;         /*Platzierung (vertical) auf der Seite - Werte anpassen*/
left: 600px;	   /*Platzierung (horizontal) auf der Seite - Werte anpassen*/
background: transparent;
}
    Zitieren Zitieren
+ Antworten
« Vorheriges Thema | Nächstes Thema »

Lesezeichen

Berechtigungen

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

Foren-Regeln