evitar uso de top negativo

DoHITB · #1 (**permalink**) 14/01/2013, 02:04

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

pzin · #2 (**permalink**) 14/01/2013, 07:15

A simple vista diría que no concuerda el código con la imagen. Si tienes un ejemplo funcional o el código completo igual se podría ver mejor.

Yo en principio diría que, según la imagen, hay demasiados elementos div que no hacen falta en el código. Para posicionar el logo, no hace falta meterlo en un elemento, puedes aplicar los estilos directamente sobre la imagen.

DoHITB · #3 (**permalink**) 14/01/2013, 07:47

Hola,

El código que he posteado es de una plantilla que he empezado justo hoy... todo el código que hay es ese...

Solo que el contenido (clase content) y el footer aún no los había empezado...

¿Cómo harías tú el esquema de la imagen que he puesto? Lo que obligatoriamente se tiene que ver es:

- El logo
- topBar
- topBarText

A ver si con tu ejemplo comprendo mejor cómo hacerlo...

Gracias

pzin · #4 (**permalink**) 14/01/2013, 08:02

Es que en realidad sólo tendrías que flotar la segunda caja gris a la derecha y luego si quieres ajustarla con dándole un margen o con posición relativa y luego con top/right.

Me suena el título de tu blog. Yo soy más de la corriente cínica.

DoHITB · #5 (**permalink**) 14/01/2013, 08:25

No acabo de entender a qué te refieres con eso de "flotar" solo el elemento que dices...

Podrías ponerme un ejemplo concreto, ¿por favor?

PD: el blog en realidad es de informática...

pzin · #6 (**permalink**) 14/01/2013, 08:34

Flotar es flotar.

Puse un ejemplo por aquí: http://jsbin.com/abegum/1/edit

DoHITB · #7 (**permalink**) 14/01/2013, 08:47

oooohm...

ya veo mejor cómo tengo que hacerlo... además un buen link para probar!

Gracias!