Suchmaske im Banner ausrichten

Webdesign & Technik HTML & CSS
1

Hallo,

ich würde meine Suckmaske gerne unten recht im Banner ausrichten (http://www.elpixo.de). Dabei dachte ich an “margin:auto 0 0 auto”. Das wird leider nicht angenommen. Als einzigstes wird “margin-left” angenommen.
Wie erreiche ich es, die Maske unten rechts in die Ecke zu bekommen?

kopf.php

[code]


<?php include ("suche/suche.php"); ?>
[/code]

suche.php

[code]

[/code]

CSS:

#kopf {width:1000px; height:150px; margin:0 auto; } .kopflink {width:1000px; height:150px; display:block; margin:0 auto; } .kopfbild {background:url(bilder/kopf.jpg) no-repeat; background-position:top; } .kopfbild:hover {background-position:bottom; } .kopf a {width:1000px;height:150px;} #suche { }

Gruß Elsner

2

Also erstmal gehört ein form-Element sicher nicht in ein
a-Element.

Das müßtest du also komplett umstrukturieren, also die beiden
nicht ineinander verschachteln, sondern a und form jeweils in
ein div.
Wie man es am besten macht, kommt dann auf die konkrete
Struktur an. Im Zweifelsfalle sollte es aber funktionieren, #kopf
absolut oder relativ zu positionieren und dann das div mit dem
form darin ebenfalls absolut (ist dann relativ zum positionierten
Elternelement). Kann auch einfacher gehen - man kann ja auch
einfach den Text rechtsbündig ausrichten.

3

Vielen Dank für den Hinweis hoffmann. Soweit hat die Umstrukturierung auch funktioniert. Aber wie bekomme ich die Suchmaske noch an den unteren Rand des Banners? “vertical-align:bottom” funktioniert nicht.

kopf.php

[code]


<?php include ("suche/suche.php"); ?>
[/code]

css

#kopf a {position:absolute; } #suche {position:relative; text-align:right; vertical-align:bottom; margin:auto 10px 5px auto; }

4

Naja, könntest ein br hinter das a setzen, sind ja inzeilige
Elemente ;o)

Besser vielleicht auch, du bastelst das Hintergrundbild in
#kopf rein, sinngemäß sowas:

#kopf 
{
width:1000px;
height:150px;
background:url(bilder/kopf.jpg) no-repeat;
background-position:top;
position: relative
}

#suche
{
display: block;
position: absolute;
bottom:0;
right: 0;
text-align: right
}

Das a-Element sollte zudem nicht leer sein, da gehört Text
rein, sonst kann man das nicht anklickern.

5

Naja,
sagt mir jetzt nicht so zu. Momentan habe ich es mit margin-top gelöst.

Die oben genannte Struktur werde ich aber beibehalten, da sich bei einem Mouse-Over das Hintergrundbild ändert (noch nicht eingebaut). Trotz des leeren A-Tags ist dieser trotzdem anklickbar. Kannst du ja mal auf der Seite ausprobieren.

Aber trotzdem vielen Dank für deine Bemühungen.

6

Das ist bestenfalls mit der entsprechenden CSS-Angabe
anklickbar, sollte aber auch ohne CSS nutzbar sein, wenn die
Verwendung des Elementes einen Sinn ergeben soll.
Mittels :hover kann man von jeglichem Element Eigenschaften
ändern, wenn die Maus drüber ist, hat mit dem Element a nichts
zu tun…

margin-top scheint mir problematisch zu sein, weil man die
Schriftgröße nicht kennt (vom Nutzer immer einstellbar, egal
was man als Autor irgendwo angibt), der Kram aber sonst in px
angegeben ist, da kann man nie genau wissen, was für ein margin
da sinnvoll ist…

7

Ja, stimmt. Da hast du auch wieder recht. Aber hinter dem Banner liegt nur der Link zur Startseite, welche man auch anderweitig erreicht.

Mit dem margin und px hast du sicherlich auch recht. Aber meine Seite ist momentan auch durch fixe Angaben (px) definiert. Wenn ein Besucher eine andere Schriftgröße eingestellt hat, passt das gesamte Layyout meiner Seite nicht mehr. Ich weiß, dass dies nicht sonderlich barrierefrei ist. Aber bisher hatte ich noch keine Zeit und Lust es umzubauen, sofern ich es hinbekommen würde.