Ver Mensaje Individual
  #3 (permalink)  
Antiguo 12/03/2011, 15:01
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: una duda de maquetacion...

aunque yo también recien que empiezo en la maquetación, el html está mal. ha de ser así
Cita:
<div id="crditos">
<div id="creditos-left">fdgsdfgdsfgdsfgdsfgsdfgdfgdsfgdfg</div>
<div id="creditos-right">Colocar aquí el contenido para id "creditos-right"</div>
</div>
para un caso tan básico como el que muestras, realmente no hace falta. pero para una maquetación mas compleja es recomendabel usarlo.
algo mas complejo
Cita:
<!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>Pilar Migallón</title>
<style type="text/css">
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#contenedor {
width: 734px;
margin-top: 300px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#contenedor #logo {
height: 256px;
width: 256px;
position: absolute;
right: -50px;
top: -215px;
}
#contenedor #cuerpo-1 {
background-color: #FF0000;
height: 54px;
width: 734px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
}
#contenedor #cuerpo-2 {
background-color: #CCCCCC;
height: 54px;
width: 734px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
}
#contenedor #cuerpo-3 {
background-color: #0000CC;
height: 54px;
width: 734px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
}





#creditos {
margin-top: 10px;
padding: 2em 0;
overflow: hidden;
background-color: pink;
}


#creditos-left {
background-color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: left;
padding-top: 7px;
padding-left: 12px;
float: left;
width: 40%;
}
#creditos-right {
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
float: right;
width: 30%;
text-align: right;
padding-top: 7px;
padding-right: 12px;
}
</style>
</head>
<body class="fondo">
<div id="contenedor">
<div id="logo"><img src="links/Safari.png" width="256" height="256" /></div>
<div id="cuerpo-1"></div>
<div id="cuerpo-2"></div>
<div id="cuerpo-3"></div>
<div id="creditos">
<div id="creditos-left">fdgsdfgdsfgdsfgdsfgsdfgdfgdsfgdfg</div>
<div id="creditos-right">Colocar aquí el contenido para id "creditos-right"</div>
</div>
</div>
</body>
</html>