| Adjunto | Tamaño |
|---|---|
 home.html | 1.51 KB |
 viñeta.png | 3.18 KB |
| ropa.jpg | 44.67 KB |
| logotipo2.jpg | 26.02 KB |
| inicio.JPG | 14.11 KB |
| bg.gif | 355 bytes |
Forums:
Hola amigos, espero que me puedan ayudar con este problemilla: en el curso de Ingenieria Web, que llevo en la U, me estan enseñando a hacer una pagina Web, manejando XHTML y CSS, teniendo en cuenta los Estandares de W3, entonces estuve codificando todo bien y practicamente ya finalizado, se me ocurre visualizar lo que hice en Opera, gran sorpresa me lleve, cuando esta paginita no pudo visualizarse y cuando lo quize ver en Firefox, mi pagina principal, llamada home.html, aparece toda desarreglada, la lista de menu que tenia a la izquiera se paso a la derecha, al igual que la lista de navegacion... cosa terrible en verdad, pero bueno ojala puedan ayudarme, aca les pongo el codigo quizas hice algo mal por alli, gracias por su atencion y espero su pronta ayuda:
<?xml version="1.0" encoding="iso-8859-1"?>
Inscripcion
Esta es de la pagina principal, home.html, bueno, lo que si no pude adjuntar son los CSS, les mando las demas pagina para que puedan observarla con todas las imagenes, gracias nuevamente
ACA ESTA LA HOJA DE ESTILO (CSS)
body {font-family:Georgia, "Times New Roman", Times, serif;
font-size:17px;
color:#000000;
/*aqui mandamos a centrar todo el contenido*/
width: 100%;
}
#header {
margin-top:0px;
margin-left:183px;
width:100%;
/*background-color:#ffd866 ;*/
font-size:93%;
line-height:normal;
text-align:center;
border-bottom: 2px solid green /*#ffd866;*/;
/*background-color:#ffd866;*/
}
/*menu*/
#header ul {
text-align:right;
margin: 0 0 5px 0;
/*padding:10px 10px 0;*/
list-style:none;
}
#header li {
float:left;
background:url("menu_derecha.jpg")
no-repeat right top;
padding:0;
}
#header a {
display:block;
background:url("menu_izquierda.jpg")
no-repeat left top;
padding:5px 15px 4px 60px;
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
}
/* Arreglo de barra invertida*/
#header a {
float:none;
}
a:hover {
font-weight:bold;
}
/* elimina flotador para todos los demas navegadores*/
#header #current a {
background-image:url("menu_izquierda.jpg");
padding-bottom:5px;
color:#ffffff;
}
#header #current {
background-image:url("menu_derecha2.jpg");
}
/*encabezado*/
#encabezado {
width:100%;
margin-left:10px; /*para que no se pegue al borde*/
padding:0px; /*algo de relleno*/
background-color:#ffd866;
/* float:left;lo flotamos a la izquierda*/
display:inline; /*xsiakacso para errores ie*/
}
#right {
margin-left:5px;
width: 170px;
padding:7px;
float:left;
border-right:2px solid #006600 ;
background-color:#ffd866 ;
}
/*menu vertical*/
#menu {
margin-top:15px;
margin:5px;
padding:10px;
list-style:none;
}
#menu li {
/*margin:2px;*/
padding:5px;
}
#menu a {
color:#006600;
font-size:12px;
text-decoration:none;
}
#linea{
background-color:green;
}
#login{
margin-top:35px;
font-size:15px;
}
#botonlogin{
margin-left:100px;
}
#ir{
margin-left:85px;
}
/*contenido*/
#contenido {
margin-left:325px;
margin-top:25px;
background-color:#ffffff;
text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/
}
#imagen {
margin-left:150px;
}
#formulario{
float:left;
margin-top:25px;
margin-left:150px;
width: 170px;
}
#input{
margin-left:500px;
font-size:12px;
margin-top:25px;
}
/*pie de pagina*/
#footer {
clear: both;
width:560px; /* debemos sumar el padding del div contenido*/
text-align:right;
font-size:90%; /*mas pequeño el texto*/
font-style:italic;
color:#999999;
}
/*** arreglo IE6 ***/
* html #left {
left: 150px; /* RC width */
}
que usabas mientras desarrollabas?
Espero que no hayas usado IE para desarrollar esto.
Firefox tiene la bola de extensiones y herramientas libre para depurar codigo de css, dom y javascript. Mira en el sitio principal de extensiones, la maquina es mucho mejor que los humanos interpretando arboles de ML.
Asi es...
Asi es amigo, empece con IE, luego empece a probarlo en mozilla y alli pude ver mis errores, ahora solo tengo problemas con el CSS
header {margin-top:0px;
margin-left:183px;
width:100%;
/*background-color:#ffd866 ;*/
font-size:93%;
line-height:normal;
text-align:center;
border-bottom: 2px solid green;
}
body{
font-family: Arial,Helvetica,sans-serif;
font-size:17px;
color:#000000;
/*aqui mandamos a centrar todo el contenido*/
width:100%;
}
/*menu*/
#header ul{
text-align:right;
margin: 0 0 5px 0;
/*padding:10px 10px 0;*/
list-style:none;
}
#header li{
float:left;
background:url("menu_derecha.jpg")
no-repeat right top;
padding:0;
}
#header a{
display:block;
background:url("menu_izquierda.jpg")
no-repeat left top;
padding:5px 15px 4px 60px;
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
}
/* Arreglo de barra invertida*/
#header a{
float:none;
}
a:hover{
font-weight:bold;
}
/* elimina flotador para todos los demas navegadores*/
#header #current a {
background-image:url("menu_izquierda.jpg");
padding-bottom:5px;
color:#ffffff;
}
#header #current{
background-image:url("menu_derecha2.jpg");
}
/*encabezado*/
#encabezado{
width:100%;
margin-left:10px; /*para que no se pegue al borde*/
padding:0px; /*algo de relleno*/
background-color:#ffd866;
/* float:left;lo flotamos a la izquierda*/
display:inline; /*xsiakacso para errores ie*/
}
#right{
margin-left:5px;
width: 170px;
padding:7px;
float:left;
border-right:2px solid #006600 ;
background-color:#ffd866 ;
}
/*menu vertical*/
#menu{
margin-top:15px;
margin:5px;
padding:10px;
list-style:none;
}
#menu li{
/*margin:2px;*/
padding:5px;
}
#menu a{
color:#006600;
font-size:12px;
text-decoration:none;
}
#linea{
background-color:green;
}
#login{
margin-top:35px;
font-size:15px;
}
#botonlogin{
margin-left:100px;
}
#ir{
margin-left:85px;
}
/*contenido*/
#contenido {
margin-left:325px;
margin-top:25px;
background-color:#ffffff;
text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/
}
#imagen{
margin-left:150px;
}
#formulario{
float:left;
margin-top:25px;
margin-left:150px;
width: 170px;
}
#input{
margin-left:500px;
font-size:12px;
margin-top:25px;
}
/*pie de pagina*/
#footer{
clear: both;
width:560px; /* debemos sumar el padding del div contenido*/
text-align:right;
font-size:90%; /*mas pequeño el texto*/
font-style:italic;
color:#999999;
}
/*** arreglo IE6 ***/
* html #left {
left: 150px; /* RC width */
}