Menu
I have created a simple, light weight, GUI similar to Microsoft Metro UI. It is comprised of a set of elements which are floating to make it flexibly re-sizable according to the size of the screen:
Here is the code:
<!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>
I have a problem positioning the icon elements in the divs. This is what I have:
and this is what I want:
In other words I want to be able to position the elements in the tiled div elements absolutely. I tried various CSS positioning techniques (relative, fixed, absolute) but couldn't solve it. I suspect it's because the tiles are floating elements?
How can I be able to design the contents of each tile regardless of its position in the web page?
686
To overlay two elements, one approach is to make a parent position: relative , and then the overlay position: absolute . In this case, this example should work, where the download icon can be any element, such as a bootstrap button. Save this answer.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
float: To set the icon on the right side of the div, we use float: right property.
You can download the play button image here Download Play Button Image, and make sure to change the play button URL to your own image URL. The size of the play button in this tutorial is 64px by 64px, so the CSS code adds margin values margin-left:-32px; margin-top:-32px; to move the play button to the centre.
Make the tile divs relatively positioned and icons absolutely positioned.
.tiles > div {
float: left;
position: relative;
}
.tiles > div .icon {
position: absolute;
bottom: 0;
left: 0
}
With relative positioning the tile div becomes a containing block for its absolute positioned children. Relative elements are positioned just like normal (static) elements when top and left are zero or undefined.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
