Foros del Web » Creando para Internet » CSS »

Descentrado en FF

Estas en el tema de Descentrado en FF en el foro de CSS en Foros del Web. antes que nada quiero agradecer a la gente que me esta dando una mano con esto.... Amigos, mil gracias!!! Bueno, les comento un poco.....es sencillo ...
  #1 (permalink)  
Antiguo 15/02/2007, 11:15
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Descentrado en FF

antes que nada quiero agradecer a la gente que me esta dando una mano con esto.... Amigos, mil gracias!!!

Bueno, les comento un poco.....es sencillo en IExplorer me queda centrado perfecto, en FireFox se me corre 10 px apróximadamente.... ¿sabran porque?

Código CSS:

Código HTML:
/*---------------------------------Contenido General---------------------------*/
html,body {
   margin: 0;
	padding: 0;
	height:100%;
   background-color: #FFFFFF;
	font-family:  "Arial",Trebuchet MS, Lucida Grande, Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 12px;
   text-align:center;
	overflow: auto;
} 
#contenedorGral {
   text-align:center;
   position:relative;
   width: 784px;
   margin: auto;
	background-image: url(imagenes/fondo_sombra.gif);
	height: 100%;
}
#Cabezal{
   width: 765px;
   background-color: Blue;
}
#CabezalIzq{
   width: 258px;
   background-color: Fuchsia;
   float: left;
}
#CabezalDer{
   width: 507px;
   background-color: Red;
   float: left;
}
#ContenidoIzq{
   width: 258px;
   background-color: Fuchsia;
   float: left;
}
#ContenidoDer{
   width: 507px;
   background-color: Red;
   float: left;
}
/*------------------------------Fin Contenido General---------------------------*/
/*--------------------------------Imagenes del site-----------------------------*/
#ImgAgenda {
    margin: 0px;
    width:765px;
    height:135px;
    background-image:url(imagenes/cabezal_agenda.jpg);
    background-repeat:no-repeat;
}
Mi código HTML

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EVMB | una tradición desde 1932</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contenedorGral">
  <div id="Cabezal">Cabezal 
    <div id="CabezalIzq">Div Izquierdo</div>
    <div id="CabezalDer">Div Derecho</div>
  <div id="ImgAgenda" title="Imagen"></div>
  <div id="ContenidoIzq"> asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
  </div>
  <div id="ContenidoDer"> asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
    asd<br>
  </div>
    </div>
</div>
</body>
</html> 
Gracias a todos de nuevo!!!
  #2 (permalink)  
Antiguo 15/02/2007, 18:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Descentrado en FF

Prueba poniendo margin: 0 auto; al selector #Cabezal.

Mikel.
  #3 (permalink)  
Antiguo 15/02/2007, 19:26
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Descentrado en FF

mmmm........no sirvió del todo!!!!!

entra a este post y mirala!
  #4 (permalink)  
Antiguo 15/02/2007, 19:32
Avatar de (Pato)²  
Fecha de Ingreso: noviembre-2005
Mensajes: 130
Antigüedad: 12 años, 1 mes
Puntos: 1
Re: Descentrado en FF

Mira, entre al sitio en FF2 y note todo bien.

Pero en firefox para centrar tenes que hacer esto:
En el body poner text-aling:center; y en la capa a centrar margin:auto;

Al menso a mi me funciona.
  #5 (permalink)  
Antiguo 15/02/2007, 19:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Descentrado en FF

Pero es que ese ejemplo es muy diferente al que pones en este post. En el otro no es #cabezal, sino #cabecera el que debes centrar. Y varias cosas más, claro.

Mikel.
  #6 (permalink)  
Antiguo 15/02/2007, 19:54
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Descentrado en FF

Gracias amigos!!!!! como veran centre todo perfecto, pero no logro acomodar el menú!!!!!!

alguna idea? ¿y con la imágen del cabezal????? no se que hacer!!!!

Gracias totales!!!

Última edición por DragonX; 15/02/2007 a las 19:58 Razón: mal tipeado.
  #7 (permalink)  
Antiguo 16/02/2007, 05:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Descentrado en FF

A ver qué tal te va esto.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>EVMB | una tradici&oacute;n desde 1932</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <link href="estilos.css" rel="stylesheet"
 type="text/css" />
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="contenedorGral">
<div id="Cabecera">
<div id="CabezalIzq"><img
 style="width: 258px; height: 88px;" alt=""
 src="fondo-reloj.gif" /></div>
<div id="CabezalDer">
</div>
</div>
<div id="Cabezal">
<div id="CabezalImgs">
<div id="ImgAgenda" title="Imagen"></div>
</div>
<div id="ContenidoIzq">
<div id="MenuImg"><!--Inicio menu-->
<div class="menuPpal">
<ul id="suckertree1">
<!--portada--> <li><a href="#">portada</a>
    <ul>
      <li><a href="#">oficinas</a></li>
      <li><a href="#">historia destacada</a></li>
    </ul>
  </li>
<!--fin portada--> <li><a href="#">la
compa&ntilde;&iacute;a</a>
    <ul>
      <li><a href="#">en que creemos</a></li>
      <li><a href="#">historia de <span
 style="text-transform: uppercase;">evmb</span></a></li>
      <li><a href="#">la asociaci&oacute;n <span
 style="text-transform: uppercase;">dci</span></a></li>
      <li><a href="#">socio corporativo</a></li>
    </ul>
  </li>
  <li><a href="#">los servicios</a></li>
  <li><a href="#">el portafolio</a></li>
  <li><a href="#">novedades</a>
    <ul>
      <li><a href="#">jurisprudencia</a></li>
      <li><a href="#">disposiciones y resoluciones
del <span style="text-transform: uppercase;">inpi</span></a></li>
    </ul>
  </li>
  <li><a href="#">preguntas frecuentes</a></li>
  <li><a href="#">registros de marca</a></li>
  <li><a href="#">legislaci&oacute;n</a></li>
</ul>
</div>
<!--Fin menu-->
</div>
</div>
<div id="ContenidoDer">
<div id="CurvaContenidos">
<h1>----------- //// portadas / oficinas</h1>
</div>
<div id="TextosInternos">
<h2>Titulo secci&oacute;n</h2>
asddggdfg dfgdfgdfgdfgdfgdffgdfg dfgdf dfgdfgdfgdfgdfgdfg dfgdfg dfgdfg
dfgdfgd gdfgdf gd fgd fg<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
</div>
</div>
</div>
</div>
</body>
</html>
CSS
Código:
  html, body { margin: 0pt;
    padding: 0pt;
    color: rgb(102, 102, 102);
    background-color: rgb(255, 255, 255);
    font-family: "Arial",Trebuchet MS,Lucida Grande,Tahoma,Verdana,Helvetica,sans-serif;
    font-size: 12px;
    text-align: center;
    height: 100%;
    overflow: auto;
    }
  #contenedorGral { margin: auto;
    text-align: center;
    position: relative;
    width: 784px;
    background-image: url(file:///C:/Mikel/AAAPruebas/fondo_sombra.gif);
    background-repeat: repeat-y;
    overflow: auto;
    }
  #Cabecera { padding-bottom: 5px;
    width: 765px;
    background-color: rgb(251, 251, 251);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: auto;
    }
  #Cabezal { width: 765px;
    background-color: rgb(251, 251, 251);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 100%;
    }
  #CabezalIzq { padding-bottom: 1px;
    padding-top: 5px;
    width: 258px;
    float: left;
    background-color: rgb(53, 71, 107);
    position: relative;
    background-image: url(file:///C:/Mikel/AAAPruebas/fondo_menu2.gif);
    }
  #CabezalDer { width: 507px;
    background-color: rgb(69, 93, 141);
    position: relative;
    float: right;
    height: 94px;
    }
  #MenuImg { margin: 0px;
    width: 258px;
    height: 355px;
    background-image: url(fondo_menu1.gif);
    background-repeat: no-repeat;
    float: left;
    }
  #ContenidoIzq { text-align: right;
    width: 258px;
    background-image: url(fondo_menu.gif);
    float: left;
    height: 355px;
    }
  #ContenidoDer { background-image: url(fondo_contenidos.gif);
    float: left;
    width: 507px;
    position: relative;
    height: 70%;
    }
  #TextosInternos { padding-left: 80px;
    padding-top: 17px;
    text-align: left;
    float: left;
    position: relative;
    }
  h1 { margin: 0pt;
    font-family: "Arial","Verdana";
    font-weight: bold;
    font-style: italic;
    text-align: right;
    font-size: 12px;
    color: rgb(140, 140, 140);
    letter-spacing: 1px;
    text-transform: capitalize;
    padding-top: 10px;
    padding-right: 10px;
    }
  h2 { margin: 0pt;
    font-family: "Arial","Verdana";
    font-weight: bold;
    font-style: italic;
    text-align: left;
    font-size: 16px;
    color: rgb(61, 65, 100);
    text-transform: capitalize;
    }
  .menuPpal ul { border-bottom: 1px dotted rgb(145, 161, 197);
    padding: 0pt;
    background-color: rgb(92, 106, 141);
    margin-left: 0pt;
    margin-top: 5px;
    text-transform: capitalize;
    list-style-type: none;
    width: 135px;
    line-height: 18px;
    float: right;
    margin-right: 3px;
    }
  .menuPpal ul li { position: relative;
    }
  .menuPpal ul li ul { position: absolute;
    width: 170px;
    top: 0pt;
    visibility: hidden;
    }
  .menuPpal ul li a { border-bottom: 1px dotted rgb(145, 161, 197);
    padding: 1px 5px;
    background: rgb(57, 75, 115) none repeat scroll 0% 50%;
    display: block;
    overflow: auto;
    color: white;
    text-decoration: none;
    }
  .menuPpal ul li a:visited { color: white;
    }
  .menuPpal ul li a:hover { background-color: rgb(92, 106, 141);
    text-decoration: underline;
    }
  * html .menuPpal ul li { float: left;
    height: 1%;
    }
  * html .menuPpal ul li a { height: 1%;
    }
  #CurvaContenidos { margin: 0px;
    width: 507px;
    height: 31px;
    background-image: url(fondo_curva_contenidos.gif);
    background-repeat: no-repeat;
    }
  #CabezalImgs { margin-bottom: 0px;
    margin-top: 0px;
    }
  #ImgAgenda { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_agenda.jpg);
    background-repeat: no-repeat;
    clear: both;
    }
  #ImgAgenda1 { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_agenda-birome.jpg);
    background-repeat: no-repeat;
    }
  #ImgAnteojos { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_anteojos.jpg);
    background-repeat: no-repeat;
    }
  #ImgBirome { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_birome.jpg);
    background-repeat: no-repeat;
    }
  #ImgCables { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_cables.jpg);
    background-repeat: no-repeat;
    }
  #ImgEscaleras { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_escaleras.jpg);
    background-repeat: no-repeat;
    }
  #ImgLapicera { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_lapicera.jpg);
    background-repeat: no-repeat;
    }
  #ImgLapicera1 { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_lapicera1.jpg);
    background-repeat: no-repeat;
    }
  #ImgLapiz { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_lapiz.jpg);
    background-repeat: no-repeat;
    }
  #ImgLibro { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_libro.jpg);
    background-repeat: no-repeat;
    }
  #ImgLibroAbierto { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_libroabierto.jpg);
    background-repeat: no-repeat;
    }
  #ImgMujerCompu { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_mujercompu.jpg);
    background-repeat: no-repeat;
    }
  #ImgMujerCompu1 { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_mujercompu_costado.jpg);
    background-repeat: no-repeat;
    }
  #ImgSilla { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_sillaroja.jpg);
    background-repeat: no-repeat;
    }
  #tirar { margin: 0px;
    width: 258px;
    height: 88px;
    background-image: url(fondo-reloj.gif);
    background-repeat: no-repeat;
    }
Luego ya con la altura total ya verás cómo hacer según le vayas a poner un pie, o lo que sea.

Mikel.
  #8 (permalink)  
Antiguo 16/02/2007, 06:47
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Descentrado en FF

Mikel lo estoy viendo y aparentemente anda perfecto!!!! Sos grande, espero que llegue el día que ya pueda hacer esto solo....

Gracias de Verdad!
  #9 (permalink)  
Antiguo 16/02/2007, 12:07
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Descentrado en FF

Mikmoro todo anda perfecto! pero......siempre hay un pero... el submenu me quedo por debajo del menu principal.....no abre al costado como debiera.....¿qué hago?

Gracias de nuevo!
  #10 (permalink)  
Antiguo 16/02/2007, 13:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Descentrado en FF

¡Oops! Ya perdonarás pero no me había hecho ni fijar en que tenías un desplegable.
A
ñádele z-index: 1; a la clase ".menuPpal ul li":

.menuPpal ul li { position: relative;
z-index: 1;
}

Creo que funcionará.

Mikel.
  #11 (permalink)  
Antiguo 16/02/2007, 13:23
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Descentrado en FF

sos grande de vardad!!!!!!! ahora si!!!!!

después si tenés tiempo podrías pasarme algunos tutos así puedo investigar un poco más

De nuevo mil gracias!!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:15.