CSS Forum

**nathmack** · 04-12-2012, 10:07 AM

Hi,

I am new to CSS and am trying to set up a login screen but have run into a few problems that I can seem to solve.

I am trying to make a box where you enter your login details. I can't seem to figure out how to align the input boxes to the border I have set up. If I just use the size="a number" it only works for mu current zoom level but if I zoom in it goes outside the blue border I want to do something like align:justify;. Any ideas?

one other issue I have is, I want to set a color inside the border I made but I cant figure out how to set it and make it touch all the edges. should I just upload an image of a box and put it behind the text or can I set that box up so it will all be a different color?

here is the a link to the page i am making: (it wont let me post links yet)
down2party (dot) com/Nathan/home_page/home_page.php

this is the code I have for the page:

Code:

<?php


?>





<html>

<head>
<title> Down 2 Party </title>
<style type="text/css">



body {
background-color: #2d5483;
border: solid #8080FF 2px; 
margin-left: 350px; 
margin-right: 350px; 
margin-top: 20%; 
margin-bottom: 40%;
}

h1 {
border-bottom: solid #8080FF 2px; 
padding: 4px; 
text-align: center;
}


input {
  size: 100%;
}


p { 
font-size: 15;
color: blue;
}


</style>
</head>
<body> 

<h1>login</h1><br><br>


<center>

<form method='POST' action='login.php'>
</center>
Username:<br>
<center>
	<input type='text' name='name'><br>
</center>
Password:<br>	
<center>	
	<input type='password' name='password'><br>
<br>	
	<input type='submit' value='login'><br>
</form>

</center>
<p> Dont have an account? register <a href="home_page2.php>" > here </a> </p>



</body>
</html>

**lizciz** · 04-12-2012, 08:07 PM

I'm not sure if I have fully understood your issue, but if I have then try setting a 100% width to your input fields. For example, like so:

Code:

.my_input {
    width: 100%;
}

And add the "my_input" class to the fields

HTML Code:

<input type="text" class="my_input" ... />

As for your second issue, it seems you have already solved it, no? The box has a background color of its own.

**holyhttp** · 04-18-2012, 04:32 PM

I would suggest:
div#login {
background-color: #3A5ECA;
padding:0;
border: solid #8080FF 2px;
margin-top: 10%;
margin-right: 35%;
margin-left: 35%;
}

div#login form{
margin:5px;
}

By setting the padding to 0 for all 4 sides, you would allow the bottom border from the h1 element to touch the left and right borders of the #login container.

I also recommend using <label>...</label><input ....> combination when designing a form. You can then set individual styles for labels and input element. That will give you more control and flexibility if you even want to use the same form in your mobile-targeted website.