Solved

How to dynamically move divs in Dreamweaver

Posted on 2010-09-01
6
241 Views
Last Modified: 2012-06-21
Hi

I am developing a site which you can find here:

http://www.greatfindcollectibles.com/

My question is the div that holds the menu can grow and shrink depending on how many items there are in the database. How can I make the divs Search and Mailing list move up and down depending on the height of the menu div?

Thanks

Nick Steele
0
Comment
Question by:nsteele84
  • 3
  • 2
6 Comments
 
LVL 6

Expert Comment

by:andreyman3d2k
ID: 33577121
Set the position: relative; on the menu div. This makes the position of lower divs 'relative' to that one.
0
 

Author Comment

by:nsteele84
ID: 33577212
Unfortunately when I do that the auto height does not work
0
 
LVL 3

Accepted Solution

by:
vimalraja earned 500 total points
ID: 33577427
Hi,
Saw your code, I don't you need to position any of the div via "position:absolute"... Just a quick fix, replace #Logo, #Categories, #Search, #MailingList styles with the following code. Hopefully mailing list and search will move up and down according to the categories div. :)
#Logo {
border:thin solid #000000;
height:257px;
margin:3px 0 0 7px;
width:853px;
}

#Categories {
border:thin solid #000000;
float:left;
clear:left;
margin:3px 0 0 7px;
width:189px;
}

#Search {
border:thin solid #000000;
clear:left;
float:left;
height:73px;
margin:3px 0 0 7px;
width:191px;
}

#MailingList {
border:thin solid #000000;
clear:left;
float:left;
height:71px;
margin:3px 0 0 7px;
width:192px;
}

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 6

Expert Comment

by:andreyman3d2k
ID: 33577452
Set the position of the Mailing List and Search div to "relative" also (You will need to play with positioning abit).
0
 
LVL 6

Expert Comment

by:andreyman3d2k
ID: 33577588
Here, I played with the positioning -- try this in place of your current CSS:
<style type="text/css">
<!--

#container {
	background-color: #FFF;
	height: 900px;
	width: 870px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	text-align: left;
}
#body {
	text-align: center;
	background-color: #FFF;
}
body {
	background-image: url(images/gradfill.jpg);
	background-color: #255980;
}
#Logo {
	position:absolute;
	left:6px;
	top:3px;
	width:853px;
	height:257px;
	z-index:1;
	border: thin solid #000;
}
#Categories {
	position:relative;
	left:8px;
	top:269px;
	width:189px;
	min-height:80px;
	z-index:2;
	border: thin solid #000;
	height: auto;
}
#CategoriesInner {
position:relative;
width:189px;
	min-height:80px;
	height:auto;
}
#Cart {
	position:absolute;
	left:657px;
	top:269px;
	width:200px;
	height:65px;
	z-index:3;
	border: thin solid #000;
}
#Search {
	position:relative;
	left:7px;
	top:275px;
	width:191px;
	height:73px;
	z-index:4;
	border: thin solid #000;
}
#Featured {
	position:absolute;
	left:657px;
	top:418px;
	width:200px;
	height:460px;
	z-index:5;
	border: thin solid #000;
}
#MainArea {
	position:absolute;
	left:211px;
	top:269px;
	width:432px;
	height:610px;
	z-index:6;
	border: thin solid #000;
	overflow:scroll
}
#Account {
	position:absolute;
	left:658px;
	top:343px;
	width:201px;
	height:66px;
	z-index:7;
	border: thin solid #000;
}
#MailingList {
	position:relative;
	left:7px;
	top:280px;
	width:192px;
	height:71px;
	z-index:8;
	border: thin solid #000;
}

-->
</style>

Open in new window

0
 

Author Closing Comment

by:nsteele84
ID: 33586161
Thanks to everyone for help
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now