centrar toda la web

joseki · 4 Mar 2012, 19:17 · Solicitar retirada

Hola....tengo un problema con el centrado de la web que estoy creando, en la hoja de estilos css tengo un div puesto justo despues de body, con este codigo:

#contenedor {margin-top:auto; margin-lef:auto; margin-right:auto; margin-bottom:auto; width:900px; text-align: center;}

el problema es que la capa CONTENEDOR me queda mas separacion por el margen derecho que por el izquierdo y no queda centrada.Puede ser porque no tengo puesto padding?.

un saludo.

Web-Freelance · 4 Mar 2012, 20:56 · Solicitar retirada

Debería centrarla. Prueba a quitar el top y el bottom y a ver si responde.

Por cierto, si este código lo has copiado directamente de la hoja de estilos tuya, tienes un fallo:

#contenedor {margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; width:900px; text-align: center;}

Si está mal corrígelo pues seguro que es por eso.

Saludos!

joseki · 5 Mar 2012, 18:17 · Solicitar retirada

Web-Freelance escribió:Debería centrarla. Prueba a quitar el top y el bottom y a ver si responde.

Por cierto, si este código lo has copiado directamente de la hoja de estilos tuya, tienes un fallo:

#contenedor {margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; width:900px; text-align: center;}

Si está mal corrígelo pues seguro que es por eso.

Saludos!

gracias por el apunte de la "t", ya lo corregi......pero el problema sigue.
La cabcera y el pie de pagina que estan dentro del div "contenedor" si salen centradas, pero las tablas centrales de la pagina salen todas a la derecha quedando mucho mas espacio por el lado izquierdo.

he probado a poner tanto en el "contenedor" como en la clase que tengo para las tablas esto:
margin:0 auto;
pero tampoco me lo soluciona.Alguna otra solucion?

salu2.

Web-Freelance · 5 Mar 2012, 19:00 · Solicitar retirada

Pega aquí tu código html y css y le echamos un vistazo ;-)

Saludos!

joseki · 5 Mar 2012, 23:30 · Solicitar retirada

el codigo css es el siguiente:

#contenedor {margin: auto;width:900px; text-align: center;}
.tablaprincipal { border-style: solid; border-color: #ff6600; border-width:6px;margin: auto;text-align: left;}

codigo html:
<html>
<body>
<div id="contenedor">
<table class="tablaprincipal" align="center" bgcolor="#999999" cellpadding="2" cellspacing="3"><tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr></table>
</div>
</body></html>

Si pongo en css ".contenedor" y en div "id contenedor" si me centra todo, pero si lo pongo como tiene que ser, es decir:

"#contenedor" y en div "id contenedor" solo me centra la cabezera y pie de pagina.

en algo fallo,pero no doy con la clave......gracias

Web-Freelance · 6 Mar 2012, 17:30 · Solicitar retirada

Te falta un <head> en el código html. Yo he probado tu código añadiéndole el head claro está, y queda perfectamente, el div contenedor centrado y la tabla dentro de este div centrado también.

Tu código modificado:

<html>
<head>
</head>
<body> 
<div id="contenedor">
<table class="tablaprincipal" bgcolor="#999999" cellpadding="2" cellspacing="3"><tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr></table>
</div>
</body></html>

Saludos!

DanielRGB · 7 Mar 2012, 12:09 · Solicitar retirada

un consejillo....

intenta dejar de usar tablas y pasate a las listas

<ul>
<li></li>
</ul>

Yo he creado listado de datos a base de ul y li

joseki · 7 Mar 2012, 23:22 · Solicitar retirada

Web-Freelance....se me olvido incluir el head, pero todavia sigue sin centrarse dos de las tres tablas....algo tengo mal puesto,
pero ya dare con la solucion.La solucion curiosa que si funciona es esta:

.contenedor {margin: auto;width:900px; text-align: center;}

<div id="contenedor">

si te fijas he puesto en los estilos una clase para el contenedor y en cambio en el div le tengo puesto un ID.porque funciona asi?
salu2.

joseki · 7 Mar 2012, 23:25 · Solicitar retirada

estoy pensando en usar lista desordenadas como tu comentas,pero al ser galerias fotograficas en tablas como las tengo ahora me ha sido muy facil construirlas.me puedes aclarar porque es mejor usar listas?...gracias

Web-Freelance · 8 Mar 2012, 17:45 · Solicitar retirada

joseki escribió:Web-Freelance....se me olvido incluir el head, pero todavia sigue sin centrarse dos de las tres tablas....algo tengo mal puesto,
pero ya dare con la solucion.La solucion curiosa que si funciona es esta:

.contenedor {margin: auto;width:900px; text-align: center;}

<div id="contenedor">

si te fijas he puesto en los estilos una clase para el contenedor y en cambio en el div le tengo puesto un ID.porque funciona asi?
salu2.

Imposible, rotundamente. En ese caso la solución es NO darle estilos al div contenedor ;-) o por lo menos quitarle algunos, jajaja.

Al hacer esto que dices de ponerlo como clase en la hoja de estilos, y como ID en el html, lo que haces es no darle estilos al ID, así que si borras la clase .contenedor y el id #contenedor de la hoja de estilos, verás que ocurre lo mismo. O por lo menos debería jeje.

Saludos!

joseki · 8 Mar 2012, 23:54 · Solicitar retirada

Los estilos se me atragantan.....porque no se muy bien como darle estilo y mas ahora que voy hacer las galerias con listas desordenadas que segun he visto es mejor.Ahora tengo que darle estilos a las listas para que me quede igual que con tablas
(espaciado,border......etc).

Ya ire contando como me va y las posibles dudas, que tratandose de estilos seran muchas..... jajaja.

Web-Freelance · 10 Mar 2012, 18:15 · Solicitar retirada

Ok aquí estamos ;-)

Saludos!

joseki · 11 Mar 2012, 00:47 · Solicitar retirada

No consigo que me queden igual las galerias con listas que con tablas......las galerias la forman 5 fotografias con un ancho fijo para cada foto de 180px, con lo que la suma es de 900px de ancho total para la galeria. el contenedor general lo tengo con 930 px y no consigo colocar las 5 fotos en linea.... por que si tiene mas ancho el contendor que la galeria?

te pongo el codigo css:

<style type="text/css">
body {background-color:#d8b855; font-family:arial;
margin: 5px 5px 5px 5px;

}
#contenedor { width:930px; text-align: center;}
#contenedor li {
display:inline;
float:left;
width:180px;
height: 270px;
background-color:#f5f7f9;
padding: 0px;
list-style-type: none;
text-align: center;
border: #000000 solid 4px;
}
</style>

Web-Freelance · 11 Mar 2012, 10:44 · Solicitar retirada

Le estás dando al LI un borde de 4px --> 4*2*5=40 + 900 = 940, te faltan 10px. Prueba a darle 3 ó 2 px de borde o a subir a 940 el ancho y a ver que tal.

Saludos!

joseki · 11 Mar 2012, 12:08 · Solicitar retirada

Web-Freelance escribió:Le estás dando al LI un borde de 4px --> 4*2*5=40 + 900 = 940, te faltan 10px. Prueba a darle 3 ó 2 px de borde o a subir a 940 el ancho y a ver que tal.

Saludos!

he ido modificando la hoja de estilos y aplicando dos selectores de tipo a <ul> <li>, dandole un ancho mayor a ul me funciona y queda centrada.

codigo css nuevo:
<style type="text/css">
body {background-color:#d8b855; font-family:arial;
}
#contenedor { width:960px; text-align: center;}
ul {width:930px; margin: 0px; padding: 0px;}
li {
display:inline;
float:left;
width:180px;
border: #ffffff solid 3px;
background-color:#f5f7f9;
text-align: center;
}
</style>.
como hago para que no quede doble borde en la separacion (borde inferior de la primera foto, con borde superior de la segunda foto)... no se si me entiendes.

Web-Freelance · 11 Mar 2012, 13:31 · Solicitar retirada

Lo más fácil sin tocar JS u otras alternativas, dale en css los bordes por separado sin ponerle, por ejemplo, borde abajo:

border-top: 3px;
border-right: 3px;
border-left: 3px;
border-color: #ffffff;
border-style: solid;

Y para que la última foto tenga borde abajo, haz una clase:

.claseUltimaFoto {
    border-bottom: 3px;
    border-color: #ffffff;
    border-style: solid;
}

Y luego a la última foto la pones:

<img src="....." class=".claseUltimaFoto" />

No se si me explico. Espero que te sirva.

Saludos!

turko · 12 Mar 2012, 23:55 · Solicitar retirada

hola soy muy nuevo en esto y estoy haciendo el tutorial.. pero no puedo centrar ninguna palabra no se que estaré haciendo mal... hay varias cosas que me cuestan ya que tengo el Dreamweaver 8 y el tutorial esta basado en el 3.0 creo que es por esto si me pueden ayudar les agradecería
les paso mi codigo de estilo

body {background:url("objetos/fondo1.jpg");}
a:link {font-weight:bold; color:blue; text-decoration:none}
a:visited {font-weight:bold; color:blue; text-decoration:none}
a:hover {font-weight:bold; color:red}
a:active {font-weight:bold; color:green}
p {font-family:Arial, Helvetica, sans-serif; font-size:17px;
text-align:justify; text-indent:20px; margin:7px 8px 7px 8px}
p.centrado { text-indent:0px ; text-align:center ; }

y el de la pag que estoy probando para aprender

<!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=iso-8859-1" />
<title>bienvenidos a Taris Muebles</title>
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>

<body>
<p>Taris Muebles<p/>
<p>como no se que mierda escribir escribo esta boludes para ver que onda lo de la sangria y poder asi ganarme unos pesos haciendo paginas web sin que nadie me rompa las pelotas
<p><a href="http://www.comocreartuweb.com" class="centrado">como crear tu web</a></p>
<p align="center">habia una aves truz </p>
</body>
</html>

si me pueden ayudar les daria las gracias

joseki · 12 Mar 2012, 23:59 · Solicitar retirada

he probado lo que dices y funciona pero a medias....solo me permite poner ese grosor de borde (3px) y yo quiero ponerle
mas borde...tengo que aumentar mas el tamaño del contenedor? o disminuir un poco las miniaturas?.

quiero evitar que se tenga que utilizar la barra de desplazamiento horizontal.

gracias.

Web-Freelance · 13 Mar 2012, 19:16 · Solicitar retirada

turko escribió:hola soy muy nuevo en esto y estoy haciendo el tutorial.. pero no puedo centrar ninguna palabra no se que estaré haciendo mal... hay varias cosas que me cuestan ya que tengo el Dreamweaver 8 y el tutorial esta basado en el 3.0 creo que es por esto si me pueden ayudar les agradecería
les paso mi codigo de estilo

body {background:url("objetos/fondo1.jpg");}
a:link {font-weight:bold; color:blue; text-decoration:none}
a:visited {font-weight:bold; color:blue; text-decoration:none}
a:hover {font-weight:bold; color:red}
a:active {font-weight:bold; color:green}
p {font-family:Arial, Helvetica, sans-serif; font-size:17px;
text-align:justify; text-indent:20px; margin:7px 8px 7px 8px}
p.centrado { text-indent:0px ; text-align:center ; }

y el de la pag que estoy probando para aprender

<!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=iso-8859-1" />
<title>bienvenidos a Taris Muebles</title>
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>

<body>
<p>Taris Muebles<p/>
<p>como no se que mierda escribir escribo esta boludes para ver que onda lo de la sangria y poder asi ganarme unos pesos haciendo paginas web sin que nadie me rompa las pelotas
<p><a href="http://www.comocreartuweb.com" class="centrado">como crear tu web</a></p>
<p align="center">habia una aves truz </p>
</body>
</html>

si me pueden ayudar les daria las gracias

Hola turko. Te recomiendo abrir un nuevo post en la sección correspondiente para recibir una respuesta más personalizada, y estaremos encantados de ayudarte. Aquí estamos ayudando al amigo joseki [;)]

Saludos!

Web-Freelance · 13 Mar 2012, 19:17 · Solicitar retirada

joseki escribió:he probado lo que dices y funciona pero a medias....solo me permite poner ese grosor de borde (3px) y yo quiero ponerle
mas borde...tengo que aumentar mas el tamaño del contenedor? o disminuir un poco las miniaturas?.

quiero evitar que se tenga que utilizar la barra de desplazamiento horizontal.

gracias.

Efectivamente, puedes subir como te dije a 940 el ancho o a darle menos a las miniaturas [;)]

Saludos!

joseki · 14 Mar 2012, 01:06 · Solicitar retirada

Web-Freelance escribió:Efectivamente, puedes subir como te dije a 940 el ancho o a darle menos a las miniaturas [;)]

Saludos!

voy a ir probando, hasta dar con las medidas y espaciados correctos.

Saludos.

joseki · 16 Mar 2012, 00:05 · Solicitar retirada

tengo la galeria ya centrada dentro del contenedor.....hice las miniaturas un pelin mas pequeñas y queda bien, pero ahora tengo el problema del relleno. Lo que quiero hacer es esto:
alrededor de cada foto dejar 2px de separacion entre el contenido y el borde para que cuando se pase el raton cambie ese relleno de color por medio de un script, pero no lo consigo. el secript que he hecho es este:

<script type="text/javascript">

</script>

y el codigo html de la imagen:

<img alt="Foto_0060 (63K)" onmouseover="cambiacolor_over(this)" onmouseout="cambiacolor_out(this)" src="../fotos/miniaturas/Foto_0060.jpg" height="270" width="170" border="0" />

que esta mal?

salu2.

Web-Freelance · 17 Mar 2012, 12:29 · Solicitar retirada

Para que un script? aplícale una clase al div que contenga la imagen y dale estilos al hover:

.clase_fondo {background-color:#000000;}
.clase_fondo:hover {background-color:#FFFFFF;}

A ver que tal. Saludos!

joseki · 17 Mar 2012, 16:50 · Solicitar retirada

si el problema esta en el relleno, porque el hover funciona.....de todas formas tengo una duda y es que cada caja individual dentro de la caja contenedora debe tener esto: text-align:center?.

probare lo de la clase y te cuento.

joseki · 18 Mar 2012, 09:55 · Solicitar retirada

como tengo que hacer la pagina de nuevo, ya que lo que ahora tengo no me vale....empezare desde cero.

ya ire comentando aqui como me va y las dudas.

salu2.