No doy con la combinación

Rankxerox1984 · #1 (**permalink**) 19/02/2012, 18:44

Hola a todos y todas:

Estoy intentando una posición para un rótulo del encabezado de una página y no encuentro la manera de conseguirlo.
Lo que pretendo hacer es que la tipografía está alineada a la derecha con un margen desde el lado derecho de su contenedor de 150px "entrando" en un Div circular que tiene un diámetro de 300px.
He estado investigando por mi cuenta pero no he sido capaz de dar con el fallo. En principio, está todo echo tratando de respetar CSS3 y HTML5.
Pongo el código por ver si alguien me puede dar la solución, llevo demasiado tiempo intentándolo sin éxito.
El círculo me queda donde yo quiero pero el texto se sale de su sitio y no respeta el espaciado al centro (en fin un asco).

Aquí el HTML:

Código HTML:

<!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>
        
    
 </head>
<body>

        <header>
            <div id="circulo">
                <div id="H1"><h1>Economistas<br/></div>
                <div id="H1a"><a>Consultores</a></h1></div>
            </div>
        </header>
        <nav>
            <a href="Pagina1.php">Quienes somos</a>
            <a href="Pagina2.php">Servicios</a>
            <a href="Blog.php">Blog</a>
            <a href="WebMap.php">Mapa del Web</a>

Y aquí el CSS (se supone que CSS3)

Código:

/* Hoja de estilo Principal*/

        body {background-color:whitesmoke;}
        
        header { position:relative; display:block; width:980px; height:auto; margin:18px auto; 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 {margin-left: 680px;width:300px; height:300px;text-align: right;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 { font-size: 60px;padding: 0px;margin-bottom: -30%;margin-right: 20px;font-weight:normal; color: darkred;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;}
            #H1a { font-size: 40px;padding: 0px;margin-top:-20%;margin-right: 20px;font-weight:normal; color: darkblue;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;}

Espero que sea una chorrada, pero no se que más tocar para conseguir lo que quiero,

Muchas gracias por la ayuda

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

Rankxerox1984 · #3 (**permalink**) 20/02/2012, 12:16

Muchas gracias!!!

Me ha sido muy útil. Tenías razón con lo del ancho de pantalla, lo que he hecho es poner un Div contenedor y dar a todos los anchos dimensiones relativas para que se adapte bien a cualquier ancho de pantalla.

Muchas gracias de nuevo,