Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/01/2013, 02:04
DoHITB
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 8 meses
Puntos: 33
evitar uso de top negativo

Buenas!

Tengo una duda que hace un tiempo vengo arrastrando...

Cuando diseño con CSS, muchas veces tengo que usar top negativo para colocar varias cosas... y no creo que eso pueda ser bueno (quizás es que ha de ser así, no se)

Os dejo un ejemplo para que veáis a lo que me refiero:

Código:
<body>
	<div class="main">
		<div class="top">
			<div class="topBar">
				<div class="topBarText">
				</div>
				<div class="topBarLogo">
					<img src="#" width="86px" height="98px" />
				</div>
			</div>
		</div>
		<div class="content">
		</div>
		<div class="footer">
		</div>
	</div>
</body>
Código:
.main{margin-left:auto;margin-right:auto;margin-top:auto;}
.top{height:98px;}
.topBar{top:19px;height:60px;position:relative;}
.topBarLogo{top:-19px;width:86px;height:98px;}
.content{}
.footer{}
Es decir, lo que busco es algo así:



Siendo:

Código:
Rojo: main
Azul: top
Verde: topBar
Gris: topBarText / topBarLogo
Como veis, tengo que poner "top:-19px" a la imagen...

¿Cómo se puede solventar esto?

Gracias