Alinear Div al TOP

chocola-t · #1 (**permalink**) 14/08/2008, 02:31

Hola! Estoy maquetando una página y no logro que el div lateral (derecha) suba hasta arriba del todo y se alinee con los de la izquierda.

código del div de la banda derecha:

Código:

#BDreta_index{
	width:275px;
	height:250px;
	padding: 0px;
	background-color : #ffffff;
	text-align: justify;
	float:right;
	margin: 5px;
	vertical-align: top;
}

DragonX · #2 (**permalink**) 14/08/2008, 06:16

ponele a tu CSS esto

Cita:

*{margin:0;padding:0;}

chocola-t · #3 (**permalink**) 14/08/2008, 08:21

Esto lo he probado, pq he buscado en el foro.

edtio: ahora lo acabo de probar y lo unico que hace es alinearse a la rerecha del todo... pero sigue sin subir hacia el top!! :(

Código:

#BDreta_index{
	width:275px;
	height:250px;
	text-align: justify;
	float:right;
	left:576px;
	margin:0;
	padding:0;
	margin:0;padding:0;
}

Mikmoro · #4 (**permalink**) 14/08/2008, 09:46

¿Por qué no pones el resto del html y la css para que veamos qué le empuja hacia abajo?.

chocola-t · #5 (**permalink**) 14/08/2008, 11:05

Aki tienes el css:

Código:

@charset "utf-8";
/* CSS Document */

BODY {
	background : #343434 url(images/fondo.gif) repeat;
	font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #666666;
	margin : 10px 0px 20px 0px;
	text-align: center;
	margin: 0;
	padding: 0;

}



#contingut{
text-align: left;
width: 800px;
height: 20px;
background-color : #333333;
margin: auto;
} 

H1{
font-size: 12pt;
}

#Informacions{
	width:450px;
	height:250px;
	margin-left: 20px;
	padding: 5px 0px 10px 0px;
	background-color : #ffffff;
	float:left;
	text-align: justify;
	margin-top:10px;
	padding-top:5px;
	
} 

#BDreta_index{
	width:275px;
	height:250px;
	text-align: justify;
	float:right;
	left:576px;
	margin:0;
	padding:0;
} 

#Barra_nav{
	width:750px;
	height:15px;
	max-height:37px;
	max-width:750px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:2px;
	margin-bottom:5px;
	margin-top: 5px;
	text-align:right;
	text-shadow:#FFFFFF;
	padding-top:5px;
	padding-bottom: 0px;
	text-decoration: blink;
}

#Credits{
	width:750px;
	height:24px;
	max-height:40px;
	max-width:750px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:2px;
	margin-bottom:14px;
	margin-top: 2px;
	text-align:center;
	text-shadow:#FFFFFF;
	padding-top:2px;
	padding-bottom: 0px;
	text-decoration: inherit;
}

#BLogin{
	width:260px;
	height:275px;
	margin-left: 20px;
	padding: 0px 5px 10px 5px;
	background-color : #E5E5E5;
	float:left;
	text-align: justify;
	margin-top:10px;
	padding-top:10px;
	vertical-align:top;
	
} 

#Imatge{
	width:177px;
	height:168px;
	left: 645px;
	top: 253px;
	margin-left: 50px;
	margin-top: 50px;
	vertical-align:middle;
}

y aki el html

Código:

   <link href="estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {
	color: #FFFFFF;
	font-weight: bold;
	margin:0;
	padding:0;
}
.Estilo2 {color: #FFFFFF}
-->
</style>
<div id="contingut">
	<div align="center">
</div>
<head>
<title>Colla Joves 1970-2008</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Tue Aug 12 19:11:41 GMT+0200 (Hora de verano romance) 2008-->
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#333333">
<table border="0" cellpadding="0" cellspacing="0" width="775">
<!-- fwtable fwsrc="plantilla.png" fwpage="Página 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "359400552" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="775" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td><img name="index_r1_c1" src="index_r1_c1.jpg" width="775" height="11" border="0" id="index_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="11" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r2_c1" src="index_r2_c1.jpg" width="775" height="127" border="0" id="index_r2_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="127" border="0" alt="" /></td>
  </tr>
  <tr>
   <td valign="middle" background="index_r3_c1.jpg">
   
   <!--Menu navegació-->
   <div class="Estilo1" id="Barra_nav" span >Última actualització: 12/08/2008</div></td>
   
   <td><img src="spacer.gif" width="1" height="40" border="0" alt="" /></td>
  </tr>
  <tr>
   <td bgcolor="#FFFFFF">
   
   
   <div id="Informacions">
	<h1>Base de dades Castells Colla Joves Xiquets de Valls</h1>
    <p> En aquesta plana web podreu trobar tota la informació dels castells realitzats des de 1970 fins a l'actualitat, les poblacions, el tipus de castell, fotografies i informació relativa a les actuacions.</p>
    <p>	El fet de ser una de les colles punteres, obliga a portar correctament documentada les actuacions i diades realitzades al llarg de tota la història. </p>
    <p>Gràcies a una Base de Dades ben organitzada i actualitzada, podreu consultar qualsevol actuació a partir de diferents dades, com pot ser per any, per població, per castell, etc...</p>
    <p>El procés d'actualització actualment es basa en la documentació històrica i dels darrers anys de la Colla. </p>
    </div>
    
    <!-- INFORMACIÓ 2 -->
    
    <div id="Informacions">
    <h1> Notícia 2: Informacació actualització </h1>
    <p> Us informem que s'han acualitzat diferents actuacions dels anys 2001, 2006. </p>
    </div>
    
    
<!-- Bloc DRETA -->

	<div "id="BDreta_index">
     <div align="center" id="Imatge">de</div>
	</div>
   <td><img src="spacer.gif" width="1" height="480" border="0" alt="" /></td>
  </tr>
 
  

  <tr>
   <td background="index_r5_c1.jpg">
   		<div id="Credits"><span class="Estilo2">Colla Joves Xiquets de Valls.&copy; 2008. Valls<br>
        Diseny Web i Maquetació: Jordi Reverté i Marín | Programació base de dades: Joan Martinez </span></div>   </td>
   <td><img src="spacer.gif" width="1" height="42" border="0" alt="" /></td>
  </tr>
</table>
</body>
</html>

Mikmoro · #6 (**permalink**) 14/08/2008, 11:23

Dos cosas:

1.- no debes usar dos veces el mismo ID (Informacions). El ID, como en todo en la informática, debe ser único.

2.- creo que el asunto lo podrás solucionar poniendo el div

<div "id="BDreta_index">

antes que los dos de "Informacions". Simplemente coge todo el bloque y colócalo delante de los otros dos, a ver qué pasa.

chocola-t · #7 (**permalink**) 19/08/2008, 09:27

Mikmoro, gracias!

He cambiado el orten. Primero he escrito el bloque derecho y despues los bloques centrales. Asi queda de maravilla!! :) la combinación para 4 bloques es:

derecha - central - derecha - central. Así me queda bién cuadrada! :)

Lo del ID no entiendo pq lo dices? debo duplicar el ID si quiero poner por ejemplo 3 bloques de Informacions? (Informacions1, Infromacions2...?)

Gracias por contestar! :)

Mikmoro · #8 (**permalink**) 19/08/2008, 11:34

Cita:

Iniciado por chocola-t

Lo del ID no entiendo pq lo dices? debo duplicar el ID si quiero poner por ejemplo 3 bloques de Informacions? (Informacions1, Infromacions2...?)

Así es, el ID es un identificador único y no se debe repetir. Si quieres dar el mismo formato a varios bloques debes cambiar el ID por class, que es la forma de que varios bloques tengan la misma clase sin problemas.

chocola-t · #9 (**permalink**) 23/08/2008, 03:26

Lo tengo metido! No sabia esto de los ID y los class. Ahora funciona todo perfecto! :)

Gracias.

victor654321 · #10 (**permalink**) 23/08/2008, 08:12

Cita:

Iniciado por chocola-t

Hola! Estoy maquetando una página y no logro que el div lateral (derecha) suba hasta arriba del todo y se alinee con los de la izquierda.

código del div de la banda derecha:

Código:

#BDreta_index{
	width:275px;
	height:250px;
	padding: 0px;
	background-color : #ffffff;
	text-align: justify;
	float:right;
	margin: 5px;
	vertical-align: top;
}

respuesta: prueba utilizando

position: absolute toma este ejemplo
<STYLE>
.cuadro{
color:#fff;
(position: absolute; ) <--- PRUEBA CON ESTO
top: 1.5 cm;
left: 6cm;
}
</STYLE>
</HEAD>
BODY BGCOLOR: ... COLOR: ... MARGIN(ME DA LADILLA PONERLOS TODOS)
<DIV CLASS=cuadro>control total</DIV>
marico el que lo lea
</BODY>
</HTML>

_Maxi · #11 (**permalink**) 23/08/2008, 15:32

Si quieres que 2 div del mismo nivel, estén uno al lado del otro, tienes que ponerles a ambos en float. Left o right, como te guste. Si pones los 2 en float: left; el que aparezca primero irá mas a la izquierda.

A partir de eso fijate que lo vas a hacer andar bien, no hace falta usar position absolute ni nada de eso.