[SOLUCIONADO] Problema para centrar un CIRCULO CSS

kervinojeda · #1 (**permalink**) 27/08/2013, 18:05

Hola, les cuento esto es lo que quiero hacer: yo quiero centrar el circulo gris en la barra gris clara, para que quede así:

No se si usar z-index para montar el circulo en los otros divs o meter el div del circulo dentro del div de la barra pequeña. (de las 2 maneras igual no logro centrarlo solo colocarlo encima de la barra pequeña).

HTML

Código HTML:

<body>
	
    <div class="fondoheader"></div>
    <div class="barra"></div>
    <div class="circulo"></div>
    <div class="contenido"></div>

    
</body>

CSS

Código HTML:

html,body{
	padding:0;
	margin:0;
	height:100%;
	width:100%;
}

.fondoheader{
	background-color:#333;
	width:100%;
	height:180px;
}

.barra{
	background-color:#CCC;
	width:100%;
	height:80px;
}

.circulo{
	background-color:yellow;
	width:300px;
	height:300px;
	-webkit-border-radius: 150px 150px 150px 150px;
}

C2am · #2 (**permalink**) 27/08/2013, 21:45

Bueno, con un poco, o mejor dicho muuuuuuuuucha ayuda del Blog de Kseso:
http://ksesocss.blogspot.com/2012/05...6-maneras.html

Logré esto:
http://jsfiddle.net/c2am/j7axn/5/

Con esto:

Código CSS:

Ver original.barra{
    background-color:#CCC;
    width:100%;
    height:80px;
    position:relative;
}
 
.circulo{
    background-color:yellow;
    width:300px;
    height:300px;
    -webkit-border-radius: 150px 150px 150px 150px;
    position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
box-shadow: 0 0 4px rgba(0,0,0,.3);
}

Código HTML:

Ver original<div class="barra">
        <div class="circulo"></div>
        
    </div>

Por favor, lee el link, y prueba otras posibilidades.
Hasta la Victoria Siempre!!