Comunidad de diseño web y desarrollo en internet online

aprendiendo xhtml y css

Citar            
MensajeEscrito el 10 Ene 2006 01:24 pm
Hola, estoy tratando de aprende a maquetar con div y css, pero de momento me está resultando bastante complicado. En IE se me ve la web totalmente distinta a como se ve en Firefox. Supongo que estaré aplicando propiedades css inadecuadas o algo, no se. Tampoco se si la estructura de div que estoy haciendo es la más correcta. Todavia no le he aplicado estilos a los menus pero de momento eso no me preocupa, tengo que aprender pasos previos antes.
A ver si me podeis echar una mano y orientarme un poco.

Aquí os pongo el codigo:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="estilos/estilos.css" />
</head>
<body>
<div id="contenedor">
   <div id="cabecera">
      <a href="index.htm" title="Página de inicio"><img class="logo" src="images/logo.gif" alt="" /></a>
      <ul id="idiomas">
         <li><a href="#" title="euskera">Euskera</a> |</li>
         <li><a href="#" title="catala">Catala</a> |</li>
         <li><a href="#" title="english">English</a></li>
      </ul>
   </div>
   
   <div id="cabecera2">
      <h1><p class="eslogan">aaaaaa</p></h1>
      <ul id="menu">
         <li></li><a href="#">La casa rural</a> |</li>
         <li><a href="#">Qué hacer</a> |</li>
         <li><a href="#">Precios y reservas</a> |</li>
         <li><a href="#">Localización</a></li>
      </ul>
   </div>
   
   <div id="contenido">
      <img src="images/casa.jpg" alt="" />
      <h2>La Casa Rural</h2>
      <div id="col-1">
         <p>Texto</p>
         <p>Texto</p>
      </div>
      
      <div id="col-2">
          <p>Texto</p>
         <p>Texto</p>
      </div>
   </div>
   
   <div id="pie">
    © Texto | Direccion | <abbr title="Teléfono">tel.</abbr>: 999 999 999 - <a href="mailto:[email protected]" title="dirección de correo electrónico">[email protected]</a>
   </div>
</div>
</body>
</html>



Un saludo y muchas gracias por anticipado

[BOFH=neojp]Creo que está de más que pongas tu código CSS, entendemos el porqué sucede esto. Y creo que poner un enlace a una web seria lo más conveniente. Por lo tanto borré el código.[/BOFH]

Por bulldog

5 de clabLevel



 



Ultima edición por bulldog el 05 Feb 2006 11:22 pm, editado 1 vez

msie
Citar            
MensajeEscrito el 10 Ene 2006 03:33 pm
El problema con IE, es que interpreta tu código a su manera, y no deacuerdo a lo dispuesto por la W3C, haciendo que tu página se vea diferente.

El problema más grande son los padding y los margin, ya que para IE tiene formas raras para interpretar estos dos ultimos.

^^ hasta ahora no me han dicho nada... yo uso esto

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 10 Ene 2006 05:57 pm
Tu XHTML lo veo bien, vas por buen camino, incluso estás usando el abbr muy bien. Como consejo te diria que el pie de página también sea un párrafo y uses los carácteres especiales con su respectivo &, por ejemplo el © es &copy;

Código :

<div id="pie">
    <p>&copy; Texto | Direccion | <abbr title="Teléfono">tel.</abbr>: 999 999 999 - <a href="mailto:[email protected]" title="dirección de correo electrónico">[email protected]</a></p>
</div>


Respecto al CSS que se malinterpreta en IE, es cierto que IE no respeta bien el método de cajas. Para esto puedes buscar información de cómo funciona y asi podrás entender cómo hacer código lo suficientemente bien para que funcione. Un saludo.

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 10 Ene 2006 06:08 pm
que buenos links the_NEO_JP

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

firefox
Citar            
MensajeEscrito el 10 Ene 2006 10:31 pm
Creo que abusas del uso del float y no sumas los anchos :P

En un tutorial de ramm, no recuerdo cual puedes corregir eso.

saludos :)

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 15 Ene 2006 08:16 pm
Buenas, despues de seguir documentandome esta semana y dar vueltas al asunto, os voy a achicharrar a preguntas, luego os tendré que invitar a unas copas :P


Primero, para que no me echen la bronca por poner todo el código, aquí va la : url y el archivo css

Comienzo con la bateria de preguntas:

-El alto de la cabecera no es el correcto en IE ya que corta parte de la imagen de fondo, es necesario que le ponga al estilo el height que tiene la imagen de fondo?

-El pie, por que si tiene aplicado width:760px se me incrusta entre las 2 columnas en Firefox? No se supone que con ese ancho no debería ocupar la parte inferior? Le he metido clear:both, es esto correcto?

- Al body le aplico un font pero luego los textos no me cogen ese font, que es lo que estoy haciendo mal?

- Al div="contenido" le aplico un color de fondo que según entiendo yo tendría que abarcar la imagen con las 2 columnas de texto, esto es así en IE pero no en FF, por que??

- A la foto de la casa es conveniente indicarle en la etiqueta img el alto y ancho o como ya tiene las dimensiones con las que quiero que se muestre no hace falta?

- Maikel, me comentas que uso en exceso float, en donde crees que no debería de ponerlo? Y me he puesto a sumar anchos, que como tu dices, no los sumaba, por ejemplo, en el div="contenido" la imagen, los padding y las columnas me suman un total de 720px, debería indicarle padding y margin hasta llegar a un total de 760px (que es el máximo)??

El menú lo he metido en otro div, esta bien así? es que no se si creo div´s innecesarios.

Lo que es el título "La casa rural", lo tendría que meter en un <p>??

Muchas gracias por anticipado y perdonad las molestias pero al principio resulta dificil todo esto?

P.D: Por cierto, el jueves es mi cumpleaños y ya he pedido de regalo el libro "Diseño con estandares web" :)

Por bulldog

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Ene 2006 01:10 am
Un poco de :spam: no cae mal de vez en cuando XD





mira éste artículo que acabo de escribir en mi blog





:wink:

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

clabbrowser
Citar            
MensajeEscrito el 18 Ene 2006 10:31 am
Ya lo leí pero creo que ahora necesito tratar de encontrar respuestas al porqué de determinados comportamientos al aplicar unos estilos u otros. Ya que a modo general la teoría ya la voy comprendiendo ahora necesito comprender la práctica.

Por bulldog

5 de clabLevel



 

msie
Citar            
MensajeEscrito el 19 Ene 2006 07:47 pm
Suerte (y)

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 21 Ene 2006 11:12 am
Suerte, pero alguna respuesta a mis preguntas?

Por bulldog

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ene 2006 12:37 am
la respuesta es simple: a ie la valen madre los estándares.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 22 Ene 2006 01:29 am

fael escribió:

la respuesta es simple: a ie la valen madre los estándares.


XD XD ayyyy.... pero que cierto es eso... XD

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 22 Ene 2006 07:16 pm

J O S escribió:

fael escribió:

la respuesta es simple: a ie la valen madre los estándares.


XD XD ayyyy.... pero que cierto es eso... XD


Vale, IE pasa de estándares, pero habrá alguna solución, no?

Por bulldog

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ene 2006 07:34 pm

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 24 Ene 2006 12:08 pm
Hola, quisiera haceros una pregunta...
he colocado una imagen en la cabecera de mi blog. A esta imagen le hemos incorporado las letras. Cómo lo hago para hacer transparente el título del blog que genera automáticamente la plantilla?
Gracias por vuestra ayuda y por este gran foro. :)

Por topo

0 de clabLevel



Genero:Masculino  

2005

msie

 

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