Comunidad de diseño web y desarrollo en internet online

Centar Página en CSS

Citar            
MensajeEscrito el 18 Ago 2006 02:47 pm
Se que se ha tocado el tema anteriormente, pero yo la verdad estoy hace poco aprendiendo a diseñar páginas Web y mi primera experiencia ha sido por medio de Dreamweaver usando CSS.
Mi duda es por qué motivo no aparece centrada mi pagina en PC´s de otros formatos. La pàgina la diseñé dando la medida del lado izquierdo a cada layer de manera que quede centrada en mi Computador, pero al verla en otros pc la pagina no se ve bien, de hecho hay que usar el mouse para verla entera.

Por alguna razón las soluciones que han dado no me han servido, debido a que <body> no aparece asi de delimitado en mi sitio sniff.

Si hay alguien con pasciencia se lo agradecerè montones!!!! Acà va el codigo de una de las pàginas.

Código :

</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body onload="MM_preloadImages('images/imagenclave-Cbotones_07.jpg','images/imagenclave-Cbotones_09.jpg','images/imagenclave-Cbotones_15.jpg','images/imagenclave-Cbotones_11.jpg','images/imagenclave-Cbotones_13.jpg')">
<div id="Layer4"></div>
  <div id="Layer5"></div>
  <div id="Layer6"></div>
  <div id="Layer7">
    <div align="center"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','images/imagenclave-Cbotones_07.jpg',1)"><img src="images/imagenclave_07.jpg" name="inicio" width="42" height="23" border="0" id="inicio" /></a></div>
  </div>
  <div id="Imegencop">
    <p class="texto13">Im&aacute;genes Corporativas </p>
  </div>
  <div id="lineanaranja"></div>
  <div id="camara">
    <p><span class="texto9"><a href="Camara.html" class="texto9">C&aacute;mara de Comercio de Temuco</a></span><br />
      <br />
    </p>
</div>
  <div id="HotelNicolas">
    <p class="linkNarnja">Hotel Nicol&aacute;s </p>
</div>
  <div id="LineaGris2"></div>
  <div id="ProMontes">
    <p class="texto9"><a href="ProMontes.html" class="texto9">Pro Montes</a></p>
</div>
  <div id="LineGris3"></div>
  <div id="Cima">
    <p class="texto9"><a href="Cima.html" class="texto9">Cima Comunicaciones</a> </p>
</div>
  <div id="LineaGris4"></div>
  <div id="flecha2"></div>
  <div id="Mailing">
    <p class="texto13"> Mailing</p>
</div>
  <div id="LineaGirs01"></div>
  <div id="LineaGris"></div>
  <div id="LineaGris6"></div>
  <div id="Taller">
    <p class="texto9"><a href="TallerMecanico.html" class="texto9">Taller Mec&aacute;nico</a> </p>
</div>
  <div id="LineaGris7"></div>
  <div id="Munita">
    <p class="texto9"><a href="Munita.html" class="texto9">Munita</a></p>
</div>
  <div id="LineGris8"></div>
  <div id="JpgHotel"></div>
  <div id="Layer25"><a href="Imagen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/imagenclave-Cbotones_11.jpg',1)"><img src="images/imagenclave-Sbotones_11.jpg" name="Image5" width="126" height="23" border="0" id="Image5" /></a></div>
  <div id="flecha"></div>
  <div id="diptico"><span class="texto13">D&iacute;ptico</span></div>
  <div id="Layer26"></div>
  <div id="dipticos">
    <p class="texto9"><a href="dipticos.html" class="texto9">D&iacute;pticos</a></p>
</div>
  <div id="Layer27"></div>
  <div id="bottom"></div>
  <div id="flecha1"></div>
  <div id="info"><span class="texto11">www.imagenclave.cl - [email protected]</span></div>
  <div id="espacioTabla"></div>
  <div id="espacioMUla"></div>
  <div id="LineaNegra"></div>
  <div id="LineaNegra2"></div>
  <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','images/imagenclave-Cbotones_07.jpg',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','images/imagenclave-Cbotones_07.jpg',1)"></a>
  </div>
<div id="Layer8"></div>
  <div id="Layer9">
    <div align="center"><a href="Nosotros.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nosotros','','images/imagenclave-Cbotones_09.jpg',1)"><img src="images/imagenclave-Sbotones_09.jpg" name="Nosotros" width="64" height="23" border="0" id="Nosotros" /></a></div>
  </div>
  <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nostros','','images/imagenclave-Cbotones_09.jpg',1)"></a>
  </div>
  <div id="Layer10"></div>
  <div id="Layer12"></div>
<div id="Layer13"><a href="Portafolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/imagenclave-Cbotones_13.jpg',1)"><img src="images/imagenclave-Cbotones_13.jpg" name="Image6" width="64" height="23" border="0" id="Image6" /></a></div>
  <div id="Layer14"></div>
  <div id="Layer15">
    <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacto','','images/imagenclave-Cbotones_15.jpg',1)"><img src="images/imagenclave-Sbotones_15.jpg" name="Contacto" width="57" height="23" border="0" id="Contacto" /></a></div>
  </div>
  <div id="Layer16"></div>
  <div id="Layer17"></div>
  <div id="Layer18"></div>
  <div id="Layer21">
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
</div>
  <div id="Layer23"></div>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
</body>
</html>

Utiliza las etiquetas CODE, ya que destruyes la estructura de la tabla.
Checa la sección tutoriales, tanto de centrado como de css básico

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 21 Ago 2006 09:00 pm
pudes declarar tu capa base de esta manera

contenido_general{
margin 0px auto;
}

y si utilizas una imagen de fondo

contenido_general{
background:url(../images/tuimagen.gif);
background:center;
margin:0px auto;
}

Por khafra

45 de clabLevel



 

Cyberia.SI

firefox
Citar            
MensajeEscrito el 21 Ago 2006 09:46 pm
Khafra, por favor utiliza la etiqueta code cuando hagas eso....

DULCI_NEA no se que quieras hacer con esto

Código :

<div id="Layer23"></div>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>


Pero yo estimo que sería mejor que le dieras un alto especifico a la capa de arriba en lugar de poner tanto espacio....

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 22 Ago 2006 01:40 pm
Gracias Kafhra y Aoyama por responder a mi pregunta.
La verdad es que es la primera vez que trabajo con paginas web y leyendo un tutorial comencé a diseñar, NUNCA miré los códigos, razón por la que creo está ese caos, que no sé como solucionar por que la página ya está online pero no se ve centrada en todos los PC´s y además sólo se ve bien en EXPLERER en el resto se desonfigura.

Sobre lo que me Preguntas Aoyama, de verdad no se que responderte :cry:

El sitio online es: www.imagenclave.cl quizás eso les ayuda a entender el desorden.
Gracias!!

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 22 Ago 2006 04:30 pm
Hola DULCI_NEA. Pues ese el principal problema de diseñar con WYSIWYG. Al final el codigo puede quedar muy liado y tu no sabrás como llegaste a eso.Lo mejor, es que diseñes con código y vayas revisando en los navegadores.

Ahora, si el editor fue frontpage...pues era de esperarse. IE no se apega a los estandares y por eso no se ve bien en otros navegadores. Y lo de M$ apesta.

Pues yo veo bien el centrado en Firefox. Para eso te sugiero que incluyas todo en un div asi:

Código :

<div align="center">

Esto te pondrá el texto alineado al centro en algunas ocasiones. Solucionalo con

Código :

<style>
body{
text-align:right;
}
</style>


Suerte! ^^

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 22 Ago 2006 05:32 pm
:cry: si lo siento mucho... prometo ser bueno y no hacer travesuras.

Por khafra

45 de clabLevel



 

Cyberia.SI

firefox
Citar            
MensajeEscrito el 22 Ago 2006 07:05 pm
Primero que nada, no hagas esto:

Código :

<div align="center">

Eso no se hace, para eso está CSS.

Lo que necesitas, es hacer un div que abarque todo lo que tienes despues de <body> y antes de <body>, de esta forma:

Código :

<body>
<dv id="centrado">
//todo el contenido aqui//
</div>
</body>

Luego en el CSS pones al principio:

Código :

body {
text-align:center; /*centrado para IE anteriores*/
}
div#centrado {
text-align:left; /*devuelve el texto a su posicion*/
margin:0 auto; /*esto centrara el div*/
width:700px; /*o lo que sea que mida la pagina de ancho*/

Con eso tienes, eso esta especificado en los tutos de CSS.

Por otro lado, te recomiendo optimizar el CSS, tienes un archivo imagenclave.css y ademas usas montones de estilos en la pagina, todo deberia ir en el archivo .css y ademas mucho menos, dudo que todo ese monton de codigo sea necesario

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 22 Ago 2006 10:24 pm
Muchas gracias Ramm por responder, haré lo que me recomiendas y luego te cuento como me fué. Respecto a lo de los còdigos, estoy segura que hay cosas que están demás, pero de verdad que trabajé todo el tiempo con el tutorial "Laying out Pages with CSS" y haciendo sólo lo que ahí aparecía, es la razón por la que no sé qué es lo que estoy hacsiendo mal o cómo se trabaja realmente ya que hecho todo sola :(

De hecho me pregunto también, si navegas por mi sitio hay una base que es igual en todas ellas, que es el top y algunos de los menús... si hago un cambio en una pagina, debo hacer los mismos cambios en cada una de las paginas??

Por favor tenganme pasciencia!!

Claudia

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 22 Ago 2006 10:27 pm
mmm lo otro... pensé que el archivo CSS era sólo para texto :S

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 22 Ago 2006 11:44 pm

DULCI_NEA escribió:

mmm lo otro... pensé que el archivo CSS era sólo para texto :S

El css sirve para muchas cosas, para posicionar los elementos de tu sitio, dar color, insertar imágenes, especificar tamaño, estilo, tipo de las fuentes... etc.

Ahora, con respecto a los cambios de tu página... con el top y los menús, los puedes llamar usando includes, en php, tu host debe soportar php para ello.

Los includes son para incluir ^^ pedazos de código en una página... así todas tus páginas pueden usar un solo top o menú, y si quieres hacer el cambio, sólo editas el archivo donde esta tu Top y menú, y listo, se actualizara en todas tus páginas.

Usa google. ^^

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 23 Ago 2006 12:55 am
Tengo la sensación que debo trabajar mas en esto porque estoy confundida, pero revisando el tutorial que tengo hago las cosas bien, ahora la duda que tengo es:

- cuando trabajan en dreamweaver tienen el documento en modo Layout, de manera que diseñan con layers y usan el CSS sólo para texto y roll over de imagenes o no?

Por que eso es lo que yo he estado haciendo y es la manera como hice la página.

* Parece que soy mejor en freehand y Photoshop Sniff :cry:

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 23 Ago 2006 03:21 am
generalmente el diseño ya esta previamente bocetado, y una vez decidido este se comienza a trabajar en el armado. usando css se puede armar toda la estructura de un sitio, generalmente sin nesecidad de tablas. asi como estableces las propiedades del texto, podes tambien establecer el alto de una div, su ancho, margen, bordes, colores, la imagen de fondo, o la ubicacion de las imagenes qeu insertas en el archivo...es decir, todo. no es que solamente sirve para los textos y ya.
yo tengo la costumbre de ver el codigo fuente de las paginas que me gustan, asi veo de que manera estan estructuradas y como manejan los estilos, y de a poco uno aprende pequeñas cositas de utilidad. realmente no es muy dificil, solo es cuestion de adaptarse.^^
podes pasar por la seccion de tutoriales de css y xhtml en esta misma web e ir haciendolos de a poco. y siempre podes seguir posteando tus dudas aca.

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

firefox
Citar            
MensajeEscrito el 23 Ago 2006 01:00 pm

DULCI_NEA escribió:

- cuando trabajan en dreamweaver tienen el documento en modo Layout, de manera que diseñan con layers y usan el CSS sólo para texto y roll over de imagenes o no?

Por que eso es lo que yo he estado haciendo y es la manera como hice la página.


Santo dios, NO!

He ahí la inmensa cantidad de CSS en tu código.

Obviamente el tutorial que estas haciendo no sirve, busca en la sección de tutoriales de css de esta web, el link que te dejo Mx y haz los que están ahí, aprende a escribir el CSS tu misma, a saber que significan las cosas.
Referencia CSS en este link encuentras una tabla de referencia CSS que te puede ayudar a entender que hace cada cosa.

Se que no es fácil al principio, pero luego verás que es más fácil que lo que estabas haciendo.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 23 Ago 2006 02:20 pm
Bueno ahora entiendo la razón de por qué las cosas no me resultaban tan fácil y me desanimaba la idea de comenzar la página de cero, pero creo que será lo mejor sniff.
Nunca es tarde para aprender, Gracias!!!

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 23 Ago 2006 02:23 pm
[bofh mode+]

Solo queria recordarles a los 90% de usuarios del foro. Existe la gente que hace paginas web por diversión y hobbie y no lo hacen para ganarse la vida, ni de forma profesional. Asi que.. quizás no sea bueno ser tan abusivos con los novatos que quieren hacer algo como "jugando". Se puede guiar, pero no "mandar".

[bofh mode-]

Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 23 Ago 2006 05:55 pm

NEO_JP escribió:

[bofh mode+]

Solo queria recordarles a los 90% de usuarios del foro. Existe la gente que hace paginas web por diversión y hobbie y no lo hacen para ganarse la vida, ni de forma profesional. Asi que.. quizás no sea bueno ser tan abusivos con los novatos que quieren hacer algo como "jugando". Se puede guiar, pero no "mandar".

[bofh mode-]

Saludos.


:o no habìa tomado en cuenta, ese pequeño detalle... :oops: XD

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 23 Ago 2006 07:01 pm
Si pudieran enviarme a algún tutorial muy básico de cómo usar el CSS que no sea el "Laying out pages with CSS" de macromedia, se los agradeceria montones!!!!

Por DULCI_NEA

11 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 23 Ago 2006 07:43 pm
En esta página puedes encontrar varios de ellos, ve a la sección de Tutoriales, específicamente aquí

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 

firefox
Citar            
MensajeEscrito el 24 Ago 2006 03:03 pm
Oye, RAMM, gracias por el tip de centrado. De hecho, no sabia que se podía hacer con CSS, y siempre lo hacia desde el html.

Y disculpas por mi ignorancia...pero cada dia se aprende ^^


Saludos!

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.