Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 19/02/2012, 19:31

Y si, se ve bastante mal, ademas si vas a resoluciones de 1024 x 768 empeora

Basicamente la solución es dar float:right a tus divs y despues jugar con los márgenes y algún padding

Fijate asi

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Consultoria de Comercio electrónico</title>  
    <link rel=stylesheet href="estilos/estiloscss3.css" type="text/css" media=screen>
 
<style type="text/css">
/*<![CDATA[*/
/* Hoja de estilo Principal*/
 
        body {background-color:whitesmoke;}
        
header { float:right;position:relative; display:block; width:960px; height:auto; margin-right:150px; text-align: right;text-shadow: 2px 2px 2px #000; z-index:9998; background:url(/global/nav/images/globalheader.png) repeat-x;
    -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
    -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px;
    } 
           
#circulo {float:right;width:300px; height:300px;text-shadow: 2px 2px 2px #000; z-index:9998; background:red;
    -khtml-border-radius:150px; -ms-border-radius:150px; -o-border-radius:150px; -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px;
    -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px;
    }
  
#H1 {float:right; font-size: 50px;padding: 0px;margin-bottom:0px;margin-right: 20px;font-weight:normal; color: darkred;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;}
#H1a {float:right; font-size: 30px;padding: 0px;margin-top:-80px;margin-right: 20px;font-weight:normal; color: darkblue;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;}
 
 
/*]]>*/
</style>
    
 </head>
<body>
 
        <header>
            <div id="circulo">
                <div id="H1"><h1>Economistas<br/></div>
                <div id="H1a"><a>Consultores</a></h1></div>
            </div>
        </header>
        <div style="display:clear: both;"><!-- fix --></div>
            
</body>
</html>

Bueno, es una aproximación, se le pueden hacer mejoras y simplificar el css, tambien reduje un poco el tamaño de la fuente, en 1024x768 y 1440x900 se ve bien (si es que entendí tu idea)
Saludos