...

View Full Version : alignment with css



jns1992
04-04-2011, 08:26 AM
Hello everyone,
My problem is that I can't place "keep me login" and the checkbox on the same line.
Here is my css code and part of my html code:
css:


#login.inputcheckbox {
margin-left: 0;
float: left;
}

#login.inputcheckbox {
border: 0 none;
vertical-align: middle;
}

#login .login_form_label_field input {
position: relative;
top: 1px;
vertical-align: bottom;
}


and my html code is:



<td class="login_form_label_field">
<input type="checkbox" checked="1" name="persistent" id="persistent" value="1" class="inputcheckbox" />
<input type="hidden" value="1" name="default_persistent" />
<label for="persistent" id="label_persistent">Keep me login</label>
</td>


could someone help me?

effpeetee
04-04-2011, 08:54 AM
We really need all your code including Doctype.
Or better still a link to the site.

Frank

jns1992
04-04-2011, 08:56 AM
ok, I'm gonna send it

jns1992
04-04-2011, 09:02 AM
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> E-soko - Welcome </title>
<link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
<div id="login">
<form id="form" name="form" method="post" action="#">
<table cellspacing="0">
<tbody>
<tr>
<td class="labels">
<label for="Email">Email</label>
</td>

<td class="labels">
<label for="pass">Password</label>
</td>

</tr>

<tr>
<td>
<input type="text" tabindex="1" value="ntwali2007@yahoo.fr" id="email" name="email" class="inputtext">
</td>

<td>
<input type="password" tabindex="2" id="pass" name="pass" class="inputtext">
</td>

<td>
<label for="u902450_3" class="uiButton uiButtonConfirm"><input type="submit" id="u902450_3" tabindex="4" value="login"></label>
</label>
</td>
</tr>

<tr>
<td class="login_form_label_field">
<input type="checkbox" checked="1" name="persistent" id="persistent" value="1" class="inputcheckbox" />
<input type="hidden" value="1" name="default_persistent" />
<label for="persistent" id="label_persistent">Keep me login</label>
</td>
<td class="login_form_label_field"><a rel="nofollow" href="">Forgot Password? </a>
</td>

</tr>
</tbody>
</table>
</form>
</div>

effpeetee
04-04-2011, 10:46 AM
I have made a few corrections,. Is this what you want? (http://www.exitfegs.co.uk/jns1992.html)

Quite a few HTML tags were missing.
It stll has errors but as I am not certain what you want I have left them.
I am not certain if I have all your CSS

Frank

If you go to the Sources program in my signature, you can find validation programs at the top of the three columns where you can validate your code,

jns1992
04-04-2011, 11:02 AM
could you send me the source code after modification

jns1992
04-04-2011, 11:14 AM
this is all my css:




{
/**
* (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
* (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera
*
* @workaround
* @affected IE8, FF, Webkit, Opera
* @css-for all
* @valid CSS3
*/

body { overflow-y: scroll; }

/*------------------------------------------------------------------------------------------------------*/

/**
* (en) Formatting YAML's basic layout elements
* (de) Gestaltung des YAML Basis-Layouts
*/

/* (en) Marginal areas & page background */
/* (de) Randbereiche & Seitenhintergrund */
body { background: #FFF; }

/* (en) Centering layout in old IE-versions */
/* (de) Zentrierung des Layouts in alten IE-versionen */
body { text-align: center; }
.page_margins { text-align:left; margin: 0 auto; }

/* (en) Layout: width, background, borders */
/* (de) Layout: Breite, Hintergrund, Rahmen */
.page_margins {
margin: 0 auto;
}
.page_margins {
max-width: 95em;
width: auto;
}
.page {
padding: 0 18px;
position: relative;
}
#nav, #main, #extended, #footer { overflow:hidden; min-width: 960px; }

/* (en) Designing main layout elements */
/* (de) Gestaltung der Hauptelemente des Layouts */
#footer { background: #FFF; color: #ccc; }

#nav {
background: #000088;
/* padding-top:10px; */
padding-bottom:10px;
/*padding-top:10px; */
border-bottom: 1px #ddd solid;
}

#main {
background: #fff;
}

#main .c25r { border-left: 1px #eee solid; }

#nav_main{ background: #000088 };

#extended { background: #fff; border-top: 1px #eee solid; }
#extended .c25l, #extended .c50l { border-right: 1px #eee solid; }

#extended .subc { padding: 0 10px; }
#extended .subcl { padding: 0 10px 0 0; }
#extended .subcr { padding: 0 0 0 10px; }

#main, #extended { padding-top: 20px; padding-bottom: 20px; }

#footer { border-top: 1px #eee solid; }
#footer .page { padding: 4px 0px; }

/**
* ------------------------------------------------------------------------------------------------- #
*
* (en) Styling of layout specific elements
* (de) Gestaltung layoutabhängiger Elemente
*/
#footer a { color: #fff; background:transparent; font-weight: bold; }
#footer a:focus,
#footer a:hover,
#footer a:active { background-color: transparent; text-decoration:underline; }

/**
* ------------------------------------------------------------------------------------------------- #
*
* Stylized
*
* (en) Visual styling for skiplink navigation
* (de) Visuelle Gestaltung der Skiplink-Navigation
*
* @section content-skiplinks
*/
/* ----------- stylized ----------- */
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
letter-spacing: 0.5em;
}

#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b8ddf0;
padding-bottom:10px;
}

#stylized label{
display:block;
font-weight:bold;
font-size: 11px;
text-align:right;
width:140px;
float:left;
}

#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
/* width:140px; */
}

#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border: 1px solid #CCCCCC;
width:235px;
margin:2px 0 20px 10px;
height:20px;
}

#stylized input:focus, #stylized input:hover{
background: none repeat scroll 0 0 #F4F4FF;
border: 1px solid #8888CC;
}

#stylized button{
background: none repeat scroll 0 0 #000088;
border: 1px solid #000066;
color: #FFFFFF;
clear:both;
margin-left:150px;
height:31px;
text-align:center;
line-height:31px;
font-size:11px;
font-weight:bold;
width: 135px;
}

#stylized select {
border: 1px solid #CCCCCC;
float:left;
padding:4px 2px;
margin:2px 0 20px 10px;
color: #FFFFFF;
height: 25x;
width: 100px;
}

#stylized select :focus{
border: 1px solid #8888CC;
}


/**
* Login box
*
*/
#login{
float: right;
color: #000000;
direction: ltr;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
text-align: left;
}

#login table tr{
vertical-align: top;
}
#login table tr td{
padding: 0 0 0 14px;
}

#login table tr td .labels{
padding-bottom: 3px;
}

#login td, td.label{
font-size: 11px;
text-align: left;
}

#login label{
font-weight: normal;
margin: 0;
cursor: pointer;
vertical-align: middle;
}

#login #email {
direction: ltr;
}

#login .inputtext, #login .inputpassword {
border-color: #CCCCCC;
margin: 0;
width: 142px;
}

#login.inputtext, #login.inputpassword {
margin: 0;
padding-bottom: 4px;
}

#login textarea, #login .inputtext, #login .inputpassword {
border: 1px solid #CCCCCC;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
padding: 3px;
}

#login .inputtext, #login .inputpassword {
border-color: #CCCCCC;
margin: 0;
width: 142px;
}

#login.inputtext, #login.inputpassword {
margin: 0;
padding-bottom: 4px;
}

#login textarea, #login.inputtext, #login.inputpassword {
border: 1px solid #CCCCCC;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
padding: 3px;
}

#login .menu_login_container label {
margin: 0;
background-position: 0 -48px;
}

#login input.submit{
background: #000088;
}

#login.uiButton, #login.uiButtonSuppressed:active, #login.uiButtonSuppressed:focus, #login.uiButtonSuppressed:hover {
border: 1px solid #000066;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
padding: 2px 6px;
vertical-align: top;
white-space: nowrap;
text-align:center;
line-height: normal !important;
font-size:11px;
font-weight:bold;

}

#login label {
color: #666666;
cursor: pointer;
font-weight: normal;
vertical-align: middle;
width: 155px;
}


#login.login_form_label_field label, #login.login_form_label_field a {
position: relative;
top: -2px;
vertical-align: bottom;
font-weight: normal;
margin: 0;
}

#login td, #login td.label {
font-size: 11px;
text-align: left;
width: 60px;
}

#login.login_form_label_field input {
position: relative;
top: 1px;
vertical-align: bottom;
}
#login.inputcheckbox {
margin-left: 0;
float: left;
}

#login.inputcheckbox {
border: 0 none;
vertical-align: middle;
}

#login .login_form_label_field input {
position: relative;
top: 1px;
vertical-align: bottom;
}

#login.login_form_label_field label, #login.login_form_label_field a {
position: relative;
top: -2px;
vertical-align: bottom;
}

#login.login_form_label_field {
padding-bottom: 3px;
padding-top: 1px;
vertical-align: bottom;
}

#login table tr td {
padding: 0 0 0 14px;
}

#login td, #login td.label {
font-size: 11px;
text-align: left;
}

effpeetee
04-04-2011, 11:14 AM
Here it is.



<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> E-soko - Welcome </title>
<link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
<style type="css/text">
#login.inputcheckbox {
margin-left: 0;
float: left;
}

#login.inputcheckbox {
border: 0 none;
vertical-align: middle;
}

#login .login_form_label_field input {
position: relative;
top: 1px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="login">
<form id="form" name="form" method="post" action="#">
<table cellspacing="0">
<tbody>
<tr>
<td class="labels">
<label for="Email">Email</label>
</td>

<td class="labels">
<label for="pass">Password</label>
</td>

</tr>

<tr>
<td>
<input type="text" tabindex="1" value="ntwali2007@yahoo.fr" id="email" name="email" class="inputtext" />
</td>

<td>
<input type="password" tabindex="2" id="pass" name="pass" class="inputtext" />
</td>

<td>
<label for="u902450_3" class="uiButton uiButtonConfirm"><input type="submit" id="u902450_3" tabindex="4" value="login"></label>
</td>
</tr>

<tr>
<td class="login_form_label_field">
<input type="checkbox" checked="1" name="persistent" id="persistent" value="1" class="inputcheckbox" />
<input type="hidden" value="1" name="default_persistent" />
<label for="persistent" id="label_persistent">Keep me login</label>
</td>
<td class="login_form_label_field"><a rel="nofollow" href="">Forgot Password?</a>
</td>

</tr>
</tbody>
</table>
</form>
</div>


jns1992
View Public Profile
Send a private message to jns1992
Send email to jns1992
Find More Posts by jns1992
Add jns1992 to Your Contacts



Bookmarks
del.icio.us StumbleUpon Google Digg
</body>
</html>

jns1992
04-04-2011, 11:17 AM
Ok, try to check all my css code. I have posted it above.

------------------
Jonas

jns1992
04-04-2011, 11:28 AM
I copied this code, and pasted it in notepad, but not change, try to do it too

effpeetee
04-04-2011, 12:13 PM
I have done three versions.

Here (http://www.exitfegs.co.uk/jns1992.html)
Here (http://www.exitfegs.co.uk/jns1992b.html)
and Here. (http://www.exitfegs.co.uk/jns1992d.html)

See if any one is prefered.

Frank

I have made a style shett for the last one. layout_grids.css

[URL="http://www.exitfegs.co.uk/layout_grids.css"[/URL]

jns1992
04-04-2011, 12:46 PM
Thanks, but I have other css files, which manages other parts of my web page, and it seems to me that these scripts css change the layout of the page that you have just help me, I will send you these other scripts css, you can look that makes "keep me login" is returned to the line.

content.css:

/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */

p { line-height:1.5em; margin:0 0 1em 0; }

blockquote, cite, q {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
blockquote { margin:0 0 1em 1.6em; color:#666; }

strong,b { font-weight:bold; }
em,i { font-style:italic; }

big { font-size:116.667%; }
small { font-size:91.667%; }

pre { line-height:1.5em; margin:0 0 1em 0; }
pre, code, kbd, tt, samp, var { font-size:100%; }
pre, code { color:#800; }
kbd, samp, var, tt { color:#666; font-weight:bold; }
var, dfn { font-style:italic; }

acronym, abbr {
border-bottom:1px #aaa dotted;
font-variant:small-caps;
letter-spacing:.07em;
cursor:help;
}

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

hr {
color:#fff;
background:transparent;
margin:0 0 0.5em 0;
padding:0 0 0.5em 0;
border:0;
border-bottom:1px #eee solid;
}

effpeetee
04-04-2011, 02:19 PM
The difficulty is that we don't know what looks you are aiming for. Is the present one that I amended what you want or if not what do you want changed?
Is the last css you posted for the same page or for a different.one?

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum