PDA

View Full Version : Struggling with positioning


lycialive
04-10-2012, 06:56 PM
I'm trying to build a page that features many images. The one that's been the hardest to place is the facebook link id#fb. It's the first image I have that doesn't descend in a row.

I want it to the right of the twitter icon. Right now it works, but I don't know why. Can anyone tell me why assigning it a -55px; makes it work? I really don't understand that part, and I don't feel I can continue with just guessing.

Thanks.

here's my css:

@charset "utf-8";

.top_pic {
margin-left:0px;
margin-top:0px;
width:799px;
height:221px;
position: static;
left: 150px;
top: 0px;
}
#twitter {
height: 36px;
width: 36px;
position: static;
left: 5px;
top: 225px;
}

#fb {
height: 36px;
width: 36px;
position: static;
left: 50px;
top: 225px;
left: 44px;
margin-top:-55px;
margin-left: 45px;

}
#copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #808080;
width: 160px;
position: static;
left: 5px;
top: 632px;
}

#youtube {
height: 47px;
width: 70px;
position: static;
left: 20px;
top: 40px;
margin: 5px;

}
#prodbro {
height: 134px;
width: 160px;
position: static;
left: 5px;
top: 90px;
}
#wrapfacts {
height: 134px;
width: 160px;
position: static;
left: 5px;
top: 224px;
}
#vidclips {
height: 134px;
width: 160px;
position: static;
left: 5px;
top: 358px;
}
#saversclub {
height: 134px;
width: 160px;
position: static;
left: 5px;
top: 492px;
}

domedia
04-11-2012, 12:41 PM
Hi lycialive, you have to link to the page please.

lycialive
04-11-2012, 02:46 PM
Well, thanks, but these links do nothing for my question. I realize this question is for the wrong forum; this isn't a dreamweaver problem, but a css problem.

Ricky55
04-11-2012, 09:29 PM
He's asking to see a link to your page not look at this links under his signature.

Keep up!!!

domedia
04-12-2012, 01:24 PM
lol, yes :)

Disregard the link below in my signature.

The best approach is to upload all your files to a temporary location on the web, and provide us with a link to the page in question.

.

lycialive
04-12-2012, 03:49 PM
Well, I thank you so much, but my problem seems to be a css problem. anyway here's the link: www.autumnwindstudios.com/css/align2.html

I can't understand why I have to use negative align values to position images where I want them. I guess I'm looking for a good example, or tutorial where they explain floats in better detail not using just 1 image as an example, but several lined up side by side. Thanks, like I said, I'm not sure this is a dreamweaver problem-even though DW doesn't support negative values.

domedia
04-13-2012, 01:15 PM
The CSS alone means nothing when trying to debug a page. If you don't understand why, you almost have to take our word for it.

It's showing to the right of the Twitter icon btw. Did you get it fixed?

Dreamweaver is just an editor, so it's not because of DW.

lycialive
04-13-2012, 02:43 PM
Actually, everything is positioned on the page exactly the way I want it. I just don't know why it works. For example, the larger image in the center of the page, I had to use a negative value for the top. Example: margin-top:-530px; To me, it would make more sense for it to be a positive number like: float:right; margin-right:500px; margin-top:300px; I'm going to do some serious digging on this. Thanks so much for your answer though.

I've only learned AP positioning, so this is a new thing for me.

Ricky55
04-13-2012, 05:28 PM
Aye Id do some digging if I were you.

Optiq
04-29-2012, 01:28 AM
if you get an answer to this PLEASE LET ME KNOW!!!!.... I'm having the same issue... in dreamweaver everything looks fine and lines up..... but when I test it in the browser it's not located where I placed it and I had to use a netagive top-margin value to get it to work.... but that's not the right way to do it... it just makes it work... I can't figure out why it does that either...

lycialive
04-29-2012, 11:57 AM
Optiq, Negative margins are acceptable. Check out the link below. I'm using relative positioning with negative top and left values and it seems to be working fine in FF and IE. Of course I don't have older versions installed of IE, but so far it works. I'm no expert, but I think it works because by default, all items on a page are placed statically and fall directly below each other to the left side.

I only rarely work in design view of DW because it doesn't give an accurate picture of what's really going on. As soon as I save a page, I open it up live and view it as I work. I won't use the browser view from DW, it's way too slow.

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/