¿Cómo colocar un ícono en una GUI web similar a un metro? (imágenes incluidas)

He creado una GUI simple, liviana, similar a Microsoft Metro UI. Se compone de un conjunto de elementos que son flotante para que sea re-considerable flexibilidad en función del tamaño de la pantalla: enter image description here ¿Cómo colocar un ícono en una GUI web similar a un metro? (imágenes incluidas)

Aquí está el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Index2</title> 
<style type="text/css"> 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
html{ 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:14px; 
} 
div.tiles{ 
    background-color:black; 
    padding:50px; 
} 
div.tiles div{ 
    border-radius:2px; 
    padding:10px; 
    margin:5px; 
    color:white; 
    background-color:#666; 
    display:marker; 
    cursor:pointer; 
    float:left; 
    width:25px; 
    height:25px; 
} 
div.tiles div:hover{ 
    transition:background-color 1s; 
    -moz-transition:background-color 1s; 
    -webkit-transition:background-color 1s; 
    background-color:#060; 
    -moz-transform:rotate(6deg); 
} 
div.tiles div.icon{ 
    position:relative; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    background-color:red; 
} 
div.tiles div.w1{width:25px;} 
div.tiles div.w2{width:80px;} 
div.tiles div.w3{width:160px;} 
div.tiles div.w4{width:190px;} 

div.tiles div.h1{height:25px;} 
div.tiles div.h2{height:80px;} 
div.tiles div.h3{height:160px;} 
div.tiles div.h4{height:190px;} 
</style> 
</style> 
</head> 
<body> 
<div class="tiles clearfix"> 
    <div class="w4 h2"> 
    [email protected] <div class="icon">icon</div> 
    </div> 
    <div class="w4 h2"> 
    RSS 
    </div> 
    <div class="w4 h2"> 
    13 
    </div> 
    <div class="w2 h2"> 
    IE 
    </div> 
    <div class="w2 h2"> 
    Photo 
    </div> 
    <div class="w4 h2"> 
    Now Playing 
    </div> 
    <div class="w4 h2"> 
    Photo <div class="icon">icon</div> 
    </div> 
    <div class="w2 h2"> 
    Shop 
    </div> 
    <div class="w2 h2"> 
    SMS 
    </div> 
    <div class="w4 h2"> 
    Weather <div class="icon">icon</div> 
    </div> 
    <div class="w4 h2"> 
    Investment 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
    <div class="w1 h1"> 
    Lilly 
    </div> 
</div> 
</body> 
</html>

tengo un problema posicionando los elementos de icono en los divs. Esto es lo que tengo:

enter image description here

y esto es lo que quiero:

enter image description here

En otras palabras, quiero ser capaz de colocar los elementos en los elementos div azulejos absolutamente. Intenté varias técnicas de posicionamiento CSS (relativo, fijo, absoluto) pero no pude resolverlo. Sospecho que es porque las baldosas son elementos flotantes?

¿Cómo puedo diseñar el contenido de cada azulejo, independientemente de su posición en la página web?

Fuente

2012-02-24 AlexStack

+1 para aclarar imágenes! – jholster

de acuerdo! Un gran ejemplo de una pregunta maravillosamente explicada. –

@AlexStack Eres mi héroe. ¿Puedo usar este código? –

Haga que los azulejos divs estén relativamente posicionados e íconos absolutamente posicionados.

.tiles > div { 
    float: left; 
    position: relative; 
} 

.tiles > div .icon { 
    position: absolute; 
    bottom: 0; 
    left: 0 
}

Con el posicionamiento relativo de la div azulejo se convierte en un containing block por sus niños posicionados absolutos. Los elementos relativos se ubican just like elementos normales (estáticos) cuando arriba y izquierda son cero o indefinidos.

Fuente

2012-02-24 12:33:50 jholster

¿Cómo colocar un ícono en una GUI web similar a un metro? (imágenes incluidas)

Respuesta

Cuestiones relacionadas