Foros del Web » Creando para Internet » CSS »

Centrar pagina html+css

Estas en el tema de Centrar pagina html+css en el foro de CSS en Foros del Web. HOLA BUEN DIA.. SOY NOVATO EN ESTYO.. ACA LES PEGO MI COGIDO ME EXPLICAN PORQUE NO PUEDO VER MI PAGINA CENTRADA EN EL MONITOR? QUE ...
  #1 (permalink)  
Antiguo 29/10/2012, 11:37
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 12 años, 1 mes
Puntos: 0
Centrar pagina html+css

HOLA BUEN DIA.. SOY NOVATO EN ESTYO.. ACA LES PEGO MI COGIDO ME EXPLICAN PORQUE NO PUEDO VER MI PAGINA CENTRADA EN EL MONITOR? QUE TENGO MAL?
YO PENSE Q CON EL MARGIN AUTO BASTABA

<html>
<head>
<title>distribuidorazend</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#body {
display:block;
margin:0;
padding:0;
background-color:#FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
#contenedor{
margin:auto;
width:800px;
}

div.cabecera {
width: 800px;
}

#index-01 {
position:absolute;
left:0px;
top:0px;
width:586px;
height:34px;
}

#ventatelefonica {
position:absolute;
background:url(images/ventatelefonica.gif);
left:586px;
top:0px;
width:201px;
height:109px;
}

#index-03 {
position:absolute;
left:787px;
top:0px;
width:13px;
height:481px;
}

#index-04 {
position:absolute;
left:0px;
top:34px;
width:19px;
height:566px;
}

#logozen {
position:absolute;
background:url(images/logozen.gif);
left:19px;
top:34px;
width:129px;
height:75px;
}

#index-06 {
position:absolute;
left:148px;
top:34px;
width:438px;
height:42px;
}

#botonera {
position:absolute;
background:url(images/botonera.gif);
left:148px;
top:76px;
width:438px;
height:33px;
}

.botones{
height:auto;
font-family: Arial, Helvetica, Sans Serif;
font-size: 14px;
display: inline;
margin: 0 12px 0 0;
}


.botones a{
text-decoration:none;
color:#000000;
padding: 2px 7px 2px 7px;
color: #666;
text-decoration: none;
}

.botones a:hover{
background-color: #9cce72;
font-weight:bold;
font-size: 15px;
color: #ffffff;

}

#reflejologo {
background:url(images/reflejologo.gif) no-repeat;
position:absolute;
left:19px;
top:109px;
width:129px;
height:49px;
}

#index-09 {
position:absolute;
left:148px;
top:109px;
width:47px;
height:154px;
}

div.contenido-rojo {
position:absolute;
background:url(images/contenido_rojo.gif) no-repeat;
left:195px;
top:109px;
width:592px;
height:372px;
padding-left: 20px;
padding-rigth: 20px;
font-size: 14px;
}

#index-11 {
position:absolute;
left:19px;
top:158px;
width:129px;
height:105px;
}

div.contenido-verde {
position:absolute;
background:url(images/contenido_verde.gif) no-repeat;
left:19px;
top:263px;
width:157px;
height:214px;
padding-left: 15px;
padding-top: 20px;
font-size: 14px;
}

#index-13 {
position:absolute;
left:176px;
top:263px;
width:19px;
height:218px;
}

#index-14 {
position:absolute;
left:19px;
top:477px;
width:157px;
height:4px;
}

#index-15 {
position:absolute;
left:19px;
top:481px;
width:2px;
height:119px;
}

#logofacebook {
position:absolute;
background:url(images/logofacebook.gif);
left:21px;
top:481px;
width:82px;
height:118px;

}

.columna1 {
position:absolute;
background:url(images/columna1.gif);
left:103px;
top:481px;
width:232px;
height:118px;
border: 0;
margin: 0;
padding: 0;

}

.columna2 {
position:absolute;
background:url(images/columna2.gif);
left:335px;
top:481px;
width:232px;
height:118px;

}

.columna3 {
position:absolute;
background:url(images/columna3.gif);
left:567px;
top:481px;
width:232px;
height:118px;
font-size: 12px;

}

ul{
list-style:none;
font-size: 12px;
margin-top:30px;
}

li{
list-style:none;
font-size: 12px;

}

#index-20 {
position:absolute;
left:799px;
top:481px;
width:1px;
height:119px;
}

#index-21 {
position:absolute;
left:21px;
top:599px;
width:778px;
height:1px;
}
-->
</style>

<head></head>
<body>
<div id="contenedor">
<div class="cabecera">
<div id="index-01"></div>

<div id="ventatelefonica"></div>

<div id="index-03"></div>
<div id="index-04"></div>

<div id="logozen"></div>

<div id="index-06"></div>

<div id="botonera">
<div class="botones"><a href="#">Inicio</a></div>
<div class="botones"><a href="#">Nosotros</a></div>
<div class="botones"><a href="#">Ubicacion</a></div>
<div class="botones"><a href="#">Productos</a></div>
<div class="botones"><a href="#">Contacto</a></div>
</div>
</div>

<div id="reflejologo"></div>

<div id="index-09"></div>

<div class="contenido-rojo">
<h1>Gracias por su visita!</h1>
<p>Distribuidora Zen te brindara la mejor atención y respaldo post venta.</p>
<p>Te ofrecemos una amplica gama de productos y servicios para tu compra.</p>
<p>Cualquier inquietud puede contactarnos a cualquiera de los teléfonos</p>
<p>mencionados en nuestro portal web.</p>
</div>
<div id="index-11"></div>

<div class="contenido-verde">
<p>Electrodomesticos</p>
<p>Muebles</p>
<p>Camaras de Segutidad</p>
<p>Instalacion de Internet</p>
<p>Todo en cuotas!!</p>
</div>

<div id="index-13"></div>
<div id="index-14"></div>
<div id="index-15"></div>

<div id="logofacebook"></div>

<div class="columna1">
<ul class="mediosdepago">
<h3>Medios de pago</h3>
<li>Recibos de sueldo</li>
<li>Cheques</li>
<li>Tarjetas de credito y debito</li>
<li>Creditos a sola firma</li>
</ul>
</div>
<div class="columna2">
<ul class="oficinacomercial">
<h3>Oficina comercial</h3>
<li>Recibos de sueldo</li>
<li>Cheques</li>
<li>Tarjetas de credito y debito</li>
<li>Creditos a sola firma</li>
</ul>
</div>
<div class="columna3">
<ul class="locales">
<h3>Locales</h3>
<li>Todo hogar bynon / Bynnon 3132 / Jose Marmol / Tel.:2061-1375 / id:736*10038 / 731*3865 / </li>
<li>Inter Bosques Hogar / Pablo Podesta 1691 / Bosques / Tel.:4221-5248 / id:583*4274 / 731*3865</li>
</ul>
</div>

<div id="index-20"></div>
<div id="index-21"></div>
</div>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 29/10/2012, 12:15
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 10 meses
Puntos: 181
Respuesta: Centrar pagina html+css

No funciona por que estas usando position absolute para crear el layout.

Si no sabes CSS lo mejor es que leas un manual para que entiendas como funciona, si no, tendrás muchos problemas.


Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 29/10/2012, 12:59
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Centrar pagina html+css

<div id="contenedor"> es el div que contiene toda mi pagina y en ningun lado le indico q su posicion sea absolute. me podrias ayudar a corregir mi codigo? o los div que esten adentro del contenedor con posicion absoluta influtyen sobre el contenedor??.. agradeceria tu ayuda
  #4 (permalink)  
Antiguo 29/10/2012, 13:26
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 10 meses
Puntos: 181
Respuesta: Centrar pagina html+css

para centrarlo bastaría con ponerle position:relative al contenedor, con eso tendria que funcionar.

El GRAN problema es que estas creando el layout en base a position absolute, tal ves ahora no veas ningún problema, pero después tendrás cientos de problemas.

Para hacerlo correctamente, habría que re-hacerlo desde 0.



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 29/10/2012, 13:52
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Centrar pagina html+css

claro que problema!.. por ahora lo voy a dejar asi porque es una web con secciones y muy poco contenido. pero voy meterme un poco mas a ver si logro aprender bien. creo la estructura html sin ningún problema pero cuando quiero alinear los DIVS para q se vea todo como el diseño que hice en photoshop me queda todo corrido, entonces como la necesitaba rápido opte porque la opción de photoshop que te crea los divs sobre las imágenes. pero crea divs vacíos para acomodar las cosas. muy des prolijo pero es lo q puedo hacer por ahora

Etiquetas: divs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:22.