Problema posicionamiento Div

Bueno gente, la verdad que algunas cosas no las puedo entender, a ver si me ayudan una vez más jaja.

Estoy empezando una nueva web, no tiene casi nada, pero tengo un problema que el <section> de "servicios" no lo puedo centrar.

Y otra cosa... me deja un margen entre el H3 del <article> en #servicios y la <ul><li>

No entiendo el margen que deja, y no lo puedo sacar...
Les dejo el link:

davincidesign.site50.net


Sañudos!

Hola!

Bueno mira los elementos tienen que tener ancho (Width) para que se puedan centrar, ponerles el auto no es suficiente

Y todos los elementos de Heading (h1, h2, h3...) tienen un margin y un padding por defecto de cada navegador

Tienes que resetearlo para que no te de problema

colocas

Código :

H1, H2, h3, h4, h5, h6 {
   margin: 0;
   padding: 0;
}

Y ya

Me sirvió mucho lo que me dijiste sauilps... Muchisimas gracias.

Ahora tengo otra cuestión, hice el menú y me genera un margin-left que la verdad NO ENCUENTRO donde está el error, porque supuestamente la <ul> tiene que estar centrada dentro del <nav>...

Pero está un poco corrido a la derecha y no entiendo porqué...
Y otra cosita, como podría hacer pàra que no importa el tamaño del monitor el menu (<nav><ul>) quedé horizontal siempre todos los <li> de adentro y no se me bajen, porque probé achicando la pantalla y se me bajan y no entiendo porqué es...

Espero su salvación, muchisimas gracias nuevamente!

Saludos

Ah, te repito la URL por las dudas:
davincidesign.site50.net

uhmm realmente las "tags" predefinidas suelen crear algunos problemillas.. por lo que siempre se recomienda, como dice el amigo resetear.. o definir los parámetros. Anchura, Altura, etc... yo para menus me estoy acostumbrando a usar <span, igual es un error, pero asi controlo un poco más su unicación, funcionamiento etc.

Ok, voy a probar, igual me parece que le di una medida al <nav>, le di medida a la <ul>....
Pero pruebo...

Necesito que me digan como se les ve la web desde los distintos navegadores, y si se ve bien la fuente...

Saludos.

Quiero saber como hacer para que cuando se achica la pantalla, en vez de que la botonera se baje, se quede fija y aparezca el scroll, no se si me explico... porque se me baja y queda muy mal.

saludos

con DIV y con width y height, si los defines.... se respetan

La verdad no entiendo que me querés decir... Le puse un div "botonera" y sigue igual...

Explicame bien porque la verdad no entiendo... muchisimas gracias!

Saludos.

por defecto... los divs se contraen y expanden según la ventana. Para que esto no suceda tenemos que definir el ancho (width).

diríase que por defecto este parámetro es 100%, asi que ponemos el ancho que queremos que tenga.

<div style="width:250px....

de esta forma el navegador respetará ese ancho siempre(250px), sea como sea la ventana de este navegador. Al respetar la ventana no "aplasta o mueve" su contenido.

¿ok?

No, la verdad es que no me sale, me tira margenes fantasmas que la verdad que no entiendo porqué motivo me los tira...
Te paso la url, y te paso por acá el css, si me lo podrías arreglar y probar para que quede la botonera centrada y pasarme el código te lo voy a agradecer mucho!

davincidesign.site50.net


Codigo CSS:

Código HTML :

nav
{
   
   margin:50px auto;
   padding:0 auto;
   width:400px;
   font-weight: bold;
   height:36px;   
   background:rgba(152,191,191,0.5);
   vertical-align:baseline;
   
   border-radius: 10px; 
     -webkit-border-radius: 10px;
   -ms-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;
   
   -webkit-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
    -moz-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
   -o-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
   -ms-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
   
   position:relative;
}



ul
{
   list-style-type: none;
   margin:0 auto;
   text-align:center;
   position:absolute;
   
   
   }

Saludos y gracias

lo miraré a ver, dame un par de días... pero sialguién sabe la solución que la diga

1._ lo que no comprendo por que usas tags noHTML, es un híbrido o quieres hacerlo en XHTML XML??
2._ yo separaría el estilo, el de los bordes-redondos tal cual.. siendo porejemplo llamado de esta manera.

Código HTML :

 
.bordesredondos{
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -ms-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;

   -webkit-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
   -moz-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
   -o-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
   -ms-box-shadow: rgba(0, 0, 128, 0.246094) 0px 0px 8px inset;
}

3._ lo del nav, lo dejaria... en una clase estilo.

Código HTML :

.nav{
   width:150px;
   float:left;
   margin:5px;
   padding:10px;

   background:rgba(152,191,191,0.5);
}

si observas he eliminado cosas raras... que creo innecesarias... por ejemplo los auto's de los margin&padding.position:relative, labaseline etc...
4._en la pág propiamente dicha quedaría así.

Código HTML :

<div class=nav>
      <span><a href="index.html" class="actual">Inicio</a></span>
      <span><a href="portfolio.html">Portfolio</a></span>
      <span><a href="contacto.html">Contacto</a></span>
</div>

los estilos los puedes aplicar a classes, o a etiquetas como gustes.... (cursiva,colores, etc).
5._ tal cual esta escrito, el menú se quedará tal cual lo visualizas (en una linea) de ancho el marcado. Si lo que quieres es que siga el menú dentro del cuadrado... aunque el menu se reajuste en la pantalla, debes de cambiar la siguiente línea en el estilo nav.

width:150px; --por--> float:left;

luego es ir jugando... con valores, entorno etc..

La verdad que probé eso y me queda así... no lo hice con clases todo porque segun Freddy vega hay que usar clases cuando se usa para varias cosas...
Los bordes redondeados podría ser pero bueno...

El float left a la etiqueta Nav lo unico que hace es tirarmela a un costado de la página y que me quede el texto a los costados, no entiendo que me quisiste decir...

davincidesign.site50.net

saludos.

bien ... lo de usar clases para cuando se use para varias etiquetas es un buen consejo... pero realmente y si tomamos la postura de diseño... las clases/estilos han de ser comunes en un proyecto, (color, tamaño, tipografía etc). También las clases sirven para poder aclarar y estructurar el estilo... para poder fácilmente modificarlo.

por el resto, debe ser que me he perdido algo, pero sigo SIN entender por que usas la etiqueta "nav" como etiqueta <nav>, siendo más facil usar la etiqueta "div" como <div>, siendo por excelencia un contenedor, (que es como lo interpretan los navegadores, o eso creo yo), si cambias la etiqueta verás como... el texto entra dentro de la caja div.

Silvestre_:
Yo no veo ningún tab noHTML en la página referida. El tag <nav> es exactamente igual a un <div> desde el punto de vista de la presentación (la diferencia es semantica), lo mismo que <header> y <footer>.

Kombul:
¿Podrías hacer un gráfico de cómo quieres que quede ese menú?.

DriverOp escribió:

Yo no he dicho eso... en fin tendré que pegarle el código tal cual..

Así quiero que me quede DriverOp (las líneas del fondo es un problemita de la foto, sería liso):

[IMG=http://img840.imageshack.us/img840/9272/webprueba201.jpg][/IMG]

Saludos
Guille.

Ya logré centrar y todo perfecto.
Pero ahora tengo otro problema jaja.

1) En Firefox no me toma FontFace
2) En ie 7 se me ve toda mal la web y en firefox viejo tambien se ve mal, no se que codigo poner para que sea compatible.

Saludoss!

bueno en mi modesta opinion usar cierto tipo de codigo o tags... puede dar esos inconvenientes.

lo miraré a ver pero sigo en mis trece.

Silvestre... uso la etiqueta <nav> al igual que <footer> y <header> porque son las nuevas etiquetas de html5 que sirven para el posicionamiento en los buscadores siendo bien usadas, lo mismo que el <hgroup>...

O tengo entendido así...
saludoss

si claro... a ver. entonces.. ¿de que te quejas?... algunos navegadores no actualizados no las interpretan correctamente, y (no lo he provado) si bien podría equipararse en css , dan problemas.

<div> creo que html5 lo lee bien ¿no?, pues esa es la idea. me parece correcto el html5 sobretodo en lo que corresponde a backgrounds, creo que era algo que se necesitaba, al menos yo lo deseaba. Pero si quieres que haya una correspondencia hacia atras y que se visualice en el mayor número de sitios es lo que dá.

como bien dices:

Kombul escribió: