Entrar

[Problemon] Pies

loco004 · · Solicitar retirada
Hola si queria decirles q mi web cuando hago los pies queda mal para mozilla y internet exploror :S

wen aca les dejo las listas...
Si quieren verlo esta en http://lisla.onlinewebshop.net/plantilla.html

Plantilla.html:

<div id="cabecera"><div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</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>Titulo de la secciòn 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    <h1>Esta será la zona principal de la web</h1>


    sdadsadsdsasdsa</p>


    dsdjksafeyuiretgjk</p>
    <h2>Y este es el tercer parrafo</h2>


    jskdsadlsafjkeiret</p>


    dsañdlsadklsadsakdlsañ</p>
    </div>
    <div id="pie">
    <div id="pieuno">pie uno</div>
    <div id="piedos">pie dos</div>
    <div id="pietres">pie tres</div>

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

    </body>
    </html>



    -----------------------------------------------------------------------------------
    Estilo-general-css

    * {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) ; 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 {background-color: none ; width:280px ; float:left }
    #publicidad {background-color: none ; 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 20px 0px 20px}
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px ; 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 ; background-image: url(objetos/menu-parte-superior.gif)}
    #pie {background-color: whithe ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height:65px }
    #pieuno {background-color: brown ; float:left ; width:150px ; border-right: black 1px solid }
    #piedos {background-color: green ; float:left ; width:498px }
    #pietres {background-color: red ; float:left ; width:150px ; border-left: 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:link { }
    a:visited { }
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active { }



    Por Favor si podrian ayudarme...

    Gracias por la pag esta buenisima...!
    • Raulyure · · Solicitar retirada
    loco004 escribió:Hola si queria decirles q mi web cuando hago los pies queda mal para mozilla y internet exploror :S

    wen aca les dejo las listas...
    Si quieren verlo esta en http://lisla.onlinewebshop.net/plantilla.html

    Plantilla.html:

    <div id="cabecera"><div id="logotipo">[contenido no disponible]
    </div>
    <div id="publicidad">Bienvenidos a mi Web</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>Titulo de la secciòn 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    <h1>Esta será la zona principal de la web</h1>


    sdadsadsdsasdsa</p>


    dsdjksafeyuiretgjk</p>
    <h2>Y este es el tercer parrafo</h2>


    jskdsadlsafjkeiret</p>


    dsañdlsadklsadsakdlsañ</p>
    </div>
    <div id="pie">
    <div id="pieuno">pie uno</div>
    <div id="piedos">pie dos</div>
    <div id="pietres">pie tres</div>

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

    </body>
    </html>



    -----------------------------------------------------------------------------------
    Estilo-general-css

    * {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) ; 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 {background-color: none ; width:280px ; float:left }
    #publicidad {background-color: none ; 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 20px 0px 20px}
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px ; 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 ; background-image: url(objetos/menu-parte-superior.gif)}
    #pie {background-color: whithe ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height:65px }
    #pieuno {background-color: brown ; float:left ; width:150px ; border-right: black 1px solid }
    #piedos {background-color: green ; float:left ; width:498px }
    #pietres {background-color: red ; float:left ; width:150px ; border-left: 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:link { }
    a:visited { }
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active { }



    Por Favor si podrian ayudarme...

    Gracias por la pag esta buenisima...!
    • Hola:
    Solo así (muy rápidamente) sin detenerme mucho a revisar sus códigos he notado que parece ser que usted no ha cerrado la capa pie, usted lo tiene así

    <div id="pie">
    <div id="pieuno">pie uno</div>
    <div id="piedos">pie dos</div>
    <div id="pietres">pie tres</div>

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

    </body>
    </html>

    Y creo que debiera de tenerlo así:

    <div id="pie">
    <div id="pieuno">pie uno</div>
    <div id="piedos">pie dos</div>
    <div id="pietres">pie tres</div>
    </div> Este cierre de div es el que le falta
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    Saludos
    Agradecido de los que aprenden enseñando
    loco004 · · Solicitar retirada
    Gracias raul ahora eso esta solucionado pero ahora cuandoveo mi web por mozilla se ve toda destartalada(inestable) y por explorer de 10 :S

    la pag es:http://lisla.onlinewebshop.net/plantilla.html

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

    <html>
    <head>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>sasa</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </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>
    <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>Titulo de la secciòn 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    <h1>Esta será la zona principal de la web</h1>


    sdadsadsdsasdsa</p>


    dsdjksafeyuiretgjk</p>
    <h2>Y este es el tercer parrafo</h2>


    jskdsadlsafjkeiret</p>


    dsañdlsadklsadsakdlsañ</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>




    Estilo-general-css:

    * {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) ; 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 {background-color: none ; width:280px ; float:left }
    #publicidad {background-color: none ; 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 20px 0px 20px}
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px ; 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 ; background-image: url(objetos/menu-parte-superior.gif)}
    #pie {background-color: whithe ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height:65px }
    #pieuno {background-color: brown ; float:left ; width:150px ; border-right: black 1px solid }
    #piedos {background-color: green ; float:left ; width:498px ; background-color: silver}
    #pietres {background-color: red ; float:left ; width:150px ; border-left: 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:link { }
    a:visited { }
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active { }



    Gracias por todo ^^
    • Raulyure · · Solicitar retirada
    loco004 escribió:Gracias raul ahora eso esta solucionado pero ahora cuandoveo mi web por mozilla se ve toda destartalada(inestable) y por explorer de 10 :S

    la pag es:http://lisla.onlinewebshop.net/plantilla.html

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

    <html>
    <head>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>sasa</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </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>
    <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>Titulo de la secciòn 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    <h1>Esta será la zona principal de la web</h1>


    sdadsadsdsasdsa</p>


    dsdjksafeyuiretgjk</p>
    <h2>Y este es el tercer parrafo</h2>


    jskdsadlsafjkeiret</p>


    dsañdlsadklsadsakdlsañ</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>




    Estilo-general-css:

    * {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) ; 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 {background-color: none ; width:280px ; float:left }
    #publicidad {background-color: none ; 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 20px 0px 20px}
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px ; 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 ; background-image: url(objetos/menu-parte-superior.gif)}
    #pie {background-color: whithe ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height:65px }
    #pieuno {background-color: brown ; float:left ; width:150px ; border-right: black 1px solid }
    #piedos {background-color: green ; float:left ; width:498px ; background-color: silver}
    #pietres {background-color: red ; float:left ; width:150px ; border-left: 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:link { }
    a:visited { }
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active { }



    Gracias por todo ^^
    • Hola:
    Puede que sea bueno que en la hoja de estilo justo debajo de donde tiene la directiva para pie, pusiese una directiva para la lista de enlaces que tiene, por ejemplo para quitarle los puntos que salen a la izquierda de los enlaces, sería algo así:
    #pie li{list-style:none} Y aprovechándo esa misma directiva, para que los enlaces le queden un poco mas juntos, podría añadir un font-size:12px
    Así que le quedaría de esta manera:
    #pie{ etc. etc. etc. etc....... etc.}
    #pie li{list-style:none;font-size:12px;}
    Poco a poco hay que ir acomodándo los códigos para que se vaya viendo cada vez mejor en los dos navegadores
    Haga eso y ya nos dirá
    Saludos