(Gelöst) Suchfenster ändern

chrissy-dizzy · 01. April 2011 12:52

Ich habe das Template brightside nach meinen Vorstellungen angepasst bzw. an ein Shoplayout angepasst. Vorletztes Problem: Das Suchfenster. Testseite. Ziel: Es soll genauso aussehen wie auf der Seite, die unter "Zum Shop" aufgeht. Momentan sieht der Code so aus:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS für Suchfenster ==]
div#search { /* position for the search box */     float: right; /* enough width for the search input box */     width: 500px;     text-align: right;     padding: 2px 0px 2px 0px;     margin: 0 1em;         margin-top: -345px; } /* a class for Submit button for the search input box */ input.search-button {     border: none;     height: 22px;     width: 53px;     margin-left: 5px;     padding: 2px 2px 2px 2px; /* makes the hover cursor show, you can set your own cursor here */     cursor: pointer; /* you can set your own image here */     background: url(http://www.liobani-hercik.de/uploads/BrightSide/search.png) no-repeat center center; }

Es müsste das "Label" (1. Zeile "Suche:") verschwinden, und, wenn ich das richtig verstehe, das Suchfenster mit dem Bild übereinander gebracht werden, und zwar unterhalb des horiz. Menüs, das eigentlich mit schwarzer Schrift sein sollte (aber das ist dann das letzte Problem mit einer eigenen Klasse).

Beitrag geändert von chrissy-dizzy (03. April 2011 16:11)

Klenkes · 01. April 2011 16:44

Hi.

Wie wär's erstmal mit:
div#search label {display:none;}
Dann rutscht dein Suchfeld und Button schon mal nach oben.

Wieso willst du irgendein Bild drüber oder drunter legen?

input.search-input {border:1px solid #DDD; usw... background:white url(/pfad/zu/deiner/lupe.png) no-repeat right center;}

Damit kannst du doch fast alles machen.

Klenkes · 01. April 2011 16:48

Dein Stylesheet sagt zur Linkfarbe:

a {color:#4284B0;} Und das ist Blau!

Versuch doch mal:
#topmenu a {color:#000;}

chrissy-dizzy · 01. April 2011 17:32

Danke für den Tipp! Wie würde der Code genau aussehen? So rutscht das ganze unter den Header:

Hier klicken, um den Code zum Kopieren zu markieren

div#search label {display:none}
{
/* position for the search box */
    float: right;
/* enough width for the search input box */
    width: 500px;
    text-align: right;
    padding: 2px 0px 2px 0px;
    margin: 0 1em;
        margin-top: -345px;
}

Die Linkfarbe soll für das Menü links gelten. Ich brauche eine zweite Linkfarbe für das horizontale Menü oben

Klenkes · 01. April 2011 19:32

Also... vieleicht missverstehe ich dich ja, aber soll das Suchfeld nicht direkt unterhalb der horizontalen Links sein?
Dann muss dein Aufruf von SEARCH {search} auch erstmal direkt nach <div id="topmenu"> kommen.

Dein CSS ist aber auch recht seltsam...
Ich weiß gar nicht wo und wieso margin-top: -345px; herkommt/soll?

nichtsdestotrotz macht #topmenu a {color:#000;} deine Links im Topmenu schwarz.

Dein HTML weist auch verscheidene Fehler auf.
Es gibt kein repeat="y" für den img-Tag.
Validiere mal deine Seite, bereinige die Fehler, dann ist schon einiges besser.

Siehe: Validator

Klenkes · 01. April 2011 20:02

Ich muss zugeben, ich habe oft nicht die Geduld, mich durch anderer Leute CSS zu fressen, aber hier mal ein Versuch:

Dein Template sollte an der entsprechenden Stelle so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

<!-- Du solltest bg.png auch in dein dein Stylesheet setzen und nicht hier inline -->
<div id="wrap" style="background: url(http://www.liobani-hercik.de/uploads/BrightSide/bg.png)">

<div id="topmenu">
{* Dein Menüaufruf für die horizontalen Links *}
{menu}
</div><!-- /topmenu -->

<div id="search">
{* Aufruf für dein Suchfeld *}
{search}
</div><!-- /search -->

<div id="header">
<img src="http://www.liobani-hercik.de/uploads/BrightSide/wassertropfen.jpg" width="930" height="300" alt="headerphoto" class="no-border" />
</div><!-- /header -->

{* hier restliches Template... *}

Das CSS dazu:

Hier klicken, um den Code zum Kopieren zu markieren

#topmenu {
 height: 20px;    
 width: 500px;
 float: right;
 margin-top: 10px;
}

div#search label {display:none}

div#search {
 float: right;
 width: 500px;
 text-align: right;
 padding: 2px 0px 2px 0px;
 margin: 10px 20px; /* das must du entsprechend anpassen */
}

#header {
 clear:right;
}

Das sollte alles etwas gerade rücken und ein Ansatz sein.

Nach <div id="main"> folgt nochmal ein DOCTYPE mit HEAD und allem drum und dran...

Du MUSST erstmal diese Fehler bereinigen!

mike-r · 01. April 2011 20:12

Klenkes schrieb:

Es gibt kein repeat="y" für den img-Tag.

"Es gibt kein repeat="y" für die background-eigenschaft ..." sollte das wohl heissen wink

Klenkes · 01. April 2011 20:26

mike-r schrieb:

"Es gibt kein repeat="y" für die background-eigenschaft ..." sollte das wohl heissen

Richtig!

Wobei dabei eh alles falsch ist. border="0" repeat="y" müsste heissen: border:none; repeat-y

Beitrag geändert von Klenkes (01. April 2011 20:27)

mörml · 02. April 2011 14:06

Hallo!

Ich habe dazu auch eine Frage. Das Suchmodul wirft mir im Frontend standardmäßig den Button "Suchen" rechts neben dem Texteingabefeld aus.

In der Klasse input.search-button { ... kann ich ein Bild hinterlegen, doch dann sieht man im Frontend sowohl die Grafik als auch das Wort "Suchen".

Ich weiß nicht, wie man das Wort aussteuert. Habe im Modul-Template testweise "name" und "value" gelöscht, was jedoch keine Wirkung zeigt.

VG mörml

uniqu3 · 02. April 2011 15:35

@mörml
input.search-button {
text-indent: -9999px;
/* IE 7 fix */
overflow:hidden;
line-height:0px;
font-size:0px;
/* IE7 fix ende */
...und so weiter
}

mörml · 02. April 2011 15:43

Hallo uniqu3, danke für's Mithelfen. Funktioniert leider nicht. Denn damit hab ich nun gar keinen Knopp mehr zum Starten der Suche.

uniqu3 · 02. April 2011 15:44

Na ja der rest des CSS sollte auch dazu passen wink
Siehe http://www.i-arts.eu/bizbuzz/

mörml · 02. April 2011 16:00

grübel...

Ich habe es nun so gelöst:

Statt value="{$submittext}"

value=""

Wenn ich

text-indent: -9999px;
/* IE 7 fix */
overflow:hidden;
line-height:0px;
font-size:0px;
/* IE7 fix ende */

verwende, haut es mir wieder den Button weg.

NACHTRAG: ...weshalb ich für den IE fix die Werte für line-height und font-size auf 10px angepasst haben. Nun geht es.

Dongeee uniqu3!

Beitrag geändert von mörml (02. April 2011 16:03)

chrissy-dizzy · 03. April 2011 10:45

Vielen Dank - jetzt habe ich es fast: CSS und html sind valide. Das nächste Mal bau ich mir das Theme selbst, dann behält man als Einsteiger leichter den Überblick. Nur noch eine Frage: Tiny MCE setzt in html immer "Doctype.." usw. ein, was dann dafür sorgt, dass dies doppelt ausgegeben wird. (Im Head vom Template und auf der Seite). Wie kann man das verhindern?

NaN · 03. April 2011 12:09

In den Einstellungen des TinyMCE das Plugin 'Fullpage' deaktivieren.
(Hat nichts mit Vollbild zu tun wink )

Andynium · 04. April 2011 07:11

NaN schrieb:

In den Einstellungen des TinyMCE das Plugin 'Fullpage' deaktivieren.

Hmm, sollte man besser aus dem Lieferumfang entfernen (so oft, wie ich dies hier schon gelesen hab roll ) ...

mörml · 04. April 2011 09:25

Dafür. "Dank" des Fullpage-Plugins darf man dann sämtliche Seiten von Datenschrott bereinigen.

Forum für CMS/made simple

#1 01. April 2011 12:52

(Gelöst) Suchfenster ändern

#2 01. April 2011 16:44

Re: (Gelöst) Suchfenster ändern

#3 01. April 2011 16:48

Re: (Gelöst) Suchfenster ändern

#4 01. April 2011 17:32

Re: (Gelöst) Suchfenster ändern

#5 01. April 2011 19:32

Re: (Gelöst) Suchfenster ändern

#6 01. April 2011 20:02

Re: (Gelöst) Suchfenster ändern

#7 01. April 2011 20:12

Re: (Gelöst) Suchfenster ändern

#8 01. April 2011 20:26

Re: (Gelöst) Suchfenster ändern

#9 02. April 2011 14:06

Re: (Gelöst) Suchfenster ändern

#10 02. April 2011 15:35

Re: (Gelöst) Suchfenster ändern

#11 02. April 2011 15:43

Re: (Gelöst) Suchfenster ändern

#12 02. April 2011 15:44

Re: (Gelöst) Suchfenster ändern

#13 02. April 2011 16:00

Re: (Gelöst) Suchfenster ändern

#14 03. April 2011 10:45

Re: (Gelöst) Suchfenster ändern

#15 03. April 2011 12:09

Re: (Gelöst) Suchfenster ändern

#16 04. April 2011 07:11

Re: (Gelöst) Suchfenster ändern

#17 04. April 2011 09:25

Re: (Gelöst) Suchfenster ändern

Fußzeile des Forums