|
1.
|
Create
a basic html page (gallery.html) using div layout
<html>
<head>
<title>Image Gallery </title>
</head>
<body>
<div id="header">
</div> <!-- end header -->
<div id = "gallery_body">
<div id =
"navigation">
</div>
<div id =
"content">
</div> <!-- end
content div -->
</div> <!-- end gallery_body
-->
<div id="footer">
</div><!-- end footer div -->
</body>
</html>
|
|
2.
|
Create
a basic CSS file (galleryStyle.css). Include CSS file in the html head
section.
<head>
<title> Image Gallery
</title>
<LINK
href="style.css" rel="stylesheet"
type="text/css">
</head>
|
|
3.
|
Add
header text.
<div id="header">
<h1> Image Gallery </h1>
</div> <!-- end header -->
|
|
4.
|
Now
using CSS file create design for header.
#header {
background-color:#369;
width: 100%;
height: 100px;
text-align: center;
padding: 0 0 20px 0;
}
|
|
5.
|
To
make the text more readable change its color to white
#header {
background-color:#369;
width: 100%;
height:
100px;
text-align: center;
padding: 0 0
20px 0;
color: #fff;
}
|
|
6.
|
Set
gallery_body height
#gallery_body {
height: 500px;
}
|
|
7.
|
For
navigation follow the vertical menu tutorial.
|
|
8.
|
Add
images to the content section of the layout.
<div class="thumbnail">
<a target="_blank"
href=#>
<img
src="./images/Chrysanthemum.jpg" alt="Chrysanthemum"
/></a>
<div
class="desc">Chrysanthemum</div>
</div>
|
|
9.
|
Now
create the thumbnails’container using CSS
.thumbnail {
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
/*-moz-border-radius: 4px; /* mozilla
specific */
/*-webkit-border-radius: 4px; /* safari
specific */
/*-khtml-border-radius: 4px; /* chrome
specific */
border-radius: 4px;
}
|
|
10.
|
Resize
the images so that they can be
displayed in the thumbnail container .
.thumbnail img {
display: inline;
margin: 3px;
border: 1px solid #ffffff;
width: 110px;
height: 90px;
}
|
|
11.
|
The
following code indicates mouse over on
the image
.thumbnail a:hover img {
border: 1px solid #0000ff;
}
|
|
12.
|
Now
format the image description inside the thumbnail container.
.thumbnail .desc {
text-align: center;
font-weight: normal;
width: 100px;
margin: 2px;
}
|
|
13.
|
We
need the clear div in order to disable the effect of float. If we do not
clear the floats, all the succeeding elements will have floating effects.
.clear {
clear: both;
line-height: 0em;
}
|
|
14.
|
We
can add the clear div in the html page as follows:
<div
class="clear"> </div>
Use
this code wherever you want to clear the floating.
|
|
15.
|
Add
footer content.
<div id="footer">
<h1> Copyright gallery 2012</h1>
</div> <!-- end footer -->
|
|
16.
|
Finally
make the footer beautiful.
#footer {
background-color:#369;
width: 100%;
height: 25px;
text-align: center;
padding: 10px 0 0 0;
color: #fff;
}
|
Categories:
PHP