Entrar

la pagina no me queda como la del curso

piltrafa · · Solicitar retirada
tengo un problema, estoy en la leccion tercera, despues de poner el logotipo y el apartado de publicidad, he comenzado a poner el menu horizontal, pero no me queda como el ejemplo vuestro. el menu horizontal en vez de ser igual de largo que el vuestro, que ocupa todo el ancho de la web, el mio solo ocupa el espacio de ancho del logotipo.
y no se porque. espero que me podais ayudar.
piltrafa · · Solicitar retirada
carpeta estilo-general.css:

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {background-color: ; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color:gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px}
#contenido {background-color: orange } #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px ; border-left: black 1px solid ; border-right: black 1px solid}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#menu li { list-style:none ; margin: 4px 0px 4px 6px}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
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}
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px overflow: hidden }


plantilla:

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

<html>
<head>
<title>Page title</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">[contenido no disponible]</div><div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    En esta zona de la pagina principal de mi web ira el texto que me interese poner para poder ver los ejemplos que yo quiera que vea la gente</p>
    <h2>Aunque bien pensado,</h2>

    podria meter tambien fotos y demas para que quede mas bonita, aunque es posible que no baste con unas poca fotos pero igual deberia meter mas para que este texto llegue bastante abajo para que pueda ver el ejemplo.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>

    </html>
    • piltrafa · · Solicitar retirada
    por si quieres ver el resultado, el nombre de la pagina que ya esta en internet es:

    sancha.mywebcommunity.org

    gracias
    piltrafa · · Solicitar retirada
    he estado probando y creo que tengo una solucion a mi problema.
    le he cambiado la separacion de pixeles de 25 px de margen-top y le he puesto 30px margen top y le he dado tambien 29 px margen-bottom.

    no se si sera una opcion valida pero os lo pongo aqui para que compareis con lo anterior a ver si sirve o no.
    gracias.


    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {background-color: ; width:518px ; float:right ; margin-top:30px ; margin-bottom: 29px}
    #navegacion {background-color:gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px}
    #contenido {background-color: orange } #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px ; border-left: black 1px solid ; border-right: black 1px solid}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
    a {color: blue; font-size:1.3em ; text-decoration: none}
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    #menu li { list-style:none ; margin: 4px 0px 4px 6px}
    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    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}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px overflow: hidden }
    Yaneth · · Solicitar retirada
    y eso te da resulatdo???

    te gusta como queda???'

    eso es lo mas importante, que tu quedes satisfecha con el resultado

    saludos