Solved

How to dynamically move divs in Dreamweaver

Posted on 2010-09-01
6
243 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

860 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