Nick: Klick-Button

Hallo!

Danke an alle, die ihre Meinung zum Quelltext der Bibliothek Neubrandenburg abgegeben haben. Ich hatte gedacht, das Problem mit Klick-Buttons zu lösen (Ein Bild mit Text drunter, s.u.)

1.Allerdings weiß ich nicht, wie man festlegt, dass die Button alle einheitlich groß sind, sprich: sie nicht mit längeren Text immer breiter werden. Wahrscheinlich mit Zeilenumbruch lösbar, dann stimmt die Höhe aber nicht mehr :-)

2. Wie kann ich die Buttons nach meinen Bedarf ausrichten (zwei oben, drei mitte, zwei unten)

3. Kann man irgendwie die Farbe der Button ändern, das Grau ist nicht wirklich schön, oder errreichen, dass er nicht wirklich breiter als mein Bild ist?

Wieder mal einen großen Dank im Voraus!

Nick

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Klick-Buttons</title>
</head>
<body>

<h1>Anmeldung/Ausleihe</h1>

<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="130" height="150" alt="Fuchs"><br>
        <b>Kostet die Bücherei Geld?</b></p></a></button></form></div>
</form>
<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="130" height="150" alt="Fuchs"><br>
        <b>Wie kannst du dir etwas ausleihen?</b></p></a></button></form></div>
</form>

<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="106" height="109" alt="Fuchs"><br>
        <b>Wie lange darfst du die Sachen behalten?</b></p></a></button></form></div>
</form>

<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="106" height="109" alt="Fuchs"><br>
        <b>Kann man die Leihfrist verlängern?</b></p></a></button></form></div>
</form>

<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="106" height="109" alt="Fuchs"><br>
        <b>Was kannst du ausleihen</b></p></a></button></form></div>
</form>

<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="106" height="109" alt="Fuchs"><br>
        <b>Verlust/Beschädigung?</b></p></a></button></form></div>
</form>

<form action="button.htm">
  <div>
<button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
<p> <img src="fuchs.jpg" width="106" height="109" alt="Fuchs"><br>
        <b>Büchereiausweis ist weg?</b></p></a></button></form></div>
</form>

</body>
</html>

  1. Hi,

    1.Allerdings weiß ich nicht, wie man festlegt, dass die Button alle einheitlich groß sind, sprich: sie nicht mit längeren Text immer breiter werden. Wahrscheinlich mit Zeilenumbruch lösbar, dann stimmt die Höhe aber nicht mehr :-)

    CSS -> <input type="button" style="width:30px;">

    1. Wie kann ich die Buttons nach meinen Bedarf ausrichten (zwei oben, drei mitte, zwei unten)

    <input type="button" >
    <input type="button" >
    <br />
    <input type="button" >
    <input type="button" >
    <input type="button" >
    <br />
    <input type="button" >
    <input type="button" >

    1. Kann man irgendwie die Farbe der Button ändern, das Grau ist nicht wirklich schön, oder errreichen, dass er nicht wirklich breiter als mein Bild ist?

    CSS -> <input type="button" style=" background-color:green ">

    --
    Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}
    1. Bei mir wird mit background-colour alles um den Button grün,
      aber irgendwie nicht der Button selbst....

      1. Hi,

        Bei mir wird mit background-colour alles um den Button grün,
        aber irgendwie nicht der Button selbst....

        Wo hast du denn "background-colour" eingetragen.
        und auserdem -------------------^^
        muss das color ohne u heißen.

        --
        Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}
  2. Danke an alle, die ihre Meinung zum Quelltext der Bibliothek Neubrandenburg abgegeben haben. Ich hatte gedacht, das Problem mit Klick-Buttons zu lösen (Ein Bild mit Text drunter, s.u.)

    1.Allerdings weiß ich nicht, wie man festlegt, dass die Button alle einheitlich groß sind, sprich: sie nicht mit längeren Text immer breiter werden. Wahrscheinlich mit Zeilenumbruch lösbar, dann stimmt die Höhe aber nicht mehr :-)

    Dazu siehe Frage 3. Richtige Anwendung ermöglicht dir:
    button als display:block darzustellen und dann width anzuwenden.
    In dieser Syntax sind dir dann auch Umbrüche erlaubt

    1. Wie kann ich die Buttons nach meinen Bedarf ausrichten (zwei oben, drei mitte, zwei unten)

    Deine Frage ist falsch. Sie sollte lauten: Wie kann ich die Form Elemente ausrichten...
    a) mit float:left und clear indem du id's ansprichst.
    b) durch positionierung relativ zu einem übergeordneten parent.

    1. Kann man irgendwie die Farbe der Button ändern, das Grau ist nicht wirklich schön, oder errreichen, dass er nicht wirklich breiter als mein Bild ist?

    Ja kann man.
    Sofern du beachtest dass Button ein Element ist das duch start und Endtag beschrieben ist.
    http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    ...

    <h1>Anmeldung/Ausleihe</h1>

    <form action="button.htm">
      <div>
    <button name="Klickmich" type="button" value="Anmeldung" onClick="self.location.href='http://www.google.de/'">
    <p> <img src="fuchs.jpg" width="130" height="150" alt="Fuchs"><br>
            <b>Kostet die Bücherei Geld?</b></p></a></button></form></div>
    </form>

      
    <form ... >  
     <button ... >  
       <p>Beschriftung<br>  
          mit Umbruch  
     </button>  
    </form>  
    
    

    form   mit id versehen
           float anwenden
    button mit display:block; width und height nach img-Grösse.
           background-img:url(...)
    p      ist im normalen flow

    mfg Beat

    --
    ><o(((°>        ><o(((°>
       <°)))o><                      ><o(((°>o