Tengo un gran dolor de cabeza tratando de hacer que una imagen que está dentro de un div parezca flotar fuera de su elemento contenedor.Coloque una imagen fuera de su contenedor
Aunque estoy bastante seguro de que esto simplemente no es posible, quiero asegurarme de haber agotado todas las vías antes de decirle al diseñador y al cliente que simplemente no van a lograr que se vea exactamente como se indica en el especificaciones de diseño
El diseño deseado (especificado) looks like this. Puede ver que hay un icono de globo que se asoma sobre el fondo de esquina redondeada del encabezado. Esta posición también lo tiene ubicado arriba del margen superior de los otros bloques de contenido en el extremo izquierdo y derecho de la página (que también se puede ver en la captura de pantalla parcial).
El resultado que actualmente puedo lograr es looks like this. Como puede ver, si intenta colocar una imagen más allá de sus márgenes definidos, se 'deslizará debajo' de lo que se solape.
He intentado el posicionamiento absoluto, la flotación y cualquier otra cosa que me venga a la mente. Estoy limitado por los márgenes del elemento <h1>, que puede ver en las últimas letras de la primera captura de pantalla.
Código/CSS disponible bajo petición. Pez de chocolate grande para quien me dice que esto realmente se puede lograr y cómo.
Los fragmentos de código HTML:
.icon
{
background: transparent none no-repeat scroll 0 -0.2em;
padding: 1.8em 0 1em 4em;
}
.icon-globe
{
background-image: url('images/icons/globe.gif');
}
/* **************** GRIDS ***************** */
.line, .last-column
{
overflow: hidden;
_overflow:visible;
_zoom:1;
}
.column
{
float:left;
_zoom:1;
}
.col-fullwidth {float:none;}
.col-halfwidth {width:50%;}
.col-onethird {width:33%;}
.col-last
{
float:none;
_position:relative;
_left:-3px;
_margin-right: -3px;
overflow: hidden;
width:auto;
}
.padded-sides
{
padding: 0 1em;
}
.section-heading
{
background: transparent url('images/type/section-head.gif') no-repeat top right;
position: relative;
margin-left: 1.4em;
}
.section-heading-cap
{
background: transparent url('images/type/section-head-cap.gif') no-repeat top left;
padding: 0.4em 1em 1.6em;
margin: 0 0 0 -1em;
}<h1>Contact Us</h1>
<div class="line">
<div class="column col-threequarters">
<div class="line">
<div class="column col-threefifths contact-panel-top">
Unrelated stuff...
</div>
</div>
<div class="column col-last padded-sides">
<div class="section-heading">
<h4 class="section-heading-cap"><img src="/App_Themes/Common/images/icons/globe.gif" alt="International" />International Contacts</h4>
</div>
... and so on.
Es posible que desee publicar el código aquí. ¿Tal vez usar pastebin o algo si es demasiado para insertar directamente en su publicación? –
En el fragmento proporcionado anteriormente, he encapsulado nuestros iconos dentro de las etiquetas de intervalo, pero realmente (REALMENTE) ya no me importa cómo logro el resultado deseado. –
Lo siento, no puedo ser de más ayuda, Phil; No puedo encontrar nada que lo haga funcionar. Mi única recomendación sería tratar de quitar las partes hasta que encuentres lo que está haciendo que no funcione como se esperaba. Sin embargo, hay _definitivamente_ una forma de hacerlo funcionar. Lo siento de nuevo. –