Foros del Web » Creando para Internet » Diseño web »

Centrar web

Estas en el tema de Centrar web en el foro de Diseño web en Foros del Web. Hola, a ver si me podeis echar un cable, estoy diseñando una web y no consigo centrar la web, me refiero a que en pantallas ...
  #1 (permalink)  
Antiguo 15/01/2013, 08:44
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Centrar web

Hola, a ver si me podeis echar un cable, estoy diseñando una web y no consigo centrar la web, me refiero a que en pantallas grandes sale ajustada a la izquierda en vez de quedar centrada. He probado con etiquetas div u otros codigos pero no lo consigo, supongo que el problema es que antes de la etiqueta body hay algunos div, os pongo el 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>Huerto y Granja</title>
<style type="text/css">
body {
background-image: url();
background-repeat: no-repeat;
background-color: #FFF;
}
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 1px;
top: 2px;
}
#apDiv2 {
position: absolute;
width: 200px;
height: 90px;
z-index: 2;
left: 1px;
top: 168px;
}
#apDiv3 {
position: absolute;
width: 91px;
height: 115px;
z-index: 3;
left: 1px;
top: 257px;
}
#apDiv4 {
position: absolute;
width: 848px;
height: 95px;
z-index: 4;
left: 94px;
top: 1481px;
}
#apDiv5 {
position: absolute;
width: 91px;
height: 1321px;
z-index: 5;
left: 945px;
top: 259px;
}
#apDiv6 {
position: absolute;
width: 150px;
height: 56px;
z-index: 6;
left: 724px;
top: 1416px;
}
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 7;
}
#apDiv8 {
position: absolute;
width: 146px;
height: 115px;
z-index: 7;
left: 103px;
top: 391px;
}
#apDiv9 {
position: absolute;
width: 1968px;
height: 28px;
z-index: 8;
left: 152px;
top: 393px;
}
#apDiv10 {
position: absolute;
width: 471px;
height: 38px;
z-index: 8;
left: 398px;
top: 251px;
}
#apDiv11 {
position: absolute;
width: 133px;
height: 35px;
z-index: 8;
left: 371px;
top: 1415px;
}
#apDiv12 {
position: absolute;
width: 198px;
height: 39px;
z-index: 9;
left: 660px;
top: 254px;
}
#apDiv13 {
position: absolute;
width: 870px;
height: 12px;
z-index: 10;
left: 164px;
top: 1373px;
}
#apDiv14 {
position: absolute;
width: 1071px;
height: 14px;
z-index: 10;
}
#apDiv15 {
position: absolute;
width: 630px;
height: 8px;
z-index: 10;
top: 1382px;
left: 287px;
}
#apDiv16 {
position: absolute;
width: 136px;
height: 115px;
z-index: 11;
left: 110px;
top: 846px;
}
#apDiv17 {
position: absolute;
width: 200px;
height: 76px;
z-index: 12;
left: 172px;
top: -125px;
}
#apDiv18 {
position: absolute;
width: 191px;
height: 61px;
z-index: 12;
left: 552px;
top: 269px;
}
#apDiv19 {
position: absolute;
width: 14px;
height: 886px;
z-index: 13;
left: 271px;
top: 393px;
}
#apDiv20 {
position: absolute;
width: 605px;
height: 931px;
z-index: 14;
left: 302px;
top: 329px;
}
.Estilo185 { font-size: 14px;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#apDiv21 {
position: absolute;
width: 200px;
height: 115px;
z-index: 15;
left: 88px;
top: 274px;
}
#apDiv20 table tr td p strong {
font-style: italic;
}
#apDiv22 {
position: absolute;
width: 128px;
height: 124px;
z-index: 15;
left: 111px;
top: 694px;
}
</style>
</head>

<body><div> id="content" #content { width: 990px; margin: 0 auto; }



<blockquote>
<blockquote>
<blockquote>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="apDiv2"><img src="postehorizontal.jpg" width="1034" height="90" /></div>
<div id="apDiv1"><img src="SUBIDO/www/huertoygranja.jpg" width="1033" height="164" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="apDiv18"><a href="SUBIDO/www/lasgallinas.html"><img src="SUBIDO/www/botongallinas.gif" width="189" height="58" /></a></div>
<p>&nbsp;</p>
<div id="apDiv3"><img src="SUBIDO/www/postevertical.jpg" alt="" width="90" height="1318" /></div>
<div id="apDiv6"><a href="https://www.facebook.com/Huertoygranja?ref=ts&amp;fref=ts"><img src="SUBIDO/www/facebook.gif" width="150" height="55" /></a></div>
<p>&nbsp;</p>
<div id="apDiv11"><a href="mailto:[email protected]" target="_blank"><img src="SUBIDO/www/mail.gif" width="314" height="57" /></a></div>
<p>&nbsp;</p>
<div id="apDiv8">
<table width="145" border="0">
<tr>
<td width="139"><a href="SUBIDO/www/index.html"><img src="SUBIDO/www/inicio.gif" width="142" height="29" alt="inicio" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="SUBIDO/www/contacto.html"><img src="SUBIDO/www/contacto.gif" width="142" height="29" alt="contacto" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="SUBIDO/www/participativa.html"><img src="SUBIDO/www/certificación.gif" width="142" height="29" alt="certificacion" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><div id="apDiv17"><a href="SUBIDO/www/parcelas.html"><img src="SUBIDO/www/botonhuerto.gif" alt="" width="233" height="71" /></a></div></td>
</tr>
<tr>
<td><a href="SUBIDO/www/elhuerto.html"><img src="SUBIDO/www/donde.gif" alt="" width="142" height="29" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="SUBIDO/www/seguimiento.html"><img src="SUBIDO/www/botontuhuerto.gif" alt="" width="142" height="29" /></a></td>
</tr>
</table>
</div>
<p>&nbsp;</p>
<div id="apDiv20">
<table width="598" height="973" border="0">
<tr>
<td width="592" height="969" bgcolor="#FFFFFF"><strong>¿Que es HuertoyGranja.es?</strong>
<p>Es un proyecto que surge por la motivación de ofrecer a la creciente demanda de una parte de la sociedad un consumo alimentario sano, de calidad, responsable desde el punto de vista medioambiental y a la vez justo en lo relacionado con la labor como pequeño productor. Con el compromiso, confianza e ilusión de poder ofrecer ese producto de calidad nace esta <strong>nueva ídea de relación entre productor y consumidor</strong>. </p>
<p class="Estilo185"><strong>¿Que ofrezco?</strong></p>
<p class="Estilo185">Basicamente <strong>hortalizas ecológicas</strong> de temporada y <strong>huevos frescos</strong>. Pero de una manera diferente, pues se trata de que el propio consumidor sin llegar a ser productor esté lo más cerca posible de serlo, pudiendo hacer un seguimiento a través de la web de los productos que consumirá, desde la siembra a la recolección. Puedes escoger una parcela desde 10m2, y si lo deseas tomar decisiones, como que deseas sembrar y en que cantidad. </p>
<p class="Estilo185">&nbsp;</p>
<p class="Estilo185"><img src="SUBIDO/www/Huerto_portada.jpeg" width="406" height="282" /></p>
<p class="Estilo185">También puedes escoger la opción de recibir <strong>cestas con hortalizas de temporada</strong> de manera ocasional, semanal, quincenal o mensualmente.</p>
<p><span class="Estilo185">Si deseas huevos frescos de gallinas camperas alimentadas con cereales también dispondrás de ellos!</span></p>
<p class="Estilo185"><strong>El dia acordado según la zona te llevaremos a casa tus hortalizas y tus huevos frescos, así de fácil.</strong></p>
<p class="Estilo185">Tus hortalizas se regarán con agua de manantial que brota de manera natural durante todo el año y por supuesto mediante riego por goteo. </p></td>
</tr>
</table>
</div>
<p>&nbsp;</p>
<div id="apDiv19"><img src="bp-vertical.gif" width="3" height="976" /></div>
<p>&nbsp;</p>
<div id="apDiv4"><img src="SUBIDO/www/hierbapie.jpg" width="852" height="94" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="apDiv5"><img src="SUBIDO/www/postevertical.jpg" width="90" height="1321" /></div>
<div id="apDiv15"><img src="bp.gif" width="628" height="3" /></div>
</blockquote>
<div id="apDiv16"><img src="SUBIDO/www/trans.gif" width="135" height="138" /></div>
<div id="apDiv22"><img src="EcoFriendlySite.png" width="134" height="130" /></div>
</blockquote>
</blockquote>


</body>
</html>

Última edición por luisfraneg; 15/01/2013 a las 10:03
  #2 (permalink)  
Antiguo 15/01/2013, 12:36
Avatar de ipixelestudio  
Fecha de Ingreso: noviembre-2012
Ubicación: Madrid
Mensajes: 19
Antigüedad: 11 años, 5 meses
Puntos: 2
Respuesta: Centrar web

Hay un sistema para centrar divs mediante CSS con "margin: 0 auto;" y dándole un tamaño al div por ejemplo "width: 700px;"

No sé si esto te puede ayudar.
  #3 (permalink)  
Antiguo 15/01/2013, 12:42
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Centrar web

Quizás si, pero no estoy nada puesto en estos temas y no sé muy bien como hacerlo y lo que he probado no ha funcionado...

Cita:
Iniciado por ipixelestudio Ver Mensaje
Hay un sistema para centrar divs mediante CSS con "margin: 0 auto;" y dándole un tamaño al div por ejemplo "width: 700px;"

No sé si esto te puede ayudar.
  #4 (permalink)  
Antiguo 16/01/2013, 12:41
 
Fecha de Ingreso: mayo-2005
Mensajes: 217
Antigüedad: 19 años
Puntos: 5
Respuesta: Centrar web

Si no sabes de css no te pongas a diseñar web,
es decir es lo basico, todo el diseño gira en torno de css
para centrar un contenido la forma mas facil es mediante css

crea un div general
<body>
<div class="contenedor">
---el resto aqui
</div>
</body>

y luego crea la clase
.contenedor{
width:1024px;
margin:0px auto;
}
Con esto le dices que los marges derecho son automaticos y te centra todo lo que esta dentro.

veo que te estas haciendo un lio con el tema de posicion:absolute
te puedes diseñar una pagina todo con posicion absoluta, te vas a quedar loco
cualquier cambio q hagas te va a complicar todo. y no lo vas a poder centrar

tu web tendria que ser algo asi:

<!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>Huerto y Granja</title>
<style type="text/css">
.wrapper {
width:1024px;
margin:0 auto;
}
.header1{
width:100%;
height:150px;
}
.header2{
width:100%;
height:80px;
}
.der{
width:100px;
float:left;
height:1000px;
}
.centro{
width:824px;
float:left;
}
.contenido{
width:100%;
height:900px;

}
.pie{
width:100%;
height:100px;
}
.izq{
width:100px;
float:1000px;
}

</style>
</head>
<body>
<div class="wrapper">
<div class="header1">Encabezado 1</div>
<div class="header2">Encabezado 2</div>
<div class="der"> columna derecha</div>
<div class="centro">
<div class="contenido">contenido </div>
<div class="pie">Pie </div>
</div>
<div class="izq">columna izquierda</div>

</div>
</body>

Última edición por klyfa; 16/01/2013 a las 12:55
  #5 (permalink)  
Antiguo 16/01/2013, 13:12
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Centrar web

Gracias por la respuesta klyfa pero necesitaba hacerme la web y trato de hacer las cosas con los conocimeientos que tengo, por escasos que sean (estoy haciendola con dreamweaver)

Cuando te refierea a crear la clase quieres decir que esto va justo después de </body>?

.contenedor{
width:1024px;
margin:0px auto;
}
  #6 (permalink)  
Antiguo 16/01/2013, 13:25
 
Fecha de Ingreso: mayo-2005
Mensajes: 217
Antigüedad: 19 años
Puntos: 5
Respuesta: Centrar web

es clase va dentro de la etique siguiente

<style type="text/css">
aqui van todos los estilos
</style>

pero de todas formas con tu codigo no te va a centrar porque todos tus divs tienen posicion absoluta.
  #7 (permalink)  
Antiguo 16/01/2013, 14:09
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Centrar web

Hay alguna solución para solucionar el desaguisado? si creo una tabla y meto todo el contenido de la web sin Div PA se podrá centrar? al menos no tendré que modificarlo todo cuando cambie algo y no me supondrá demasiado trabajo creo.
  #8 (permalink)  
Antiguo 16/01/2013, 16:41
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 11 meses
Puntos: 641
Respuesta: Centrar web

pues sin conocimiento de causa, es imposible tratar de ayudarte, necesitariamos hacerte la chamba.

con los puros divs se puede hacer.

mira este video

http://www.cursosdelwebmaster.com/20...co-html-y.html

desde la primera parte se ve como centrar una web en 95% de los navegadores
  #9 (permalink)  
Antiguo 16/01/2013, 17:07
Avatar de JManuelMV  
Fecha de Ingreso: enero-2013
Ubicación: Apaseo el Alto, Gto, México
Mensajes: 20
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Centrar web

Tendrias que cambiar la posicion de todos tus divs de
position: absolute;
a
position: relative;

y hacer lo que te comentan de poner el margin: 0 auto;

nota: las tablas no se hicieron para maquetar una página web, se hicieron para tabular informacion.
  #10 (permalink)  
Antiguo 16/01/2013, 18:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Centrar web

Cita:
Iniciado por klyfa Ver Mensaje
Si no sabes de css no te pongas a diseñar web
Parecidos razonables. Si no sabes postear código en un foro no postees.

Usen highlight o code, que cada vez que se ve un post así causa ceguera. Si hacen las cosas con el bloc de notas bien, pero al común de los mortales le gustan las fuentes monoespaciadas y coloreadas.
  #11 (permalink)  
Antiguo 17/01/2013, 23:24
Avatar de Luismaster2000  
Fecha de Ingreso: junio-2011
Ubicación: Orizaba, Ver.
Mensajes: 499
Antigüedad: 12 años, 11 meses
Puntos: 31
Respuesta: Centrar web

Es como te dice JManuelMV el problema de tus divs es que los tienes en posicion absoluta asi nunca podras centrarlos

por lo menos tu div el que va a contener a todos los demas debe estar en posicion relativa y los que esten dentro de el puedes tenerlos en absoluta
  #12 (permalink)  
Antiguo 18/01/2013, 01:58
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 5 meses
Puntos: 55
Respuesta: Centrar web

Cita:
Iniciado por luisfraneg Ver Mensaje
...trato de hacer las cosas con los conocimientos que tengo, por escasos que sean (estoy haciendola con dreamweaver)...
Pues si empiezas con Dreamweaver tus conocimientos siempre serán escasos. Pásate a Notepad++, aprenderás más en un mes que en un año con Dreamweaver.

Saludos.

Etiquetas: css, html
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 12:25.