Hi Guys,
I am a complete newbie to Dreamweaver CS6 so please bear with me.
I have designed a very basic site using div tags and it all looks fine in Design View - it is only when I preview in my browser that my images are all over the place.
My first div tag is my container which is 968px wide with the rest of the settings set as auto with relative positioning.
Inside the container I have 11 div tags that all add up to 968 px wide. I have a sidebar with 3 images boxes across and 3 below but when I preview in browser I only have 2 boxes across and the other box is tucked underneath it.
I am not sure what I can do to rectify this. I have been trying for days to fix it but to no avail. I am not even sure what you guys would need from me to help me with this.
I would be forever grateful for any advice with this.
Many thanks in advance,
shauneyd33
Hi John and Magi,
Many thanks for replying so quickly. I really appreciate this.
Apologies for the delay in my reply. I have registered with a company to host my site but it is currently down for maintenance.
I will repost with the link once it is up and running again. Apologies for this and thank you both so much for replying.
I will be in touch soon.
shauneyd33
Without seeing a line of code, I'm going to hazard a wild guess that you have fallen for the newbie trap of using APDivs for primary layouts. Absolute positioning removes content from the normal document flow and sticks it relative to the top, left parent container or browser window. So what you see in Design view bears almost no resemblance to what your page really does in Live View or Browser Preview. Don't use positioning. You don't need it & you're much better off without it.
http://www.apptools.com/examples/pagelayout101.php
Nancy O.
Hello guys,
Many thanks for all your replies. I really appreciate your help. Unfortunately the site I am using for hosting is still down with no sign of when it will be up again so this is why I have not posted since. If it helps here is the entire code for my webpage:
<!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>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #F00;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"><img src="images/banner.jpg" width="787" height="142" alt="whsct_banner" /></div>
<div id="left-sidebar">
<p>Content for id "left-sidebar" Goes Here </p>
<p><a href="index.html">jhiouhjknhkin</a></p>
<p><a href="http://www.google.com">google</a></p>
</div>
<div id="top_main">
<div id="top_image_1"><img src="images/top_home_1.gif" width="239" height="240" alt="nurses" /></div>
<div id="top_image_2">Content for id "top_image_2" Goes Here</div>
<div id="top_image_3">Content for id "top_image_3" Goes Here</div>
</div>
<div id="bottom_main">
<div id="bottom_image_1">Content for id "bottom_image_1" Goes Here</div>
<div id="bottom_image_2">Content for id "bottom_image_2" Goes Here</div>
<div id="bottom_image_3">Content for id "bottom_image_3" Goes Here</div>
</div>
<div id="footer">
<p>Content for id "footer" Goes Here</p>
</div>
</div>
</body>
</html>
I really appreciate any advice or help with this.
shauneyd33
Thank you to Nancy and all of you that very kindly took the time to reply to my query.
My sincere apologies for the lateness of my update too. I am just a novice with Dreamweaver at the moment but hopefully in time I will be able to help others like you helped me.
The issue I had in the end was with overlapping div tags. I met with someone who has used Dreamweaver in the past and they were able to fix it for me very quickly.
Apologies I was not able to put my site up here. I will be addressing that issue as a matter of urgency.
Thank you all again for replying - I really appreciate it.
shauneyd33
North America
Europe, Middle East and Africa
Asia Pacific