Entrar

En iexplorer todo bien... en GCrome y firefox desordenado..

Wastainer · · Solicitar retirada
Wenas, soy novato, aunke aprendo rapido, me gusta y estoy ilusionado con el html, he seguido el curso paso a paso, y he echo la web de mi grupo pero al visionar en firefox o en el google Crome, todo sale patas arriba, y ya tengo la vista cansada y no encuentro la solucion en el curso, podeis echarme un cable?? plisssss!!!!!
aki os dejo el codigo y el css del index, y de la plantilla.....
gracias de antemano

codigo index:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Bienvenidos a nuestra pagina web.......</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="contenido">

<div id="encabezado">Bienvenidos a la pagina web de AraniA!!!! En construccion.......</div>

<div id="gracias">..... MUY PRONTO ESTARA DISPONIBLE.......
</div>
<div id="logofondo">[contenido no disponible]</div>
<div id="entrar1">ENTRAR............>>>>></div>
<div id="entrar">[contenido no disponible]</div>
<div id="correo">[correo eliminado]
</div>
<div id="CCTW">Página creada gracias a CCTW</div>

</div>
<div id="pie"></div>
</div>
</body>
</html>

CSS index:
body { background-color:black;text-align:center }
#global {width:800px ; margin:4px auto }

img { border-style: none }

.centrado { text-align:center }
#contenido {background-color: black ; border-left: black 1px solid ;
border-right: black 1px solid;
font-size: 1.2em; color:white;padding-top:15px }
#encabezado {padding-top:20px;font-size:25px}
#correo {width:300px}
#logofondo { border-style: none;
img-position:center center }
#CCTW {font-size:15px;text-align:left;width:200px;margin-top:30px}
#gracias {font-size:25px;padding-top:15px}
#entrar1 {width:280px ; float:left ;font-size:33px;text-align:center;margin-top:60px}
#entrar {width:320px ;height:104 float:right ; margin-top:25px}
a {color: #80BE6E ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:blue ; text-decoration:underline}
a:active {}

Plantilla Código:
<!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="cabecera">
<div id="logotipo">[contenido no disponible]</div>

</div>
<div id="navegacion">
<ul>
  • INICIO
  • HISTORIA
  • GALERIA
  • TEMAS
  • DESCARGAS
  • CONCIERTOS
  • CONTACTA

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

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


  • </div>
    <div id="imageninicio">[contenido no disponible]</div>
    <h2>AraniA</h2>
    <div id="imagencarnet">[contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    </div>
    <div id="menuiniciochicos">
    <ul>
  • SANTY
  • ALEX
  • NANDY
  • MARIA
  • CESAR
  • RAMON
  • JOSE
    </div>



    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    CSS plantilla:
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify}
    h1 {font.size: 1.em; color:white ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    h2 {font.size: 1.6em; color:#B9D9F4 ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    body {text-align: center;
    background-color: #000000 }
    #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 {width:518px ; float:right ; margin-top:25px ; font-size: 32px }
    #navegacion {background-color: black; height:20px;margin-top:5px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
    #navegacion ul { margin-left: 10px ;font.size:14px}
    #contenido {background-color: black ; border-left: black 1px solid ;
    border-right: black 1px solid;
    font-size: 1.2em; color:white;padding-top:15px }
    #contenido p {margin: 35px 20px 0px 20px ; text-indent: 20px}
    #menuizda {background-color: black ; width: 170px ; float:left ;
    text-align:center ; margin: 10px 10px 3px 3px ;
    background-image: url(objetos/fondomenu.jpg);
    background-position: bottom ;
    background-repeat:no-repeat}
    #menuizda h1 {padding-bottom:0px;
    text-decoration:none ;
    font-size:20px;
    padding-bottom:20px}
    #menuizda li {list-style:none ;
    font-size:16px;
    margin: 0px 0px 0px 0px;
    padding-top:10px}
    #menudcha {background-color: black ; width: 170px ; float:right ;
    text-align:center ; margin: 10px 10px 3px 3px ;
    background-image: url(objetos/fondomenu.jpg);
    background-position: bottom ;
    background-repeat:no-repeat}
    #menudcha h1 {padding-bottom:0px;
    text-decoration:none ;
    font-size:20px;
    padding-bottom:20px}
    #menudcha li {list-style:none ;
    font-size:16px;
    margin: 0px 0px 0px 0px;
    padding-top:10px}
    #menuiniciochicos {background-color: black;height:20px;text-align:top}
    #menuiniciochicos li {float:left ; list-style:none ; margin: 0px 0px 0px 33px;font-size:12px;}
    #menuiniciochicos ul { margin-left: 95px }
    #imageninicio { border-style: none;margin:23px 0px 15px 0px }
    #imagencarnet {border-style: none; margin: 23px 0px 0px 0px}
    #pie { background-color: white ;
    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: #80BE6E ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:blue ; text-decoration:underline}
    a:active {}

    Espero tenga solucion y podais ayudarme, aunke así no sea, gracias de antemano al menos por leer el post.......
    • !!!NOVATO DEL HTML!!!! no es tarde pa aprender no????
    Yaneth · · Solicitar retirada
    hola

    en css

    aumenta la altura de cabecera, para que sea igual a logotipo

    en navegacion aumenta un poco la altura, y bajale el margin en navegacion li

    lo checas y nos avisas

    saludios
    Wastainer · · Solicitar retirada
    Hola yanet, muxas gracias por la ayuda, para ser novato, he pillao el concepto, primero coloree los fondos de los div's y luego los fui centrando uno a uno con distancias exactas hasta pillarlos bien en los tres navegadores, con el index genial, pero la plantilla me fastidió un poco, si puedes echarme un cable te lo agradeceria, mira, aki he insertao el index y la plantilla por medio de enlace desde la guitarra, muxas gracias por tu atencion........... http://araniasrock.iespana.es :arrow:
    !!!NOVATO DEL HTML!!!! no es tarde pa aprender no????
    Tkota · · Solicitar retirada
    wenas yo tengo un problema parecido con el ejemplo de la plantilla. al iniciar con firefox en el pie de pagina los links se me van a la izquierda y los puntos se salen fuera del recuadro k puedo hacer?
    Dejo los codigos

    HTMl

    <!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>
    <div id="navegacion">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3

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

  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan

    </div>
    <div id="piedos"></div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

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

    CSS


    * {text-indent: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) ;
    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 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: lorange ; 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 {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 65px }
    #pieuno {float:left ; width:150px }
    #piedos {float:left ; width:498px ; background-color: white}
    #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: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    • Tkota · · Solicitar retirada
    e puesto eso y ahora no me aparece el punto a la izquierda pero se me sigue juntando la columna de la derecha cn la de la izquierda