Css help for a form

**d-machine** · 09-07-2009, 10:11 PM

Hi,

I try to create a right to left form without using any tables,
but I don't know where to start.

This is the structure of what I'm looking for:

I'll really appreciate any kind of help!

**davelf** · 09-08-2009, 01:11 AM

here you go..

Code:

<!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=utf-8" />
<title>Float left</title>
<style>
li{
float:left;
list-style:none;
padding-left:10px; <!--to make space between li-->
}
</style>
</head>

<body>
<ul>
	<li><input type="button" value="Button"/></li>
    <li><input type="button" value="Button"/></li>
  	<li><input type="text" /></li>
    <li><input type="text" /></li>
</ul>
</body>
</html>

good luck...

**boogyman** · 09-08-2009, 01:30 AM

Originally Posted by davelf

here you go..

Code:

<!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=utf-8" />
<title>Float left</title>
<style>
li{
float:left;
list-style:none;
padding-left:10px; <!--to make space between li-->
}
</style>
</head>

<body>
<ul>
	<li><input type="button" value="Button"/></li>
    <li><input type="button" value="Button"/></li>
  	<li><input type="text" /></li>
    <li><input type="text" /></li>
</ul>
</body>
</html>

good luck...

You forgot the text information

HTML Code:

<style>
fieldset ul {list-style-type:none}
fieldset ul li {display:inline; position:relative}
fieldset ul li label {position:absolute; top:100%; right:0}
</style>

<form>
<fieldset>
	<legend></legend>
    <ul>
        <li><input type="button" name="" value=""></li>
        <li><input type="button" name="" value=""></li>
        <li><input type="text" name="input1" id="input1" value=""> <label for="input1">TEXT</label></li>
        <li><input type="text" name="input2" id="input2" value=""> <label for="input2">TEXT</label></li>
    </ul>
</fieldset>
</form>

**d-machine** · 09-08-2009, 09:25 PM

Hi,

When I add this to my html, it seems to work in IE, FF and Opera but with Chrome it makes some problems, it is breaking the line for some reason:

PHP Code:


<!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=utf-8" />

<title>Trial</title>

<style type="text/css">



body {

    background-image:url(http://www.westciv.com/style_master/house/tutorials/quick/rising_tide/images/header-background.jpg);

    background-position:center;

    background-repeat:repeat;

    padding:0;

    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    text-align:center;

}



#pictureline {

    background-image:url(http://i.telegraph.co.uk/telegraph/multimedia/archive/00995/olazabal_995959c.jpg);

    background-repeat:repeat-x;

    height:9px;

    width:100%;

    position:absolute;

    top:63px;

    z-index:1;

}



#myhead {

    position:absolute;

    text-align:left;

    z-index:2;

    width:970px;

    padding:0;

}



#myhead ul{

    color:#8B8B8B;

    font-size:12px;

    margin: 0;

    padding: 0;

    float: left;

    height:111px;

}



#myhead ul li{

     list-style-type: none;

     display: inline;

     vertical-align:text-top;

}



#header{

    background-color:#000000;

    height:63px;

    width:100%;

    z-index:1;

    padding:0;

    margin:0;

}



.black {

    margin:0 auto;

    width: 970px;

}



li.loginform{

    padding:15px 0 0 0;

    position:absolute;

    width: 648px;

    text-align:right;

}



#username, #password{

    background-color: #242424;

    border: 1px solid #50514D;

    width: 140px;

    height: 22px;

    color:#F3F3F1;

    font-size: 14px;

    vertical-align: 4px;

    margin:0;

    padding:3px 7px 0 0;

}



.but{

    background-color:#06F;

    color:#FFFFFF;

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;

    width:94px;

    height:28px;

    border:0px solid #ffffff;

}



fieldset ul {list-style-type:none}

fieldset ul li {display:inline; position:relative}

fieldset ul li label {position:absolute; top:100%; right:0}



</style>

</head>



<body>

<div class="black">



<div id="myhead">

<ul>

 <li><a href="http://loud.co.il"><img src="http://fineartamerica.com/images-medium/vanishing-landscpae-david-howells.jpg" alt="" border="0" width="320" height="111" /></a></li>

 <li class="loginform" dir="rtl">

 <form action="">

<fieldset>

    <legend></legend>

    <ul>

        <li><input type="button" name="" value="Enter" /></li>

        <li><input type="button" name="" value="Exit" /></li>

        <li><input type="text" name="input1" id="input1" value="" /> <label for="input1">Class</label></li>

        <li><input type="text" name="input2" id="input2" value="" /> <label for="input2">Type</label></li>

    </ul>

</fieldset>

 </form>

 </li>

</ul>



</div>

</div>



<div id="header">

</div>

<div id="pictureline">

</div>



</body>

</html>