Problema con Divs

dksoft · #1 (**permalink**) 22/06/2011, 09:56

Hola.. pues soy un poco nuevo en esto del CSS entonces andaba diseñando un pequeño login .. pero pss tengo un problema.. miren se los muestro

Ignoren los colores .. jeje solo que son solo para distingir las divs..

el problema que tengo es que al escribir texto sobre el diseño las DIVS se separan y se ve un espacio muy feo.. alguna idea?

Screen Shot:

Código HTML:

<!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>Login | {$sitename}</title>
<style>
.warp {
	background: url(images/brush.png) no-repeat;
	padding: 50px;
	margin: auto;
	width: 470px;
}
.head {
	height: 120px;
	background-color: #903	
}
.bar {
	height: 30px;
	background-color: #922;
}
.contenido {
	background-color: #966
}
.text {
	margin: 10px	
}
.footer {
	height: 25px;
	background-color: #306;
}
h1 {
	font-size: 15px;
}
body {
	background-image: url(images/bgalls.png);
	background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="warp">
<div class="head"></div>
<div class="bar"></div>
<div class="contenido">
<div class="text">
<h1 align="center"><strong>Administracion</strong></h1>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">asd </p>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>

jluisfg · #2 (**permalink**) 22/06/2011, 11:28

Es por el margen de la etiqueta h1. Te recomiendo que le pongas un padding a todas tus divs para evitar esto.

dksoft · #3 (**permalink**) 22/06/2011, 11:37

podrias ponerme un ejemplo?.. soe muy nuevo >_<

dksoft · #4 (**permalink**) 23/06/2011, 08:54

ayudaa?? !!

jomaruro · #5 (**permalink**) 23/06/2011, 13:08

Hola:

¿Que te parece si pones la url de tu página o, si no la has subido todavía, pones el código completo HTML y CSS para que podamos hacer ayudarte? Es que el adivino está de vacaciones por estress.

Saludos.

dksoft · #6 (**permalink**) 23/06/2011, 14:11

no se si has visto el codigo que puse abajo de la foto?...

ese es el codigo completo.. "menos las imagenes".. que solo es 1 xD pero puedes prbarlo copiandolo y guardandolo con .html o.o

jomaruro · #7 (**permalink**) 24/06/2011, 03:58

Hola:

Suprime este margen:

Código CSS:

Ver original.text {
    margin: 10px;
}

Saludos.

dksoft · #8 (**permalink**) 24/06/2011, 07:36

Omg .. no funciona, ni poniendo “panding 0px;”
Ni quitando Margin.. puff .. Alguna otra idea?.. Pueden probarlo ustedes.. No funciona D: ¡

kseso? · #9 (**permalink**) 24/06/2011, 08:26

Utilice un reset, aunque sea el mini
*{margin: 0; padding:0;}

dksoft · #10 (**permalink**) 24/06/2011, 10:02

Cita:

Iniciado por kseso?

Utilice un reset, aunque sea el mini
*{margin: 0; padding:0;}

Perfecto.. ! Me funciono :D .. Gracias !! . mi pregunta es.. porque el padding lo arreglo?