Nuevo desajuste de las divs...

Citar

Escrito el 10 Mar 2005 01:01 am

Miren esto desde FF y desde IE x favor...http://johnny.nodani.com/plantilla.htm
Es que estoy construyendo la plantilla para a partir de ahí con ligeras modificaciones terminar el resto de las secciones, pero me he encontrado con que donde pone "links" se descentra bastante, y por mas que reviso el codigo no logro saberlo...
Por si acaso os dejo aquí el codigo del CSS y el body...(opcional) :lol:

Código :

.Header{
width:760px;
height:140px;
margin-top:10px;
margin-bottom:10px;
}
.contenedor{
width: 760px;
height: 100%;
margin: 0px auto; /* aquí está el truco */
background: #ffffff;
color: #ff3333;
}
.principal{
width: 99.2%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin: 0px auto; /* aquí está el truco */
background: #ffffff;
color: #ff3333;
font-family:Arial, Helvetica, sans-serif;
border-width: 2.30px; 
border-color: #d7d7d7; 
border-style: solid; 
}
.margen{
width:20%;
height:100%;
border-right-color:#d7d7d7;
border-right-style: solid;
border-right-width: 1.30px;
margin-top:0px;
}
.minicont{
width:100%;
height:auto;
margin-top:0px;
border-width: 1.30px; 
border-color: #d7d7d7; 
border-bottom-style: solid; 
line-height: 8px;
text-indent: 10px;
}
.minicont2{
width:100%;
height:auto;
margin-top:10px;
}
.link2{
width:100%;
height:25px;
margin-top:0px;
background-image: url(fondolink.gif) ; 
}
.link1{
width:100%;
height:15px;
margin-top:5px;
}
.creditos{
width:100%;
height:26px;
margin-top:0px;
margin-bottom:15px;
margin: 0 auto;
font-size:9px;
color:#CCCCCC;
text-align:center;
border-top-width: 1.30px; 
border-top-color: #d7d7d7; 
border-top-style: solid; 
}

Y el body...

Código :

<body>
<div class="contenedor">
        <div class="Header">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="140">
       <param name="movie" value="Header.swf" />
       <param name="quality" value="high" />
         <embed src="Header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="140"></embed>
        </object>
      </div>
      <div class="principal">
      <div class="margen">
           <div class="minicont">
              <div class="link2">
               <h5>Links</h5></div>
             <div class="link1"><a href="http://www.after-hours.org/">After-hours</a></div>
            <div class="link1"><a href="http://www.artedinamico.com/">ArteDinamico</a></div>
            <div class="link1"><a href="http://mandrake.badopi.org/">Blogdrake</a></div>
            <div class="link1"><a href="http://www.cristalab.com/">CristaLab</a></div>
             <div class="link1"><a href="http://www.darioquiroga.com.ar/blogs/">dQ.blog</a></div>
             <div class="link1"><a href="http://www.elecash.org/blog/">Elecash</a></div>
            <div class="link1"><a href="http://www.flashblog.org/">FlashBlog.org</a></div>
            <div class="link1"><a href="http://www.nodani.com/">NoDani</a></div>
            <div class="link1"><a href="http://www.nomaster.com/">NoMaster</a></div>
            <div class="link1"><a href="http://www.therror.com/">Therror.corp</a></div>
         </div>
         <div class="minicont2"><a href="http://www.cristalab.com/comic.php">
<img src="http://www.cristalab.com/SWF/comicSync150.jpg" alt="Cristalab Comic" border="0" />
</a></div>
      </div>
      <div class="creditos"><a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=178"><img border="0" alt="Get Thunderbird!" title="Get Thunderbird!" src="http://sfx-images.mozilla.org/affiliates/thunderbird/thunderbird_blog1.png"/></a> || <a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=83"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/white_2.gif"/></a></div>
   </div>
   
</div>

</body>

Como siempre gracias de antemano y saludos... :wink:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 10 Mar 2005 01:49 am

Para que pones un <div> en cada link? tienes demasiados <div> ahi.

Lo otro que pienso que te puede estar fallando es que a todos le estas poniendo width: 100%; y ese 99.2% no me cuadra ahi para nada.
Prueba solo colocanco los divs necesarios para la plantilla (que deben ser 4 mas el contenedor: header, derecho, izquierdo y footer) y trata de organizarlos igual a como los tienes ahorita pero vacios, luego le empiezas a meter contenido.
:wink:

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 10 Mar 2005 01:53 am

Lo de poner un div por cada link es porque si no lo hago asi quedan demasiado separados, y lo del 99.2% es para que la anchura de div principal coincida con las lineas del header hecho en flash..., aun asi muchas gracias, seguire probando... :cry:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 10 Mar 2005 02:33 am

bueno, con css parece que vas muy bien, pero hay que tomar un par de cosas en cuenta:
1) la estandarización tanto en navegadores decentes como en ie se logra a base de asignar float en los puntos críticos, esto es, en las cajas
2) coincido con ramm, tienes demasiados divs y todos tienen la misma clase, estás 'gastando' algunos bytes cada vez que tu plantilla sea llamada y esto repercute en el ancho de banda y además el código se ve sucio
qué tal si lo cambias por una lista?
<h4>Links</h4>
<ul>
<li>link1</li>
<li>link2</li>
</ul>
mucho más semántico, no crees?

y.. tomar en consideración el modelo de la caja de ie y el estándar sería lo mejor. checa esto
http://www.disenorama.com/articulos/css/el_modelo_de_cajas.htm

y bueno, ojalá te haya orientado un poco.
saludos.

Por fael

BOFH