PDA

View Full Version : Design View and Browser Preview Problem


DreamweaverDan
10-16-2012, 07:11 PM
Hey guys,
I have a slight situation. My Design view is a "bit" messy, like all the measurements are mucked up so are the alignments, but it appears fine in browser (alignment is correct and all the measurements are also correct). Is there anyway to sort that out?? to make design view appear how it is previewed in browser? If that makes sense...

Also tagging on to this, only Google Chrome, Safari and Internet Explorer 9 shows it correctly (alignments and measurements how they should be) but in Mozilla Firefox it is showing exactly how Design View shows it to be (all messy). Is there a way to fix that problem aswell?

If there are any bits that do not make sense please let me know... But if you do understand please get back to me ASAP :D

Thanks
DreamweaverDan

d a v e
10-16-2012, 09:09 PM
design view is just a guide. chances are though that if it's not showing properly in firefox then some serious errors in your code or your coding approach: a link to a page would help a lot.

are you using a lot of absolutely positioned divs?

DreamweaverDan
10-17-2012, 07:12 AM
I don't use code :P I use AP DIVS from design view. Only 1 div tag is on each page! If something is wrong in my coding I would have no clue. Here is my code:


<!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>Index</title><link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 154px;
top: 69px;
}
body {
background-color: #990;
background-image: url(Images/background%20image.jpg);
background-repeat: no-repeat;
}
#apDiv2 {
position: absolute;
width: 361px;
height: 68px;
z-index: 2;
left: 1009px;
top: 311px;
color: #FFF;
font-size: 5em;
}
#apDiv2 a {
color: #FFF;
}
#apDiv3 {
position: absolute;
width: 249px;
height: 216px;
z-index: 2;
left: 1020px;
top: 359px;
}
#apDiv4 {
position: absolute;
width: 1375px;
height: 173px;
z-index: 1;
left: 19px;
top: 433px;
}
</style>
<style type="text/css">
#apDiv5 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
left: 20px;
top: 18px;
}
#apDiv6 {
position: absolute;
width: 960px;
height: 1297px;
z-index: 3;
top: 8px;
background-color: #D9E052;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #60F;
border-right-color: #60F;
border-bottom-color: #60F;
border-left-color: #60F;
}
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 0px;
top: 0px;
}
#apDiv8 {
position: absolute;
width: 963px;
height: 134px;
z-index: 2;
top: 249px;
}
#apDiv9 {
position: absolute;
width: 962px;
height: 115px;
z-index: 2;
left: -2px;
top: 246px;
}
#apDiv10 {
position: absolute;
width: 1264px;
height: 127px;
z-index: 2;
left: 0px;
top: 246px;
}
.instructor {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
</style>
<style type="text/css">
#apDiv11 {
position: absolute;
width: 955px;
height: 133px;
z-index: 3;
top: 419px;
left: 5px;
font-size: x-large;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bold;
}
#apDiv12 {
position: absolute;
width: 255px;
height: 505px;
z-index: 4;
left: 31px;
top: 709px;
}
#apDiv13 {
position: absolute;
width: 334px;
height: 156px;
z-index: 5;
left: 65px;
top: 552px;
}
#apDiv14 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
}
#apDiv15 {
position: absolute;
width: 372px;
height: 348px;
z-index: 4;
left: 3px;
top: 549px;
background-color: #990;
}
#apDiv16 {
position: absolute;
width: 957px;
height: 110px;
z-index: 4;
top: 568px;
}
#apDiv17 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
}
#apDiv18 {
position: absolute;
width: 508px;
height: 587px;
z-index: 4;
top: 553px;
left: 8px;
}
#apDiv19 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
}
#apDiv20 {
position: absolute;
width: 412px;
height: 643px;
z-index: 5;
left: 544px;
top: 556px;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
#apDiv21 {
position: absolute;
width: 354px;
height: 134px;
z-index: 6;
left: 545px;
top: 1039px;
}
#apDiv22 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
}
#apDiv23 {
position: absolute;
width: 161px;
height: 115px;
z-index: 7;
left: 344px;
top: 775px;
}
#apDiv24 {
position: absolute;
width: 921px;
height: 107px;
z-index: 4;
left: 270px;
top: 1213px;
font-family: ravie;
font-size: xx-small;
}
#apDiv25 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
}
#apDiv26 {
position: absolute;
width: 1603px;
height: 769px;
z-index: 5;
}
#apDiv27 {
position: absolute;
width: 349px;
height: 157px;
z-index: 5;
left: 1320px;
top: 37px;
}
#apDiv28 {
position: absolute;
width: 948px;
height: 95px;
z-index: 8;
left: 4px;
top: 1190px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<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=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>

<body>
<div id="outwrapper">
<div id="apDiv6">
<div id="apDiv7"><img src="Images/Page1- Index/banner.jpg" width="960" height="246" /></div>
<div id="apDiv10">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="2_1_Info_zumba.html">About Zumba</a></li>
</ul>
</li>
<li><a href="#">Timetable</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Images</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Prices</a>
<ul>
<li><a href="#">Prices</a></li>
<li><a href="#">Offers</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
<div id="apDiv11">COME DOWN TO ZUMBA SESSIONS (scheduled in &quot;Timetable&quot;)! IT IS ALOT OF FUN BUT AT THE SAME TIME YOU WILL BE WORKING OUT!!</div>
<div id="apDiv18"><img src="Images/Page1- Index/instructor_pic_speech.fw.png" width="518" height="640" /></div>
<div id="apDiv20">
<p>On this website, you will be able to view images and videos (via the Gallery) to view previous classes or previous events! </p>
<p>This site will also give you more of an insight of Zumba itself and myself, the Instructor. Information on myself will include my qualifications, why I am a Zumba Instructor and what sort of classes I do in the week!</p>
<p>This website can also give you an overview of my timetable of classes through the week (via Timetable) and you can view the prices (via the Prices heading).</p>
<p>If you require anymore information on my Zumba then use the &quot;Contact Me&quot; heading on the top of the page! This way you will be able to email me, call me or send queries via the post.</p>
</div>
<div id="apDiv21"><img src="Images/Page1- Index/zumba-logo-blue.jpg" width="378" height="129" /></div>
<div id="apDiv23"><img src="Images/Page1- Index/zumba logo_web_vert.jpg" width="160" height="334" /></div>
<div id="apDiv28">
<p>If you want more information on Zumba please click here to contact me (the instructor) about classes, suitable clothing or what the workouts involve and also why Zumba is a beneficial workout!!!</p>
<p>If there is any problems with the website please contact dangoodwin@y7mail.com and it will be fixed ASAP</p>
</div>

</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

</div></body>
</html>

edbr
10-17-2012, 07:26 AM
try wrapping in a relatively positioned div of a fixed width. positioning o your absolute divs will reference from the parent div then.
this is often a problem if using apdivs for total layout

DreamweaverDan
10-17-2012, 07:42 AM
but will that still fix the messy bits? my navbar is outside the parent div and it still looks fine in the browser, is there anyway to tidy it up in design view so it looks as it should do?

edbr
10-17-2012, 08:29 AM
i suggested try it . better yet would be to re make it using relative divs

d a v e
10-17-2012, 08:20 PM
if you're going to use dreamweaver then you need to understand how to code (exactly to fix the problems you're getting now) and you should also learn about good web practices, such as not using AP divs for layout.

otherwise buy a template or have a go at wordpress or hire someone

DreamweaverDan
10-17-2012, 08:43 PM
look mate, I am not doing this for some company, I am an A level student and this is my project. So I dont expect myself to know everything about dreamweaver :P

gentleone
10-17-2012, 10:10 PM
I dont expect myself to know everything about dreamweaver :P
Dreamweaver is just a tool. Building websites is about HTML & CSS and like dave mentioned it is indeed about best practices. Creating website layouts is not drawing an APdiv here and an APdiv there.
If you want to create a layout, you insert 'normal' div tags into your HTML and you position/align them in your CSS with margins, floats and padding.

DreamweaverDan
10-18-2012, 07:46 AM
i tried doing all div tags but when i got design view to look perfect, in browser it was even messier than before. So thats why I stuck with ap divs

gentleone
10-18-2012, 10:53 AM
Even if you prefer to work in design view, you'll need to understand the very basics of HTML & CSS.

normal document flow
CSS box model
linline & block-level elements
floats

Google these things and study/experiment with it. Once you get these, you'll be able to create basic to advanced layouts. For advanced layouts you will have to get out of design view one day and start using code view, because design view will not be able to display them like a browser does.