PDA

View Full Version : Can't change Margin,Position to this Div


Judes
07-27-2011, 01:10 AM
Hey Everyone,

I'm still a newbie and everything, and Designing a website , using Photoshop and Dreamweaver Together,


Anyways, I'm using This "Swap" Div inside the Table,

In Dreamweaver " The Design " Tab With The live view, shows The Div in the right place, but When Saving , The Divs just go off to the top of the Page , where Margin,Position,Padding is 0 !


Pictures


http://s1.postimage.org/1jipp7ghw/image.jpg

Here's on Dreamweaver


http://s1.postimage.org/5329f2hrh/image.jpg





and Here's on Any browser,



http://s1.postimage.org/532wklcod/image.jpg



Here's Codes

<div id="tex1">
<div id="like" ><img src="images/HeartPng.png" name="tex1" id="tex1" style="display: block;" />
<iframe src= "http://www.facebook.com/plugins/like.php?app_id=172984156104093&amp;href=http%3A%2F%2F facebook.com%2FJudePhotography&amp;send=false&amp;layout=b ox_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;col orscheme=light&amp;font=tahoma&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:86px; height:68px;" allowTransparency="true"></iframe>
</div>

</div>




That's the code , and #text1 in CSS sheet is

{color:#222;
font-family:Georgia, helvetica, sans serif;
position:absolute;}


and the #like in CSS sheet

#like {
position: absolute;
top: 79px;
left: 723px;
margin-left: -90px;
width: 105px;
height: 96px;
overflow: hidden;
text-align: center;
}




Can anyone tell me what to do , or any other information to tell ,
I can give the Website to modify it if you need to, :(

edbr
07-27-2011, 01:49 AM
its the perils of using absolute positioning i suspect. look up relative positioning and if you lay out your basic design as you want you will be fine

Judes
07-27-2011, 02:49 AM
The Relative just messed everything up!
and I tried putting it where I want to be , in the basic design,

but still Margin ,Position, stays 0 !
it looks fine on dreamweaver , but on Browser It's op the top left > Just like the pictures above

edbr
07-27-2011, 03:04 AM
did you look up any tuts on relative positioning? im not suggesting tht changing the position type as you have it is a cure. if you have a n abcolute positioned object inside a relative positioned parent ,then it will take its reference from the boundaries of its parent. fot that reason using relative positioning for page layout will help avoid problems such as you fing your self in

Judes
07-27-2011, 03:20 AM
I'm not sure I understand it,
so which Position should I change now?
Which Div? I tried everything , and the :relative is just messing the table up, Don't know if that should happen or not

DWcourse
07-27-2011, 04:26 AM
It's not a matter of fixing what you have. You need to give up the idea of simply exporting a layout from Photoshop and learn how to build it yourself using divs (or HTML5 elements) and CSS positioning.

Judes
07-27-2011, 01:17 PM
That's for the future, I need to learn the codes and everything now,
I'm interested in Design more than Building, but I would like to learn, and Must Try making a website, and understanding the problem,

Anyways, I managed to fix it myself,

Thanks guys for the help

DWcourse
07-28-2011, 09:09 PM
Congratulations on fixing it. But you're not going to learn to design for the web by doing things wrong.