[ayuda]como arreglar estas etiquetas div una al lado de otra

adamsst · 18 Julio 2013, 07:19 AM

hola a todos anteriormente me dijeron que en vez de tablas utilizara etiquetas div y bueno eso era lo que al principio pensaba hacer pero yo me manejo mucho mejor con tablas pero siempre me han dicho no uses tablas usa etiquetas div y bueno me anime a salir de las benditas tablas y empezar con las div

pero siempre me pasa lo mismo y ahora deseo que me ayuden a solucionar este problema

[align=center]asi se deberia ver la pagina que estoy haciendo esto lo logre con tablas[/align]

[align=center]y asi me quedo luego que empece a probar con etiquetas div[/align]

como hago para que el diseño de abajo me quede como el de arriba

aca el codigo html

Código [Seleccionar]


<!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>Documento sin título</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

<body>






<div id="fotoderecha"><img src="images/Sin título-1.png" width="87px" height="108px" /></div>

<div id="central"><p>Tratamientos Cosmeticos Faciales y Corporales</p></div>

<div id="fotoizquierda"><img src="images/Sin título-2.png" width="135px" height="108px" /></div>    
    
  



<div id="contenedordebotones"><table align="center" width="58%">
  <tr>
    
    <td class="boton1"><a>Inicio</a></td>
    <td class="boton2"><a>Tratamientos Corporales</a></td>
    <td class="boton3"><a>Tratamientos Faciales</a></td>
    <td class="boton4"><a>Contacto</a></td>
    
  </tr>
</table>


</div>


<div id="cuerpo">

    
<img src="images/imagen_inicio.fw.png" width="100%" height="100%" />




</div>



</body>
</html>

y aca el codigo css

Código [Seleccionar]






#fotoderecha{
	
	float: left;
	
	}

#central{
	font-family: "Monotype Corsiva";
	font-size: 30px;
	background-color: #996600;
	height: 109px;
	text-align: center;	
	border-width: 1px; border-style: solid; border-color: black;
	float: left
	
	}

#fotoizquierda{
	
	
	
	
	
	}




#contenedordebotones{margin-top: 8px;
	font-family: "Monotype Corsiva";
	width: 100%;
	line-height: 120%;
	text-align: center;
	font-size: 20px;
	font-style: normal;
	color: #000;
	background-color: #C03;	
	border-width: 1px; border-style: solid; border-color: black;}


.boton1 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }

	 


.boton2  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }



.boton3  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }




.boton4  a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }








#cuerpo {
	margin-top: 3px;
	border-width: 1px; border-style: solid; border-color: black;
	
}

gracias a quien me pueda ayudar

engel lex · 18 Julio 2013, 08:35 AM

hay tablas para algo XD y por ahora no se van a descontinuar en las proximas versiones de HTML... si quieres los div bien, colocales en el css margen correcto (del espacio que tu consideres correcto) largos relativos (en porcentaje)

eso deberia resolver tu problema

Test Foro de elhacker.net SMF 2.1

[ayuda]como arreglar estas etiquetas div una al lado de otra

adamsst

engel lex