logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-12-2009, 07:05 PM   #1
nits4u
 
Join Date: Jun 2009
Posts: 133
Default how to get this layout////

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

Last edited by nits4u; 11-12-2009 at 07:06 PM.. Reason: spelling mistake
nits4u is offline   Reply With Quote
Old 11-13-2009, 04:43 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

nested divs using a class to style them then you can use duplicates on any page
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-13-2009, 05:14 AM   #3
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

???
sorry,,, can u explain
nits4u is offline   Reply With Quote
Old 11-13-2009, 08:19 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-13-2009, 09:16 AM   #5
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

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......
nits4u is offline   Reply With Quote
Old 11-13-2009, 04:20 PM   #6
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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.
domedia is offline   Reply With Quote
Old 11-23-2009, 06:05 AM   #7
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

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.
nits4u is offline   Reply With Quote
Old 11-23-2009, 06:08 AM   #8
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

code then please
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-23-2009, 08:40 AM   #9
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

the html code:
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:
Code:
#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....
nits4u is offline   Reply With Quote
Old 11-23-2009, 09:28 AM   #10
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

You need to use relative positioning for layout.
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:52 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com