Keskustelu: Nettisivujen teko: Html + CSS buttonit

Plakkis [21.10.2010 19:56:23]

Älkääkä välittäkö väriskaaloista, testiä testiä : D

input.groovybutton
{
   font-family:Courier New,monospace;
   text-align:left;
   color:#000000;
   background-color:#00BB00;
   border-top-style:solid;
   border-top-color:#000000;
   border-bottom-style:solid;
   border-bottom-color:#000000;
   border-left-style:solid;
   border-left-color:#000000;
   border-right-style:solid;
   border-right-color:#000000;
}

  <table width="920" align="center" scope="row" bgcolor="black" cellspacing="1">
  <tr>
      <td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="LINK" action="http://www.bookreader.fi/index.php" name="groovyform">
  <input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Etusivu"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/reg.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Rekisteröidy"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/blist.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Kirjalista"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/writers.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Kirjailijat"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/genre.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Genret"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/sengine.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Hakukone"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/details.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Yhteystiedot"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
<td colspan="1" align="center" valign="top" bgcolor="#347C17">
<form method="link" action="http://www.bookreader.fi/ty.php" name="groovyform">
<input
   type="submit"
   name="groovybtn1"
   class="groovybutton"
   value="Kiitokset"
   onMouseOver="goLite(this.form.name,this.name)"
   onMouseOut="goDim(this.form.name,this.name)">
</form>
</td>
</tr>
</table>

Firefox:
http://www.aijaa.com/v.php?i=6918050.png
Opera:
http://www.aijaa.com/v.php?i=6918051.png

Eli ongelma on seuraavanlainen, opera näyttää halutusti nappulat kyseisellä koodilla. Mutta kaikilla muilla selaimilla ongelmat ilmenevät (ks. Firefox)
Kellään mitään selventävää asianhaaraa miten tuon saisi korjattua?

(onMouseOver ja onMouseOut ovat siis pieni JS scripti, ei luulisi olevan vaikutusta asiaan)

Blaze [21.10.2010 20:20:18]

Copypastesin koodis ja mun Firefox (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.9) Gecko/20100920 Gentoo Firefox/3.6.9) ja Chromium (Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.41 Safari/534.7) näyttää sen samoin kuin tuossa Opera-kuvassa.

Edit: vaivauduin sitten jopa lukemaan sen koodin;

form {
  margin: 0;
}

auttaa.

Miksi noi linkit yleensä on form/inputbuttoneita? Tiedäthän, että voisit CSS:llä tyylitellä linkin ihan saman näköseks?

Teuro [21.10.2010 20:31:53]

Ainakin html-merkkaus on kaikkea muuta kuin ehjää, joten toiminta taitaa olla aika lailla selaimesta ja asetuksista kiinni. Ainakaan mitään standardia tuo ei taida olla. Mulla nimittäin näkyy firefoksilla juurikin samalla lailla kuin tuossa kuvassa. Mutta eikös tuon linkkilista kannattaisi olla ... lista?

Ja muutenkin eikös kannattaisi antaa css:n antaa tyylitellä dokumentti ja karsia tuolta noi table + form hässäkät pois ihan kokonaan. Sivun kokokin taitaa hiukan pienentyä semanttisemmalla merkkauksella.

Merri [22.10.2010 09:28:18]

Tuo koodi on korvattavissa kokonaan yksinkertaisella listarakenteella.

<ul class="groovylist">
    <li><a href="/index.php">Etusivu</a></li>
    <li><a href="/reg.php">Rekisteröidy</a></li>
    <li><a href="/blist.php">Kirjalista</a></li>
    <li><a href="/writers.php">Kirjailijat</a></li>
    <li><a href="/genre.php">Genret</a></li>
    <li><a href="/sengine.php">Hakukone</a></li>
    <li><a href="/details.php">Yhteystiedot</a></li>
    <li><a href="/ty.php">Kiitokset</a></li>
</ul>

.groovylist {
    border: 1px solid #000;
    margin: 1em auto;
    overflow: hidden;
    padding: 0;
}

.groovylist li {
    background: #347C17;
    display: inline;
    float: left;
    list-style: none;
    margin: 0;
    padding: 2px;
}

.groovylist a {
    background: #0B0;
    border: 1px solid #000;
    color: #000;
    display: block;
    font-family: 'Lucida Console', 'Courier New', monospace;
    padding: 4px 8px;
    text-decoration: none;
}

Testaamaton.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen