CODEWITHSUNDEEP
htmlcss
Václav Zeman
Václav Zeman

Reputation: 616

How do I style div like this?

I'm trying to get rid of many divs on my page so I wonder if this "tile" could be done without using one.

Something like this: 

<a href="mks.html" class="big-tile big-tile-1">
    <h1>town<br>
    library</h1>  
</a>

The anchor tag would have a background: url(big-tile-1) top no-repeat; I guess. Big-tile would have static width and height. But how do I style the h1? Can You help me please?

Upvotes: 0

Views: 112

Answers (4)

rsudip90
rsudip90

Reputation: 869

You can do this:

<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> town <br> library </h1>  

</a>

then your css:

#image-overlay{
    width: 300px;
    height: 500px;
    position: relative;
    border: 10px #999 solid;
    border-radius: 1px;
}
#image-overlay h1{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: green ////whatever your choice
    color: white;
    padding: 10px;
    font-family: //your choice
    font-size: 20px;
}

Upvotes: 0

gerald
gerald

Reputation: 223

technically, you wouldn't need to use the big-tile-1 class. but you could do something like this: http://jsfiddle.net/RU23A/1/

with a couple changes: 1. add an image to the background url 2. change the font to whatever that font is.

Upvotes: 0

Nick R
Nick R

Reputation: 7794

You could do something like this: JSFiddle Demo

CSS

.big-tile { 
    border:10px solid #ccc; 
    display:inline-block;
    position:relative;
    height:200px;
    width:200px;
    color:#fff;
    background:url("http://lorempixel.com/400/200/nature/");
}

.big-tile h1 {
    margin:0; 
    background:teal; 
    position:absolute; 
    padding:20px; 
    bottom:0; 
    left:0; 
    right:0;  
}

Or if you want the image in the markup and not as a background image - you could do this : http://jsfiddle.net/UFUq5/3/

Upvotes: 3

SW4
SW4

Reputation: 71170

Demo Fiddle

HTML

<a href="#">
    town<br />
    library
</a>

CSS

a {
    display:inline-block;
    height:450px;
    width:300px;
    background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
    background-color:teal;
    background-size:300px 300px;
    background-repeat:no-repeat;
    padding-top:350px;
    padding-left:50px;
    box-sizing:border-box;
    color:white;
    text-decoration:none;
    font-family:arial;
    font-size:20px;
    border:10px solid #c0c0c0;
}

Upvotes: 0

Related Questions