Entrar

Mi web: problemas con el menú lateral

Kane · · Solicitar retirada
Bueno primero quiero disculparme si este post no está en le sitio adecuado. De momento, estoy intentando crear mi web aplicado lo que he aprendido con el curso, de paso, esta web me salió muy bien. Ahora, haciendo unas modificaciones a la base no me sale el menú lateral.
Aquí os pongo una captura de la plantilla:
[contenido no disponible]



Ahora el código HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Page title</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<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">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab…"
width="155"
height="27"
id="haxe"
align="middle">
<param name="movie" value="http://static1.grsites.com/user/folders/Kane/r4222439/logo22278502.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://static1.grsites.com/user/folders/Kane/r4222439/logo22278502.swf"
bgcolor="#ffffff"
width="155"
height="27"
name="haxe"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
<a href="index.html">
[contenido no disponible]</a></div>
<div id="publicidad">BIENVENIDOS</div>
</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>
  • <h1>Título de Sección 1</h1> Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>
    <h1> Bienvenidos a INMENU</h1>
    <h2> Aquí encontraras herramientas para ayudarte a controlar tu proceso de adelgazamiento</h2>


    blablabla</p>


    blablabla.</p>


    blablabla</p>


    blablabla</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    y el código estilo-general-css

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color: black; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color: black; 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) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
    #cabecera { background-color: #F5FFFA ; border-left: black 1px solid ; border-right: black 1px solid ; height: 85px}
    #logotipo {background-color: #F5FFFA ; width: 280px ; float:left }
    #publicidad {background-color: #F5FFFA ; width:518px ; float:right ; margin-top:25px ; font-size: 16px}
    #navegacion {background-color: pink; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: #F5FFFA ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {padding: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.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 ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif)}
    #pie {background-color: #F5FFFA ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a {color:brown ; text-decoration:none ; display:block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color:silver}
    a:active {}

    Gracias
    • .:2-D:. · · Solicitar retirada
    hola estuve checando tu codigo
    agregale esto a tu css:

    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif); width:150px}

    y fijate si queda medio descuadrado margenes etc..

    un saludo mi amigo

    aaaa recuerda esto de "background-repeat: no-repeat"
    por que como ves en tu imagen se empieza a ver nuevamete el fondo, a repetir, por ambos lados.

    Arian
    Kane · · Solicitar retirada
    Hola .:2-D:.
    Gracias por contestar tan rápido y sobre todo un domingo.

    Pensaba que era el borde que había crecido y no que el background empezaba de nuevo. ¡Cuánto tengo que aprender!

    Lo del 150px funcionó a las mil maravillas, pero pienso que he puesto el "background-repeat:no-repeat" al sitio equivocado porque no funcionó.

    Aquí tienes lo que puse:
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif); background-repeat: no-repeat ; width:150px }

    Gracias otra vez.
    .:2-D:. · · Solicitar retirada
    en efecto mi querido amigo/a
    vos siempre tenes que mirar cual es el problema, y en este caso ves que es que se repite el fondo ¿no?
    bueno entonces ya sabemos que para solucionar debemos de insertar un bg-repeat:no-repeat ¿ok?

    ahora preguntemonos que fondo se repite?

    vos ves que se repite la parte superior o inferior?

    lo que se repite es la parte inferior por ende vos tenes que poner el bg-repeat:no-repeat dentro de la hoja de estilos en la parte donde se encuentra el llamado a la imagen inferior de tu menu
    es decir de esta manera:

    #menu {width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    background-repeat: no-repeat;
    padding-bottom:5px }

    de esa forma se quita ese problema.
    de todas formas no quites el que agregaste a la imagen superior, nunca esta de mas :wink:

    un saludo mi amigo/a hoy puedo ayudar mas por que no tengo clases :D de todas formas te mando en un mp la direccion de mi foro, por el ando mas seguido y tal vez si por estos lados no responden por estar ocupados yo te puedo ayudar por aya :wink:

    un saludo

    Arian
    Kane · · Solicitar retirada
    Bueno he añadido el: background-repeat: no-repeat;
    pero parece que no lo hice bien porque ahora es lo que tengo.

    [contenido no disponible]
    .:2-D:. · · Solicitar retirada
    bueno eso yo lo solucione cambiando esto:

    <div id="menu">
    <ul>
  • <h1>Título de Sección 1</h1> Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    lo cambie asi:

    <div id="menu">
    <ul>
    <h1>Título de Sección 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    y se soluciona
    un saludo :wink:

    Arian
    • Kane · · Solicitar retirada
    Muchísimas gracias a los dos. Ya todo está hasta la próxima vez que meto la pata :cry: