Suchformular in der rechten Spalte

[HobbyWebProgrammer]

Hallo zusammen,

ich bin noch ein ziemlicher Anfänger und wollte noch eine Änderungen an meinem ersten Homepageprojekt (Internetseite für meinen Handballverein) machen.
Ich hatte ein Suchformular im Header und wollte es nun in die rechte Spalte packen, da ich das Gesamtlayout nun auf 90% der Bildschirmbreite eingestellt habe.

Folgend die Anforderungen an das Suchformular in der rechten Spalte:

• Suchfeld + Lupe (zum Suchen) nebeneinander darstellen
• Breite des Suchfelds + Breite der Lupe = 100 % Width der rechten Spalte
• Suchfeld abrunden durch Border (da weiß ich auch wie das geht)

Bei den ersten beiden Punkten verzweifle ich gerade noch ein bisschen. Habe schon probiert eine fixe Position anzugeben oder das ganze per float zu formatieren. Bin da noch in ziemlicher DAU.

Hier der Link zur Homepage: http://tv-schwafheim.de/handball/index.php/home.html

Vielen Dank im Voraus für Eure Hilfe.

Grüße

[tschero]

Hi HobbyWebProgrammer,

zum darstellen der Lupe und des Suchfeldes nebeneinander könntest Du folgendes versuchen:

.mod_form.tableless.block {
    max-width: 100%;
}

#right #suchformular .suchfeld {
    border-radius: 7px;
    display: inline;
    max-width: 70%;
    opacity: 0.7;
}

.submit_container {
    display: inline;
    float: left;
}

Ist nur ein Schnellschuß, geht bestimmt noch eleganter.

Gruß
tschero

[HobbyWebProgrammer]

Hi,

danke für deine schnelle Antwort, von der Breite her passt jetzt alles (habe die Lupe noch per "float: right;" nach rechts geschoben).

Jedoch ist die Lupe nicht neben dem Suchfeld, sondern immer noch unter dem Suchfeld. Der Rand sieht auch noch etwas komisch aus, als ob der nur links und oben wäre.

Grüße

[HobbyWebProgrammer]

Ich habe auch versucht beide Elemente mal mit "float: left" aneinander zu reihen, jedoch ist die Lupe dann auch nicht auf der gleichen Höhe wie das Eingabefeld.

[ways2web]

das liegt am <br> element. Das muss weg bzw per css ausschalten

#suchformular br{
display:none;
}

man könnte es auch direkt im template entfernen.. aber das ist ja umständlicher

[HobbyWebProgrammer]

Top, danke. Jetzt klappt es =).

Per "Element untersuchen" hätte ich "#suchformular br" auch sehen müssen und dann per display:none das ganze ausblenden. Merke ich mir für das nächste mal.