CSS login "wrong user/pass picture" alignmnet help...

[rufussweetwater]

i am having trouble with positioning a picture i have for my login system. When a username or password is wrong a little red circle with a X in it should appear by whatever was incorrectly submitted. i have no idea how to position it specifically but i do know its all within the my style.css sheet. right now it just ends up right over the login button and that really doesn't help much when logging in.

my site with the problem is [CYK Studios]

Any help at all is very much appreciated!...

[sourfacedcyclop]

One problem is, you didn't close your image tag. The main thing though, is that you didn't give your image tag any sort of positioning, its just thrown in their. You should put the image inside of a div, use two of the divs for each the password and username input area and then have them set to appear if either are invalid. Using divs make them easy to position as well.

[rufussweetwater]

One problem is, you didn't close your image tag. The main thing though, is that you didn't give your image tag any sort of positioning, its just thrown in their. You should put the image inside of a div, use two of the divs for each the password and username input area and then have them set to appear if either are invalid. Using divs make them easy to position as well.

okay i closed both tags, but where should i place the div tags so they will be next to the user/pass boxes?

[sourfacedcyclop]

Okay, I would either a. put the divs around each of the error boxes, OR b, give the "img" tag itself a ID or a class which you could then change.

Here might be an example, very loosely of course.

<img class="usererror" src="images/error.png" border="0" width="16" height="16" />
"usernameinput"
<img class="passerror" src="images/error.png" border="0" width="16" height="16" />
"passworderror"

img.usererror {
height:16px;
height:16px;
float:left;
}
img.passerror {
height:16px;
height:16px;
float:left;
}

This is VERY rough, I don't know the full details of how your site is coded or anything, so you'll have to probably edit things so they work for you.

[rufussweetwater]

Okay, I would either a. put the divs around each of the error boxes, OR b, give the "img" tag itself a ID or a class which you could then change.

Here might be an example, very loosely of course.

<img class="usererror" src="images/error.png" border="0" width="16" height="16" />
"usernameinput"
<img class="passerror" src="images/error.png" border="0" width="16" height="16" />
"passworderror"

img.usererror {
height:16px;
height:16px;
float:left;
}
img.passerror {
height:16px;
height:16px;
float:left;
}

This is VERY rough, I don't know the full details of how your site is coded or anything, so you'll have to probably edit things so they work for you.

thanks i'll work on this and get back to you if i have any questions...

[rufussweetwater]

i had a friend fix the problem, he made the images float to whichever input box was an error,

thanks ZapZack

[zapzack]

No problem.. Rep or credits are appreciated

[rufussweetwater]

Please close thread!!!!!!!
Please close thread!!!!!!!
Please close thread!!!!!!!
Please close thread!!!!!!!
Please close thread!!!!!!!
Please close thread!!!!!!!