View Full Version : how to get this layout////

11-12-2009, 07:05 PM
hey guys its a simple layout, but i am confused abt. how to get it :)

here is the block that i want:

i want to put these i kind of different blocks on a same page, containing different pics inside them. Where image and the text are clickable.....
hope u understand :-D

11-13-2009, 04:43 AM
nested divs using a class to style them then you can use duplicates on any page

11-13-2009, 05:14 AM
sorry,,, can u explain

11-13-2009, 08:19 AM
i meant you can have a parent div ,add a child div positioned inside it ,
you will need div class= rather than id as you want to repeat the divs on a page

11-13-2009, 09:16 AM
haha...thnx alot "edbr".....
but i knw the meaning of nesting and diff. b/w id and class too...
i want to knw how to position the different parts of the block and the image together !!!!
Thanx again......

11-13-2009, 04:20 PM
Well the nesting takes care of the order of the DIV's so you get that for free. Then just use CSS to adjust them.

11-23-2009, 06:05 AM
ok.. i m done with one div, & its fine....
but how to place various divs of such kind at different positions..
i use abs. positioning for it, but that does not wrk.

11-23-2009, 06:08 AM
code then please

11-23-2009, 08:40 AM
the html 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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />

<div id="wrapper">
<div id="header"><img src="images/hdr.gif" alt="nahan" /></div><!--header-->
<div id="left">
<div id="nav">
<a href="#" title="home" class="current">Home</a>
<a href="history.html" title="about" class="holder">About</a>
<a href="#" title="facts & figures" class="holder">Facts & Figures</a>
<a href="places of intrests.html" title="places of intrests" class="holder">Places of Intrests</a>
<a href="#" title="educational institutes" class="holder">Educational Institutes</a>
<a href="gallery.html" title="gallery" class="holder">Gallery</a></div><!--nav--></div><!--left-->
<div id="maincontent">
<div class="pic">
<div id="hdhar"><img src="images/bhangayni_thumb.gif" width="190" height="150"/><p>ABC</p></div><!--hdhar-->

<div class="pic">
<div id="renuka"></div><img src="images/runuka_thumb.GIF" width="190" height="150" /><!--renuka--></div><!--poi pics-->
<div class="pic">
<div id="paonta"></div><img src="images/paonta_thumb.gif" width="190" height="150"/><!--renuka--></div><!--poi pics-->

<div id="footer"><a href="#" title="feedback">Feedback</a></div><!--footer-->
related CSS:
#wrapper #maincontent .pic{
width: 275px;
#wrapper #maincontent #bhangayni{
left: 255px;
top: 153px;
#wrapper #maincontent #bhangayni img{
padding:33px 0px 50px 43px;
}the prob is that in higher resolution the picture overlaps the left navigation menu....

11-23-2009, 09:28 AM
You need to use relative positioning for layout.

11-23-2009, 09:45 AM
thank you !!!