PDA

View Full Version : Layout Problem


camy252
10-17-2011, 10:01 AM
Hey guys,

Im going nuts over here trying to fix this problem. Creating a website in dreamweaver and my menu bar looks fine in dw but when i preview it in either firefox or IE the bar appears lower and also the top banner image has moved down leaving a gap at the top. Cant seem to fix this. I have attached a couple of screen shots.

any help would be greatly appreciated.

Camy

Corrosive
10-17-2011, 10:45 AM
You'll need to provide links. This is like showing us a picture of a broken down car and asking why it has broken down ;)

camy252
10-17-2011, 10:48 AM
I havnt published yet because I need to fix this problem. here is the code for this page though if that helps. But Ive already looked through this and havnt spotted the problem so I suspected it is a dreamweaver problem?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bark and Bound</title>
<meta name="Dog walking" content="" />
<meta name="Callander based dog walking and home visit service" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:218px;
height:121px;
z-index:1;
left: 352px;
top: 55px;
}
-->
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">bark and bound</a></h1>
<h2></h2>
<h2></h2>
<h2>Callander based dog walking and home visit service</h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">about us</a></li>
<li><a href="#" accesskey="3" title="">dog walking</a></li>
<li><a href="#" accesskey="4" title="">home visits</a></li>
<li></li>
<li><a href="#" accesskey="5" title="">Contact us</a></li>
</ul>
</div>
</div>
<!-- end header -->
<div id="gallery">
<div id="top-photo">
<p><img src="images/img08.jpg" alt="" width="547" height="300" /></p></div>
</div>

<!-- start page -->
<div id="page">
<div id="content">
<div class="post">
<h1 class="title"> welcome to bark and bound! </h1>
<div class="entry">
<p><strong>Welcome to Bark and Bound!</strong></p>
<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. </p>
<p>&nbsp;</p>
</div>
<p class="meta">&nbsp;</p>
</div>
<div class="post"></div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li>
<h2>More</h2>
<ul>
<li><a href="#">Rates</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Local Area</a></li>
<li><a href="#">Disclosure Scotland</a></li>
<li><a href="#">Useful Links</a> </li>
<p>&nbsp;</p>
</ul>
</li>
</ul>
</div>
<p>
<!-- end sidebar -->
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div style="clear: both; height: 30px">&nbsp;</div>
<!-- end page -->
<div id="footer">
<p>Bark and Bound &copy; 2011 All Rights Reserved.&nbsp;&bull;&nbsp;<a href="#">SITE MAP</a>&nbsp;&bull;&nbsp;Designed by E.CAMERON</p>
</div>
</body>
</html>

Corrosive
10-17-2011, 11:54 AM
It's not going to be a Dreamweaver problem as that just writes code. The difference between WYSIWYG and live browser is down to WYSIWYG being an approximation rather than 'nailed on'. Looking at your code without the CSS as a guide I'd say it might be down to the browser defaults around header tags (in your cas h1 I think).

<div id="logo">
<h1><a href="#">bark and bound</a></h1>
<h2></h2>
<h2></h2>
<h2>Callander based dog walking and home visit service</h2>
</div>

You could start by removing those empty h2 tags. They are superfluous markup.

camy252
10-17-2011, 12:03 PM
The weird thing is it has been fine up until I started adding/editing text in the body text area. So just when i previewed it it had moved. This problem has ruined my site and without being able to fix it I will probably have to start again. Because I havnt messed around with the CSS or the HTML its surely got to be something very simple that i have missed. I deleted the h2 tags and checked the CSS for errors but it remains unchanged since it worked.

CSS:

body {
margin: 0;
padding: 0;
background: #372412 url(images/img01.gif) repeat-x;
font-size: 13px;
color: #FFFFFF;
}

body, th, td, input, textarea, select, option {
font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
text-transform: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
}

h1 {
letter-spacing: -2px;
font-size: 3em;
}

h2 {
letter-spacing: -1px;
font-size: 2em;
}

h3 {
font-size: 1em;
}

p, ul, ol {
line-height: 25px;
}

blockquote {
padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
line-height: normal;
font-style: italic;
}

a {
color: #FFEA6F;
}

a:hover {
text-decoration: none;
}

img {
border: none;
}

/* Header */

#header {
width: 830px;
height: 280px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat;
}

/* Logo */

#logo {
height: 170px;
background: url(images/dogo1.jpg) no-repeat left 65%;
}

#logo h1 {
float: left;
padding: 40px 40px 0 50px;
letter-spacing: -2px;
font-size: 48px;
}

#logo h2 {
float: right;
padding: 85px 0 0 0;
font-size: 14px;
color: #372412;

}

#logo a {
text-decoration: none;
color: #372412;
float: none;
}

/* Gallery */

#gallery {
clear: both;
width: 830px;
height: 300px;
margin: 0 auto;

}

#top-photo h2 {
height: 1.4em;
font-size: 1em;
}

#top-photo p {
margin: 0;
padding: 0 0 10px 0;
}

/* Menu */

#menu {
width: 830px;
height: 73px;
background: url(images/img03.jpg) no-repeat;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 166px;
height: 70px;
padding-top: 35px;
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: -1px;
font-size: 24px;
color: #FFFFFF;
}

#menu a:hover {
background: url(images/img09.jpg) no-repeat;
color: #FFFFFF;
}

#menu .active a {
background: url(images/img09.jpg) no-repeat;
color: #372412;
}

/* Page */

#page {
width: 830px;
margin: 0 auto;
padding: 20px 0;
}

/* Content */

#content {
float: left;
width: 532px;
}

.post {
padding: 0 0 20px 0;
}

.title {
margin: 0;
border-bottom: 2px solid #4A3903;
}

.byline {
margin: 0;
}

.meta {
border-top: 1px solid #4A3903;
text-align: left;
color: #646464;
}

.meta a {
padding-left: 15px;
background: url(images/bullets.gif) no-repeat left center;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: right;
width: 240px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
padding: 15px 0;
}

#sidebar li li {
padding-left: 35px;
border-bottom: 1px dotted #4A3903;
background: url(images/bullet.jpg) no-repeat 15px 50%;
}

#sidebar h2 {
margin: 0;
padding: 20px 0 2px 30px;
background: url(images/img05.gif) no-repeat left bottom;
border-bottom: 2px solid #4A3903;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Footer */

#footer {
clear: both;
padding: 20px 0;
background: #FFEA6F;
border-top: 3px solid #E8AD35;
text-align: center;
font-size: smaller;
color: #E8AD35;
}

#footer a {
color: #C28C21;
}

Corrosive
10-17-2011, 12:34 PM
Just try adding;

#page h1 {margin: 0; padding: 0;}

to your CSS and see what it does (just a guess)

camy252
10-17-2011, 01:15 PM
Tried adding above and it didnt make any difference im afraid. I really dont understand, I had it fine before, I havnt made any changes directly to the layout so why would this happen!?
Im at hair pulling out stage now! lol

jcsites
10-20-2011, 02:47 AM
This site is cool. I could learn more about building a site here. Thanks for your info.:)






we were born to succeed, not to fail