Problemas ancho pagina web

Artium · #1 (**permalink**) 28/04/2011, 08:59

Hola a todos,

No logro ajustar el ancho de mi pagina web. Utilizo la herramienta Web Developer de Firefox y cuando selecciono mostrar los elementos de bloque veo que aparecen recuadros que ocupan toda la zona que me "sobra", creo que el problema viene de ahi.

Os puedo pasar una imagen para que veais a que me refiero, pero aqui no se añadirla.

Por otro lado, ¿existe alguna forma o programa de saber si el codigo implementado esta aceptado por la W3C?

Muchas gracias a todos.

whitefeathers · #2 (**permalink**) 28/04/2011, 09:12

Puedes validar tu código mediante el servicio de W3C:

http://validator.w3.org/

Con respecto a lo de tu página, pon el código y podremos ayudarte.
Un saludo.

pzin · #3 (**permalink**) 28/04/2011, 09:17

Los elementos en bloque suelen ocupar todo el largo, hasta que haya "algo" que los pare. Ya sea si están contenidos dentro de otro elemento o porque se haya fijado un ancho. Pero claro, si no vemos el código no hay forma de saber nada.

Artium · #4 (**permalink**) 28/04/2011, 09:23

Os pongo el codigo:

Gracias por lo del validador, he visto que me salen muchos errores, sobre todo al cerrar <tags> como <tr>, <ul,>etc...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<title>---Wolwid---</title>
</head>
<body>
<div id="contenedor">
<div id="logoMain"><a href="main.html"><img src="wolwid.jpeg"></div>
<div id="accessMain">Hola. <a href="identify.php">Identificate </a> o <a href="register.php"> Registrate</a></div>
<div id="menuMain"><a href="buy.php">Comprar</a><a href="usermenu.php"> Mis Cosas</a>
<a href="help.html"> Ayuda</a><a href="clientHelp.html"> Atención al cliente</a></div>
<div id="seachMain"><input type="text" name="seach" size="60" maxlength="50" value="Escribe aquí lo que buscas..."> <select name="state"> <option value="default">Todas las categorías</option>
<option value="Accesorios,coches, motos y otros">Accesorios,coches, motos y otros</option><option value="Animales">Animales</option>
<option value="Arte y antiguedades">Arte y antiguedades</option><option value="Casa y jardin">Casa y jardín</option>
<option value="Cine y DVDs">Cine y DVDs</option><option value="Coleccionismo">Coleccionismo</option>
<option value="Comics">Comics</option><option value="Consolas y vedeojuegos">Consolas y videojuegos</option>
<option value="Deportes">Deportes</option><option value="Electronica,TV y video">Electrónica,TV y video</option>
<option value="Fotografia y videocamaras">Fotografía y videocamaras</option>
<option value="Informatica">Informática</option><option value="Joyas">Joyas</option><option value="Juguetes">Juguetes</option>
<option value="Libros">Libros</option><option value="Mobiliario del hogar">Mobiliario del hogar</option><option value="Moda y complementos">Moda y complementos</option>
<option value="Monedas y billetes">Monedas y Billetes</option><option value="Moviles y telefonos fijos">Móviles y teléfonos fijos</option>
<option value="Musica e instrumentos">Música e instrumentos</option><option value="Otras categorias">Otras categorías</option></select>
<input type="submit" name="seach" value="Buscar"></div>
<div id="categories"><table border ="3"><ul class="categorias"><tr><td>Categorias</td></tr>
<tr>
<td>
<ul><a href="motor.php">Accesorios coches, motos y otros</ul>
<ul><a href="pets.php">Animales</ul>
<ul><a href="art.php">Arte y antigüedades</ul>
<ul><a href="home.php">Casa y jardín</ul>
<ul><a href="cinema.php">Cine y DVDs</ul>
<ul><a href="collecting.php">Coleccionismo</ul>
<ul><a href="comics.php">Comics</ul>
<ul><a href="console.php">Consolas y videojuegos</ul>
<ul><a href="sports.php">Deportes</ul>
<ul><a href="electronics.php">Electrónica,TV y Video</ul>
<ul><a href="photo.php">Fotografía y videocamaras</ul>
<ul><a href="computer.php">Informática</ul>
<ul><a href="jewelry.php">Joyas</ul>
<ul><a href="toys.php">Juguetes</ul>
<ul><a href="books.php">Libros</ul>
<ul><a href="thingshome.php">Mobiliario del hogar</ul>
<ul><a href="fashion.php">Moda y complementos</ul>
<ul><a href="coins.php">Monedas y billetes</ul>
<ul><a href="cellphones.php">Móviles y teléfonos fijos</ul>
<ul><a href="music.php">Música e instrumentos</ul>
<ul><a href="others.php">Otras categorías</lu></td>
</tr>
</table></ul></div>
<div id="new"><table border="3">
<tr>
<td colspan="3" height="10px" width="100px">Últimas Novedades</td>
</tr>
<tr>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
</tr>
<tr>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
</tr>
</table></div>
<div id="endingsoon"><table border="3">
<tr>
<td colspan="3" height="10px" width="100px">A punto de acabar</td>
</tr>
<tr>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
</tr>
<tr>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
</tr>
</table></div>
<div id="hits"><table border="3">
<tr><td colspan="5">Destacados</td></tr>
<tr>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
<td height="100px" width="100px"></td>
</tr>
</table></div>

<div id="info1"><table border="3">
<tr><td height="100px" width="405px"></td></tr>
</table></div>

<div id="info"><table border="3">
<tr><td height="100px" width="830px"></td></tr>
</table></div>

<div id="register"><a href="register.php"><img src="register.png" height="110px" width="310"></img></a></div>
<div id="identify"><a href="identify.php"><img src="identify.png" height="110px" width="310"></img></a></div>
<div id="howto"><a href="howto.php"><img src="howto.png" height="85px" width="850"></img></a></div>
<div id="links"><table border="3">
<tr><td height="100px" width="150px"></td></tr>
<tr><td height="100px" width="150px"></td></tr>
<tr><td height="100px" width="150px"></td></tr>
<tr><td height="100px" width="150px"></td></tr>
<tr><td height="100px" width="150px"></td></tr>
</div>
</body>
</html>

pzin · #5 (**permalink**) 28/04/2011, 09:28

También haría falta el código de style.css

ZoroRoronoa · #6 (**permalink**) 28/04/2011, 09:58

Oh... Mis ojos ven una carcél.!!!
*lleno de celdas

Sinceramente no he visto tu codigo, es mucho y esta algo revuelto xD

pero si no se ajusta a tu ancho, has de tener por ahi contenidos con mas o menos ancho, dentro del body.

Yo suelo usar un contenedor y darle el ancho necesario, y dentro de este acomodar todo el contenido, y que se ajuste exactamente al ancho del contenedor.

Ya que si pones un border de 1 px, con eso basta para que un div crezca 2 px de ancho, y con eso se descuadra todo.

también si tienes un div de 700px y le agregas 10 de padding, lo ideal es ponerl 690 de ancho y con los 10 de padding, crece a 700PX, sin embargo, colocas los 700 y los 10 del padding, este crece a 710 y también se descuadra.

hay que tener muchas cosas en mente, yo suelo dibujar una maqueta en alguna libreta e ir haciendo mediciones, para no sobrepasar el ancho del CONTENEDOR.

Saludos.

Artium · #7 (**permalink**) 29/04/2011, 00:45

Cita:

Iniciado por ZoroRoronoa

Oh... Mis ojos ven una carcél.!!!
*lleno de celdas

Sinceramente no he visto tu codigo, es mucho y esta algo revuelto xD

pero si no se ajusta a tu ancho, has de tener por ahi contenidos con mas o menos ancho, dentro del body.

Yo suelo usar un contenedor y darle el ancho necesario, y dentro de este acomodar todo el contenido, y que se ajuste exactamente al ancho del contenedor.

Ya que si pones un border de 1 px, con eso basta para que un div crezca 2 px de ancho, y con eso se descuadra todo.

también si tienes un div de 700px y le agregas 10 de padding, lo ideal es ponerl 690 de ancho y con los 10 de padding, crece a 700PX, sin embargo, colocas los 700 y los 10 del padding, este crece a 710 y también se descuadra.

hay que tener muchas cosas en mente, yo suelo dibujar una maqueta en alguna libreta e ir haciendo mediciones, para no sobrepasar el ancho del CONTENEDOR.

Saludos.

Muchas gracias por tu respuesta.

Acabo de empezar con el diseño y estoy intentando aprender, asi que agradezco todas vuestras respuestas.

Pensaba que era bueno meter todo el contenido de una web dentro de bloques <div>. ¿Hay alguna manera más optima de diseñar?

Por otro lado, tengo un grave problema con las medidas xD, no se de que forma puedo saber en que margenes me muevo para así poder colocar los elementos donde me gustaria...

Os pongo el codigo .css a ver que os parece...

Código PHP:

  #logo{ 
    position: relative; 
} 
#logoMain{ 
    position: relative; 
    right:100px;     
} 
#seach{ 
    position: relative; 
    bottom::50px; 
    left:40px; 
    } 
#seachMain{ 
    position: relative; 
    bottom::50px; 
    right:100px; 
    } 
 
#access{ 
    font-size: 0.8em; 
    position: relative; 
    bottom:100px; 
    left: 340px; 
    } 
#accessMain{ 
    font-size: 0.8em; 
    position: relative; 
    bottom: 20px; 
    left: 235px; 
    } 
 
#menu{ 
    font: impact; 
    font-weight: 900; 
    position: relative; 
    bottom: 5em; 
    left: 850px; 
} 
#menuMain{ 
    font: impact; 
    font-weight: 900; 
    position: relative; 
    bottom: 90px; 
    left: 600px; 
} 
/*Con esto logramos que el menu se muestre horizontal (Pruebas) 
ul.menu ul { 
    float: left; 
}*/ 
 
/*Ajustamos la anchura de la página web.*/ 
#contenedor { 
    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
} 
 
#categories{ 
position: relative; 
right:100px; 
height:3px; 
top:20px; 
} 
#info{ 
    position:relative; 
    left:210px; 
    bottom:700px; 
} 
#info1{ 
    position:relative; 
    left:600px; 
    bottom:730px; 
} 
/*Ahora colocamos en su sitio los elementos a punto de acabar, los nuevos y los destacados*/ 
#endingsoon{ 
    position: relative; 
    left:550px; 
    bottom:57.7px; 
} 
#new{ 
    position: relative; 
    left:200px; 
    top:180px; 
} 
#hits{ 
    position:relative; 
    left:275px; 
    bottom:30px; 
} 
/*Posicionamos los enlaces de registro, acceso y howto*/ 
#register{ 
    position: relative; 
    left:180px; 
    bottom:225px; 
    } 
#identify{ 
position: relative; 
left: 500px; 
bottom:335px; 
} 
#howto{ 
    position:relative; 
    left:190px; 
    bottom:320px; 
} 
/*Posicionamos los enlaces de publicidad*/ 
#links{ 
    position:relative; 
    left:890px; 
    bottom:957px; 
    } 
 
img{ 
    border:none; 
    text-decoration:none;} 
     
/*Esta propiedad elimina el scroll inferior del navegador.  
body { 
overflow-x: hidden; 
}*/ 
 
/*Con esto tratamos los enlaces. */ 
<style type="text/css"> 
a:link {text-decoration:none; color: #0404B4;} /* Link no visitado*/ 
a:visited {text-decoration:none; color:#0404B4} /*Link visitado*/ 
a:active {text-decoration:underline; color:#0404B4} /*Link activo*/ 
a:hover {text-decoration:underline; color:#0404B4;background: #DEDBDB} /*Ratón sobre el link*/ 
</style>

Muchas gracias a todos

C2am · #8 (**permalink**) 29/04/2011, 08:01

Me parece que Zoro hace referencia a tantas tablas y no a los div, ya que es correcto su uso, no así el uso de tablas para posicionar o maquetar.

En cuanto al codigo, define si para "listar" usas "tablas" o "listas", (te darás cuenta cual debería ser ¿no?)
Lo digo por esto:

Código HTML:

Ver original<table border ="3"><ul class="categorias"><tr><td>Categorias</td></tr>
<tr>
<td>
<ul><a href="motor.php">Accesorios coches, motos y otros</ul>
<ul><a href="pets.php">Animales</ul>
<ul><a href="art.php">Arte y antig&uuml;edades</ul>
<ul><a href="home.php">Casa y jard&iacute;n</ul>
<ul><a href="cinema.php">Cine y DVDs</ul>
<ul><a href="collecting.php">Coleccionismo</ul>
<ul><a href="comics.php">Comics</ul>
<ul><a href="console.php">Consolas y videojuegos</ul>
<ul><a href="sports.php">Deportes</ul>
<ul><a href="electronics.php">Electr&oacute;nica,TV y Video</ul>
<ul><a href="photo.php">Fotograf&iacute;a y videocamaras</ul>
<ul><a href="computer.php">Inform&aacute;tica</ul>
<ul><a href="jewelry.php">Joyas</ul>
<ul><a href="toys.php">Juguetes</ul>
<ul><a href="books.php">Libros</ul>
<ul><a href="thingshome.php">Mobiliario del hogar</ul>
<ul><a href="fashion.php">Moda y complementos</ul>
<ul><a href="coins.php">Monedas y billetes</ul>
<ul><a href="cellphones.php">M&oacute;viles y tel&eacute;fonos fijos</ul>
<ul><a href="music.php">M&uacute;sica e instrumentos</ul>
<ul><a href="others.php">Otras categor&iacute;as</lu></td>
</tr>
</table></ul>

Tienes una mezcla tal que empiezas abriendo una tabla y terminas cerrando una "lista desordenada".
Y para peor tienes un error grave ya que las listas tienen esta estructura:
<ul>
<li> acá va el item</li>
<li> acá va otro item</li>
<li> acá va otro otro item</li>
</ul>

Bueno te dejo un enlace que te va a servir mucho:
www.librosweb.es
Sobre las listas: http://www.librosweb.es/xhtml/capitulo5.html

Alucine · #9 (**permalink**) 30/04/2011, 10:52

Hola, soy novata de css :) disculpen la entromisión, quería solo preguntarle a Artium de dónde proviene su código CSS, que por lo que veo tiene aclaraciones para cada elemento, lo cual me parece muy útil para los que recien empezamos. Es algún tutorial? Me podrías decir la web de donde proviene? GRACIAS!

Por otro lado, es una duda que tengo actualmente y no me terminó de quedar claro por las respuestas: cuál es el modo óptimo (o algún buen modo jaja) de establecer el tamaño de la web, centrarla y tener una referencia de dónde debemos posicionar los elementos? Una tabla o un div? Y en el caso del Div, qué parámetros debería tener? Yo uso una tabla de tamaño que necesito porque me es más fácil centrarla en el navegador, y luego dentro pongo otra tabla con celdas donde irá mi contenido.

MUCHAS GRACIAS !

Alucine.

ZoroRoronoa · #10 (**permalink**) 30/04/2011, 12:58

Cita:

Iniciado por Alucine

Hola, soy novata de css :) disculpen la entromisión, quería solo preguntarle a Artium de dónde proviene su código CSS, que por lo que veo tiene aclaraciones para cada elemento, lo cual me parece muy útil para los que recien empezamos. Es algún tutorial? Me podrías decir la web de donde proviene? GRACIAS!

Por otro lado, es una duda que tengo actualmente y no me terminó de quedar claro por las respuestas: cuál es el modo óptimo (o algún buen modo jaja) de establecer el tamaño de la web, centrarla y tener una referencia de dónde debemos posicionar los elementos? Una tabla o un div? Y en el caso del Div, qué parámetros debería tener? Yo uso una tabla de tamaño que necesito porque me es más fácil centrarla en el navegador, y luego dentro pongo otra tabla con celdas donde irá mi contenido.

MUCHAS GRACIAS !

Alucine.

puedes centrar todo tan facil con CSS como lo es agregado solo:

body {width:900px;margin:0 auto}
*en lugar de 900px, coloca el ancho que desees.

Saludos

Alucine · #11 (**permalink**) 01/05/2011, 11:31

gracias, ZoroRoronoa ! ahora me queda otra duda.. luego de centrar del modo que indicas, agrego una tabla del tamaño que yo quiero que sea la web (955px x 600px en mi caso) y le agrego el contenido, pero la tabla se estira más allá de los límites que le especifiqué... cómo hago para que esa medida no se estire así estoy segura de estar trabajando sobre un área del tamaño exacto que quiero?

saludos :)

Alucines.

Artium · #12 (**permalink**) 02/05/2011, 00:28

Cita:

Iniciado por Alucine

Hola, soy novata de css :) disculpen la entromisión, quería solo preguntarle a Artium de dónde proviene su código CSS, que por lo que veo tiene aclaraciones para cada elemento, lo cual me parece muy útil para los que recien empezamos. Es algún tutorial? Me podrías decir la web de donde proviene? GRACIAS!

Por otro lado, es una duda que tengo actualmente y no me terminó de quedar claro por las respuestas: cuál es el modo óptimo (o algún buen modo jaja) de establecer el tamaño de la web, centrarla y tener una referencia de dónde debemos posicionar los elementos? Una tabla o un div? Y en el caso del Div, qué parámetros debería tener? Yo uso una tabla de tamaño que necesito porque me es más fácil centrarla en el navegador, y luego dentro pongo otra tabla con celdas donde irá mi contenido.

MUCHAS GRACIAS !

Alucine.

Los comenratios en CSS los pongo yo para que quede más claro el codigo. Cuando veo algo nuevo en la web para no olvidarlo lo dejo comentado.
Simplemente. Me gusta hacerlo por que asi no olvido lo nuevo que aprendo.

Artium · #13 (**permalink**) 03/05/2011, 08:21

Cita:

Iniciado por C2am

Me parece que Zoro hace referencia a tantas tablas y no a los div, ya que es correcto su uso, no así el uso de tablas para posicionar o maquetar.

En cuanto al codigo, define si para "listar" usas "tablas" o "listas", (te darás cuenta cual debería ser ¿no?)
Lo digo por esto:

Código HTML:

Ver original<table border ="3"><ul class="categorias"><tr><td>Categorias</td></tr>
<tr>
<td>
<ul><a href="motor.php">Accesorios coches, motos y otros</ul>
<ul><a href="pets.php">Animales</ul>
<ul><a href="art.php">Arte y antig&uuml;edades</ul>
<ul><a href="home.php">Casa y jard&iacute;n</ul>
<ul><a href="cinema.php">Cine y DVDs</ul>
<ul><a href="collecting.php">Coleccionismo</ul>
<ul><a href="comics.php">Comics</ul>
<ul><a href="console.php">Consolas y videojuegos</ul>
<ul><a href="sports.php">Deportes</ul>
<ul><a href="electronics.php">Electr&oacute;nica,TV y Video</ul>
<ul><a href="photo.php">Fotograf&iacute;a y videocamaras</ul>
<ul><a href="computer.php">Inform&aacute;tica</ul>
<ul><a href="jewelry.php">Joyas</ul>
<ul><a href="toys.php">Juguetes</ul>
<ul><a href="books.php">Libros</ul>
<ul><a href="thingshome.php">Mobiliario del hogar</ul>
<ul><a href="fashion.php">Moda y complementos</ul>
<ul><a href="coins.php">Monedas y billetes</ul>
<ul><a href="cellphones.php">M&oacute;viles y tel&eacute;fonos fijos</ul>
<ul><a href="music.php">M&uacute;sica e instrumentos</ul>
<ul><a href="others.php">Otras categor&iacute;as</lu></td>
</tr>
</table></ul>

Tienes una mezcla tal que empiezas abriendo una tabla y terminas cerrando una "lista desordenada".
Y para peor tienes un error grave ya que las listas tienen esta estructura:
<ul>
<li> acá va el item</li>
<li> acá va otro item</li>
<li> acá va otro otro item</li>
</ul>

Bueno te dejo un enlace que te va a servir mucho:
[url]www.librosweb.es[/url]
Sobre las listas: [url]http://www.librosweb.es/xhtml/capitulo5.html[/url]

Muchisimas gracias por ayudarme.
Ya he corregido el fallo. Esto era un menu, lo meti dentro de una tabla porque me era más sencillo colocarlo en la pagina web para ir haciendome mi esquema. Ya he eliminado la tabla. Ahora queda más limpio, teneis razón.

Seguro que no es la forma correcta de empezar, pero me pareció buena opción, claro esta que mi web cuando esté terminada tendra solo un par de tablas.

Me gustaria que aparecieran dos bloques con fotos de productos en oferta. Por eso he colocado una tabla de 2filasx3columnas, para introducir en cada celda la imagen. ¿Sería mejor hacerlo de otra forma?

Muchas gracias por vuestra ayuda¡¡

C2am · #14 (**permalink**) 06/05/2011, 04:19

Disculpa, he estado muy ocupado. Te prometo que mañana o pasado, si que nadie te ha contestado, ayudarte un poco.
Saludos

yonaida · #15 (**permalink**) 06/05/2011, 04:30

lo de las fotos en la tabla es una opcion rapida y a mi gusto (en este caso) buena, ya que si metes en divs tendrias que posicionarlos todos y crear estilos para cada uno etc etc etc, en cambio la tabla la posicionas dentro de un div y metes el div donde quieras. suerte.