Holaa a todoss :wink:
Realizando mi web , me he encontrado con un problema:
El título de la plantilla (plantilla.html) y de la index (index.html) no se me centra, a pesar de que yo lo especifico en las hojas de estilos (para la index, estilo-index.css ; y para la plantilla, estilo-general.css).
Aquí mis codigos :wink:
Index.html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo-general.css" media="all" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="global">
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi web!! Disfrutenla, amantes de Metal Gear Solid!!</div>
</div>
<div id="menu-superior">
<div id="seccion-1">Comenzando...</div>
<div id="seccion-2">Metal Gear Solid 1</div>
<div id="seccion-3">Metal Gear Solid 2</div>
<div id="seccion-4">Metal Gear Solid 3</div>
<div id="seccion-5">Información</div>
<div id="seccion-6">Galería de Imágenes</div>
<div id="seccion-7">Otros Metal Gear</div>
<div id="sección-8">Sobre "Sitiometalgear"</div>
</div>
<div id="contenido">
<h1>Título Sección</h1>
</p>
</div>
<div id="pie">
<div id="pieuno">Agregar a favoritos</div>
<div id="piedos">Pie dos</div>
<div id="pietres">Pie tres</div>
</div>
</div>
</body>
</html>
..............................................................................................
estilo-index.css:
*
p {text-align:center}
h1 {color:blue ; font-size:20px ; font-weight:bold ;
text-decoration:underline ; text-align:center}
body {background-color:#00BFFF}
#global {width:800px ; border: black 1px solid}
#cabecera {background-color:white ; overflow:hidden}
#logotipo {background-image: url("objetos/logotipo.png") ; background-color:white ; width:300px ; height:100px ;
float:left ; }
#publicidad {background-color:white ; width:498px ; height:100px ;
float:right}
#menu-superior {background-color:#CFCFCF ; text-align:center ; width:799px}
#seccion-1 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-2 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-3 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-4 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-5 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-6 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-7 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-8 {background-color:#CFCFCF ; width:200px ;float:left}
#menu-superior a {color:red}
#contenido {background-color:#C6E2FF ; height:350px ; text-align:center ; overflow:hidden}
#pie {background-color:white ; text-align:center ; overflow:hidden}
#pieuno {background-color:white ; float:left ; width:199px}
#piedos {background-color:white ; float:left ; width:400px}
#pietres {background-color:white ; float:left ; width:199px}
..........................................................................................................
plantilla.html:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo-general.css" media="all" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="global">
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi web!! Disfrutenla, amantes de Metal Gear Solid!!</div>
</div>
<div id="menu-superior">
<div id="seccion-1">Comenzando...</div>
<div id="seccion-2">Metal Gear Solid 1</div>
<div id="seccion-3">Metal Gear Solid 2</div>
<div id="seccion-4">Metal Gear Solid 3</div>
<div id="seccion-5">Información</div>
<div id="seccion-6">Galería de Imágenes</div>
<div id="seccion-7">Otros Metal Gear</div>
<div id="sección-8">Sobre "Sitiometalgear"</div>
</div>
<div id="contenido">
<div id="menu-lateral">
<h1>Menú Lateral</h1>
<ul>Sección 1 Sección 2 Sección 3 Sección 4
</div>
<h1>Título Sección</h1>
</div>
<div id="pie">
<div id="pieuno">Agregar a favoritos</div>
<div id="piedos">Pie dos</div>
<div id="pietres">Pie tres</div>
</div>
</div>
</body>
</html>
........................................................................................................
estilo-general.css:
*
p {text-align:center}
h1 {color:blue ; font-size:30px}
body {background-color:#00BFFF}
#global {width:800px ; border: black 1px solid}
#cabecera {background-color:white ; overflow:hidden}
#logotipo {background-image: url("objetos/logotipo.png") ; background-color:white ; width:300px ; height:100px ;
float:left ; }
#publicidad {background-color:white ; width:498px ; height:100px ;
float:right}
#menu-superior {background-color:#CFCFCF ; text-align:center ; width:799px}
#seccion-1 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-2 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-3 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-4 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-5 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-6 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-7 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-8 {background-color:#CFCFCF ; width:200px ;float:left}
#menu-superior a {color:red}
#contenido {background-color:#C6E2FF ; height:350px ; overflow:hidden}
#menu-lateral {width:149px ; float:left ; background-color:#87CEFF ;
height:300px ; margin-right:30px ; margin-bottom:10px ;
margin-left:10px ; margin-top:10px}
#menu-lateral h1 {text-align:center ; font-size: 15px ; color:black}
#menu-lateral li {list-style:none ; padding-right:10px}
#pie {background-color:white ; text-align:center ; overflow:hidden}
#pieuno {background-color:white ; float:left ; width:199px}
#piedos {background-color:white ; float:left ; width:400px}
#pietres {background-color:white ; float:left ; width:199px}
.........................................................................................................
Asi se vé la plantilla y el index:
[contenido no disponible]
Saludos y gracias :wink:
Tanto en IE como En firefox se ven así :wink:
Realizando mi web , me he encontrado con un problema:
El título de la plantilla (plantilla.html) y de la index (index.html) no se me centra, a pesar de que yo lo especifico en las hojas de estilos (para la index, estilo-index.css ; y para la plantilla, estilo-general.css).
Aquí mis codigos :wink:
Index.html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo-general.css" media="all" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="global">
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi web!! Disfrutenla, amantes de Metal Gear Solid!!</div>
</div>
<div id="menu-superior">
<div id="seccion-1">Comenzando...</div>
<div id="seccion-2">Metal Gear Solid 1</div>
<div id="seccion-3">Metal Gear Solid 2</div>
<div id="seccion-4">Metal Gear Solid 3</div>
<div id="seccion-5">Información</div>
<div id="seccion-6">Galería de Imágenes</div>
<div id="seccion-7">Otros Metal Gear</div>
<div id="sección-8">Sobre "Sitiometalgear"</div>
</div>
<div id="contenido">
<h1>Título Sección</h1>
</p>
</div>
<div id="pie">
<div id="pieuno">Agregar a favoritos</div>
<div id="piedos">Pie dos</div>
<div id="pietres">Pie tres</div>
</div>
</div>
</body>
</html>
..............................................................................................
estilo-index.css:
*
p {text-align:center}
h1 {color:blue ; font-size:20px ; font-weight:bold ;
text-decoration:underline ; text-align:center}
body {background-color:#00BFFF}
#global {width:800px ; border: black 1px solid}
#cabecera {background-color:white ; overflow:hidden}
#logotipo {background-image: url("objetos/logotipo.png") ; background-color:white ; width:300px ; height:100px ;
float:left ; }
#publicidad {background-color:white ; width:498px ; height:100px ;
float:right}
#menu-superior {background-color:#CFCFCF ; text-align:center ; width:799px}
#seccion-1 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-2 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-3 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-4 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-5 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-6 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-7 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-8 {background-color:#CFCFCF ; width:200px ;float:left}
#menu-superior a {color:red}
#contenido {background-color:#C6E2FF ; height:350px ; text-align:center ; overflow:hidden}
#pie {background-color:white ; text-align:center ; overflow:hidden}
#pieuno {background-color:white ; float:left ; width:199px}
#piedos {background-color:white ; float:left ; width:400px}
#pietres {background-color:white ; float:left ; width:199px}
..........................................................................................................
plantilla.html:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo-general.css" media="all" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="global">
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi web!! Disfrutenla, amantes de Metal Gear Solid!!</div>
</div>
<div id="menu-superior">
<div id="seccion-1">Comenzando...</div>
<div id="seccion-2">Metal Gear Solid 1</div>
<div id="seccion-3">Metal Gear Solid 2</div>
<div id="seccion-4">Metal Gear Solid 3</div>
<div id="seccion-5">Información</div>
<div id="seccion-6">Galería de Imágenes</div>
<div id="seccion-7">Otros Metal Gear</div>
<div id="sección-8">Sobre "Sitiometalgear"</div>
</div>
<div id="contenido">
<div id="menu-lateral">
<h1>Menú Lateral</h1>
<ul>
</div>
<h1>Título Sección</h1>
</div>
<div id="pie">
<div id="pieuno">Agregar a favoritos</div>
<div id="piedos">Pie dos</div>
<div id="pietres">Pie tres</div>
</div>
</div>
</body>
</html>
........................................................................................................
estilo-general.css:
*
p {text-align:center}
h1 {color:blue ; font-size:30px}
body {background-color:#00BFFF}
#global {width:800px ; border: black 1px solid}
#cabecera {background-color:white ; overflow:hidden}
#logotipo {background-image: url("objetos/logotipo.png") ; background-color:white ; width:300px ; height:100px ;
float:left ; }
#publicidad {background-color:white ; width:498px ; height:100px ;
float:right}
#menu-superior {background-color:#CFCFCF ; text-align:center ; width:799px}
#seccion-1 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-2 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-3 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-4 {background-color:#CFCFCF ; width:199px ; float:left}
#seccion-5 {background-color:#CFCFCF ; width:200px ; float:left}
#seccion-6 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-7 {background-color:#CFCFCF ; width:199px ;float:left}
#seccion-8 {background-color:#CFCFCF ; width:200px ;float:left}
#menu-superior a {color:red}
#contenido {background-color:#C6E2FF ; height:350px ; overflow:hidden}
#menu-lateral {width:149px ; float:left ; background-color:#87CEFF ;
height:300px ; margin-right:30px ; margin-bottom:10px ;
margin-left:10px ; margin-top:10px}
#menu-lateral h1 {text-align:center ; font-size: 15px ; color:black}
#menu-lateral li {list-style:none ; padding-right:10px}
#pie {background-color:white ; text-align:center ; overflow:hidden}
#pieuno {background-color:white ; float:left ; width:199px}
#piedos {background-color:white ; float:left ; width:400px}
#pietres {background-color:white ; float:left ; width:199px}
.........................................................................................................
Asi se vé la plantilla y el index:
[contenido no disponible]
Saludos y gracias :wink:
Tanto en IE como En firefox se ven así :wink: