Problems during the withdrawal of position: absolute

Hi all

I was hired as a graphic designer for a lighting wholesaler not too long ago and have been invited to rethink our old site "my & pa" since. I'm not very practiced in the DW, even though I have a lot of experience of Photoshop and Illustrator. I first started slice graphic in PS and export the HTML, but after looking at the interpretation of the browser and referring to these forums here, I learned it's a nightmare and not something I have to do.

So, when I read a lot of guides and forum messages and watched a bunch of tutorials on Adobe TV. I think I'm more in understanding (once I separated CSS and HTML in my mind things became more easy), but I'm still a novice.

Right now, I'm trying to layout our pages and avoid the tables. This seems to be a simple gets pretty combination of images in the text that I can get in shape, the problem I have and keep it in place. Now I'm drawing APDivs and dropping in what I want. However, it becomes a problem when you test the site in browsers - my space body, header, and footer will move when I resize it, but all the content of these div tags still in place. That is should do with the tag position: absolute, but when I remove it, it changes where my content is intended to be on my page. Here are a few screens to help:

help3.jpghelp4.jpg

At this point, I've read about positioning and absolute page available here:

http://www.apptools.com/examples/pagelayout101.php

So, I thought I'd do what has been proposed in this tutorial - try using the static positioning or play with pads of margin to get the content "sink" with the rest of the page if the user has resized the window. When I tried to use the "position: static" on this subject, so what she did with the page content stream as I predicted, he wouldn't let me move to where I wanted it to be. So, I tried using the page margins, as the proposed help page. I gave, the bar margin 'left' first and got this, which seemed right:

help5.jpg

Unfortunately, when I asked the "top margin" if he gets in, we want it to, disaster:

help6.jpg

To me, it seems that it is the application of the upper margin of the lower part of the header, instead of the top of the page. When I saw in the browsers, it seems he would work in the case.

Here is my current code with what looks like my screen of this last one:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > Geller lighting Supply Co., Inc. < /title >
< style type = "text/css" >
<!--
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
margin: 0;
padding: 0;
Color: #000;
background-color: #00a0af;
}

/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0;  / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
text-align: right;
}
/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
Color: #000;
text-decoration: none; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
Color: #000;
text-decoration: none;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
}

/ * ~ ~ This container fixed-width surrounds the other div ~ ~ * /.
. Container {}
Width: 800px;
Background: #FFF;
margin: 0 auto; / * set to auto on the sides, coupled with the width, the layout centres * /.
}

/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background-image: url(Images/header-image.jpg);
min-height: 146px;
Max-height: 146px;
background-color: #ADB96E;
background-repeat: no-repeat;
Width: 800px;
}

/ * ~ ~ It's layout information. ~~

(1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

*/

. Happy {}
height: 600px;
Width: 800px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
float: none;
background-color: #FFF;
}

/ * ~ ~ Footer ~ ~ * /.
.footer {}
background-image: url(Images/footer.jpg);
min-height: 75px;
max height: 75px;
text-align: center;
do-family: Arial, Helvetica, without serif.
do-size: 12px;
background-repeat: no-repeat;
Width: 800px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
{.smalltext}
do-size: 10px;
make-weight: bold;
}

/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
a: hover {}
text-decoration: none;
color: #00A0AF;
}
a: active {}
text-decoration: none;
Color: #000;
}
{#apDiv1}
Width: 492px;
height: 27px;
left: 101px;
top: 112px;
margin left: 308px;
top of the margin: 114px;
}
->
< / style >
< script type = "text/javascript" >
function MM_preloadImages() {//v3.0
var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();
var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)
If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}
}
function MM_swapImgRestore() //v3.0 {}
var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;
}
function MM_findObj (n, d) {//v4.01
var p, i, x;  if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}
d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}
If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];
for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);
If (! x & & d.getElementById) x = d.getElementById (n); Return x;
}

function MM_swapImage() {//v3.0
var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).
If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}
}
< /script >
< / head >

< body = onload "MM_preloadImages (' Images/Contact-2.png','Images/recyclage-2.png','Images/FAQ-2.pn g','Images/Savings-2.png','Images/Products-2.png','Images/About we - 2.png ')" >
< div class = "container" >
< div class = "header" > <! - end .header - > < / div >
< div class = "content" >
"< div id ="Divap1"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image6 '", ' Images/a about US - 2.png', 1) "> < img src =" "Images/a about US - 1.png" name = "Image6" width = "82" height = "27" border = "0" id = "Image6" / > < /a > < a href = "#" MM_swapImgRestore"onmouseover =" MM_swapImage ('Picture5', ", ' Images/products - 2.png', 1)" > < img src = "Images/products - 1.png" name = "Picture5" width = "82" height = "27" border = "0" id = "Picture5" / > < /a > < a href = "#" MM_swapImgRestore' " onmouseover ="MM_SwapImage ('Image4',", ' Images/savings - 2.png', 1) "> < img src =" Images/savings - 1.png"name ="Image.4"width ="82"height ="27"border ="0"id ="Image.4"/ > < /a > < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image3',", ' Images/FAQ - 2.png', 1) "> < img src =" Images/FAQ - 1.png"name ="3"width ="82"height ="27"border ="0"id ="3"/ > < /a > < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ("Image2"") (, ' Images/recycling - 2.png', 1) "> < img src =" Images/recycling - 1.png"name ="Image2"width ="82"height ="27"border ="0"id ="Image2"/ > < /a > < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage (" Image1 ",", "Images/Contact - 2.png", 1) "> < img src =" Images/Contact - 1.png"name ="Image1"width ="82"height ="27"border ="0"id ="Image1"/ > < /a > < / div >"
< / div >
< div class = "footer" > < strong > < a href = "index.html" > home < /a > | < a href = "directions.html" > < /a > Directions | < a href = "contact.html" > Contact < /a > < br / >
© 2011 geller lighting Supply Co., Inc. < br / >
3720 trade Drive - Baltimore, MD 21227 < facilities > < br / >
< / div >
< / div >
< / body >
< / html >

I've been helping out here before, I hope you can give me some advice, thank you!

-Dan

A 1px border at the top will do the same, as will overflow: hidden (which can be the best solution)...

Tags: Dreamweaver

Similar Questions

Maybe you are looking for