Help me out here, designer guys.

Joshua · September 3, 2010

I have been working on coding my own layout from scratch and seem to have gotten stuck when it comes to using the Forms and the background Image.

I know well and good how to make the "submit" button an image, easy enough multiple ways to do so.

However, The Input Field, Where the user will type their name, or password, i would like the background to be an image I made.

How oh How does one easily accomplish this? ><

medz · September 3, 2010

css stuff

for input field its the same as button

.myinput{

background:#xxx url(xxx) left top no-repeat;

}

nothing different

Djkanna · September 3, 2010

input {

........

}

Joshua · September 3, 2010

Ok, So I for the life of me can't get the Text to go Next to my Input boxes. Everything is setting up nice, but when it comes to spacing the input boxes and submit buttons everything is getting all stupid and i can't figure out why, any "more" help would be appreciated, I feel like such a rookie trying to learn css and div tags ><

#body {
background-image: url(images/background.png);
height: 1000px;
width: 1100px;
background-repeat: no-repeat;
}

#body #content {
background-image: url(images/welcome.png);
background-repeat: no-repeat;
width: 261px;
height: 63px;
margin-left: 120px;
margin-top: 250px;
float: left;
font size: 14px;
color: #AAAAAA;
text-align: center;
}

#body input {
margin-left: 0px;
margin-top: 120px;
float: left;
font size: 10 px;
color: #ffffff;
}


.myinput{
background: url(images/input.png) no-repeat;
border: 0px;
width: 156px;
height: 33px;
}

.myinputs{
background: url(images/input.png) no-repeat;
border: 0px;
width: 156px;
height: 33px;
}




#footer {
margin-top: -80px;
background-image: url(images/foot.png);
height: 79px;
width: 944px;
background-repeat: no-repeat;
background-position: center;
margin-left: 80px;
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles.css" mce_href="styles.css" type="text/css" />
</head>

<body bgcolor="#000000">


<div id="body">
<div id="content">





This is just some brief Text

To describe some brief Stuff

Obviously More stuff will go here

For now this is merely a place holder

So enjoy staring at nothingness
</div>

<div id="input">
<form action="authenticate.php">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="submit">
</form>
</div>
</div>



<div id="footer"></div>

</body>
</html>

The Problem

http://www.ethan.mastermccodes.com/index.html

wrx · September 3, 2010

.myinput{
background: url(images/input.png) no-repeat;
border: 0px;
width: 156px;
height: 33px;
}

.myinputs{
background: url(images/input.png) no-repeat;
border: 0px;
width: 156px;
height: 33px;
}

It might help to design with borders on to see exactly how much adjustment room you got to play with then start with different spacing/align options get it how you want it then turn off borders.

spacing adjustments can be done with margins for the div "margin: 5px,2px,3px,0;" values start at top and are clockwise ending with right.

try and play with text align in your class might be usefull.

form looks ok to me though nothing really out of wack.

wrx

Joshua · September 3, 2010

Thanks wrx, I figured it out

http://www.ethan.mastermccodes.com

My first Designed and Coded Login page >,< yey me.

Gotta check in opera and google to make sure everything is where it's supposed to be, but looks fine on IE8 and FF on my computer.

The problem was I didnt have the Form Defined as a <div> just the <input> tag and it was throwing everything out of whack.

wrx · September 3, 2010

GJ ... it is loading to the far left for me though.

heres an idea that might be helpfull as your learning. create a new DIV and make a new class for it call it something like main_wrapper.

make it the width of your template and center it on the page mabye add margin-top and bottom 5px

<html>
<div class='main_wrapper'>

 Page template code

</div>
</html>

Joshua · September 3, 2010

Will do, Odd it's loading like that for you and fine for me, stupid differant browsers and res's ><

Working now?

wrx · September 3, 2010

Odd it's loading like that for you and fine for me, stupid differant browsers and res's

exactly why you want to tell everything where to go in your CSS never accecpt a default position as then your at the mercy of the browser.

looks better now centered with a nice little top margin to help it stand out now... looks good

wrx

Joshua · September 3, 2010

Thanks for the input, Just started hardcore trying to learn css and it's baby steps for me >,<

Djkanna · September 3, 2010

Use a reset to help minimize differences cross browser.

Also use labels for text elements with forms.

<form>

</p>

</form>

wrx · September 3, 2010

Use a reset to help minimize differences cross browser.

i included one in a new thread i started for people trying to learn this. great minds think alike

http://makewebgames.io/board759/33670-tableless-skeleton-template/#post178848

Spydre452 · September 4, 2010

Ah very nice good job :]

Paddy · September 4, 2010

Just wanted to let you know that the footer is goin to the left hand side for me using FF

this is how i got it right

#footer {background-image:url("images/foot.png");background-position:center center;
background-repeat:no-repeat;
height:79px;
width:944px;
margin-left:80px;
margin-top:-80px;
position:relative;
left:75px;

hope that helps

Edit

or else you can set the

margin-left:155px;

Joshua · September 4, 2010

Hm, thanks paddy I'll fix it

Help me out here, designer guys.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation