...

View Full Version : Div Not Recognized



litoburrito
05-27-2010, 06:23 AM
Ok so i guess ill just let the coding speak for itself.
The password div is not being recognized, can anyone help?
I want the login to be in a straight line.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Lito's page</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
<div id="bg">

<div id="login_bg">
<div id="username">
<input class="username" type="text" size="12" value="Username" />
</div>
<div id="password">
<input class="password" type="password" size="12" value="Password" />
</div>
<input class="submit" type="image" value="Go" src="L:\Lego\images\login\submit.png" />
</div>
</div>
</div>
</body>
</html>




html, body {
margin: 0;
padding: 0;
}

P {
font-family: Arial, Verdana, Helvetica;
color: #FFFFFF;
font-size: 12px;
}

#bg {
width: 100%;
background-image: url(../images/background/bg.png);
height: 791px;
}

#INPUT {
border-style:solid;
border-color: Gray;
border-width: 1px;
width: 200px;
padding: none;
}

#login_bg {
width: 514px;
background-image: url(../images/login/login_bg.png);
height: 122px;
float: right;
}

#username {
width: 125px;
margin-left: 75px;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 0px;
}

#username INPUT[type='text']
border-bottom: none;
border-left: none;
padding-bottom: 0px;
padding-left: 0px;
width: 5px;
padding-right: 0px;
background-image: url(../images/login/input_field.png);
height: 50px;
border-top: none;
border-right: none;
padding-top: 0px;
}

.password {
float: right;
width: 50px;
margin-left: 80px;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 0px;
}

#password INPUT[type='text']
border-bottom: none;
border-left: none;
padding-bottom: 0px;
padding-left: 0px;
width: 5px;
padding-right: 0px;
background-image: url(../images/login/input_field.png);
height: 50px;
border-top: none;
border-right: none;
padding-top: 0px;
}

.submit INPUT[type='submit']
border-bottom: none;
border-left: none;
padding-bottom: 0px;
padding-left: 0px;
width: 50px;
padding-right: 0px;
background: url(../images/login/submit.png);
height: 58px;
border-top: none;
border-right: none;
padding-top: 0px;
}

ahayzen
05-27-2010, 11:07 AM
In your CSS



.password {
float: right;
width: 50px;
margin-left: 80px;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 0px;
}


Should be



#password {
float: right;
width: 50px;
margin-left: 80px;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 0px;
}


A dot is for classes and a hash is for ID's.

Andy

litoburrito
05-27-2010, 07:48 PM
OK, i changed it but it's still not recognizing it.

litoburrito
06-03-2010, 04:47 PM
Just Bumping...
Still need help guys please.

optimus203
06-03-2010, 05:21 PM
You were missing some opening brackets in your CSS declarations, but I don't think that was the issue. Is this what you are looking for? PS - I also cut down the clutter of your css code and utilized shorthand properties.

Its not perfect, the submit button is overlapping the border of the password input, but its a start.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Lito's page</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

<style type="text/css" media="all">
html, body {
margin: 0;
padding: 0;
}

p {
font-family: Arial, Verdana, Helvetica;
color: #FFFFFF;
font-size: 12px;
}

#bg {
width: 100%;
background-image: url(../images/background/bg.png);
height: 791px;
}

input {
border: 1px solid gray;
width: 200px;
padding: none;
}

#login_bg {
width: auto;
height: 122px;
background-image: url(../images/login/login_bg.png);
float: right;
}

#username {
float:left;
display:inline;
width: 125px;
margin: 20px 0 0 75px;
}

.username INPUT[type='text'] {
border: 0;
padding: 0;
width: 5px;
height: 50px;
background-image: url(../images/login/input_field.png);
}

#password {
float:left;
display:inline;
width: 50px;
margin: 20px 0 0 80px;
}

.password INPUT[type='text'] {
border: 0;
padding: 0;
width: 5px;
height: 50px;
background-image: url(../images/login/input_field.png);
}

#submit {
float:left;
display:inline;
width: 50px;
height:58px;
margin: 20px 0 0 80px;
}

.submit INPUT[type='submit'] {
border: 0;
padding: 0;
width: 5px;
height: 58px;
background: url(../images/login/submit.png);
}
</style>
</head>

<body>
<div id="bg">

<div id="login_bg">
<div id="username"><input class="username" type="text" size="10" value="Username" /></div>
<div id="password"><input class="password" type="password" size="10" value="Password" /></div>
<div id="submit"><input class="submit" type="image" value="Go" src="L:\Lego\images\login\submit.png" /></div>
</div>

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum