perfect way to displaying images - html

Question

I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/

Answer 1

If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/

Answer 2

Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height

Answer 3

I think you need like this
http://jsfiddle.net/VwPna/

Answer 4

From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.

Answer 5

Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it

Answer 6

There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)