Ver Mensaje Individual
  #2 (permalink)  
Antiguo 11/02/2011, 09:18
Avatar de jomaruro
jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 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.