Positioning off after put div inside a div

Hi,
Hope you're well.
As you'll see in the first
screenshot, I created a
spry menu bar that was
positioned 120 px from
the left and 250 px from
the top. It's position was
perfect.
I ultimately want to center
the website I am building on
the browser page so I am
putting all the elements inside
an outer div named "container"
which I have centered on the page.
However, as you'll see in the
2nd screenshot, when I made
that change, the spry menu bar
got larger, was moved to the
upper left of the container, and
the items are no longer
properly positioned within the
menu bar (they should be in
the upper left)
How can I fix this?
Thanks!

Don't use position:absolute. You don't need it and it will cause you more pain than gain in primary layouts.
To jump start your projects, use the pre-built CSS layouts that come with DW.
File > New > blank > HTML > Layout > 2-col, fixed, left sidebar, header, footer.
Insert your SpryMenu into the left sidebar.
<div class="sidebar1">

</div>
Insert images and text into the content region.
<div class="content">

</div>
Nancy O.

Similar Messages

Div inside another div

Ok..is it just me, or does auto height really do squat when
it comes to expanding and contracting of content in other divs that
it surrounds? I have a div surrounding 2 divs, one that floats to
the left, and one that floats to the right. If the div that
surrounds them both has a height that is bigger than they are, it
wraps just fine, however, if I set it to auto and add content to
the inside divs, it doesnt grow and expand accordingly, screwing up
the footer div I have below the div surrounding the 2 divs.
Reason I wanted a div surrounding the two divs is cuz if one
was longer than the other, due to there being more content in one
than the other, then the footer div would, despite it being the
full length of the page, shrink and fit itself below the shorter
div tag with less content. Why doesnt the div just stay below the
longest div since thats where it fits due to it being the full
length of the page!?
I attached my code. No, I cannot link the site. I do not have
the site. Its under construction with no host. Y'all have
dreamweaver, paste it in a new file and add your own random images.
the "filler text" is just there so I can show you that if I stick
that there it wraps around fine, but if you get rid of it, the div
thats supposed to be wrapping around two divs sticks itself above
the two divs..even though it doesnt close till have the two divs!!
WHY!?

If I understand you, you want two (or more) columns to be the
same height
without setting a height, or for them to grow according to
the largest ones
size.
If that is the case, google Faux Columns.
Basically, you wrap your divs (columns) in a container (the
one you have
sourounding) then you create a background image that is the
same size as
your columns, set the overflow in the container to hidden,
and you now have
the appearance of two even sized columns.
To be more clear, if you have two divs that total 800px, the
left being
200px that you want the bg color of black, and the right
being 600px with
the bg color you want green, you create an image that is
800px wide, 200 px
black on the left, 600px of green set on the right.
If you want a border to separate the two, put it on the
longer of the divs.
I am not sure how your float of left and right will affect it
though, I
usually float both left.
"DreamChristine" <[email protected]> wrote
in message
news:[email protected]...
> Ok..is it just me, or does auto height really do squat
when it comes to
> expanding and contracting of content in other divs that
it surrounds? I
> have a
> div surrounding 2 divs, one that floats to the left, and
one that floats
> to the
> right. If the div that surrounds them both has a height
that is bigger
> than
> they are, it wraps just fine, however, if I set it to
auto and add content
> to
> the inside divs, it doesnt grow and expand accordingly,
screwing up the
> footer
> div I have below the div surrounding the 2 divs.
>
> Reason I wanted a div surrounding the two divs is cuz if
one was longer
> than
> the other, due to there being more content in one than
the other, then the
> footer div would, despite it being the full length of
the page, shrink and
> fit
> itself below the shorter div tag with less content. Why
doesnt the div
> just
> stay below the longest div since thats where it fits due
to it being the
> full
> length of the page!?
>
> I attached my code. No, I cannot link the site. I do not
have the site.
> Its
> under construction with no host. Y'all have dreamweaver,
paste it in a new
> file
> and add your own random images. the "filler text" is
just there so I can
> show
> you that if I stick that there it wraps around fine, but
if you get rid of
> it,
> the div thats supposed to be wrapping around two divs
sticks itself above
> the
> two divs..even though it doesnt close till have the two
divs!! WHY!?
>
>
>
> <!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>Untitled Document</title>
> 
> 
> 
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="whole">
> <div id="header"><img
src="../images/dawn_header2.jpg" width="900"
> height="251" alt="Dawn Dause Header" /></div>
> <div id="navigation">Content for id "navigation"
Goes Here</div>
> <div id="body_wrap">
> <div id="body">Content for
> id
> "body" Goes Here</div>
> <div id="side_bar"><span
> title="blocked::
http://www.kenarllc.com/New_Homes/Romeoville/Townhomes/"><a
> title="blocked::
http://www.kenarllc.com/New_Homes/Romeoville/Townhomes/"
> style="color: blue; text-decoration: underline"
> href="
http://www.dawndause.com/greenhaven.htm"><a
> title="blocked::
http://www.kenarllc.com/New_Homes/Romeoville/Townhomes/"
> style="color: blue; text-decoration: underline"
> href="
http://www.dawndause.com/greenhaven.htm"></a></span><br>
> <font size="4"><b>
> <font
> color="#ffffff" size="+1"><marquee
bgcolor="#000080" scrollamount="4"
> direction="left" loop="true"
width="179"></marquee>
> </font></b></font>
> fdfsfsdfsdf
> </div>
> <br />
> fffff
> </div>
> <div id="footer"><img
src="../images/activerain_adnew.jpg"
> alt="Activerain"
> width="350" height="60" /></div>
> fff
> </div>
> </body>
> </html>
>

Draggable div inside "parent" div

Hi,
Newbie in Edge Animate and needing some help with draggable items..
So here's the problem:
I'm doing some kind of "map-application" and I want to do draggable "map"-div into div (the map-div is larger than the "upper" div - so this "upper" div should identify this lower's "map"-div edges).
This map-div contain map-image including some text elements and some actions.
I have tried to do this with jQuery draggable-function and added that containment-definition, but it won't work properly ( I think that syntax was incorrect also.. )
I found awesome jQuery-function draggable_background. That works perfectly, BUT I need same function for div-element not background-image..
I hope you get the point.
Have anyone ideas or maybe even complete solution for my problem?
PS. This map should also work with touchable devices.
-Mariian-

Hi,
here is some screenshots of my work. Are these big enough?
And that warning-sign is telling that my picture is larger than 1024 px and so on..I will reduce that image..
-Mariian-

Power off after putting iMac to Sleep

Have you ever experienced this?
Put you iMac to Sleep and it powers down - not a shut down, but the power goes off - no blinking light, no whirring of the hard drive, no sign of life!
I have read and performed many of the tips regarding NVRAM, SMU, PMU, etc. resets. None have worked.
Situation 1-
Use the 'sleep' command - moments after the machine powers off.
Situation 2 -
iMac screen saver will run for a short time, then screen goes blank, the power light illuminates, the fan spins full speed, and the machine is totally unresponsive to mice clicks or movements, or keyboard entries.
Situation 3 -
Sometimes upon power up, the iMac doesn't start, but you can hear a faint buzz sound from the back of the machine. Similar to audio hum.
These problems occur whether or not other devices are connected to the iMac.
Connections-
Standard USB devices - mice, card reader,
Bluetooth keyboard
Ehternet
Power Settings-
Screen saver 5 minutes
Energy Saver - to sleep when inactive - 15 minutes, display to sleep - 15 minutes.
Various other settings tried with no change in problem.
I suspect the power supply. What's your opinion?
iMac g5 1.8Ghz, 1gig mem Mac OS X (10.4.9)

Any solution to this?
Put you iMac to Sleep and it powers down - not a shut
down, but the power goes off - no blinking light, no
whirring of the hard drive, no sign of life!
I have read and performed many of the tips regarding
NVRAM, SMU, PMU, etc. resets. None have worked.
Situation 1-
Use the 'sleep' command - moments after the machine
powers off.
I began experiencing the same thing this week (two days ago). I also tried repairing permissions, resetting SMU, and removing the iTunes receipts (Library/Receipts) since this is what caused an earlier failure to sleep. The difference is then the computer would not sleep, now it shuts off instead of sleeping.
Situation 2 -
iMac screen saver will run for a short time, then
screen goes blank, the power light illuminates, the
fan spins full speed, and the machine is totally
unresponsive to mice clicks or movements, or keyboard
entries.
Have not yet encountered Situation 2.
Situation 3 -
Sometimes upon power up, the iMac doesn't start, but
you can hear a faint buzz sound from the back of the
machine. Similar to audio hum.
I have experienced this (Sit 3) as well with my LaCie firewire drive connected, sometimes. I have found that powering off the LaCie resolves this, as does unplugging it.
These problems occur whether or not other devices are
connected to the iMac.
Connections-
Standard USB devices - mice, card reader,
Bluetooth keyboard
Ehternet
Power Settings-
Screen saver 5 minutes
Energy Saver - to sleep when inactive - 15 minutes,
display to sleep - 15 minutes.
Various other settings tried with no change in
problem.
I suspect the power supply. What's your
opinion?
iMac g5 1.8Ghz,
1gig mem Mac OS X (10.4.9)
Another difference, I am running OS X - 10.3.9, otherwise the same
Any ideas?
iMac G5 & Beige G3 Mac OS X (10.3.9) 1GB Memory, LaCie Firewire external drive

HELP- VISTA problem with div inside of div

Hi all,
I need some Dreamweaver CSS help. I put together a profile Web site, http://lizconnolly.com/index.html and in VISTA/IE the yellow bio box inside the gray box is being pushed down. The box looks fine in Firefox and Safari, and I am not sure what the problem is.
My css file link is: http://lizconnolly.com/Connolly.css
Please help if you can.
Thank you for your help.
Liz

As I said in my earlier post, the pages look similar in both IE7 and FFox. The text is very close to the bottom line, but not spilling out of the box.

Will a Flash navbar work inside a div tag?

I created a pretty simple navbar in Flash and put it inside a <div>. It looks great but the links don't work. Am I missing something or will this not work?

Your code is fine if you take out the other stuff. Got an error somewhere else?
Tear it down starting with this and then rebuild one line at a time......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
#navbar {
position:fixed;
z-index:1;
padding:0px;
height: 20px;
width: 100%;
top: 0px;
text-align: center;
vertical-align: top;
background-color: #000;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #FFF;
#navbar a:link {
background: transparent;
color: #FFF;
#navbar a:visited {
text-decoration: none;
color: #006;
background: transparent;
#navbar a:hover {
text-decoration: none;
color: #999;
background: transparent;
#navbar a:focus {
text-decoration: none;
color: #999;
background: transparent;
#navbar a:active {
text-decoration: none;
color: #FFF;
background: transparent;
a {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
font-weight: bold;
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
color: #FFF;
a:hover {
text-decoration: none;
color: #CCC;
a:active {
text-decoration: none;
color: #FFF;
</style>
</head>
<body>
<div id="navbar"><a href="javascript:alert('../indexNew.html')">home</a> | <a href="javascript:alert('rooms.html')">our rooms</a></div>
</body>
</html>

Inserting a Div in a Div

Is it possible to insert a div tag (or two) inside another
div tag. I have
a background image I want to be in the background of a
section that will
have 2 or 3 div tags in it. I know I can go with a table, but
I am trying
to get away from them.
Thanks
Gary

You're welcome.
Walt
"GPaul" <[email protected]> wrote in message
news:g8vck1$dqi$[email protected]..
> Walt
>
> Thanks for your answer, I thought a I had done it before
but it was not
> working for me.
>
> Gary
> "Walt F. Schaefer" <[email protected]> wrote
in message
> news:g8v1s1$sv1$[email protected]..
>> In its simplest form a div looks like this (in code
view):
>> <div></div>
>>
>> To insert a div inside that div make it look like
this:
>>
>> <div><div></div></div>
>>
>> See?
>> --
>>
>> Walt
>>
>>
>> "GPaul" <[email protected]> wrote in message
>> news:g8v0qn$rhk$[email protected]..
>>> Is it possible to insert a div tag (or two)
inside another div tag. I
>>> have a background image I want to be in the
background of a section that
>>> will have 2 or 3 div tags in it. I know I can go
with a table, but I am
>>> trying to get away from them.
>>>
>>> Thanks
>>>
>>> Gary
>>>
>>
>>
>
>

How to position two buttons on top of div element inside a div container?

Hello!
Good news...
I have created my very first thumbnail slider for my website that actually works!
Bad news...
The buttons that help scroll the div element, which is wrapped inside a center container, are no longer positioned on top of the div.
Here is the html:
<div id="centerContainer">
<div id="aemcSlider">
   <ul>
    <li>
        <a class="aemcPkgBut" href="" target="" alt="AEMC Packaging" title="AEMC Packaging"> </a>
        </li>
        <li>
         <a class="aemcGroundFlexBut" href="" target="" alt="GroundFlexAd" title="GroundFlex Ad"> </a>
         </li>
     <li>
      <a class="aemcClampBut" href="" target="" alt="Clamp-On Ad" title="Clamp-On Ad"> </a>
      </li>
          <li>
          <a class="aemcMetrixBut" href="" target="" alt="Metrix Ad" title="Metrix Ad"> </a>
          </li>
     </ul>
</div>
<div id="leftBut">
<a class="arrowLeft" href="" target="" alt="Left" title="Left"> </a>
</div>
<div id="rightBut">
<a class="arrowRight" href="" target="" alt="Right" title="Right"> </a>
</div>
</div>
Here is the CSS:
Main container:
#centerContainer
{width: 800px; margin: 0 auto; background-color:#0e210e; position:relative}
Div Element:
#aemcSlider
    text-align:center;
    list-style:none;
    width: 450px;
    height: 114px;
    margin: 0 auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    top: 67px;
    position: relative;
    overflow: hidden;
#aemcSlider a {margin-right: -12px;}
Left & Right Buttons:
a.arrowLeft
    width: 29px;
    height: 96px;
    float:left;
    position:absolute;
    margin: 0 auto;
    display: block;
    background-image: url(../Images/arrowLeft.png);
    background-repeat: no-repeat;
    left: 311px;
    top: 91px;
    opacity: 0;
a.arrowLeft:hover
background-image: url(../Images/arrowLeft.png);
opacity: 0.5;
a.arrowRight
    width: 29px;
    height: 96px;
    position:absolute;
    float:right;
    margin: 0 auto;
    display: block;
    background-image: url(../Images/arrowRight.png);
    background-repeat: no-repeat;
    opacity: 0;
    left: 720px;
    top: 92px;
a.arrowRight:hover
background-image: url(../Images/arrowRight.png);
opacity: 0.5;
Here are the things I've done to troubleshoot:
If I put the div element as an absolute container, the left button disapears.
I get the same effect when I change the position to relative.
I tried changing the position to relative for both buttons.
I also tried to position the buttons outside the Main Div container and no go.
How can I position the relative div element under these controller button?
Any help would be muchly appreciated.
~LA

OK,
Got the site onto a public web space.
Here sre the links...
http://www.aliciaalmeidagraphicdesigner.com/Work.html
http://www.aliciaalmeidagraphicdesigner.com/style/Body.css
http://www.aliciaalmeidagraphicdesigner.com/js/functions.js
Anyone can help me out, please?
Thanks!
LA
PS: Dissapointed...my website looks much better from my local file than remote

Putting an ap div inside a container?

Hello,
I am rather new to dreamweaver and am stuck with an issue. It is dealing with putting an ap div inside a container.
I am not planning on becoming a web developer, I am a VFX artist, and have some of my work up on the web for employment.
Since I don't know code and other complicated things with Dreamweaver, I decided to do an "easy" way of designing my page.
I basically made a giant container, and then dragged out ap divs inside it where ever I wanted.
I came back another day and added more ap divs, only this time - they didn't stay with the container. I am guessing I'm missing a step
or did something a little different this time, and am trying to find out what.
Here is my website for reference:
www.mikelarned.com
As you can see on the project page for example, when you click and drag the corner of the web window left and right, the top title moves with the page.
And the videos/ other text under, stays static.
I am hoping there is a way to resolve this issue without code. Maybe theres a way with the options on the right hand side of Dreamweaver to drag that ap div into the container?
If not, hopefully there is an easy way to copy and paste the code.
Thanks for you time and help.
-Mike

elementsk8er506 wrote:
I am a VFX artist, and have some of my work up on the web for employment.Since I don't know code and other complicated things with Dreamweaver, I decided to do an "easy" way of designing my page.
Hmm. I wonder what your reaction would be if I came along and asked a similar question about VFX? I know nothing about VFX, but want to do it the easy way without learning anything... Each technology requires certain skills and at least some basic knowledge. Unfortunately, a lot of people unfamiliar with web design think absolute positioning is the easy way. It's actually quite an advanced technique that has many people tearing out their hair until they learn how it really works.
Basically, the problem with AP (absolutely positioned) divs is that they are removed from the normal flow of a web page. You might think you're putting them in a container, but you're not. Absolutely positioned elements float in front of the web page and have a stacking order defined by their z-index property. The top and left coordinates are absolutely positioned with regard to the element's containing block. The containing block is the element's most immediate ancestor that is also positioned using either fixed, relative, or absolute positioning. If no such ancestor exists, the containing block is the page itself.
If you understand HTML and CSS, this is a relatively easy concept. If you don't, it's as difficult as VFX would be for me.
To put this in as simple terms as possible, your container must also use CSS positioning. A common way to do this is to set the CSS rule for the container to position: relative without defining coordinates for the top and left. All AP divs nested inside then take their coordinates from the container, which you can center by giving it a width and setting the left and right margins to auto.

Centering with CSS inside a div box

Am subbing on a job, would appreciate help:
I am trying to center the three columns inside the address
box at the bottom
of the page.
http://www.mariagrist.net/dev/motors/bodyshop.htm
It should look just like the box at the bottom of the main
page
http://www.mariagrist.net/dev/motors/default.html
but with content centered.
I copied the divs from the default.htm but am changing them
in order to try
to center the content. So far I have only made it worse
because now the
columns are all on top of each other.
Thanks

Thanks heaps, that's exactly what I wanted it to do.
Aren't these forums just magnificent.
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Pixel Warrior wrote:
>
>> Am subbing on a job, would appreciate help:
>> I am trying to center the three columns inside the
address box at the
>> bottom of the page.
>>
>>
http://www.mariagrist.net/dev/motors/bodyshop.htm
>>
>> It should look just like the box at the bottom of
the main page
>>
http://www.mariagrist.net/dev/motors/default.html
but with content
>> centered.
>> I copied the divs from the default.htm but am
changing them in order to
>> try to center the content. So far I have only made
it worse because now
>> the columns are all on top of each other.
>> Thanks
> First off you need to change all thress <div
class="address_item_content
> divided"> to <div class="address_item_content">
Just drop the 'divided'
> part.
>
> Next you need to wrap the three newly nmed <divs>
'address_item_content'
> <divs> in another wrapper. See the code below
(scroll down) I've named it
> 'addressHolder'
>
> Find your .address_item_content css and make sure it
looks the same as
> this:
>
> .address_item_content {
> float: left;
> width: 115px;
> padding-left: 30px;
> margin-top: 16px;
> font-size: 11px;
> border-left: 1px solid #000;
> }
>
> add the addressHolder css to your stylesheet.
>
> #addressHolder {
> width: 438px;
> margin: 0 auto;
> }
>
>
>
> Heres the section of code starting and ending with the
> 'address_box_content' <div>
>
> Note to get rid of the 1px solid dividing line on the
left of the first
> 'address_item_content' <div> use some inline css
styling
> 'style="border-left: none;" plus <br style-"clear:
both;"> has been
> inserted after the 'addressHolder'<div> to pull
the 'address_box_content'
> <div> around the three addresses.
>
>
> CODE
>
> <div id="address_box_content">
> <div id="addressHolder">
> <div class="address_item_content" style="border-left:
none;">
> <div id="content_title">DERWENT PARK</div>
> 8c Lampton Ave<br>
> Ph: 03 6211 0660<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">DEVONPORT</div>
> 6-8 Victoria Pde<br>
> Ph: 03 6420 4531<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">BURNIE</div>
> 60-65 Marine Tce<br>
> Ph :03 6430 2440<br>
> </div>
> </div>
> <br style="clear: both;">
> </div>
>

How can i postition an image inside a div correctly?

I am learning CSS and I want to insert an image inside a div
used as a footer. I want the image to appear to the left of the div
with say 10px left margin and 5px top and bottom.
I also have a horizontal UL and a <p> inside the div
which are set to the centre. I want to keep their appearance as
they are - but add the image to the left without putting anything
else out of place if that makes sense.
Can someone show me how it is done?
http://www.tomkilbourn.com/newsite/test/footer.html
The image which I want to use is from validator.wc3.org -
<p>
<a href="
http://validator.w3.org/check?uri=referer"><img
src="
http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88"
/></a>
</p>

~Billy~ wrote:
> Ive got it to work by adding -
>
> <span
style="position:absolute;top:27px;left:20px;">
> <img src="/newsite/images/valid-xhtml10.png"
/></span>
>
> before the closing body tag, but is there a way to do it
without using
> absolute positioning and span?
>
Id' do it by adding position relative to my footer div and
then I'd
create a class for the img and use absolute positioning for
it which if
nested within the footer div will be relative to that - like
so.....
in your css...
#footer {
border-top: 1px solid rgb(187, 187, 187);
padding: 0px 0px 10px;
background-color: rgb(51, 0, 0);
position: relative;
.w3c {
position: absolute;
top: 10px;
right: 20px;
and your html markup for your footer dive, something like....
<div id="footer">
<img src="/newsite/images/valid-xhtml10.png" alt="alt text
here"
class="w3c" />
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li class="last"><a href="#">Item
five</a></li>
</ul>
<p id="footerbottom">Copyright Tom Kilbourn 2007
www.tomkilbourn.com</p>
</div>
chin chin
Sinclair

Stacking a Div ontop of another Div inside of a div?

ok so i am not a programmer, just a designer doing a family a favor building him a website. In using divs i am trying to get a div to overlap another div, while inside another div. confused? ok in simple: i have a div "wrapper" that holds the website center since the design is off center, inside this div i have another div which holds my body of the website "main", also inside the wrapper div i have a second div called "element" which is to sit top left and overlap the main div. The idea is to have an image cutting into the top left of the website, while keeping the rest of the site centered. I have attached a sample picture, and will post the code. if anyone can help please let me know thank you.
CODE:
<body>
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
    <div id="header">
      <h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
      <h3>text</h3>
      <h3> </h3>
      <h3>phone </h3>
      <h3>email</h3>
      <h3> </h3>
      <h3>address</h3>
      <h3>city</h3>
</div>
    <div id="content">
      <h2>Lorem ipsum dolor sit amet,</h2>
      <p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
   </div>
    <div id="footer">
      <table width="432" align="center" cellspacing="15">
        <tr>
          <td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
          <td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
          <td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
        </tr>
      </table>
      <p> </p>
    </div>
</div>
</div>
</body>

<head>
<style>
#page{
    width:100%;
    height:100%;
    text-align:center;
#wrapper {
    width: 860px;
    position: relative;
    float: none;
    margin: 0px;
    height: auto;
    padding: 0px;
    margin:0 auto;
#element {
    top:0px;
    left:0px;
    padding: 0px;
    height: 310px;
    width: 305px;
    position: absolute;
    z-index: 100;
#main {
    background-color: #333;
    height: auto;
    width: 550px;
    border: 1px solid 333333;
    position: absolute;
    float: right;
    padding: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    left: 155px;
    top: 125px;
#header {
    padding: 0px;
    height: 180px;
    width: 360px;
    float: none;
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 170px;
#content {
    color: 555555;
    background-color: #FFF;
    padding: 20px;
    height: auto;
    width: 470px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
#footer {
    background-color: #FFF;
    padding: 0px;
    height: 180px;
    width: 510px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
body {
    background-color: #CCC;
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 25px;
    color: #FFF;
    margin: 0px;
    padding: 0px;
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CCC;
    margin: 0px;
    padding: 0px;
h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    color: #000;
    padding: 0px;
    margin: 0px;
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #333;
    margin: 0px;
    padding: 0px;
.eng {
    font-size: 12px;
ul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #333;
</style>
</head>
<body>
<div id = "page">
    <div id="wrapper">
      <div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
      <div id="main">
        <div id="header">
          <h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
          <h3>text</h3>
          <h3> </h3>
          <h3>phone </h3>
          <h3>email</h3>
          <h3> </h3>
          <h3>address</h3>
          <h3>city</h3>
    </div>
        <div id="content">
          <h2>Lorem ipsum dolor sit amet,</h2>
          <p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
       </div>
        <div id="footer">
          <table width="432" align="center" cellspacing="15">
            <tr>
              <td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
              <td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
              <td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
            </tr>
          </table>
          <p> </p>
        </div>
      </div>
    </div>
</div>
</body>
SORTED?

AP a Div inside a centered DIV

I've never got this understood. I have a Container DIV, set
to auto center. I'm using one of the presets that DW8 gives you. I
need put a small DIV in the upper right corner, that stays in the
exact spot even when browsers are widened...let me re-phrase. I
want the little DIV to be Absolutely Positioned, but using the XY
coordinates of my main, centered container.
I made a DIV, called it Absolute, moved it where I want it,
and of course it stays put when I widen the browser window. It is
using the whole browser window for the XY coordinates. That's fine,
and I understand it's supposed to work that way.
But, I also thought that if you put a DIV inside another, it
will use the XY of that div, not the whole page.
How do I do this?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"synterx" <[email protected]> wrote in
message
news:[email protected]...
> I've never got this understood. I have a Container DIV,
set to auto
> center. I'm
> using one of the presets that DW8 gives you. I need put
a small DIV in the
> upper right corner, that stays in the exact spot even
when browsers are
> widened...let me re-phrase. I want the little DIV to be
Absolutely
> Positioned,
> but using the XY coordinates of my main, centered
container.
>
> I made a DIV, called it Absolute, moved it where I want
it, and of course
> it
> stays put when I widen the browser window. It is using
the whole browser
> window
> for the XY coordinates. That's fine, and I understand
it's supposed to
> work
> that way.
>
> But, I also thought that if you put a DIV inside
another, it will use the
> XY
> of that div, not the whole page.
>
> How do I do this?
>

How to edit the code of a text inside a div ?

Hi! I need your help! =)
How can I access the code of a DIV inside the Animate? I want to put some words in bold, and some other text formats.
Thanks.

Antonio,
Sadly, there is no way to do it directly. Even in plain HTML application it is impossible to print text of UI control (<textarea> in this case).
So you have to open new browser window containing entered text and let user print text himself. Or invoke window.print() on document load event.
VS

Lining up divs inside a main div: Mine not working

Hello, I need help with my CSS design, I am trying to line many dives inside a container DIV, interestingly only the first div is well
positioned, the rest lie outside the container all together. I can't figure out what I am doing wrong. Find attached my CSS definitions and also the related code:
CSS:
/* id the for main container of index page elements */
#indexmain{
background-color:#FFFFFF;
font-weight: bold;
color:#00FF00;
width: 100%;
height: 600px;
border-width: 1px;
border-style: solid;
border-color: red;
/* id for welcome label */
#welcome {
background-color:#FFFFFF;
color:#00FF00;
padding-top: 5px;
padding-right: 5px;
padding-left:5px;
padding-bottom:5px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 140px;
height: 20px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 160px;
left: 120px;
/* id for main container of index elements */
#welcomemain{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 60%;
height: 400px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 192px;
left: 120px;
/* id for description of consumer component */
#consumerdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
top: 0;
left:0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id for label of consumer link */
#consumerlink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
background-color:#CCFF66;
top: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id for label of business link */
#businesslink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
background-color:#CCFF66;
bottom: 0;
left: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id for description of business component */
#businessdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
bottom: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id to control positioning of content*/
.centerlinkcontent{
     position:absolute;
     top:80px;
     left: 110px;
.centerdescriptioncontent {
position:absolute;
top:50px;
left:20px;
.titlelabelconsumer{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
.titlelabelbusiness{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
top:400px;
.searchresultscontainer{
width:812px;;
height:62px;
border-style:solid;
border-color:#FF0000;}
.searchresultsimg{
width:100px;
height:60px;
background-color:#CCCCCC;
left:0px;
border-style:solid;
border-color:#9966CC;
border-width:1px;
/*.searchresultsdetail{
position:relative;
width:700px;
height:61px;
text-align:center;
background-color:#CCCCCC;
float:right;
left:101px;
margin:0;
padding:0;
.productdescription{
     position:absolute;
     width:300px;
     height:36px;
     text-align:left;
     left:101px;
     margin:0;
     padding-bottom:10px;
    padding-top:12px;
     border-style:solid;
     border-color:#FFCC00;
     border-width:1px;
.productmodelno{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:401px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#996600;
border-width:1px;
.productmodelyear{
     position:absolute;
     width:100px;
     height:36px;
     text-align:left;
     left:501px;
     margin:0;
     padding-bottom:10px;
    padding-top:12px;
     border-style:solid;
     border-color:#00FF00;
     border-width:1px;
.productprice{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:601px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#000033;
border-width:1px;
.productuserid{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:701px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#990000;
border-width:1px;
Related Code:

<div class="searchresultscontainer">
    <div class="searchresultsimg">
           <cfimage source="#ExpandPath('images/consumer/#Cnsmr_ProductIMAGE#')#" action="resize" width="100" height="60" name="resizedImg" format= "jpg">
           <cfimage source="#resizedImg#" action="writeToBrowser">
    </div>
    <div class="productdescription"><font size="+2">#Cnsmr_ProductDESCRIPTION# </font> <font size="+2"></div>
     <div class="productmodelno"><a href="showProductDetail.cfm?Cnsmr_ProductCountID=#URLEncodedFormat(TRIM(Cnsmr_ProductCountID))#">#Cnsmr_ProductMODELNo# </font> </a></div>
     <div class="productmodelyear"><font size="+2">#Cnsmr_ProductMODELYEAR# </font> </div>
     <div class="productprice"><font size="+2">#Cnsmr_ProductPRICE#</font> </div>
     <div class="productuserid"><font color="#000066#" size="+2">#User_id#</font></div>
</div>

</cfoutput>

In addition to PZ's reply, you have way too much going on in your stylesheet ;-) it needs to be streamlined dramatically.
If you don't undersand the how and whys of using AP (absolutely positioned) divs, it's better not to use them - here's why:
Why do my AP Divs (layers) move when I resize the browser window?
You may want to run through a few CSS tutorials before going any further, so as to get your head around how CSS layouts work and how to use a stylesheet effectively :-)
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css/bk_dwcs4 _mastering_css_04.pdf
LIST OF CSS TUTORIALS:
http://www.adobe.com/devnet/dreamweaver/css.html

Positioning off after put div inside a div

Similar Messages

Maybe you are looking for