how do I take the form on my website to the left?

-1

in the upper part of my web, there is a start image and a register for users, what I want is that on the left the image appears and on the right the registration but I get another one, my code is this:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
"http://www.w3c.org/TR/xhtml11-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="es" />
<meta name="revisit-after" content="15" />
<meta name="rating" content="general" />
<meta name="robot" content="index, follow" />
<meta name="owner" content="primate" />
<title> ejemplo 1 </title>
</head>
<body> 
<img src="14705783_357963464544311_5619060761625284588_n.jpg" height="200" width="200" title="inicio"/>
<style type="text/css">
form {text-align:right;}
legend {text-align:right;}
</style>
<form>  </br>
<fieldset> 
 <legend> Identificacion: </legend>
<label for="Nombre de usuario"> Nombre de usuario </label> </br>
<input type="text" name="Nombre de usuario" id="Nombre de usuario" size="25"  maxlength="20"/> </br>
<label for="Contraseña"> Contraseña </label> </br>
<input type="password" name="Contraseña" id="Contraseña" size="25"  maxlength="20"/> </br>
<input type="submit" name="ingresar" value="ingresar" />
</fieldset> </form> 
</body>
</html>

but when I insert this code I get one under another and, in addition, part of the form goes to the right and another part to the left

    
asked by pedro 05.12.2016 в 04:58
source

1 answer

1

If I understand correctly, the problem is that you want the image and form to appear at the same level (one next to the other), instead of one over the other. So what you need to do is have the image float to the left, and the form will automatically fill the right part of the image.

img[title=inicio] { float:left; }

Now, in order for the content of the form to be shown on the left, you only need to remove the text-align:right that you put for its content. The result would be something like this (by the way, I changed the </br> to the correct <br/> ):

<img src="14705783_357963464544311_5619060761625284588_n.jpg" height="200" width="200" title="inicio"/>
<style type="text/css">
  img[title=inicio] { float:left; }
</style>
<form>  <br/>
  <fieldset> 
    <legend> Identificacion: </legend>
    <label for="Nombre de usuario"> Nombre de usuario </label> <br/>
    <input type="text" name="Nombre de usuario" id="Nombre de usuario" size="25"  maxlength="20"/> <br/>
    <label for="Contraseña"> Contraseña </label> <br/>
    <input type="password" name="Contraseña" id="Contraseña" size="25"  maxlength="20"/> <br/>
    <input type="submit" name="ingresar" value="ingresar" />
  </fieldset> 
</form>
    
answered by 05.12.2016 в 05:36