PDA

View Full Version : nubee needs help


davidj
05-16-2007, 08:44 AM
ok i have a small project which i though id use to get me into CSS

here is my login page...


<html>
<head>
<title>DESYFA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="viridian.css" rel="stylesheet" type="text/css">
<meta http-equiv="refresh" content="1200;URL=includes/logout.php?r=2">
</head>
<body bgcolor="#FFFFFF">
<div id="wrapper">
<div id="header">Viridian</div>

<div id="login">

<div id="field-div1">
<input type="text" name="username">
</div>

<div id="field-div2">
<input type="text" name="password">
</div>

</div>

</div>
</body>
</html>


here is my CSS


body {
margin-left: 0px;
margin-top: 0px;
text-align : center ;
min-width : 770px ;
}

#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #ffffff;
font-weight: bold;
text-align: right;
}
#wrapper {

left:auto;
top:auto;
width:692px;
height:524px;
z-index:1;
border: 1px solid #6699CC;
margin-top: 3%;
margin-right: 10%;
margin-bottom: 3%;
margin-left: 10%;
}
#login {

left:auto;
top:auto;
width:261px;
height:207px;
z-index:2;
background-color: #FF9900;
margin-top: 8%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;
}
#header {
left:556px;
top:55px;
width:600px;
height:56px;
z-index:1;
color: #6666CC;
font-size: xx-large;
margin-right: 3%;
margin-top: 3%;
font-family: Georgia, "Times New Roman", Times, serif;
}
#field-div1 {

position:relative;
left:-50px;
top:70px;
width:37px;
height:3px;
z-index:3;

}
#field-div2 {
position:relative;
left:-50px;
top:100px;
width:37px;
height:3px;
z-index:3;

}


does this look ok so far or is there a better way to do this. Am i using the right methods in the right way?

also i want to add labels to my fields so do i wrap the text in another div then position that with another CSS.

davidj
05-16-2007, 09:18 AM
Additional...

is it supposed to look like shite in dreamweaver? looks nowt like it does when i hit F12

Oh and its taken me all morning just to get the login screen how i want it when i could have had a working login script running by now if i used tables

Ill plod on

davidj
05-16-2007, 10:27 AM
additional

I thought i was there with the login screen but when i submit the page back to its self the page is rubbish?

The page

<html>
<head>
<title>DESYFA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="viridian.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">Viridian</div>

<div id="login">

<form name="form1" method="post" action="login.php">

<div class="username" ><label for="username">Username</label></div>
<div id="field-div1">
<input type="text" name="username" id="username">
</div>

<div class="password"><label for="password">Password</label></div>
<div id="field-div2">
<input type="text" name="password">
</div>

<div class="loginbutton">
<input name="button-login" type="submit" class="button-login" id="button-login" title="login button" value="Login"></div>

</form>


</div>



</div>
</body>
</html>


the CSS


body {
margin-left: 0px;
margin-top: 0px;
text-align : center ;
min-width : 770px ;
}

#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #ffffff;
font-weight: bold;
text-align: right;
}
#wrapper {

left:auto;
top:auto;
width:692px;
height:524px;
z-index:1;
border: 1px solid #6699CC;
margin-top: 3%;
margin-right: 10%;
margin-bottom: 3%;
margin-left: 10%;
}
#login {

left:auto;
top:auto;
width:261px;
height:207px;
z-index:2;
background-color: #FF9900;
margin-top: 8%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;
}
#header {
left:556px;
top:55px;
width:600px;
height:56px;
z-index:1;
color: #6666CC;
font-size: xx-large;
margin-right: 3%;
margin-top: 3%;
font-family: Georgia, "Times New Roman", Times, serif;
}
#field-div1 {

position:relative;
left:-50px;
top:60px;
width:37px;
height:3px;
z-index:3;

}
#field-div2 {
position:relative;
left:-50px;
top:110px;
width:37px;
height:3px;
z-index:3;

}
div.username{
position:relative;
left:-50px;
top:40px;
width:37px;
height:3px;
z-index:4;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
div.password{
position:relative;
left:-50px;
top:90px;
width:37px;
height:3px;
z-index:4;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;

}
div.loginbutton{
position:relative;
left:-50px;
top:145px;
width:37px;
height:3px;
z-index:4;

}
form {
margin: 0px;
}
/************* buttons and fields ***************/
.button-login {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 20px;
width: 50px;
}
input.username {

}
input.password {
}


Check out the before and after pic's

davidj
05-16-2007, 02:53 PM
its working although im not sure how or what i did

here is the CSS...


body {
margin:50px 0px; padding:0px;
text-align:center;
}
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #2C4141;
font-weight: bold;
text-align: right;
}
#wrapper {

width:692px;
height:400px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #6666CC;

}
#login {
left:190px;
top:40px;
width:261px;
height:207px;
z-index:2;
background-color: #BDD2D2;
right: 100px;
bottom: 100px;
position: relative;
margin: 0px;
border: 1px solid #385454;
}
#header {
left:400px;
top:55px;
z-index:1;
color: #6666CC;
font-size: xx-large;
margin-top: auto;
font-family: Georgia, "Times New Roman", Times, serif;
}
div.loginheader {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #2C4141;
position: relative;
left: 200px;
top: 10px;
}
#field-div1 {

position:relative;
left:50px;
top:30px;
z-index:3;

}
#field-div2 {
position:relative;
left:50px;
top:40px;
z-index:3;

}
div.username{
position:relative;
left:50px;
top:30px;
z-index:4;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-weight: bold;
}
div.password{
position:relative;
left:50px;
top:40px;
z-index:4;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-weight: bold;

}
div.loginbutton{
position:relative;
left:50px;
top:70px;
width:37px;
height:3px;
z-index:4;

}
form {
margin: 0px;
}
/************* buttons and fields ***************/
.button-login {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 20px;
width: 50px;
}
input.username1, input.password1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 20px;
width: 150px;
border: 1px solid #385454;
}


and here is the html...


<?php
include("Connections/viridian.php");
?>
<html>
<head>
<title>DESYFA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="viridian.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header"><img src="Images/header.jpg"></div>
<form name="form1" method="post" action="login.php" >

<div id="login">

<div class="loginheader" >Login</div>

<div class="username" ><label for="username">Username</label></div>
<div id="field-div1">
<input name="username" type="text" class="username1" id="username1" tabindex="1">
</div>

<div class="password"><label for="password">Password</label></div>
<div id="field-div2">
<input name="password" type="password" class="password1" id="password1" tabindex="2" title="password" >
</div>

<div class="loginbutton">
<input name="button-login" type="submit" class="button-login" id="button-login" title="login button" value="Login"></div>


</div>

</form>

</div>
</body>
</html>



still not sure if im doing this right but its working

chriskq
05-21-2007, 06:10 AM
ill look at this later hopefullies...
i hate the instances where you fixed something, but your not really sure how you did it.

The initial happiness often wears off once the bug comes back again - lol

chriskq
05-21-2007, 10:07 AM
ok why the need to position relative and absolute dj?

your structure does not need it.... i try and never you positioning unless i have no other option. i usually use tables for forms too.

davidj
05-21-2007, 10:12 AM
i usually use tables for forms too.

i dont believe it.. Dont you bloody dare say you use tables for forms after i beat my self senseless getting every bloody element right. Damn your eyes chris

ok i dont know what im doing with this CSS malarky

need some ground work me thinks

edbr
05-21-2007, 10:36 AM
This is a nice example to check

http://jeffhowden.com/code/css/forms/

chriskq
05-21-2007, 11:33 AM
sorry complicated forms i use tables for... i do use divs for simple forms...

i use my code snippets in homesite for div forms, so its much easier ;)

domedia
05-21-2007, 01:42 PM
a form seems pretty tabular for me *cough*.. label, value. label, value. and so on.

davidj
05-21-2007, 01:49 PM
damn your optical receptors too!