01/12/2009, 07:24
|
| | | Fecha de Ingreso: diciembre-2009
Mensajes: 4
Antigüedad: 14 años, 4 meses Puntos: 0 | |
| Centrar DIV... lo doy por imposible.
Hola, éste es mi primer post en el foro y como no, para pedir ayuda. Mi nombre es Alex, en mi tiempo libre me dedico al diseño gráfico como hobby, ahora estoy intentando adentrarme en el mundo del CSS para poder hacer mi propio theme para Wordpress.
Estoy intentando centrar un div pero no lo consigo de ninguna manera, aquí está el "resultado": theadboy . com/party/test/ (no puedo poner enlaces, así que deberéis copiar y pegar sin los espacios, sorry).
El div que quiero centrar es el de "contenido", que esté en el mismo lugar que el background de arriba, el de los edificios. Aquí dejo el código, agradecería mucho que me echaran un cable... ya que he leído en mil foros y todo lo que pruebo no me funciona, seguro que tengo algún fallo tonto.
He eliminado toda propiedad que pudiera centrar el div para "facilitar" la ayuda.
Gracias por adelantado, un saludo.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" w3 . org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>THE ADBOY!</title>
<style type="text/css">
/* RESET CSS */
*{ margin: 0; padding: 0; border: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
li { list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* FIN RESET CSS */
/* THE ADBOY CSS */
body {
background: #1a1a1a url("images/bg.jpg") no-repeat top;
}
div#logo {
background-image: url("images/logo.png");
background-repeat: no-repeat;
width: 232px;
height: 39px;
position:absolute;
left:44%;
top:60px;
}
div#menu-bar {
background-image: url("images/menu_bg.png");
background-repeat: repeat-x;
width: 100%;
height: 29px;
position: absolute;
top: 0px;
left: auto;
z-index:1;
filter: alpha(opacity=80); -moz-opacity:.80; opacity:.80;
}
div#destacado {
background-color: #000;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 400px;
filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;
}
div#contenido {
background-color: #333333;
width: 1200px;
height: 100%;
position: absolute;
top: 415px;
filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;
}
/* FIN THE ADBOY CSS */
</style>
</head>
<body>
<div id="logo"></div>
<div id="menu-bar"></div>
<div id="destacado"></div>
<div id="contenido"></div>
</body>
</html>
|