Colocación de elementos

[SiKuSS]

Me estoy volviendo un poco loco con el tema de las CSS y no encuentro solución a mi problema...

Estoy creando una web sencilla en HTML y me surge el siguiente problema:

Se me descuadran los divs en diferentes resoluciones. Hay alguna manera de hacer que el contenido siempre se mantenga dentro de los marcos que hay definidos?

Los cambios de colores que podeis observar, son hecho por una imagen en jpg utilizada de fondo de pantalla.

Os dejo unas capturas para que podáis ver a lo que me refiero. Gracias a todos!

Resolucion 1024x768 ZOOM 100% --> http://www.imagebam.com/image/989d38151092047
Resolucion 1024x768 ZOOM 125% -->http://www.imagebam.com/image/d8cc63151092049

[RafaRG]

¿podrías proporcionar tanto el código css como el código html? solo de los div y el texto.

[SiKuSS]

Iniciado por RafaRG

¿podrías proporcionar tanto el código css como el código html? solo de los div y el texto.

Aquí os lo dejo, muchas gracias por tu atención RafaRG ;)

Código HTML

Código PHP:

   
<div id="divPieTot"> 
 
 
    <div id="divPieIzq"> 
    <table> 
        <tr><td><label name="acerca">Acerca De</label></td></tr><td></td> 
        <tr><td><a href="html/galeria.html" style="color: rgb(0, 126, 255);">Galería de Fotos</a></td></tr> 
        <tr><td><a href="" style="color: rgb(0, 126, 255);">Noticias</a></td></tr> 
        <tr><td><a href="" style="color: rgb(0, 126, 255);">Clientes</a></td></tr> 
    </table> 
    </div> 
     
    <div id="divPieCen"> 
    <table> 
        <tr><td><label for="servicios">Servicios</label></td></tr><td></td> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Solución Integral</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Empresa Nueva</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Empresa Existente</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Tipos de Servicio</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Particulares</a></td></tr> 
    </table> 
    </div> 
     
    <div id="divPieDer"> 
    <table> 
        <tr><td><label for="partners">Partners</label></td></tr><td></td> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Dell</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Spamina</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Acronis</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Sonicwall</a></td></tr> 
        <tr><td><a href="#" style="color: rgb(0, 126, 255);">Acens</a></td></tr> 
    </table> 
    </div> 
     
</div>  
   

estilo.css

Código PHP:

   
#divPieIzq{ 
float:left; 
font-family:Arial,Helvetica,Sans-serif; 
font-size:2; 
margin-left:185px; 
margin-top:-35px; 
} 
 
 
#divPieCen{ 
margin-left:200px; 
margin-top:-35px; 
float:left; 
font-family:Arial,Helvetica,Sans-serif; 
font-size:10; 
color:#007eff; 
} 
 
#divPieDer{ 
margin-right:200px; 
margin-top:-35px; 
float:right; 
font-family:Arial,Helvetica,Sans-serif; 
font-size:10; 
color:#007eff; 
text-decoration:none; 
 
}  
   

[RafaRG]

bueno, he estado probando y me parece que el error erradica en haberle puesto un margen y no una posición. al cambiar el zoom de la pantalla, el margen se mantiene, lo que provoca que, si no caben los elementos en la pantalla, tengan que amontonarse o hacer un salto de línea.
prueba a quitar el margin-left:X;/margin-right:X; y sustitúyelo por un position:X;
(por ejemplo, position:absolute; top:0px; left:200px;)
prueba este método. si así tampoco te funciona, seguiremos investigando.

[SiKuSS]

Iniciado por RafaRG

bueno, he estado probando y me parece que el error erradica en haberle puesto un margen y no una posición. al cambiar el zoom de la pantalla, el margen se mantiene, lo que provoca que, si no caben los elementos en la pantalla, tengan que amontonarse o hacer un salto de línea.
prueba a quitar el margin-left:X;/margin-right:X; y sustitúyelo por un position:X;
(por ejemplo, position:absolute; top:0px; left:200px;)
prueba este método. si así tampoco te funciona, seguiremos investigando.

Muchas gracias crack, imagino que las css será una cuestión de práctica, porque es algo que se me causa bastantes problemas.

Voy a probar lo que me dices a ver si podemos arreglarlo jejeje

[RafaRG]

de eso se trata, de práctica. pero no solo el css. todos los códigos son así: practicar y practicar hasta que se te dé bien.
espero que te funcione.

[ArturoGallegos]

compañero @SiKuSS los menús se hacen con listas <ul></ul> no con tablas, y al contrario del compañero @RafaRG yo no creo que sea solo por el margin-left y margin-right: que utiliza...

mas bien me parece un problema en su padre <div id="divPieTot"> no has mostrado el CSS de este, pero dado que se mueven los elementos imagino que el ancho no esta definido o esta en porcentajes lo que supondría un problema al ser este en base al tamaño del navegador.

te aconsejo declarar un ancho mínimo y maximo en las medidas o utilizar pixeles

[RafaRG]

es cierto. lo del ancho es otra posible solución. se me había pasado, perdona.