centrar mi futura página web

canelat · #1 (**permalink**) 17/11/2010, 04:40

Hola a todos:

Antes de nada me gustaría decir que soy nueva, he descubierto el foro por casualidad, y me he propuesto crear mi propia págin web, así que estoy más perdida que yo que se!!!

Muchas gracias a los que tengais la paciencia de ayudarme!!

A ver:
He dibujado la página web en photoshop y después la he pasado a dreamweaver.
El problema es que tengo por un lado un portatil y por otro lado una tele de 19 pulgadas que uso de monitor. Entonces si configuro la página en el portatil, en el monitor se ve a la izquierda, y si la configuro en el monitor en el portatil se ve a la derecha....
Como lo soluciono????

ahhhh, y al abrir dreamweaver, en el código tengo esto:

<head>
<title>El titulo de mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:840px;
top:234px;
width:140px;
height:615px;
z-index:1;
}

Muchas gracias!

Klafhor · #2 (**permalink**) 17/11/2010, 06:08

en tal caso no uses position absolute con coordenadas fijas, resumiendo, borra:

position:absolute;
left:840px;

y cambialo por
margin:0 auto

o pasa del css y centralo con las propias etiquetas <center> del html, pero te recomiendo dejarlo con css

<head>
<title>El titulo de mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
margin:0 auto;
top:234px;
width:140px;
height:615px;
z-index:1;
}

canelat · #3 (**permalink**) 17/11/2010, 06:22

eso no me funciona.....

Se me va la página web hacia abajo e izquierda y se quedan unas letras de un menú arriba de todo y a la izquierda también...

Se me desmonta todo....... y no me queda nada centrado......

Klafhor · #4 (**permalink**) 17/11/2010, 07:03

usa la etiqueta html (quitando el position absolute y el left como antes)

<head>
<title>El titulo de mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
top:234px;
width:140px;
height:615px;
z-index:1;
}

y donde tengas el div1, añade el center
<center><div>.........</div></center>

otra seria usar el align:center en css, aunque esa es para el texto, nose, hay muchas formas...

canelat · #5 (**permalink**) 17/11/2010, 07:04

He estado mirando unos cuantos posts del foro sobre este tema, probando con mi página web, pero no me coincide nada....
Quizás el "problema" es que he partido de una imagen de photoshop. dentro de esa imagen tengo que dibujar div pa para poder escribir dentro.
Mi página no tiene marcos. .....

Muchas gracias

canelat · #6 (**permalink**) 17/11/2010, 07:05

perdon no había leido esta respuesta.
voy a probar

canelat · #7 (**permalink**) 17/11/2010, 07:11

Cita:

Iniciado por Klafhor

usa la etiqueta html (quitando el position absolute y el left como antes)

<head>
<title>El titulo de mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
top:234px;
width:140px;
height:615px;
z-index:1;
}

y donde tengas el div1, añade el center
<center><div>.........</div></center>-----------a ver que yo me entere:
sería así?:
#<center><div> {
top:234px;
width:140px;
height:615px;
z-index:1;
</div></center>
}

otra seria usar el align:center en css, aunque esa es para el texto, nose, hay muchas formas...

JavierB · #8 (**permalink**) 17/11/2010, 07:49

Hola canelat

Muevo tu tema al foro de CSS desde Web general.

Saludos,

DragonX · #9 (**permalink**) 17/11/2010, 07:55

Código HTML:

Ver original<head>
<title>El titulo de mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
margin:0 auto;
width:140px;
height:615px;
z-index:1;
}

Slds.-

canelat · #10 (**permalink**) 17/11/2010, 08:35

javierB perfecto, no sabía que tenía que ir en CSS.

DragonX -------- no funciona.......

Pero gracias por la respuesta.

no entiendo por que no sale centrada......... aaaaarrrrrrrrrrrggggggggg

DragonX · #11 (**permalink**) 17/11/2010, 08:40

podrias poner todo tu HTML por favor.

canelat · #12 (**permalink**) 17/11/2010, 08:49

Claro!

ahí va:

<html>
<head>
<title>Canela y tu final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="apDiv1">
<h1 align="left" class="Estilo3"> <a href="Recetas.html">Recetas</a></h1>
<h1 align="left" class="Estilo3"><a href="Postres.html">Postres</a></h1>
<h1 align="left" class="Estilo3">Vida sana</h1>
<h1 align="left" class="Estilo3">Productos de temporada</h1>
</div>
<img src="im%e1genes/Canela-y-tu-final.jpg" width="1020" height="1000" alt="">

</body>
</html>

DragonX · #13 (**permalink**) 17/11/2010, 09:05

como te dije antes...... sacale el position absolute y las medidas left top!

#apDiv1 {
MARGIN:0 AUTO;
width:140px;
height:615px;
z-index:1;
}

Slds.-

canelat · #14 (**permalink**) 17/11/2010, 09:18

DragonX no funciona.
Lo probé antes, ahora de nuevo y no funciona.....

DragonX · #15 (**permalink**) 17/11/2010, 09:28

algo asi?

Código HTML:

Ver original<html>
<head>
<title>Canela y tu final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
margin:0 auto;
width:140px;
height:615px;
z-index:1;
}
.Estilo3 {font-family: Comfortaa; font-size: 18px; color: #147c9d; font-weight: bold; }
a:link {
text-decoration: none;
color: #147c9d;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
img{position:absolute;left:0;top:0;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Canela y tu final.psd) -->
<div id="apDiv1">
<h1 align="left" class="Estilo3"> <a href="Recetas.html">Recetas</a></h1>
<h1 align="left" class="Estilo3"><a href="Postres.html">Postres</a></h1>
<h1 align="left" class="Estilo3">Vida sana</h1>
<h1 align="left" class="Estilo3">Productos de temporada</h1>
</div>
<img src="im%e1genes/Canela-y-tu-final.jpg" width="1020" height="1000" alt="">
<!-- End ImageReady Slices -->
</body>
</html>

canelat · #16 (**permalink**) 17/11/2010, 09:40

aiiiiiii no funciona.......
buff

canelat · #17 (**permalink**) 17/11/2010, 09:42

Igual es porque parto de un dibujo de photoshop, sin marcos ni nada.... no se......
Lo mejor de todo es que hice un curso de dreamweaver y nunca nos enseñaron lo más importante!!!!!!

DragonX · #18 (**permalink**) 17/11/2010, 09:45

eso pasa siempre.....pero bue.

para centrar un contenido lo unico que tenes que hacer es ponerle a tu contenedor total la propiedad margin:0 auto; eso lo centra en todos los browsers.... no podes colgar tu sitio asi lo vemos no?

Slds.-

canelat · #19 (**permalink**) 17/11/2010, 09:50

Ojalá pudiera colgarlo.....
Soy muy novata en todo esto. Y primero lo estoy diseñando y después tengo que buscar un dominio para publicarlo.
a no ser que se pueda colgar en otro sitio...... no se....

DragonX · #20 (**permalink**) 17/11/2010, 09:56

claro, si tenes acceso a otro sitio, crea un dir llamado "test", por ejemplo, y subi tus archivos ahi, todo!

Klafhor · #21 (**permalink**) 17/11/2010, 10:13

el div lo tienes en la linea 33, te dije que usaras la etiqueta html, ya que el css no te iba, aunque tienes que quitar el position absolute (eso si del css)

<center><div id="apDiv1">
...
...
...
</div></center>

de ahi que dijera "donde tengas el div", y no que te lo pusiera yo manualmente, pues no pusiste todo el codigo, aunque sigo opinando igual que antes y de la misma forma que DragonX, por css es mejor y te deberia ir, pero sino es el caso, prueba esto:

[HIGHLIGHT="HTML"]

Código HTML:

Ver original<html>
<head>
<title>Canela y tu final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
top:234px;
width:140px;
height:615px;
z-index:1;
}
.Estilo3 {font-family: Comfortaa; font-size: 18px; color: #147c9d; font-weight: bold; }
a:link {
text-decoration: none;
color: #147c9d;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Canela y tu final.psd) -->
<center><div id="apDiv1">
<h1 align="left" class="Estilo3"> <a href="Recetas.html">Recetas</a></h1>
<h1 align="left" class="Estilo3"><a href="Postres.html">Postres</a></h1>
<h1 align="left" class="Estilo3">Vida sana</h1>
<h1 align="left" class="Estilo3">Productos de temporada</h1>
</div></center>
<img src="im%e1genes/Canela-y-tu-final.jpg" width="1020" height="1000" alt="">
<!-- End ImageReady Slices -->
</body>
</html>

kseso? · #22 (**permalink**) 17/11/2010, 10:21

Edito y aclaro: Comencé a redactar esta respuesta y a ver el código antes del último comentario de Klafhor

Qué afán de comenzar la casa por la ventana.
Comience por los tutoriales sobre css y html de www.librosweb.es y tendrá una buena base. En serio. Sin unos conocimientos mínimos previos es como pretender llevar un f1 sin haber aprendido a conducir.

Sobre el tema:
El código que le indica DragonX en #15 sí centra su #apDiv1. Sólo tiene que ponerle un borde y quitar la imagen.
Lo que ocurre y no se ha dado cuenta es que:
Ese div sólo mide 140px de ancho.
Fuera de él tiene una imagen mucho mayor posicionada de forma absoluta en 0,0.
Esa imagen se coloca sobre (eje z) su #apDiv1 porque:
-Aparece después en el flujo del documento.
- Aunque #apDiv1 tiene declarado |z-index:1| le falta posicionarlo para que esa propiedad actúe. Así que añada |position: relative|

Pero le reitero mi consejo inicial. Antes de seguir y aprovechando que lo que tiene hasta ahora es poco, léase esos manuales que le indico.

canelat · #23 (**permalink**) 17/11/2010, 12:53

a ver:

el problema es que tengo una imagen dentro de dreamweaver.
Y dentro de esa imagen estoy dibujando un div Pa en donde escribo lo de Recetas, Postres, vida sana etc etc que por supuesto es más pequeño que el ancho de la página web, ya que es un menú.

El caso es que cuando hago todo esto lo único que se centra es ese menú, la página (o sea el dibujo) se me mueve hacia abajo y se me descoloca todo.

Kseso estoy tratando de aprender. No se crea que estoy aquí dando la lata para nada.

DragonX · #24 (**permalink**) 17/11/2010, 13:13

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF FFFFFFFFFFFFFFFFFFF

pone tu imagen como background del div y listo! ahora entiendo!!!!!!!!!

Código HTML:

Ver original<html>
<head>
<title>Canela y tu final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
margin:0 auto;
width:1020px;
height:1000px;
z-index:1;
background:url(im%e1genes/Canela-y-tu-final.jpg) no-repeat left top;
}
.Estilo3 {font-family: Comfortaa; font-size: 18px; color: #147c9d; font-weight: bold; }
a:link {
text-decoration: none;
color: #147c9d;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
img{position:absolute;left:0;top:0;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Canela y tu final.psd) -->
<div id="apDiv1">
<h1 align="left" class="Estilo3"> <a href="Recetas.html">Recetas</a></h1>
<h1 align="left" class="Estilo3"><a href="Postres.html">Postres</a></h1>
<h1 align="left" class="Estilo3">Vida sana</h1>
<h1 align="left" class="Estilo3">Productos de temporada</h1>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

creo que ahi estaríamos....
slds.-

canelat · #25 (**permalink**) 17/11/2010, 13:14

He decidido hacer otra cosa ya que esto era un rollo.

He vuelto a coger la imagen y he hecho los cortes en photoshop, de tal forma que ya tengo todo exactamente marcado en donde voy a escribir.

Así que ahora me encuentro con lo siguiente:

<html>
<head>
<title>Canela y tu final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tabla_01" width="1021" height="1001" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="19">
<img src="im%e1genes/Canela-y-tu-final_01.jpg" width="1020" height="30" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="6">
<img src="im%e1genes/Canela-y-tu-final_02.jpg" width="62" height="233" alt=""></td>
<td colspan="4" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_03.jpg" width="447" height="80" alt=""></td>
<td colspan="12">
<img src="im%e1genes/Canela-y-tu-final_04.jpg" width="511" height="64" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="64" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="im%e1genes/Canela-y-tu-final_05.jpg" width="156" height="169" alt=""></td>
<td rowspan="3">
<img src="im%e1genes/Canela-y-tu-final_06.jpg" width="79" height="38" alt=""></td>
<td colspan="2" rowspan="5">
<img src="im%e1genes/Canela-y-tu-final_07.jpg" width="36" height="169" alt=""></td>
<td colspan="4" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_08.jpg" width="102" height="26" alt=""></td>
<td colspan="2" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_09.jpg" width="113" height="26" alt=""></td>
<td rowspan="9">
<img src="im%e1genes/Canela-y-tu-final_10.jpg" width="25" height="906" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="4">
<img src="im%e1genes/Canela-y-tu-final_11.jpg" width="447" height="153" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_12.jpg" width="215" height="86" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_13.jpg" width="79" height="131" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="74" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="im%e1genes/Canela-y-tu-final_14.jpg" width="51" height="57" alt=""></td>
<td colspan="2" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_15.jpg" width="157" height="644" alt=""></td>
<td rowspan="3">
<img src="im%e1genes/Canela-y-tu-final_16.jpg" width="7" height="668" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_17.jpg" width="32" height="611" alt=""></td>
<td colspan="12">
<img src="im%e1genes/Canela-y-tu-final_18.jpg" width="766" height="587" alt=""></td>
<td rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_19.jpg" width="33" height="611" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="587" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="im%e1genes/Canela-y-tu-final_20.jpg" width="766" height="24" alt=""></td>
<td colspan="2">
<img src="im%e1genes/Canela-y-tu-final_21.jpg" width="157" height="24" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_22.jpg" width="22" height="126" alt=""></td>
<td colspan="3">
<img src="im%e1genes/Canela-y-tu-final_23.jpg" width="225" height="114" alt=""></td>
<td rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_24.jpg" width="30" height="126" alt=""></td>
<td>
<img src="im%e1genes/Canela-y-tu-final_25.jpg" width="222" height="114" alt=""></td>
<td colspan="2" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_26.jpg" width="28" height="126" alt=""></td>
<td colspan="3">
<img src="im%e1genes/Canela-y-tu-final_27.jpg" width="227" height="114" alt=""></td>
<td colspan="2" rowspan="2">
<img src="im%e1genes/Canela-y-tu-final_28.jpg" width="27" height="126" alt=""></td>
<td colspan="5">
<img src="im%e1genes/Canela-y-tu-final_29.jpg" width="214" height="114" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="im%e1genes/Canela-y-tu-final_30.jpg" width="225" height="12" alt=""></td>
<td>
<img src="im%e1genes/Canela-y-tu-final_31.jpg" width="222" height="12" alt=""></td>
<td colspan="3">
<img src="im%e1genes/Canela-y-tu-final_32.jpg" width="227" height="12" alt=""></td>
<td colspan="5">
<img src="im%e1genes/Canela-y-tu-final_33.jpg" width="214" height="12" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="im%e1genes/espacio.gif" width="22" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="10" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="30" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="185" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="30" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="222" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="10" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="18" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="138" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="79" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="10" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="26" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="1" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="17" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="33" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="51" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="106" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="7" height="1" alt=""></td>
<td>
<img src="im%e1genes/espacio.gif" width="25" height="1" alt=""></td>
<td></td>
</tr>
</table>

</body>
</html>

DragonX · #26 (**permalink**) 17/11/2010, 13:15

NONONO!!!!!
volve atras todo y hace lo que te digo aca

slds.-

canelat · #27 (**permalink**) 17/11/2010, 13:21

DragonX de acuerdo!!

Pero si hago eso tampoco funciona me sale el menú arriba de todo a la izquierda encima del dibujo de la página web........

DragonX · #28 (**permalink**) 17/11/2010, 13:29

ok, perfecto, vos necesitas tu menu centrado?

primero, sacale el align="left" de los <h1>
segundo, podes decirle al div contenedor que centre todo su contenido, asi:

Código CSS:

Ver original#apDiv1 {
margin:0 auto;
width:1020px;
height:1000px;
z-index:1;
background:url(im&#37;e1genes/Canela-y-tu-final.jpg) no-repeat left top;
text-align:center;
}

Slds.-

Impostor · #29 (**permalink**) 17/11/2010, 13:36

Cita:

Iniciado por kseso?

Sobre el tema:
El código que le indica DragonX en #15 sí centra su #apDiv1. Sólo tiene que ponerle un borde y quitar la imagen.
Lo que ocurre y no se ha dado cuenta es que:
Ese div sólo mide 140px de ancho.
Fuera de él tiene una imagen mucho mayor posicionada de forma absoluta en 0,0.

¿Leiste eso? Creo que hay esta la clave.

Saludos¡¡

canelat · #30 (**permalink**) 17/11/2010, 13:41

lo tengo!!!!!!!!!!!!!
bueno..... por ahora..... igual en cuanto haga algun otro marco se me descuadra todo.

Quité el marco pequeño que tenía a la derecha e hice uno que cogiese todo el dibujo.
La única forma de poder alinearlo es así:

<html>
<head>
<title>Canela y tu final</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<center><div id="apDiv1">
<div id="apDiv1"><img src="im%e1genes/Canela-y-tu-final.jpg" width="1020" height="1000" alt=""></div>

</div></center>
</body>
</html>

No se si ahora al ponerle el marco con los menús se me va a ir todo al traste o ya se mantiene.....