Problema de alineación de elementos: márgenes negativos, imágenes, etc.

Estoy tratando de hacer un encabezado que salga de los bordes de mi barra lateral y tenga una imagen de sombra que parezca un marcador.

Algo parecido a esto: http://inelmo.com/images/img2.png

En este momento hice mi mejor esfuerzo, pero no parece correcto. aquí está mi código para la barra lateral y el encabezado que creo que debería funcionar para lograr este efecto, pero no lo es.

HTML

<!-- Sidebar -->
<aside id="sidebar">

   <!-- header div -->
   <div id="sideProfile">

      <!-- Span with image background -->
      <span id="sideHshadow"></span>

   </div>

</aside> 

CO

#sidebar {
        padding: 15px;
        width: 400px;
}

/*Span with shadow image to make it look like a bookmark */
#SideHshadow {
height: 6px;
width: 12px;
margin: 0 0 -6px 0;
float: right;
background: url("../images/sidebar_header_shadow.png") no-repeat;
}

#sideProfile {
background:#333333;
border-bottom: 1px solid #2d2d2d;
height: 50px;
width: 400px;
margin: 0 -12px 0 0;

box-shadow: 0 1px 2px #77bee6;
-moz-box-shadow: 0 1px 2px #77bee6;
-webkit-box-shadow: 0 1px 2px #77bee6;

-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;


} 

¿Alguien sabe cómo hacer que se vea como en el ejemplo? Thnx

Aquí está el archivo de imagen de fondo #sideHshadow: http://inelmo.com/images/sidebar_header_shadow.png

preguntado el 27 de agosto de 11 a las 16:08

¿Está utilizando el tipo de documento html5 correcto? Además, ¿su navegador admite el elemento de lado? -

¡Sí, estoy usando el tipo de documento correcto y los navegadores modernos + soporte html5 para IE9 está incluido, estoy bastante seguro de que esto no es lo que está causando el problema, pero no puedo entender por qué esto no funciona como se esperaba, podría ¿Será el relleno de #sidebar? no estoy seguro ... -

uh ... ¿no tenemos el archivo de imagen? es muy difícil trabajar en algo como esto sin todas las piezas;) -

¿Estás hablando de "../images/sidebar_header_shadow.png"? Es solo una pequeña imagen que va a la derecha debajo de #sideProfile div que hace este efecto, no es nada grande, solo una imagen pequeña))) aquí está la imagen inelmo.com/images/sidebar_header_shadow.png -

Oh, por si acaso, en este ejemplo inelmo.com/images/img2.png esa imagen está a la izquierda, pero en mi caso está a la derecha)) -

1 Respuestas

Aquí hay una versión pura de CSS: http://jsfiddle.net/bcZKh/2/

Código a continuación:

<div id="list">
    <div class="item selected">Nationwide Coverage Area</div>
    <div class="shadow"></div>
</div>

body {margin:40px}
#list {width:200px;border-radius:8px;min-height:200px;background:#E6E5E0;padding:20px 0;position:relative}
.item {color:#fff;font-size:0.8em;line-height:24px;font-family:sans-serif;text-indent:24px;margin-right:-12px;margin-left:-12px;position:relative;z-index:1}
.item.selected {background:#C74312;border-radius:4px;border-bottom-left-radius:0}
.shadow {border-color:transparent #733411 transparent transparent;border-width:12px;border-style:solid;height:0;width:0;position:absolute;top:32px;left:-24px;z-index:0}

Respondido 27 ago 11, 22:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.