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