Entrar

margen a la altura del menu

panzupo · · Solicitar retirada
Hola, soy nuevo en el foro.
Completé el curso paso a paso con html-kit y ahora mi pregunta es si se podría colocar un margen debajo del menu de la izquierda de tal forma de q todo el texto quedara alineado de la misma forma q el texto q queda a la derecha del menú.

No sé si me he explicado...

Gracias por la ayuda
Kamael · · Solicitar retirada
Hola panzupo

para colocar un margen abajo se usa el comando "margin-bottom: 0px" en ves de 0 le pones cuanto quieres poner de margen.

SI no es lo q querias explica como quieres tu web xD
panzupo · · Solicitar retirada
Lo he intentado con el margin-bottom y la consecuencia es q consigo el margen q quiero pero se me descoloca el pie de página.
Otra cosa, al subir ahora la página web veo q el menu lateral izquierdo ha pasado a estar blanco cuando en realidad la imagen es gris. Lo podeis ver en la sección de area de actividades de la web

Os paso la url:http://andoni.mywebcommunity.org/

Los codigos:
Codigo 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>Ingeniería Arana</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">




<script languaje="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array
("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto",
"Septiembre","Octubre","Noviembre","Diciembre")
document.write("<font color='#000080' face='geneva'>"+dayarray+" "+daym+" de "+montharray
+" de "+year+"</font>")
</script>



<a href="../index.html">


[contenido no disponible]
</a>
</div>
<div id="publicidad">

[contenido no disponible]


</div>
</div>



<div id="navegacion">
<ul>
  • Empresa
  • Areas de actividad
  • Proyectos
  • Contacto
  • Localización
  • Enlaces
  • Normativa
    </div>






    <div id="contenido">



    <div id="menu">
    <h1>Areas de actividad</h1>
    <ul>
  • Edificaciones
  • Instalaciones
  • Licencias y Autorizaciones
  • Vehículos
  • Gestión integrada


    </div>





    <h1>Areas de actividad</h1>
    <p align="center"><u>Metodología de Trabajo. Ejecución de un Proyecto de
    Ingeniería    </u></p>
    <p align="justify">1) El Proyecto Técnico. Tras disponer de los datos
    necesarios se redacta, revisa, y se Visa el Proyecto de Ingeniería en el Colegio
    Oficial de Ingenieros correspondiente. </p>
    <p align="justify">2) Aprobación. El Proyecto Técnico ha de ser aprobado
    por los Organismos con Competencia. </p>
    <p align="justify">3) Seguimiento de la Ejecución. Tras disponer de los
    permisos necesarios para el inicio de las obras, el Ingeniero Proyectista,
    asumirá por encargo del Promotor, la
    Dirección de Obra.     La Dirección de Obra implica un seguimiento por parte del
    Ingeniero que el desarrollo de la obra se adapta al proyecto aprobado, debe
    aprobar todos los cambios que se consideren oportunos. </p>
    <p align="justify">4) Certificación Final. El Ingeniero emitirá la
    Dirección de Obra    , la cual Certifica que el Proyecto se ha ejecutando
    correctamente conforme al Proyecto Técnico y que el conjunto de las ejecuciones
    bien proyectadas, o bien, modificaciones posteriores aprobadas, cumplen la
    normativa o Reglamentación de aplicación. Con el Certificado de Final de Obra o
    Dirección de Obra, junto la Documentación solicitada por los Organismos, se
    obtendrá finalmente la Licencia de Apertura y Legalizaciones necesarias.</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>

    Código CSS:

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color: rgb(153,204,0); font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size: 1.1em; color: rgb(153,204,0) ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    body {text-align: left }



    #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 {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 15px 0px 15px }
    #navegacion ul { margin-left: 60px }
    #contenido {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 10px 10px 0px 10px ; text-indent: 15px}

    #contenido li {list-style:none ; margin: 4px 8px 4px 6px }


    #menu {color: black ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior1.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 {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 ; background-color: silver ; padding: 0px 0px 0px 0px}
    #pietres {float:left ; width:150px }

    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: white ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color: white ; text-decoration:underline ; background-color: silver}
    a:active {}
    #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 {}
    • Yaneth · · Solicitar retirada
    hola

    subiste la imagen del menu????
    confirmalo poruqe no se mira

    y no veo el margin que le pusiste al menu, ponle solo un poco
    y si se descoloca el pie, de todas formas subelo para verlo

    saludos
    panzupo · · Solicitar retirada
    Antes de nada, muchas gracias por las respuestas.
    He añadido el margin-bottom al menu lateral y consigo el efecto deseado. El incoveniente con el q me encuentro ahora es q se me descuadra el pie de página.
    Otra cosa q me ocurre con el pie de pagina es q el pie del index aparece con el formato q yo quiero y en el resto de paginas aparece distinto. Por más q le doy vueltas al asunto no encuentro el error.

    Por si desean ayudarme os dejo la url: http://andoni.mywebcommunity.org

    El 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>Ingeniería Arana</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">


    </head>





    <body>
    <div style="text-align: center;">

    <div id="global">


    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">




    <script languaje="JavaScript">
    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var dayarray=new Array
    ("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
    var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto",
    "Septiembre","Octubre","Noviembre","Diciembre")
    document.write("<font color='#000080' face='geneva'>"+dayarray+" "+daym+" de "+montharray
    +" de "+year+"</font>")
    </script>



    <a href="empresa/index.html">


    [contenido no disponible]
    </a>
    </div>
    <div id="publicidad">

    [contenido no disponible]








    </div>
    </div>

    <div id="navegacion">

    <ul>
  • Empresa
  • Areas de actividad
  • Proyectos
  • Contacto
  • Localización
  • Enlaces
  • Normativa
    </div>


    <div id="contenido">






    <div id="menu">
    <h1>Empresa</h1>
    <ul>
  • ¿Quienes somos?
  • Nuestros técnicos
  • Localización
  • Contacto


    </div>



    <div id="principal">

    <div class="portada">[contenido no disponible]
    <span>

    <h3>EDIFICACIONES</h3></p>

    Cálculo de estructuras de hormigón y metálicas </p>

    Proyectos de Naves industriales y de viviendas</p></span></div>
    <div class="portada">[contenido no disponible]
    <span>

    <h3>LICENCIAS DE APERTURA</h3></p>

    Actividades AMINP: hostelería, industria, ...</p>

    Actividades exentas: Comercios, Despachos, ...</p></span></div>
    <div class="portada">[contenido no disponible]
    <span>

    <h3>INSTALACIONES</h3></p>

    Proyectos de Protección contra Incendios, Elecricidad en Baja Tensión, Gas, Ascensores, Gruas Torre, Saneamiento y Fontanería</p></span></div>
    <div class="portada">[contenido no disponible]
    <span>

    <h3>GESTION INTEGRADA</h3></p>

    Asesoramiento y gestión integrada del cliente: Ejecucion del proyecto técnico, tramitación de la documentación para la apertura de un negocio, ...</p></span></div>

    </div>


    <div id="pie">

    <div id="pie1">


    Ingeniería Arana - Atención al cliente - Avda. Guipuzcoa Nº 26 Bajo - Irun // Telf: 943666050 / Tlf. móvil: 600.42.40.34 / Fax: 943.61.80.75 </p>


    Ingeniería Arana - Centro de Estudio y cálculo - Sr. Aranzate Nº4 Bajo - Irun - Teléfono: 943.63.49.52 - Fax: 943.63.49.53</p>
    </div>

    <div id="pie2">
    <a href="mailto:[correo eliminado] ; [correo eliminado]; [correo eliminado]">

    [contenido no disponible]</a></p></a>

    </div>


    </div>




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

    </div>
    </body>
    </html>


    El CCS:

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

    h1 {font-size: 1.2em; color: rgb(153,204,0); font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size: 1.1em; color: rgb(153,204,0) ; font-weight: bold ; text-decoration: underline ;
    text-align: justify}
    body {text-align: left }


    .portada {
    float:left;
    width:275px;
    height:275px;
    margin: 5px;
    padding:5px;
    background-color:rgb(153,204,0);
    border-right: #a5a7aa solid 1px;
    border-bottom: #a5a7aa solid 1px;
    text-align:center;
    color: white ;
    margin-top: 20px
    }

    .tecnicos {

    width:300px;
    height:100px;
    margin: 5px;
    margin-left: 150px;
    padding:5px;
    background-color:rgb(153,204,0);
    border-right: #a5a7aa solid 1px;
    border-bottom: #a5a7aa solid 1px;
    text-align:center ;
    color: white ;
    margin-top: 20px
    }

    .contenedorfoto {
    float:left;
    width:110px;
    height:110px;
    margin: 5px;
    padding:5px;
    background-color:rgb(153,204,0);
    border-right: #a5a7aa solid 1px;
    border-bottom: #a5a7aa solid 1px;
    text-align:center;
    color: white
    }


    .sedes {
    float:left;
    width:250px;
    height:300px;
    margin: 20px;
    margin-left: 90px;
    padding:5px;
    background-color:rgb(153,204,0);
    border-right: #a5a7aa solid 1px;
    border-bottom: #a5a7aa solid 1px;
    text-align:center;
    color: white
    }




    #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:120px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 15px 0px 15px}
    #navegacion ul { margin-left: 60px }
    #contenido {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 10px 10px 0px 10px ; text-indent: 15px}

    #contenido li {list-style:none ; margin: 4px 8px 4px 6px;}


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



    #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 {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 50px ; margin-top: 20px }

    #pie1 {float:left ; width:710px ; color: white ; background-color: gray; font size: 11px ; height: 50px}

    #pie2 {float:left ; width:78px ; background-color: rgb(153,204,0); height: 50px }


    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }

    a {color: white ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color: white ; text-decoration:underline ; background-color: silver}
    a:active {}



    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}


    Gracias