Problemas con los margenes

rkristaly · 20 Nov 2009, 07:13 · Solicitar retirada

Hola excelente curso :)

Hoy termine el curso paso a paso, pero tengo un problema con los margenes de todas mis paginas (concierto, historia, videos,descargas, etc..)
Los parrafos me salen pegados al margen derecho de la pagina y los parrafos que empiezan debajo del menu lateral se me pegan al margen izquierdo tambien. Esto en todas la paginas

Aun no tengo servidor asi que les pego mi codigo para que me ayuden :) por favor :)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Codigo index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Página Oficial de la Banda</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="Global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>

Portada

Historia

Discografía

Conciertos

Descargas

Foro

Souvenirs

</div>
<div id="contenido">

<h1>Bienvenidos a la página oficial de la banda</h1>

Este es mi segundo parrafo que hago en mi pagina web,
hasta ahora eh aprendido como poner color, imagenes,centrar parrafos.

<h2>Este es mi tercer parrafo de mi nueva pagina web</h2>

Ya estoy en la segunda parte del curso en linea, estoy aprendiendo a hacer los menus, este curso esta muy
interesante, pero ya me estoy durmiendo son la una de la madrugada y aun estoy despierta</p>
</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>
</div>

</body>
</html>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Codigo estilos-general.css

* { text-index: 0px; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ;
text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ;
text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#curva-superior {background-image: url(objetos/curva-superior.gif.gif) ;
background-repeat: no-repeat ;
width:800px ; height: 12px;
overflow : hidden}
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px }
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ;margin: 0px 20px 0px 20px}
#navegacion ul { margin-left: 60px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid}
#contenido p {pandding: 5px 10px 5px 5px; text-index: 15px}
#menu {width: 150px ; float:left ; text-align:left ;
margin: 30px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif.gif);
background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ;
background-image: url(objetos/menu-parte-superior.gif.gif)}
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width:800px ; height: 12px;
overflow: hidden }
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Revise el codigo y a mi parecer es igual al del curso pero nose porque los margenesno me salen igual al del ejemplo.

les pido por favor me ayuden pues cambien los numeros en esta parte del codigo de la hoja de estilos
(#menu {width: 150px ; float:left ; text-align:left ;
margin: 30px 10px 3px 3px ;)

pero no lo pude arreglar :( , no se si es en otra parte del codigo donde se debe cambiar. :(

Gracias Saludos aTodos :P

Yaneth · 20 Nov 2009, 17:56 · Solicitar retirada

tienes esta linea repetida

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }

y en el html no veo la div menu

saludos

rkristaly · 21 Nov 2009, 06:37 · Solicitar retirada

Hola Yaneth

Gracias por revisar el codigo.

No tengo el div menu porque en la sexta parte del curso Jorge pide que se elimine ese codigo de la portada que es el Index.html y de la pagina foro, mira.

Curso paso a paso
Sexta parte ------- completar menu:

La portada no va a tener subsecciones y por tanto no tiene sentido mantener en ella ese menú lateral. Lo mismo ocurre con la sección Foro, no va a tener subsecciones, de modo que eliminaremos ese menú lateral de ambas, tanto de la portada (index.html) como del foro (foro.html).

Para eliminar el menú, basta con borrar las líneas de código que lo definen en los archivos index.html y foro.html. Recuerda que el código a eliminar es este:

<div id="menu">
<h1>Título de Sección 1</h1>
<ul>

Enlace 1

Enlace 2

Enlace 3

Enlace 4
</div>

Las páginas portada y foro no se van a deformar por eliminar esa parte de código. Tan solo no se verá el menú y el espacio que ocupaba pasa a formar parte del contenido central. En el futuro, si cambiamos de idea y queremos colocar de nuevo el menú, bastará con colocar de nuevo esas líneas de código, de modo que ya lo puedes eliminar sin miedo de ambas páginas, oki?

Si lo deseas, elimina solo el código que te acabo de decir arriba, pero deja las dos líneas de comentarios que habíamos puesto hace unas páginas. Me refiero a estas dos:

Vez por eso no tengo ese codigo porque él pide que se borre.

Gracias

Yaneth · 21 Nov 2009, 18:02 · Solicitar retirada

* { text-index: 0px; margin:0px ; padding:0px ; border: 0px; }

#contenido p {pandding: 5px 10px 5px 5px; text-index: 15px}

debe ser text-indent

#contenido p {pandding: 5px 10px 5px 5px; text-index: 15px}

debe ser padding

aqui
<div id="Global">
debe ser
<div id="global">

saludos

rkristaly · 22 Nov 2009, 08:16 · Solicitar retirada

Hola Yaneth :D

Muchas Gracias por revisar mi codigo, realize los cambios que me dijiste y ya todo funciona de maravilla

:D :D :D :D

Gracias de nuevo

Saludes

Yaneth · 23 Nov 2009, 17:04 · Solicitar retirada

es un placer

a veces ando medio apurada
y no tengo mucho tiempo jeje

pero con gusto lo hago

que tengas buen dia, y mucha suerte con tu proyecto

saludos