PDA

View Full Version : centering content + div tags, ex layouts included.


Adamw
04-09-2010, 05:03 AM
Hello, I really dont know anything about writing code since I am completely new and have been working in design view since I come from graphics background and am most comfortable with that right now.

Ive attache a layout for a page Id like to create, but I do not know if the way I plan on doing it is the best way? I would like the content to all center on the page no matter what the screen resolution is, as in the example images.

Am I correct that I should use a div tag for each seperate area indicated in the examples, or should I be using a table? While I was experimenting with div tags I notice that when you set it to scroll down it also shows a "dead" scroll bar along the width that doesnt move, can this be removed somehow so only the functional scroll shows? I was looking through other posts on centering div tags and read about not selecting absolute position value but when I was experimenting with mine and unselected it it still didnt center, what am I missing?

Any help is greatly appreaciated

Corrosive
04-09-2010, 06:02 AM
Have you worked through this? http://www.dreamweaverclub.com/css-center-content.php ?

And tables are for tabular data and that is it. You meed to use div tags for page layout. :)

Adamw
04-09-2010, 07:32 AM
Im really confused. So far I made some of the division boxes according to that layout (I had to use absolute positioning because otherwise I couldnt figure how to get them to layout in any reasonable manner...) They are just a rough draft right now..

I dont understand how to use code so I really dont know what to do with the codes on that other thread. I just copied it into the code view but all it did was end up showing on the webpage as text so I know I did it wrong and I assume that code is supposed to surround already existing code on my page, but which and how?

Should I have made one large div tag and embedded all of the other div tags inside of it?? and then put the code around the large one?

The code on my page so far is if it helps explain anything, im sure its a mess...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[SIZE=1]http://www.w3.org/1999/xhtml (http://www.w3.org/1999/xhtml)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
}
body {
background-color: #000;
background-image: url();
background-repeat: no-repeat;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #CCC;
font-size: 24px;
}
a {
font-size: 10px;
color: #CCC;
}
h1,h2,h3,h4,h5,h6 {
font-family: Adobe Garamond Pro Bold;
}
h1 {
font-size: large;
color: #FFF;
}
h2 {
font-size: 24px;
color: #FFF;
}
h3 {
font-size: 18px;
color: #FFF;
}
h4 {
font-size: 16px;
color: #FFF;
}
h5 {
font-size: 14px;
color: #FFF;
}
h6 {
font-size: 10px;
color: #FFF;
}
.Terms_Conditions {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
text-decoration: none;
background-color: #FFF;
height: 250px;
width: 300px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: scroll;
position: absolute;
top: 100px;
right: 173px;
padding: 6px;
}
.Graphic1 {
background-image: none;
background-repeat: no-repeat;
position: absolute;
height: 262px;
width: 310px;
left: 170px;
top: 100px;
background-color: #FFF;
}
.Graphic_Logo {
background-color: #FFF;
position: absolute;
height: 50px;
width: 350px;
left: 305px;
top: 25px;
}
-->
</style></head>
<body>
<div class="Graphic1">Content for class "Graphic1" Goes Here</div>
<div class="Terms_Conditions">
<p><strong>Terms and Conditions of Access, Use and Membership</strong></p>
<p>Before YOU are authorized to visit or access materials provided at the website (referred to herein as “Service” or “website”), YOU are required to read and accept the following Terms and Conditions of Access, Use and Membership (the “Agreement”). <strong>PLEASE TAKE CARE TO CAREFULLY READ AND UNDERSTAND EACH AND EVERY PROVISION CONTAINED IN THIS AGREEMENT PRIOR TO DETERMINING WHETHER YOU AGREE TO PROCEED INTO THIS WEBSITE. </strong></p>
<p>1. <strong><U>Binding Agreement</U></strong>. This Agreement is made and entered into by and between YOU, a person desiring to access and make personal use of the materials appearing in the website</p>
</div>
<div class="Graphic_Logo">Content for class "Graphic_Logo" Goes Here</div>
</body>
</html>

Adamw
04-15-2010, 01:51 AM
So I kept trying to get this to work by just copying the "center" code that you showed me into the code screen and it worked once. I wasnt doing it with the code above, I was just practicing on a new page with text and an insterted image (that didnt show up in live view btw which im confused about too especially when that worked for me before)

Anyways, it worked once and as I kept trying with different layouts all I would get is "ALL content goes here" showing up on my page. I tried it with the code I provided and I thought I had it, until I widened my live view screen and nothing was centered and the two boxes got a huge gap between them...

what am I doing wrong?? I have been going through dreamweaver cs4 how-tos, but I bought myself a book that I hope explains code - it still hasnt come yet :|

How are you supposed to keep page content - that appears randomly placed, centered on the webpage??? How should you place it on the page in the first place?? Do you make one big div tag and embed other div tags into that, and then put the code to center it in, and then it will center the big div tag along with the embedded div tags??

Corrosive
04-15-2010, 06:14 AM
You just need to steer clear of the absolute positioning for layout really.