xhtml y css basico

binalkernel · #1 (**permalink**) 16/02/2011, 17:44

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 :(

zerokilled · #2 (**permalink**) 16/02/2011, 17:53

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

ArturoGallegos · #3 (**permalink**) 16/02/2011, 18:25

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

lo correcto seria

Código HTML:

Ver original<!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" xml:lang="es-MX" lang="es-MX">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Ag666" />
    <meta name="keywords" content="" />
    <title>Sin título 1</title>
    <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="texto">
<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>
</div><!--texto del documento-->
</div><!--contenedor de la pagina wrapper-->
 
</body>
</html>

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

http://validator.w3.org/

binalkernel · #4 (**permalink**) 16/02/2011, 22:27

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

binalkernel · #5 (**permalink**) 16/02/2011, 23:42

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