Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: css:llä pyöreät kulmat tekstilaatikkoon

Sivun loppuun

o165321917 [07.06.2005 00:43:42]

#

Pitäisi tehdä css:llä tekstilaatikko jossa olisi pyöreät kulmat kuvan avulla kuten seuraavassa linkissä:

http://www.picment.com/articles/css/funwithforms/

Alla oleva koodi ei kuitenkaan luo pyöreitä kulmia tekstilaatikkoon. Mikä on vialla?

<html>
<head>
<style type="text/css">
body
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:60%;
	margin:50px;
	color:#888;
}
.fieldset
{
	width:300px;
}
.fieldset .label
{
	text-align:right;
	width:70px;
	float:left;
	padding:0.2em;
	margin:0;
	margin-top:0.3em;
}
.fieldset .nobr
{
	display:none;
}
.fieldset .textarea
{
	margin:3px;
	height:165px;
	width:200px;
}
.fieldset .textfield
{
	margin:3px;
	height:20px;
	width:200px;
	border:solid 0 #fff;

	background: transparent url("textfield_bg.gif") no-repeat fixed;
	//url("textfield_bg.gif") no-repeat fixed;
}
.fieldset>input.textfield
{
	background: transparent
	url("textfield_bg.gif") no-repeat;
}

</style>
</head>

<body>
	<form action="default.asp" method="post">
	<fieldset>
		<legend>Contact form </legend>
		<label for="name">Name:</label><br />
		<input type="text"  id="name" name="name" />
		<br />
		<label for="email">Email:</label><br />
		<input type="text" id="email" name="email" /><br/>
		<label for="website">Website:</label><br />
		<input type="text" id="website" name="website" value="http://" />
		<br />
		<label for="comment">Comment:</label><br />
		<textarea cols="30" rows="15" name="comment" id="comment">
		</textarea>
		<br /><label for="submit">&nbsp;</label><br />
		<input id="submit" name="submit" type="submit" value="submit" />
	</fieldset>

</body>
</form>

</html>

Mod. edit: käytetään kooditageja, niin sisennykset säilyy ja kaikilla on kivempaa.

Niko [07.06.2005 00:49:14]

#

Onko sulla toi kuva ??

o165321917 [07.06.2005 01:10:58]

#

Joo, mulla on toi kuva.

wwwapu [07.06.2005 10:56:55]

#

formissa ei näy missään käytettävän luokkia textfield tai fieldset

ajv [07.06.2005 14:31:57]

#

https://www.ohjelmointiputka.net/rek.php:

Huom! Tällä nimellä esiinnyt mm. keskustelualueella. Kunnollisia tunnuksia eivät ole "ksjhskdhf", "Minä" eikä "Tietämätön".

:)
Noh, eipä oma nimimerkkinikään nyt ehkä parhaasta päästä ole, mutta silti...

o165321917 [08.06.2005 01:14:47]

#

Lisäsiin textfield-luokan. Ei auttanut.

<input type="text" id="name" name="name" class="textfield"/>

Gwaur [08.06.2005 01:56:58]

#

No höh, vaivalla (pienehköllä kuitenkin) sain tehtyä laatikon, jossa on pyöreät kulmat, mutta sitten vasta huomasin, että tein pyöreät kulmat aivan vääränlaiseen laatikkoon. :P No, tässä halukkaille joka tapauksessa, http://lauko.mine.nu/pyoreat_kulmat/ :)

wwwapu [08.06.2005 10:52:50]

#

.fieldset .textfield
{
    margin:3px;
    height:20px;
    width:200px;
    border:solid 0 #fff;
    background: transparent url("textfield_bg.gif") no-repeat fixed;
}

.fieldset>input.textfield
{
    background: transparent url("textfield_bg.gif") no-repeat;
}

</style>
</head>

<body>
    <form action="default.asp" method="post">
    <fieldset class="fieldset">
        <legend>Contact form </legend>
        <label for="name">Name:</label><br />
        <input class="textfield" type="text"  id="name" name="name" />
        <br />
        <label for="email">Email:</label><br />
        <input class="textfield" type="text" id="email" name="email" /><br/>
        <label for="website">Website:</label><br />
        <input class="textfield" type="text" id="website" name="website" value="http://" />
        <br />
        <label for="comment">Comment:</label><br />
        <textarea cols="30" rows="15" name="comment" id="comment">
        </textarea>
        <br /><label for="submit">&nbsp;</label><br />
        <input id="submit" name="submit" type="submit" value="submit" />
    </fieldset>
</form>
</body>

Kuten jo aiemmin sanoin: formissa ei näy missään käytettävän luokkia textfield tai fieldset. Jotta asia tulisi selväksi, muutetaan || muotoon &&

[EDIT]
Lisäselvennykseksi:

.fieldset .textfield

Tarkoittaa, että tyylit määritellään luokan .textfield edustajille jotka sijaitsevat luokan .fieldset edustajan sisällä. Ei muuten.


Sivun alkuun

Vastaus

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

Tietoa sivustosta