• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suchfeld vergrößern, Buttons verkleinern [HTML][CSS]

D

DasOhmoff

Neues Mitglied
Hallo!

Ich hab schon ewig gesucht,bei Google und Youtube, hab aber leider nichts gefunden was mir hilft.
Ich habe rechts ein Suchfeld, es vergrößert sich automatisch wenn ich es focusiere.
Links davon ist ein div Tag, in disen Div Tags sind 5 Links die man anklicken kann, sie sehen wie Buttons aus.
Ich weiß das man das auch in Java-Script oder in so einer Sprache machen kann aber ich würde das gerne in Css schaffen.

Jetzt zu meinem Problem, eigentlich war es geplant das die Buttons automatisch kleiner (in der Breite) werden,
aber egal wie ich es drehe und wende ich schaff's einfach nicht. Hier der Code (Ich hab das unwichtige entfernt):


Index.html:

<input id="Suche" type="text" placeholder="Input">
<div id="StandardButtons">
<a href="">Button 1</a>
<a href="">Button 2</a>
<a href="">Button 3</a>
<a href="">Button 4</a>
<a href="">Button 5</a>

<input id="SuchButton" type="submit" value="SEARCH">
</div>
</input>

-------------------------------------------------------------------------------------------------------------------------------------------------------------

Extended.css:

#StandardButtons>a
{
width: 139px;
*BEFEHLE*...
}
#StandardButtons>a:hover
{
*BEFEHLE*...
}
#StandardButtons>a:active
{
*BEFEHLE*...
}

#Suche
{
*BEFEHLE*...
}
#Suche:focus
{
width: 300px;
}
#Suche:focus #StandardButtons>a /*<---------------------------*/
{
width: 94px;
}

#SuchButton:focus
{
*BEFEHLE*...
}

-------------------------------------------------------------------------------------------------------------------------------------------------------------

Ich hab 1000 de verschiedene Arten probiert... Irgedwie komm ich nicht weiter und ich hab echt keine Ahnung was ich nocht machen soll...
Ich bitte um hilfe, es wär sehr freundlich wenn ihr mir sagen könntet wo der Feheler liegt und wie ich ihn beheben kann. Da ich schlecht in dem ganzen bin wäre es auch freundlich wenn ihr es so simple wie möglich erklärt :S

Ps: Tut mir leid wenn ich euch mit einem absolut offensichtlichen Fehler nerve
Ps 2: Sry für die Rechtschreib-, Grammatikfehler
 
Zuletzt bearbeitet:
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

form {
background:#eee;
border:1px solid #000;
padding:10px;
float:left;
}

#Suche {
float:left;
width:200px;

}
#StandardButtons {
float:left;
margin-left:5px;
}
#StandardButtons a
{
width: 98px;
float:left;
border:1px solid #aaa;
background:#ddd;
border-radius:5px;
margin-right:5px;
padding:3px;
font:caption;
text-decoration:none;
}

#SuchButton {
width:100px;
float:left;
border:1px solid #aaa;
border-radius:5px;
padding:2px;
font:caption;
}
#Suche:focus
{
width: 300px;
}
#Suche:focus + #StandardButtons a
{
width: 78px;
}

</style>
</head>
<body>

<form>
<input type="text" id="Suche" placeholder="Input">

<div id="StandardButtons">
<a href="">Button 1</a>
<a href="">Button 2</a>
<a href="">Button 3</a>
<a href="">Button 4</a>
<a href="">Button 5</a>
</div>

<input id="SuchButton" type="submit" value="SEARCH">
</form>
</body>
</html>
So in etwa.
 
Zuletzt bearbeitet:
Erstmal danke für die antworten.
Space Vampire: Ja, das hab ich schon mal versucht hat aber leider nichts gebracht
djheke: Leider funktioniert der Text trotzdem nicht wenn ich ihn ergänze aber wenn ich meinen ganzen Text lösche und deinen reinkopiere tut der Text was er soll ><...

Danke euch beiden für die Antworten.

Mit wikepedia hab ich alle diese Regeln (Element1 *Regel* Element2) ausprobiert bis ich zu ~ gekommen bin... Ich hab keinen Schimmer warum das jetzt funktioniert... ENDLICH, auch wenn ich es nicht gecheckt hab.

Die "Lösung" war bei mir ein ~ dranzuklatschen, warum auch immer x|

Edit:

Außerdem musste ich die inputs hier hin tun:

<div id="StandardButtons">
<input id="Suche" type="text" placeholder="Input">
<input id="SuchButton" type="submit" value="SEARCH">

<a href="">Button 1</a>
<a href="">Button 2</a>
<a href="">Button 3</a>
<a href="">Button 4</a>
<a href="">Button 5</a>
</div>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben