PDA

View Full Version : Layout


chris9486
05-12-2008, 09:38 PM
Hi, I am new to dreamweaver, I bought a copy from college after being told it is the best to use to make a website.
I bought a book too "the missing manual" and I am confused about div tags and layouts. I don't quite know where I am going wrong. In DW CS3 Ithe page looks fine, all in div tags and all aligned and laid out as I like, as soon as I preview in IE 7 the only layout formatting that is how I want it is the menu and header. I don't know what is going wrong.

This is the upload of the site

www.csphoto.pwp.blueyonder.co.uk (http://www.csphoto.pwp.blueyonder.co.uk/)

I don't know much about the HTML code and I don't know what I need to paste here for you to see.

Hope someone can help.

Thanks

domedia
05-12-2008, 09:44 PM
Hi Chris and welcome to the forums!
If that is your first attempt, I think it was a pretty good one.
What is wrong with the rest of the website?

chris9486
05-12-2008, 10:19 PM
Hi. :)

It is a good attempt?

See the writing and the picture, I want them to be lined upto the edges of the header and menu.

The book is amazing but after chapter 8 I get a little lost. I am new to CSS and have never been able to pick up HTML, not even the basic stuff. I am an MCSE by trade but I stick to the hardware and software side. I do not do programming. I was crap at french at school so I am terrible at picking up new languages, I forget too much. The built in functions of CSS in DWCS3 are amazing and without them I wouldn't of got so far!

Here is a screen shot of how I have the page in DW

http://img.photobucket.com/albums/v704/tomdelonge/Untitled-1-6.jpg

Rob_Che
05-12-2008, 10:29 PM
Welcome to the forum...

I think you need a wrapper... You have nothing containing your divs...
You need a page div to pull it all together.
At the moment I can see you have set margins to space from the edge of the page but
you need to contain everything.
If you make the window smaller does it do what you want ?

See here... I think this will do what you want - www.dreamweaverclub.com/css-center-content.php
Should be a quick fix too - good luck !

Rob

chris9486
05-12-2008, 10:50 PM
Welcome to the forum...

I think you need a wrapper... You have nothing containing your divs...
You need a page div to pull it all together.
At the moment I can see you have set margins to space from the edge of the page but
you need to contain everything.
If you make the window smaller does it do what you want ?

See here... I think this will do what you want - www.dreamweaverclub.com/css-center-content.php (http://www.dreamweaverclub.com/css-center-content.php)
Should be a quick fix too - good luck !

Rob

Thanks Rob, but I am stuck. Where 'exactly' do I paste them? Do I click on the div tags for the picture and text and paste it in either style? If so, does it matter at which point in the code I paste it?

Also, how do I make a page div?

Sorry for being so lame but I am right at the beginning of learning and it is forums like this that I need to help me get there.

I have read tutorials on making sites from photoshop files but there's too much 'coding' involved. :(

Ricky55
05-12-2008, 11:18 PM
Rob means to create a div that will hold the rest of your content, thats what he is referring to when he says you need a wrapper.

To do this just put all your existing div's inside a new div.

For example
<div id="wrapper">
your existing content
</div>

chris9486
05-12-2008, 11:38 PM
But where do I put that and how do I do it?

I am a complete novice. Do I put it in my CSS style sheet?

chris9486
05-12-2008, 11:59 PM
Ok so here is my CSS/Code thing.

I have no idea where to paste the code to do the wrapper from that link Rob gave me. I have attempted a couple of places and it just has no effect.


<!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>C.S.Photography</title>
<style type="text/css">
<!--



body,td,th {
font-family: Calibri, Trebuchet MS, Verdana;
color: #FFFFFF;
}
body {
background-color: #000000;
background-image: url(mdp-watercolour60.jpg);

}

body {
text-align : center ;
min-width : 700px ;
}
div.wrapper {
width : 700px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
}
.header {color: #000000}
.imageright {
float: right;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
}
.footer {
border-top-style: dashed;
border-top-width: 1px;
}
.Main {
margin-left: 30px;
margin-right: 30px;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {color: #FFFFFF; }
-->
</style>
</head>

<body>
<div id="page">
<div align="center"><span class="header"><img src="Images/Banner.gif" width="700" height="121" /></span>
</div>
<div id="navi">
<ul class="MenuBarHorizontal header" id="MenuBar1">
<li>
<div align="center"><a href="index.html">Home</a> </div>
</li>
<li>
<div align="center"><a href="#">About Me</a></div>
</li>
<li>
<div align="center"><a href="#" class="MenuBarItemSubmenu">Galleries</a>
<ul>
<li><a href="#">Landscape</a></li>
<li><a href="#">Buildings</a></li>
<li><a href="#">Macro</a></li>
<li><a href="#">Panorama</a></li>
<li><a href="#">HDR</a></li>
<li><a href="#">Digital Art</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="#">Contact Me</a></div>
</li>
</ul>
</div>
<p class="header">&nbsp;</p>

<div class="Main" id="Main">
<h1 align="left" class="style2"><img src="Images/Home Page St Ives.jpg" width="310" height="460" class="imageright" />Home</h1>
<p align="left" class="style2">Welcome to my personal photography site. Take a look around. I hope you enjoy</p>
<p align="left" class="style2">The purpose of this site is to 'professionally' display what I consider to be my best photographic shots. I have a few categories in the gallery for you to browse through. All photographs are available as prints. All photographs were taken by myself and are from various locations mainly within Yorkshire.</p>
<p align="left" class="style2">&nbsp;</p>
<p align="left" class="style2">&nbsp;</p>
<p align="left" class="style2">&nbsp;</p>
<p align="left" class="style2">&nbsp;</p>
<p align="left" class="style2">&nbsp;</p>
<p align="left" class="style2">&nbsp;</p>
<p align="left" class="style2">&nbsp;</p>
</div>
<div class="footer" id="footer">
<p class="style2">&copy;Copyright C.Scott 2008
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</p>
</div>
</div>
</body>
</html>

chris9486
05-13-2008, 12:37 AM
Its ok, I selected all in design view and made a new div tag, named it wrapper and put the margins to auto in box and changed the width in there too to the width of my header, seems to be fine now. Thanks for the help everyone, I wouldnt of got there in the end without the help...