Mover bloque

[leoass]

hola, como les va? Hoy vengo con un problema en particular. Miren esta imagen:



lo que quiero hacer es mover el bloque del medio para que quede mas centrado y a una distancia de la parte roja horizontal, mas o menos como el bloque de la izquierda. y tmb quiero subir el bloque de la derecha a la misma altura y separarlo un poco del borde de la pantalla. aqui los codigos:

Bloque central

Código CSS:

.contenedor {
/* propiedades obligatorias */
overflow: hidden;
position: relative;
/* propiedades optativas */
border-radius: 20 20 20 20;
background-color: #202931;
border-bottom: 5px solid #404951;
border-left: 5px solid #404951;
border-top:5px solid #404951;
border-right:5px solid #404951;
color: #FFF;
top:-60;
margin:0 auto;
padding: 30px;
width: 470px;
}
#corner
{
/* lo dimensionamos y lo posicionamos de manera absoluta */
    display: block;
    height: 100px;
    position: absolute;
    width: 100px;
/* lo rotamos */
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* la posición del triangulo*/
    top:-50px;
    right:-50px;
/* otras propeidades optativas */
    background-color: #A00;
    box-shadow: 0px 0px 50px #000 inset;
}
#corner-ad
{
    right: -30px; top: -70px;
}
#izquierda
{
    position:absolute;
    top:200px;
    left:23px;
    width:200px;
    margin-top:10px;
    background-color:#202931;
    border-radius:15 15 15 15;
    border-top:5px solid #404951;
    border-bottom:5px solid #404951;
    border-left:5px solid #404951;
    border-right:5px solid #404951;
}
#derecha
{
    position:abslute;
    top:;
    width: 120px; 
    float: right;
    border-radius:15 15 15 15;
    background-color:#202931;
    border-top:5px solid #404951;
    border-bottom:5px solid #404951;
    border-left:5px solid #404951;
    border-right:5px solid #404951;
}
 

NOTA: corner, es la esquina roja. izquierda es el bloque de la izquierda, derecha lo mismo y el central es contenedor.

aqui el html:

Código HTML:

<div id="derecha">
	Esto seria la columna e la derecha. Esto seria la columna e la derecha. Esto seria la columna e la derecha. Esto seria la columna e la derecha. 
</div>
<div class="contenedor">
	<a id="corner" href="la_URL" > el enlace </a>
	<p>¡Bienvenido a la pagina de pruebas!
	<p>No tiene imágenes, pero tiene estilo.
	<p>Debería haber más cosas aca, pero todavía no sé qué poner.
</div>
<div id="izquierda">
	esto seria la columna de la izquierda. esto seria la columna de la izquierda.esto seria la columna de la izquierda.esto seria la columna de la izquierda.
</div> 

[SonrisaCs]

Para que los bloques queden centrados dales un valor global de margin: 0 auto, de la siguiene manera

Código CSS:

* {
margin: 0 auto;
}
 

Y para poner los tres bloques al mismo alto (Si es que entendí bien y eso es que lo que querés lograr) probá asigándole a cada uno la propiedad float: left;

Saludos

[leoass]

No funciono... :/

[pzin]

Iniciado por leoass

No funciono... :/

Al menos comenta lo que has probado y qué es lo que no funciona exactamente.

[leoass]

Iniciado por pzin

Al menos comenta lo que has probado y qué es lo que no funciona exactamente.

lo que dijo Sonrisa.

[rbnncls]

Hola

Soy el nuevo, no soy un profesional pero sí llevo 3 meses enviciado a los códigos y he aprendido algunas cosas a bases de días con pequeños errores...

Resumo, para poner el div central que es el contenedor a la misma altura que el izquierdo, pues pones el mismo top o un margin-top.

Para colocar el div derecho a la misma altura y más separado del borde, puedes poner un margin-right o un simple right y especificar la distancia del margen derecho. Para ponerlo a la misma altura, pues simplemente pones el mismo top que al div contenedor central y al div izquierda

Respecto a centrar el contenedor central puedes poner directamente un center <center> en el html y a partir de ahí poner un left o un right para moverlo respecto al centro. (Eso me pasó a mí, pasé días intentando centrar un bloque con Javascript, con PHP, con TODO, y finalmente se me ocurrió usar el <center> y... Luego de 3 días, me di de cabezazos con la pared por tal tontería )

Código HTML:

.contenedor {
/* propiedades obligatorias */
overflow: hidden;
position: relative;
/* propiedades optativas */
border-radius: 20 20 20 20;
background-color: #202931;
border-bottom: 5px solid #404951;
border-left: 5px solid #404951;
border-top:5px solid #404951;
border-right:5px solid #404951;
color: #FFF;
top:-60;                      /* -- No acabo de entender porqué tienes un top:-60 -- */
margin:0 auto;
padding: 30px;
width: 470px;
}
#corner
{
/* lo dimensionamos y lo posicionamos de manera absoluta */
    display: block;
    height: 100px;
    position: absolute;
    width: 100px;
/* lo rotamos */
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* la posición del triangulo*/
    top:-50px;
    right:-50px;
/* otras propeidades optativas */
    background-color: #A00;
    box-shadow: 0px 0px 50px #000 inset;
}
#corner-ad
{
    right: -30px; top: -70px;
}
#izquierda
{
    position:absolute;
    top:200px;
    left:23px;
    width:200px;
    margin-top:10px;
    background-color:#202931;
    border-radius:15 15 15 15;
    border-top:5px solid #404951;
    border-bottom:5px solid #404951;
    border-left:5px solid #404951;
    border-right:5px solid #404951;
}
#derecha
{
    position:absolute;
    top:200px;                    /* -- Especificar la misma altura que al bloque #izquierda -- */
    width: 120px; 
    right:30px;                    /* -- Margen respecto del borde derecho -- */
    float: right;
    border-radius:15 15 15 15;
    background-color:#202931;
    border-top:5px solid #404951;
    border-bottom:5px solid #404951;
    border-left:5px solid #404951;
    border-right:5px solid #404951;
}

Este sería el HTML, yo lo pondría así:

Código HTML:

<div id="derecha">
	Esto seria la columna e la derecha. Esto seria la columna e la derecha. Esto seria la columna e la derecha. Esto seria la columna e la derecha. 
</div>
<center>
<div class="contenedor" style="right o left: XXpx;>
	<a id="corner" href="la_URL" > el enlace </a>
	<p>¡Bienvenido a la pagina de pruebas!
	<p>No tiene imágenes, pero tiene estilo.
	<p>Debería haber más cosas aca, pero todavía no sé qué poner.
</div>
</center>
<div id="izquierda">
	esto seria la columna de la izquierda. esto seria la columna de la izquierda.esto seria la columna de la izquierda.esto seria la columna de la izquierda.
</div> 

Espero haberte ayudado en algo, empezando por haber entendido tu pregunta

Saludos.

[pzin]

leoass lo que tienes que hacer es flotar los elementos y darles el ancho que necesitas, sin usar posiciones absolutas, porque ese es el mayor error que puedes cometer al realizar la maquetación de un sitio web. Dudo que hayas intentado flotarlo, ¿no?

Bienvenido al foro rbnncls.

La etiqueta center está depreciada en HTML4.1 y totalmente obsoleto en HTML5, así que su uso lleva sin recomendarse 14 años.

[rbnncls]

Iniciado por pzin

leoass lo que tienes que hacer es flotar los elementos y darles el ancho que necesitas, sin usar posiciones absolutas, porque ese es el mayor error que puedes cometer al realizar la maquetación de un sitio web. Dudo que hayas intentado flotarlo, ¿no?

Bienvenido al foro rbnncls.

La etiqueta center está depreciada en HTML4.1 y totalmente obsoleto en HTML5, así que su uso lleva sin recomendarse 14 años.

Pero sigue funcionando y en mi caso fue lo único que me valió tras días probando, ni el margin:0 auto funcionaba. Supongo que era una web muy cargada

Gracias por tu consejo, pero use PHP y Javascript y CSS y nada me valió. La vieja y despreciada etiqueta <center> fue mi salvadora

[pzin]

Si no funciona los márgenes laterales, es porque es un elemento flotado o un elemento en linea. Para esos casos hay otras soluciones.
Pero es malo usar etiquetas depreciadas u obsoletas, aunque en algunos navegadores sigan funcionando.