PDA

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


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

here is the block that i want:
http://i35.tinypic.com/2yv5hzb.gif

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

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

nits4u
11-13-2009, 04:14 AM
???
sorry,,, can u explain

edbr
11-13-2009, 07: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

nits4u
11-13-2009, 08: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......

domedia
11-13-2009, 03: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.

nits4u
11-23-2009, 05: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.

edbr
11-23-2009, 05:08 AM
code then please

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

<body>
<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>
<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>
<div id="footer"><a href="#" title="feedback">Feedback</a></div><!--footer-->
</div>
</body>
</html>
related CSS:
#wrapper #maincontent .pic{
background:url(images/poi_bg.png);
background-repeat:no-repeat;
width: 275px;
}
#wrapper #maincontent #bhangayni{
position:absolute;
left: 255px;
top: 153px;
}
#wrapper #maincontent #bhangayni img{
border:none;
padding:33px 0px 50px 43px;
}the prob is that in higher resolution the picture overlaps the left navigation menu....

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

nits4u
11-23-2009, 08:45 AM
thank you !!!