input background
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
input
{
border: 1px #000 solid;
background-color: #fff;
}
input.loginnick
{
background:url('images/login_nickname.jpg') no-repeat left top;
border: 1px #000 solid;
}
.loginpwd{
background: url('images/login_password.jpg');
background-repeat:no-repeat;
width: 112px;
height: 15px;
border: 1px #000 solid;
}
{
border: 1px #000 solid;
background-color: #fff;
}
input.loginnick
{
background:url('images/login_nickname.jpg') no-repeat left top;
border: 1px #000 solid;
}
.loginpwd{
background: url('images/login_password.jpg');
background-repeat:no-repeat;
width: 112px;
height: 15px;
border: 1px #000 solid;
}
PHP:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
echo '
<form action="' . $_SERVER['PHP_SELF'] . '" method="POST" >
user:<br><input type="text" name="nick" class="loginnick" ><br>
pw:<br><input type="password" name="wachtwoord" class="loginpwd" ><br><br>
<td valign="top"><input type="image" src="images/buttonlogin.gif"> <a href="index.php?cup=register" target="_self"><img src="images/buttonregister.gif" style="border:1px solid black"></a>
</form>
';
<form action="' . $_SERVER['PHP_SELF'] . '" method="POST" >
user:<br><input type="text" name="nick" class="loginnick" ><br>
pw:<br><input type="password" name="wachtwoord" class="loginpwd" ><br><br>
<td valign="top"><input type="image" src="images/buttonlogin.gif"> <a href="index.php?cup=register" target="_self"><img src="images/buttonregister.gif" style="border:1px solid black"></a>
</form>
';
Nu vraag ik mij af waarom hij niks laat zien in de input van user en pw.
Volgens mij zou hij het gewoon moeten doen maar blijkbaar doe ik iets verkeerds.
2. Je kan niet eerst een shorthand background gebruiken en daarna weer een background-repeat, dan overschrijf je de eerdere shorthand.
3. Hoogte nooit plaatsen op een input type text of password. Daar willen ze nog wel eens raar van gaan doen. Gebruik hiervoor font-size en padding.
4. Al gevalideerd?
Edit: Foutje. n_n
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Code (php)
1
2
3
4
5
2
3
4
5
.loginpwd{
background: url('images/login_password.jpg') no-repeat;
width: 112px;
border: 1px #000 solid;
}
background: url('images/login_password.jpg') no-repeat;
width: 112px;
border: 1px #000 solid;
}
als CSS dus, php code is correct?
Code (php)
1
This document was Tentatively checked as HTML 4.01 Transitional
Ik denk dat je nog even de links van je plaatjes en je stylesheet na moet gaan. ;)
Mitchell schreef op 06.12.2008 03:06:
Als je formulier gewoon word geplaatst dmv je echo, en dan worden je backgrounds niet getoond, dan is dit niet de schuld van je php.
Ik denk dat je nog even de links van je plaatjes en je stylesheet na moet gaan. ;)
Ik denk dat je nog even de links van je plaatjes en je stylesheet na moet gaan. ;)
jpg veranderd naar .gif nu
map/images/login_nickname.gif
map/images/login_password.gif
map/index.php
map/style.css
dan zou hij toch moeten werken ?
css:
Code (php)
1
2
3
4
5
2
3
4
5
.loginpwd{
background: url('images/login_password.gif') no-repeat;
width: 112px;
border: 1px #000 solid;
}
background: url('images/login_password.gif') no-repeat;
width: 112px;
border: 1px #000 solid;
}
Mitchell schreef op 06.12.2008 02:40:
1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.
IE6 kent dat wel.
Dus je moet toch eens met je locatie gaan spelen. (misschien /images/login_password.gif)
Heb je misschien ook een online voorbeeld?
Mitchell schreef op 06.12.2008 02:40:
1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.
2. Je kan niet eerst een shorthand background gebruiken en daarna weer een background-repeat, dan overschrijf je de eerdere shorthand.
3. Hoogte nooit plaatsen op een input type text of password. Daar willen ze nog wel eens raar van gaan doen. Gebruik hiervoor font-size en padding.
4. Al gevalideerd?
Edit: Foutje. n_n
2. Je kan niet eerst een shorthand background gebruiken en daarna weer een background-repeat, dan overschrijf je de eerdere shorthand.
3. Hoogte nooit plaatsen op een input type text of password. Daar willen ze nog wel eens raar van gaan doen. Gebruik hiervoor font-size en padding.
4. Al gevalideerd?
Edit: Foutje. n_n
1. Deze kent IE6 wel, je kan ze ook in IE6 gewoon gebruiken.
2. Dat kan wel, maar de laatste declaratie geldt.
3. Ook hoogte kan prima, maar je moet wel weten wat je doet. Met een height kan je prima (en cross browser) gaan werken. Wel is het mooier om met padding te werken.
4. De css is in elk geval valide, het werkt ook op deze manier, dus dat is het niet. Het moet de locatie zijn.
Niek schreef op 06.12.2008 12:04:
IE6 kent dat wel.
Probeer maar een center center te gebruiken in een shorthand, had ik pas geleden nog geprobeerd, werkte niet. Wat wel werkte was 50% 50%.Mitchell schreef op 06.12.2008 02:40:
1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.
IE6 kent dat wel.
code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<input width="80" type="text" name="nick" class="loginnick" size="8">
input.loginnick
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
}
input.loginnick
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
input.loginnick
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
overflow: hidden;
}
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
overflow: hidden;
}
??
martijn schreef op 06.12.2008 22:36:
??
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
input.loginnick
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
overflow: hidden;
}
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
overflow: hidden;
}
??
Dit werkt niet het is gewoon alleen in IE dat ik text achter het plaatje kan zetten.