Foros del Web » Creando para Internet » HTML »

xhtml y css basico

Estas en el tema de xhtml y css basico en el foro de HTML en Foros del Web. Bueno me da un poco de pena preguntar por algo tan simple... Estoy aprendiendo estos dos lenguajes y tengo una dudas que e tratado de ...
  #1 (permalink)  
Antiguo 16/02/2011, 17:44
 
Fecha de Ingreso: febrero-2011
Mensajes: 10
Antigüedad: 6 años, 10 meses
Puntos: 2
xhtml y css basico

Bueno me da un poco de pena preguntar por algo tan simple...

Estoy aprendiendo estos dos lenguajes y tengo una dudas que e tratado de buscar por mi mismo, pero no lo encuentro y tampoco logro interpretar el código de otras paginas ya que todas son muy complejas

tengo un pequeño código de una pagina de pruebas

[spoiler]
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pruebas</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="wrapper">
<div id="header">
</div><!--cabezera de la pagina-->
<div id="menu">
</div><!--menu del documento-->
<div id="texto">
</div><!--texto del documento-->
</div><!--contenedor de la pagina wrapper-->
<body>
<p>prueba de texto1</p>
<p>prueba de texto1</p>
<p>prueba de texto1</p>
<p>prueba de texto1</p>
<p>prueba de texto1</p>
<p>prueba de texto1</p>
</body>
[/spoiler]

las consultas son las siguientes

1.- el texto escrito en el cuerpo del documento "body" queda fuera del contenedor de la pagina, me imagino obviamente que es por que no esta entre las etiquetas div "texto"

la consulta es, esto esta bien hecho ?
que pasa con body en este ejemplo

este es el css

[spoiler]
Código:
body {
	background-color: black;
}

#wrapper {
	height: 1000px;
	width: 800px;
	background-color: green;
	margin-left: auto;
	margin-right: auto;
}

#wrapper #header {
	height: 100px;
	width: 800px;
	background-color: orange;
}

#wrapper #menu {
	width: 800px;
	height: 40px;
	background-color: grey;
}
[/spoiler]

cualquier sugerencia es bien recibida, si esto esta mal, bueno es lo que e podido aprender :(
  #2 (permalink)  
Antiguo 16/02/2011, 17:53
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: xhtml y css basico

buenas...

te queda fuera porque la estructura esta mal. todos los documentos html tienen una estructura basica compuesta de la raiz <html> y dentro de esta <head> y <body>. dentro de <body> va todo el contenido que se mostrara en pantalla. o sea, que los <div> van dentro de <body>. ya el resto sera cuestion de como quieras acomodarlo; si los <p> dentro de los <div> o fuera, pero no al reves. en fin, en html se tiene que seguir unas normas puesto que ciertas etiquetas van dentro de otras, y en otras ocaciones ciertas etiquetas no pueden ir dentro de otras. la regla basica es que un elemento de tipo bloque no puede ir dentro de uno lineal. estas normas estan definida en el DTD que vas aplicar al documento, pero a mi parecer invitarte a analizar el DTD sera una mision imposible. para que tengas una idea de como luce el DTD XHTML Strict, http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 16/02/2011, 18:25
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: xhtml y css basico

tu html esta mal estructurado, los div deben de estar entre las etiquetas <body> y </body>

lo correcto seria

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-MX" lang="es-MX">
  3.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  4.     <meta name="author" content="Ag666" />
  5.     <meta name="keywords" content="" />
  6.     <title>Sin título 1</title>
  7.     <link rel="stylesheet" href="style.css" />
  8. </head>
  9.  
  10. <div id="wrapper">
  11. <div id="header">
  12. </div><!--cabezera de la pagina-->
  13. <div id="menu">
  14. </div><!--menu del documento-->
  15. <div id="texto">
  16. <p>prueba de texto1</p>
  17. <p>prueba de texto1</p>
  18. <p>prueba de texto1</p>
  19. <p>prueba de texto1</p>
  20. <p>prueba de texto1</p>
  21. <p>prueba de texto1</p>
  22. </div><!--texto del documento-->
  23. </div><!--contenedor de la pagina wrapper-->
  24.  
  25. </body>
  26. </html>

te recomiendo uses el validador para encontrar mas errores posibles y futuros

http://validator.w3.org/
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 16/02/2011, 22:27
 
Fecha de Ingreso: febrero-2011
Mensajes: 10
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: xhtml y css basico

ok, muchas gracias Ag666 y zerokilled esa parte solucionada

tengo otra duda

ahora en el código de la pagina hay un div hacia la derecha se supone de un banner o menu.

como dije antes solo estoy practicando una maquetación web

el problema es que al escribir texto "div texto" a pesar que le di las dimensiones interrumpe en "div leftmenu" y este baja su posición

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prueba</title>
<META name="Author" content="bla bla bla">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--cabezera de la pagina-->
<div id="menu">
</div><!--menu del documento-->
<div id="text"><p>esto es un parrafo
</p>
</div><!--texto de la pagina-->
<div id="leftmenu">
</div><!--menu flotante derecha-->
<div id="clear">
</div><!--deja footer al final del documento-->
<div id="footer">
</div><!--pie de pagina-->
</div><!--contenedor de la pagina-->
</body>
</html> 
css

Código HTML:
body {
	background-color: black;
}

#wrapper {
	height: 1000px;
	width: 800px;
	background-color: green;
	margin-left: auto;
	margin-right: auto;
}

#wrapper #header {
	height: 100px;
	width: 800px;
	background-color: orange;
}

#wrapper #menu {
	width: 800px;
	height: 40px;
	background-color: grey;
}

#wrapper #text {
	width: 78,736px;
	height: 211,507px;
}

#wrapper #leftmenu {
	width: 200px;
	height: 810px;
	float: right;
	background: yellow;
}

#wrapper #clear{
	clear: both;
}

#wrapper #footer{
	width: 800px;
	height: 50px;
	float: clear:both; 
	background: blue;
}
de antemano gracias por ayudar a un novato en esto
  #5 (permalink)  
Antiguo 16/02/2011, 23:42
 
Fecha de Ingreso: febrero-2011
Mensajes: 10
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: xhtml y css basico

ok buscando por todas partes encontré la solución

añadiendo

Código HTML:
float: left; 

position: relative;
en "div text" y "div leftmenu"

gracias

Etiquetas: basico, css, xhtml
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 16:49.