Debug: <input>Button an Leiste anpassen

newcoder · #1 (**permalink**) 14.04.2011, 18:42

Auf dieser Testseite findet sich links oben ein Suchfeld mit

HTML-Code:

<li><input type="submit" value="Suchen" name="submit" class="sphbutton" /></li>

Seit geraumer Zeit versuche ich diesen Input-Button an die daneben liegenden Link-Knöpfe anzupassen, es gelingt mir leider nicht

Welche Elemente muß ich formatieren, um im 'Nicht-Hover-Status' (oh je....) das Aussehen der Leiste zu bekommen?
Und warum ist das Hoverbild nach unten verrutscht?

Code:

#hilfsmenue2 {
/*display:table;/*wg.Opera7*/
margin-bottom:10px;
}
#hilfsmenue2 ul {
font-size:16px;
margin:0;
padding:0;
}
#hilfsmenue2 li {
float:left;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#hilfsmenue2 a {
border-right:1px solid #b0b0b0;
color:#303030;
display:block;
font-size:0.7em;
padding:11px 10px 10px;
text-transform:uppercase;
}
#hilfsmenue2 a:hover {
background:#f0f0f0 url(../img/menuhover.jpg) top left repeat-x;
color:#303030;
text-decoration:none;
}
#hilfsmenue2 a.current {
background:#f0f0f0 url(../img/menuhover.jpg) top left repeat-x;
color:#303030;
text-decoration:none;
}
.searchform {margin:0;}
.searchbox {
background:#F8F9FA;
border:1px solid #b0b0b0;
color:#303030;
margin:6px 0 0 10px;
width:152px;
}
.sphbutton {
font-family:Verdana,Tahoma,Arial,sans-serif;
font-weight:bold;
border-left:1px solid #b0b0b0;
color:#303030;
display:block;
margin-left:10px;
text-transform:uppercase;
}
.sphbutton:hover {
background:#f0f0f0 url(../img/menuhover.jpg) top left repeat-x;
border:1px solid #b0b0b0;
color:#303030;
margin-left:10px;
padding:10px;
width:60px;
}

Danke für jede Hilfe!

Scheppertreiber · #2 (**permalink**) 14.04.2011, 20:52

zefix - komme mit Firebug nicht dran

Gib doch mal sphbutton die gleiche (ähnliche) Hintergrundgrafik wie beim Link
rechts daneben. Dann sollte das gehen.

newcoder · #3 (**permalink**) 15.04.2011, 09:23

Danke. Der Hintergrund ist der globale des #container und bedeckt die ganze Höhe, siehe hier.

Wie formatiere ich den Input-Button solo?

Scheppertreiber · #4 (**permalink**) 15.04.2011, 09:27

Zitat:

Zitat von newcoder

Wie formatiere ich den Input-Button solo?

Gib im eine ID zB "<input ... id='problemfall'>", im CSS dann mit #problemfall die
Attribute anhängen.

hubspe · #5 (**permalink**) 15.04.2011, 09:47

Moin,

ich verstehe nicht so recht warum du das so merkwürdig strukturiert hast. Das kann eigentlich nur Probleme machen.
Du packst das textfeld für die Suche und den Suchen-Button in ein li und läßt das Floaten. Kein Wunder das der Button wie an der Wäscheleine da hängt.

ich würde form links floaten und die inputs inline-Elemente sein lassen. Das mit dem display:block; dafür zwingt dich fast zu deiner komischen Konstruktion.

newcoder · #6 (**permalink**) 15.04.2011, 16:28

Danke, nach Weiterbasteln immer noch nicht das GelbevE....

Egal, ob mit display:inline; oder display:block;

Vergrößert man im FF, sieht man dass die Hintergrund- und Hovergraphik um ca 1px nach unten verschoben ist, unabhängig von der Höhe der Grahik. Außerdem 'klebt' der Hovereffekt im IE-6 mit hässlichen Rändern.
Und die Schriftformatierung weicht ebenfalls von den <a>-Elementen 'Testlink' und '?' ab.

Derzeitiger Stand

*Ratlos*

newcoder · #7 (**permalink**) 17.04.2011, 20:26

So, ein klitzekleines Stück weiter mit dem Suchfeld links oben, aber den Suchen-Button bekomme ich nicht im Layout der Leiste formatiert....

Beispielseite

Kann man einen INPUT-Button als <a>-Link formatieren?

Vielleicht noch einen Tipp? Thx...

newcoder · #8 (**permalink**) 17.04.2011, 20:27

So, ein klitzekleines Stück weiter mit dem Suchfeld links oben, aber den Suchen-Button bekomme ich nicht im Layout der Leiste formatiert....

Beispielseite

Kann man einen INPUT-Button als <a>-Link formatieren?

Vielleicht noch einen Tipp? Thx...

hubspe · #9 (**permalink**) 18.04.2011, 08:31

Zitat:

Zitat von newcoder

Vielleicht noch einen Tipp? Thx...

input ist ein inline-Element, da hast du deshalb nur bedingt Einfluß auf die Gestaltung.
Warum läßt du es nicht, sieht doch okay aus?

newcoder · #10 (**permalink**) 18.04.2011, 21:17

Zitat:

Zitat von hubspe

input ist ein inline-Element, da hast du deshalb nur bedingt Einfluß auf die Gestaltung.
Warum läßt du es nicht, sieht doch okay aus?

Das Bessere ist des Guten Tod....

Wäre IMHO schon schöner, wenn der INPUT-Button des 'Suchen' das Design der übrigen Menüleiste hätte....

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
wichtig: Scroll Leiste entfernen/ausschalten	Susum	(X)HTML	6	05.08.2010 14:09
ie6, navi leiste.. bitte um kurzen check ob das bei euch auch so aussieht :-)	monran	CSS	26	14.06.2010 23:49
CSS-Layout der Browsergröße anpassen	Jen	CSS	3	14.11.2008 08:39
DIV immer ganze Breite - normal?!?!?	csski	CSS	3	02.07.2008 12:20
im footer unten nicht mitscrollende leiste (div)	stepreis	CSS	2	11.02.2005 02:31