Anchura de la página

[ortiz]

Hola de nuevo

Me gustaría que me aconsejárais sobre como y cuanto, a la hora de abrir la página.

Es decir, hacer una "tabla" o un div que contenga todo, cual son los píxels recomendados. Yo tenía entendido 760 px, pero cuando lo abro queda bastante feo, porque queda alineado a la izquierda

Bueno, gracias otra vez

Saludos

[El_Metallick]

miraq por lo general yo aconsejo trabajar con porsentajes... a mi en lo personal me gusta mas... pero en cosa de gustos no hay nada escrito un div o una tabla cumplen la misma funcion en cuanto a mantener el tamaño de la p{agina, ahora si quieres que aparezca centrado solo tienes que ponerle, ya sea a la etiqueta div o a la table el atributo align="center" y listo la pagina se te va a ver centrada.... bueno epero haver ayudado... saludos y suerte

[a5dy2]

Iniciado por ortiz

Hola de nuevo

Me gustaría que me aconsejárais sobre como y cuanto, a la hora de abrir la página.

Es decir, hacer una "tabla" o un div que contenga todo, cual son los píxels recomendados. Yo tenía entendido 760 px, pero cuando lo abro queda bastante feo, porque queda alineado a la izquierda

Bueno, gracias otra vez

Saludos

780px se ajusta al internet explorer, ya que este por defecto siempre tiene barra de scroll vertical.
El problema es que los usuarios cambian mucho las opciones del navegador, temas, etc,
por eso se te queda corto.

Ponle 774px y céntralo con:

<div id="global" style="width: 774px; margin-left: auto; margin-right: auto">
Sobran 3px por cada lado.

Aunque yo siempre ajusto a 780px, total al final es una chorrada si sale barra horizontal o no...

[ortiz]

pues muchas gracias a los 2, voy a probar un vuestros consejos. Es un poco líoso todo esto, sobre todo el tema de diseñar las tablas con css, porque, de hecho:

<div id="global" style="width: 774px; margin-left: auto; margin-right: auto">

De aquí, la verdad no entiendo o no se ver, que es lo que hace que, digamos, una primera tabla al estilo <div id="contenedor"> quede centrada...

Las tablas eran mucho más senzillas para los novatos o poco iniciados, pero, en fin, al que algo quiere...algo le cuesta

Saludos!

[a5dy2]

Iniciado por ortiz

pues muchas gracias a los 2, voy a probar un vuestros consejos. Es un poco líoso todo esto, sobre todo el tema de diseñar las tablas con css, porque, de hecho:

No, no, ¡Ni se te ocurra diseñar tablas con css!

Los div son divisiones, cuando decimos maquetar con css lo que hacemos es hacer la estructura
de la página. Vamos me imagino que querrías decir: "[...] el tema de maquetar con css"

De aquí, la verdad no entiendo o no se ver, que es lo que hace que, digamos, una primera tabla al estilo <div id="contenedor"> quede centrada...

Como te digo los div son divisiones, o más bien contenedores. En xhtml strict todo tiene que ir en un
contenedor. No puede haber ciertos elementos colgando del body tales como texto, elementos
de formulario, etc.

Yo te he puesto estilos en línea, pero lo normal, es que para archivos genéricos uses un archivo
css separado.


Mira, en primer lugar, separa el contenido de la presentación. Las etiquetas que más se usan son:

div, p, br, span, ul (li), ol(li), y alguno que otra que no caigo... Evita atributos que especifiquen
presentación: ejem font, align etc


Te pego un ejemplo :

Código HTML:

<div id="contenedor" class="centrado" style="width:100%">
<h1>Conócenos</h1>
<img src="img/masaje.jpg" alt="masaje" style="float: left" />
  <div style="float: left;  text-align: left; margin-left: 25px">
    <p><br />
     En <span class="negrita">Beauty Centre</span> somos especialistas
    en est&eacute;tica desde 1999. Compuesta de profesionales m&eacute;dicos, nuestro equipo con m&aacute;s de 6 a&ntilde;$
    <p>Nuestras instalaciones le ofrecen un clima agradable y tranquilo, y nuestro personal le asesorar&aacute; en el cuid$
    <p>Disponemos de los &uacute;ltimos m&eacute;todos en el tratamiento de afecciones cut&aacute;neas tales como acn&eacu$
    <p>Disponemos de tratamientos, tanto para hombre, como para mujer, tales como: </p>
    <ul>
      <li>Depilaci&oacute;n</li>
      <li>Tratamientos faciales</li>
      <li>Tratamientos corporales</li>
      <li>Maquillaje</li>
      <li>Masaje corporal</li>
      <li>Lifting facial</li>
      <li>Micropigmentaci&oacute;n</li>
    </ul>
    <p>Si lo desea p&oacute;ngase en <a href="contacto.php">contacto</a> con nosotros </p>

    </p>
  </div>
</div>

Oberva el primer div id=contenedor. Está centrado de esta manera en el css:

div.centrado {
margin-left: auto; margin-right: auto;
}

Como ves uso una clase genérica, cualquier div lo centro con esa clase, pero para centrarlo,
tengo que darle un ancho. Como no sé cuanto va a ocupar de anchos los contenedores que
me vayan surgiendo (los que no contemplara en el diseño), el ancho se lo especifico en línea,
ya que es único:

<div id="contenedor" class="centrado" style="width:100%">

Pero ciertos anchos si los contemplo en el diseño, por ejemplo, el div global, que sería
el que engloba a toda la página, así que en el archivo css:

<div id="global">
<!-- contiene tooooooooooooooooda la página -- >
</div>

#global {
width: 780px;
margin-left: auto;
margin-right: auto;
}


Ahora observa que uso el símbolo de capa #, es decir éste es un estilo, (una regla se dice)
única, para esa capa solamente. La clase es genérica.

Las propiedades no me digas que son difíciles de entender, se explican solas, el
margin-left: auto, es : pon el margen izquierdo automáticamente.

Ah!, un truco que ahorrará miles dolores de cabeza. Al princio de tu código css haz una
limpieza de navegadores. Esto es, ciertas cosas no se especifican en el estándar, por ejemplo,
el margin de las cabeceras <h1>, etc, de los inputs, así que cada navegador hace lo que
cree pertinente. Esto desbarajusta la página en los distintos navegadores. Este que te pego
es el que utilizo yo, y creo que se queda corto. Observa que las imágenes por defecto
ya tienen un margin de 5px, que tengo una clase para imágenes sin borde, y como al
final límpio las cabeceras y los inputs.

Luego tu especificas uno por uno lo que necesites.

Código:

/* Hoja de estilos general para pantalla */


body {
    font-size: 76%;
    background-color: white;
    margin: 0px;
    padding: 0px;
    background-image: url('../img/fondocuerpo.gif');
}

div {
    padding: 0px; margin: 0px;
}

img {
    margin: 5px;
}

img.noborder {
    border: 0px; margin: 0px; padding: 0px;
}

.noborder {
    border: 0px; margin: 0px; padding: 0px;
}

div.texto {
        margin: 0px;
}

h1 h2 h3 h4 h5 { margin: 0px; padding: 0px}
input { margin: 0px; padding: 0px }

/* Limpieza de navegadores. Iguala todos los navegadores */

Bueno, me he levantado fuerte hoy

Saludos, y animo con la maquetación.

Las tablas eran mucho más senzillas para los novatos o poco iniciados, pero, en fin, al que algo quiere...algo le cuesta

Saludos! [/QUOTE]

[ortiz]

Muchas gracias por la información tan bien explicada. Voy a utilizar esto, junto con otra información sobre emular el diseño de tablas en css, para crear una estructura que tenga una cabecera, un menu, 2 tablas, un central y otra a la derecha, y un pie.

Voy a ver si me salgo de esta

Muchas gracias y un saludo