Anchura de la página

[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]