Foros del Web » Creando para Internet » HTML »

Los estilos CSS no salen igual en todas las paginas

Estas en el tema de Los estilos CSS no salen igual en todas las paginas en el foro de HTML en Foros del Web. Hola, me estoy iniciando a hacer paginas web por mi cuenta y me he dado cuenta de que es muuuy dificil. Ahora estoy construyendo una ...
  #1 (permalink)  
Antiguo 11/02/2011, 07:32
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 2 meses
Puntos: 0
Pregunta Los estilos CSS no salen igual en todas las paginas

Hola, me estoy iniciando a hacer paginas web por mi cuenta y me he dado cuenta de que es muuuy dificil. Ahora estoy construyendo una y tengo un problema que debe ser una tonteria pero es que llevo 2 dias intentando resolverlo y nada......

La verdad es que he aplicado estilos Css y en algunas paginas se me ve bien, y en otras mal.... A ver si me se explicar: la barra de navegacion, mas la"zona" mas la foto principal deberian quedar alineadas, y eso solo me pasa en una pag y en la otra no...

PAGINA EN LA QUE SE VE BIEN:
<div id="global">
<div id="cabecera">
<div id="logotipo"><img src="../objetos2/logo.png" width="518"
height="100" alt="Practicas recepcion"></a></div>
<div id="publicidad"><img src="../objetos2/flag.jpg" width="150"
height="80" alt="Practicas en Inglaterra"></a></div>
</div>
<p>
<div id="contenido">
<p>
<div id="pestanas"><ul><li><a href="../index.html">INICIO</a></li><li><a class="activa"><href="../practicas/practicas.html">PRACTICAS</a></li><li><a href="../cursos ingles/cursosingles.html">CURSOS INGLES</a></li><li><a href="../londres/londres.html">Beca MEC</a></li><li><a href="../index.html">LONDRES</a></li><li><a href="../testimonios/testimonios.html">TESTIMONIOS</a></li><li><a href="../faq/faq.html">F.A.Q</a></li><li><a href="../contacto/contacto.html">CONTACTO</a></li></ul></div>
<div id="zona">PRACTICAS / TRABAJO EN INGLATERRA</div>
</p>
<p>
<img src="objetos/catering.jpg" style="margin-left:00px" width="782px" height="280px" alt="practicas en recepcion"></p>
</p>
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>
<h1> PRACTICAS / TRABAJO EN LONDRES</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<h2>Y este es el tercer párrafo.</h2>



PAGINA QUE SE VE MAL:

<body>

<div id="global">
<div id="cabecera">
<div id="logotipo"><img src="objetos2/logo.png" width="518"
height="100" alt="Practicas recepcion"></a></div>
<div id="publicidad"><img src="objetos2/flag.jpg" width="150"
height="80" alt="Practicas en Inglaterra"></a></div>
</div>
<div id="contenido">
<div id="pestanas"><ul><li><a class="activa"><href="../index.html">INICIO</a></li><li><a href="../practicas/practicas.html">PRACTICAS</a></li><li><a href="../cursos ingles/cursosingles.html">CURSOS INGLES</a></li><li><a href="../londres/londres.html">Beca MEC</a></li><li><a href="../testimonios/testimonios.html">TESTIMONIOS</a></li><li><a href="../faq/faq.html">F.A.Q</a></li><li><a href="../contacto/contacto.html">CONTACTO</a></li></ul></div>
<div id="zona">INICIO</div>
<div id="fotoprincipal">
<img src="objetos2/recepcion.png" width="785px" height="280px" alt="practicas en recepcion">
</div>
<p>
<img src="objetos2/fondo.jpg" style="float:left"><h1>Gesline Practicas </h1></p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<h2>Y este es el tercer párrafo.</h2>

<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx

xxxxxxx

x
x
x
x
xx
xxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxx</p>
</div>
<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Gesine Editores</a></li><li><a href="#">Nosotros</a></li><li><a href="#">Inicio</a></li></ul></div>
<div id="piedos">Gesline Practicas Hosteleria y Turismo</div>
<div id="pietres"><ul><li><a href="#">Inicio</a></li><li><a href="#">Contacto</a></li><li><a href="#">Mapa Web</a></li></ul>
</div>
</div>

</body>


HOJA DE ESTILOS

* {margin:0px ; padding:0px ; border: 0px; font: calibri}

#global {width:800px ; margin:auto }
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

.imagen{margin:0 auto 0 auto}

p {text-align: justify ; font-family: calibri; color: grey}
h1 {font-size: 1.3em; color:#ff6600 ; font-weight: bold ; text-decoration: none ;
text-align: center ; font-family: a love of thunder; padding: 12px}
h2 {font.size: 1.1em; color: #ff6600 ; font-weight: bold ; text-decoration: none ;
text-align: center ; font-family: calibri}
body {text-align: center ; background-image: url(objetos2/background.jpg)}
#cabecera {border-top: silver 2px solid ;border-left: silver 2px solid;border-right: silver 2px solid; height:90px ; width: 800px}
#logotipo {width:516px ; float:left ; padding-left: 8px }
#publicidad {width:200px ; float:right ; padding-top:8px; padding-right:8px ;filter: alpha(opacity=30) }
#contenido {background-color:white; width: 800px; border-left: silver 2px solid;border-right: silver 2px solid}
#contenido p {padding-top:0px ; padding-right:0px ; padding-bottom:0px ; padding-top: 0px ; padding-left:6px ; margin:0px 0px 0px 0px }
#pestanas { width:780px; font-size: 10px;font-weight: bold; background-color: black}
#pestanas li {float:left;margin:0px 8px 0px 8px; padding:0; font-family:calibri; font-size: 1.4em}
#pestanas ul {list-style:none }

#pestanas a {padding:0px 8px 0px 12px; color: white;text-decoration:none}
#pestanas a:link {}
#pestanas a:visited {}
#pestanas a:hover {color:white ; text-decoration:bold ; display:block }
#pestanas a.activa {background-color:#ff6600; display: block}

#zona {padding: 0px; background-color: #ff6600; width:780px ; font-family:a love of thunder; text-align: right; padding-right :10px ; font-size: 20px }
#fotoprincipal { style: margin-left:00px; width:783px ; height:280px}

#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 10px ;
background-color: black;
padding-bottom:5px }
#menu li {list-style:none ; margin: 0px 0px 0px 0px ; font-family: calibri }
#menu a {color: white; text-decoration:none}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color:white ; text-decoration:bold ; display:block }
#menu a.activa {background-color:#ff6600; display: block}

#pie {border: silver 2px solid ; width: 800px ; height: 70px; background-color: white}
#pieuno { float:left ; padding-right: 165px; padding-left: 40px }
#piedos { font-family: calibri; color: grey ; float:left}
#pietres { float : left; padding-left: 165px ; padding-right:40px }

#pie li {list-style:none ; font-size:12px }
#pie a {font-family: calibri; color: grey; text-decoration:none}
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:bold }
#pie a:active {color:black}



No se que hago mal... al igual hay errores pk me estoy volviendo loca intentando mil cosas... espero haberme explicado bien con el poco vocabulario tecnico que tengo hasta el momento..

Muchas gracias.
  #2 (permalink)  
Antiguo 11/02/2011, 09:18
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: Los estilos CSS no salen igual en todas las paginas

Hola:

No sé exactamente cuales son las diferencias, sencillamente se ven distintas porque las dos páginas son distintas, pero tienes una serie de errores:

Cita:
Iniciado por natalia_g_r Ver Mensaje
PAGINA EN LA QUE SE VE BIEN:

<div id="global">
<div id="cabecera">
<div id="logotipo"><img src="../objetos2/logo.png" width="518"
height="100" alt="Practicas recepcion"></a></div>
<div id="publicidad"><img src="../objetos2/flag.jpg" width="150"
height="80" alt="Practicas en Inglaterra"></a></div>
</div>
<p>
<div id="contenido">
<p>
<div id="pestanas"><ul><li><a href="../index.html">INICIO</a></li><li><a class="activa"><href="../practicas/practicas.html">PRACTICAS</a></li><li><a href="../cursos ingles/cursosingles.html">CURSOS INGLES</a></li><li><a href="../londres/londres.html">Beca MEC</a></li><li><a href="../index.html">LONDRES</a></li><li><a href="../testimonios/testimonios.html">TESTIMONIOS</a></li><li><a href="../faq/faq.html">F.A.Q</a></li><li><a href="../contacto/contacto.html">CONTACTO</a></li></ul></div>
<div id="zona">PRACTICAS / TRABAJO EN INGLATERRA</div>
</p>
<p>
<img src="objetos/catering.jpg" style="margin-left:00px" width="782px" height="280px" alt="practicas en recepcion"></p>
</p>
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>
<h1> PRACTICAS / TRABAJO EN LONDRES</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<h2>Y este es el tercer párrafo.</h2>



PAGINA QUE SE VE MAL:

<body>

<div id="global">
<div id="cabecera">
<div id="logotipo"><img src="objetos2/logo.png" width="518"
height="100" alt="Practicas recepcion"></a></div>
<div id="publicidad"><img src="objetos2/flag.jpg" width="150"
height="80" alt="Practicas en Inglaterra"></a></div>
</div>
<div id="contenido">
<div id="pestanas"><ul><li><a class="activa"><href="../index.html">INICIO</a></li><li><a href="../practicas/practicas.html">PRACTICAS</a></li><li><a href="../cursos ingles/cursosingles.html">CURSOS INGLES</a></li><li><a href="../londres/londres.html">Beca MEC</a></li><li><a href="../testimonios/testimonios.html">TESTIMONIOS</a></li><li><a href="../faq/faq.html">F.A.Q</a></li><li><a href="../contacto/contacto.html">CONTACTO</a></li></ul></div>
<div id="zona">INICIO</div>
<div id="fotoprincipal">
<img src="objetos2/recepcion.png" width="785px" height="280px" alt="practicas en recepcion">
</div>
<p>
<img src="objetos2/fondo.jpg" style="float:left"><h1>Gesline Practicas </h1></p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<h2>Y este es el tercer párrafo.</h2>

<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx

xxxxxxx

x
x
x
x
xx
xxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxx</p>
</div>
<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Gesine Editores</a></li><li><a href="#">Nosotros</a></li><li><a href="#">Inicio</a></li></ul></div>
<div id="piedos">Gesline Practicas Hosteleria y Turismo</div>
<div id="pietres"><ul><li><a href="#">Inicio</a></li><li><a href="#">Contacto</a></li><li><a href="#">Mapa Web</a></li></ul>
</div>
</div>

</body>


HOJA DE ESTILOS

* {margin:0px ; padding:0px ; border: 0px; font: calibri}

#global {width:800px ; margin:auto }
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

.imagen{margin:0 auto 0 auto}

p {text-align: justify ; font-family: calibri; color: grey}
h1 {font-size: 1.3em; color:#ff6600 ; font-weight: bold ; text-decoration: none ;
text-align: center ; font-family: a love of thunder; padding: 12px}
h2 {font.size: 1.1em; color: #ff6600 ; font-weight: bold ; text-decoration: none ;
text-align: center ; font-family: calibri}
body {text-align: center ; background-image: url(objetos2/background.jpg)}
#cabecera {border-top: silver 2px solid ;border-left: silver 2px solid;border-right: silver 2px solid; height:90px ; width: 800px}
#logotipo {width:516px ; float:left ; padding-left: 8px }
#publicidad {width:200px ; float:right ; padding-top:8px; padding-right:8px ;filter: alpha(opacity=30) }
#contenido {background-color:white; width: 800px; border-left: silver 2px solid;border-right: silver 2px solid}
#contenido p {padding-top:0px ; padding-right:0px ; padding-bottom:0px ; padding-top: 0px ; padding-left:6px ; margin:0px 0px 0px 0px }
#pestanas { width:780px; font-size: 10px;font-weight: bold; background-color: black}
#pestanas li {float:left;margin:0px 8px 0px 8px; padding:0; font-family:calibri; font-size: 1.4em}
#pestanas ul {list-style:none }

#pestanas a {padding:0px 8px 0px 12px; color: white;text-decoration:none}
#pestanas a:link {}
#pestanas a:visited {}
#pestanas a:hover {color:white ; text-decoration:bold ; display:block }
#pestanas a.activa {background-color:#ff6600; display: block}

#zona {padding: 0px; background-color: #ff6600; width:780px ; font-family:a love of thunder; text-align: right; padding-right :10px ; font-size: 20px }
#fotoprincipal { style: margin-left:00px; width:783px ; height:280px}

#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 10px ;
background-color: black;
padding-bottom:5px }
#menu li {list-style:none ; margin: 0px 0px 0px 0px ; font-family: calibri }
#menu a {color: white; text-decoration:none}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color:white ; text-decoration:bold ; display:block }
#menu a.activa {background-color:#ff6600; display: block}

#pie {border: silver 2px solid ; width: 800px ; height: 70px; background-color: white}
#pieuno { float:left ; padding-right: 165px; padding-left: 40px }
#piedos { font-family: calibri; color: grey ; float:left}
#pietres { float : left; padding-left: 165px ; padding-right:40px }

#pie li {list-style:none ; font-size:12px }
#pie a {font-family: calibri; color: grey; text-decoration:none}
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:bold }
#pie a:active {color:black}



No se que hago mal... al igual hay errores pk me estoy volviendo loca intentando mil cosas... espero haberme explicado bien con el poco vocabulario tecnico que tengo hasta el momento..

Muchas gracias.
En la página que se ve bien:

1º <Div> dentro de <p>
2º Cierres de etiqueta <a> sin haberlos abierto.
3º En esta línea: <a class="activa"><href="../practicas/practicas.html">PRACTICAS</a>, "cierras" el a y dejas el href fuera, debería ser así: <a class="activa" href="../practicas/practicas.html">PRACTICAS</a>

En la página que no se ve bien:

1º Cierres de etiqueta <a> sin haberlos abierto.
2º En esta línea: <a class="activa"><href="../practicas/practicas.html">PRACTICAS</a>, "cierras" el a y dejas el href fuera, debería ser así: <a class="activa" href="../practicas/practicas.html">PRACTICAS</a>
3º Las etiquetas de cabecera hx no pueden ir dentro de <p>

En el CSS:

1º font-family: la fuente que pretendes utilizar debe ir entre comillas cuando es más de una palabra, además es un font que no es habitual con lo cual deberías utilizar font-face.
2º en fotoprincipal tienes un style que no debería ir ahí.

Te recomiendo que te tomes una tarde libre, y te leas los manuales de xhtml y css de www.librosweb.es, sólo te llevará una tarde y después continúes con tu proyecto.

Otra recomendación, para corregir errores es conveniente que vayas validando tu código en la página de la w3c.

Saludos.

  #3 (permalink)  
Antiguo 12/02/2011, 07:04
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Los estilos CSS no salen igual en todas las paginas

Muchisimas gracias, muy amable :)

Me han servido tus consejos pues por ejemplo lo de h1 no lo sabia q no podia ir dentro de p...
y errores que te has dado cuenta que yo no habia visto. Desde luego hare ese curso del que me hablas y a ver si me funciona :)

Gracias de nuevo.

Etiquetas: css, estilos, todas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:01.