vBulletin

Thank you for visiting. This is our website archive. Please visit our main website by clicking the banner above.
vBulletin FAQ is dedicated to helping the forum owner build, manage and profit from his vBulletin Forum
vBulletin Web Hosting - Free skins and styles for your vBulletin - Search Engine Optimization



PDA

CSS page alignment

protheory
11-22-2007, 12:31 PM
Hey everybody I'm having some problems and wondered if you could help please :)

I've got a CSS based template I'm editing in Dreamweaver 8 and I can't seem to get it to align correctly or at all.

Here's the HTML from my page...

<!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" xml:lang="en">
<head>
<title>-</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" />

<style type="text/css">
<!--
body {
background-image: url(images/5.jpg);
}
-->
</style></head>

<body>

<div align="left" id="wrapper">
<div align="left" id="innerwrapper">

<div id="header">
<h1><a href="#">MyExampleWebsite.co.uk</a></h1>

<h2>

Simplicity, Stability, Usability. <a href="http://www.sixshootermedia.com"></a>

</h2>

<ul id="nav">

<li></li>

<li><a href="#Intro">Intro</a></li>

<li><a href="#About">About</a></li>

<li><a href="#Examples">Examples</a></li>

<li><a href="#Examples">Contact</a></li>
</ul>
<ul id="subnav">

<li></li>
</ul>

</div>

<div align="left" id="content">

<h2 align="left" id="Intro"><a href="#">Introduction</a></h2>

<p align="left">

template created by <a href="http://www,sixshootermedia.com">Six</a>template created by
<a href="http://www,sixshootermedia.com">Six<span class="news"><a href="#" class="more">
Read More &raquo;</a> Hello and welcome to Aqueous, a liquid Shooter Media.
The template itself is designed for higher resolutions, 1024x768 and up, however with it
being liquid,<a href="#" class="more">Read More &raquo;</a> it will work in any resolution you can throw at it.
It's written in XHTML and CSS and displays consistently on various web browsers. </p>

<h2 align="left" id="About"><a href="#">About the Author</a></h2>
<p align="left">
Hi! My names Jay and I'm a 20 year old web designer from England.
My main projects are conducted through my website <a href="http://www.sixshootermedia.com">Six Shooter Media</a>, but
I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates
<a href="http://www.sixshootermedia.com/free-templates/">here</a>
which is probably a link worth bookmarking as my templates appear there a couple of weeks before
OWD/OSWD due to the design queues. </p>

<p align="left">


Another site of mine that you might find interesting if you're setting up a site with a free tmeplate
like this is <a href="http://www.buyabutton.net">Buy a Button</a>. There, for a great price
you can purchase a link to your site in the form of a button. This link will obviously provide
you site with some additional traffic which is always nice! Anyway, <a href="http://www.buyabutton.net">Take a look</a>!
</p>

<p align="left">

If you want more of my free templates, they can be found
<a href="http://www.sixshootermedia.com/free-templates/">here</a>! </p>

<h2 align="left" id="Examples"><a href="#">Some Examples</a></h2>

<p align="left">


OK, here I'll just put some example html elements that you will most probably be using in your blog.</p>


<h3 align="left">&nbsp;</h3>

<h2 align="left" id="Contact"><a href="#">Contact</a></h2>

<p align="left">
If you decide to use this template please <a href="mailto:james%28at%29jameskoster.co.uk">drop
me a line</a> to let me know! Don't hesitiate to get in touch if your interested in a custom template
or just in any of my services in general. I look forward to hearing from you! </p>

<h3 align="left">&nbsp;</h3>
</div>
<div align="left" id="footer">



© All your copyright information here.</p>
</div>

</div>
</div>


</body>
</html>

And here's the associated CSS file...

body {
font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
word-spacing:2px;
color:#444;
margin:20px;
background:url(../images/body.jpg) #f6f6f6;
text-align: left;
text-decoration: none;
width: auto;
}

* {
margin:0;
padding:0;

}

#wrapper {
background:#fff;
border:3px solid #f1f1f1;
max-width:1200px;
width:expression(this.width > 320 ? "320px" : this.width);
min-width:760px;
margin:0 auto;
}

* html #wrapper
{
w\idth: expression(document.documentElement.clientWidth > 1200 ? "1200px" : "auto");
}

#innerwrapper {
margin:1px;
background:url(../images/innerwrapper.jpg) top repeat-x;
padding:20px;
}

#header input {
width:150px;
padding:5px;
background:#fff;
border:2px solid #f6f6f6;
font:150% Arial;
color:#999;
}

#header input:hover {
border:2px solid #ccc;
}

#header input:focus {
border:2px solid #79B5D6;
color:#555;
}

#header form {
padding:27px 25px 20px 25px;
float:right;
background:#fff;
width:160px;
margin:-20px -20px 0 0 !important;
margin:-20px -10px 0 0;
border:none;
}

#header h1 {
float:left;
font:250% Arial;
color:#333;
padding:5px 20px 5px 5px;
border-right:1px solid #ccc;
margin:0 20px 0 0;
}

#header h1 a {
color:#333;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}

#header h1 a:hover {
color:#111;
border-bottom:2px solid #79B5D6;
}

#header h2 {
font:150% Arial;
color:#666;
padding:16px 0 0 0;
border:none;
}

#header h2 a {
color:#444;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}

#header h2 a:hover {
border-bottom:2px solid #79B5D6;
}

#header #nav {
clear:both;
background:url(../images/nav.jpg) top repeat-x #4F9EC9;
border-bottom:2px solid #4F9EC9;
border-top:2px solid #388CBA;
border-left:2px solid #388CBA;
border-right:2px solid #388CBA;
padding:10px 10px 10px 0 !important;
padding:4px 10px 10px 0;
}

#header a em {
font-style:normal;
text-decoration:underline;
}

#header #nav a {
color:#fff;
font:140% Trebuchet MS;
text-decoration:none;
padding:10px;
}

#header #nav a:hover {
background:#4F9EC9;
}

#header #nav a.active {
background:#4F9EC9;
}

#header #nav li {
display:inline;
list-style:none;
margin:0 1px 0 0;
}

#header #subnav {
background:#4F9EC9;
padding:5px 7px 7px 7px;
font:90% Verdana;
color:#DEEDF5;
border-bottom:2px solid #388CBA;
border-left:2px solid #388CBA;
border-right:2px solid #388CBA;
}

#header #subnav li {
list-style:none;
display:inline;
}

#header #subnav a {
color:#DEEDF5;
text-decoration:none;
font:100% Verdana;
padding:5px;
border-bottom:2px solid #4F9EC9;
}

#header #subnav a:hover {
border-bottom:2px solid #388CBA;
color:#fff;
}

#header #subnav a.active {
border-bottom:2px solid #388CBA;
color:#fff;
}


#sidebar {
background:#333;
width:200px;
padding:10px 20px 20px 20px;
float:left;
color:#666;
border-top:2px solid #000;
border-bottom:10px solid #000;
}

#sidebar h2 {
font:160% Arial;
color:#999;
margin:10px 0 10px 0;
background:url(../images/sidebarh2.jpg) right no-repeat;
border:none;
}

#sidebar h3 {
color:#FF8040;
font:90% Verdana;
font-weight:bold;
letter-spacing:2px;
}

#sidebar p {
margin:15px 0;
}

#sidebar p.news {
background:#323232;
}

#sidebar p.news a.more {
color:#ccc;
display:block;
text-align:right;
font:80% Verdana;
text-transform:uppercase;
letter-spacing:1px;
text-decoration:none;
padding:10px 0;
}

#sidebar p.news a:hover {
color:#C2D5FC;
}

#sidebar .subnav {
border-top:1px solid #2C2C2C;
}

#sidebar .subnav li {
list-style:none;
padding:5px;
border-bottom:1px solid #2C2C2C;
}

#sidebar .subnav li a {
color:#ccc;
text-decoration:none;
display:block;
}

#sidebar .subnav li a:hover {
color:#98D158;
}

#sidebar .subnav li a b {
float:right;
display:none;
color:#666;
}

#sidebar .subnav li a:hover b {
display:inline;
}

#sidebar input {
padding:4px;
background:#2c2c2c;
border:1px solid #222222;
color:#ccc;
font:90% Verdana;
width:190px;
}

#sidebarright {
width:170px;
float:right;
padding:10px 0 0 20px;
background:url(../images/sidebarright.jpg) top left no-repeat;
}

#sidebarright p {
font:90% Verdana;
color:#777;
line-height:20px;
margin:10px 0;
}

#sidebarright h2 {
font:140% Arial;
color:#333;
margin:10px 0;
border:none;
}

#sidebarright ul {
margin:10px 0 10px 15px;
font:90% Verdana;
}

#sidebarright ul li {
margin:5px 0;
}

#sidebarright a {
border-bottom:1px dotted #eee;
color:#444;
text-decoration:none;
}

#sidebarright a:hover {
border-bottom:1px solid #ccc;
}


#content {
margin:0 210px 0 240px;
background:url(../images/content.jpg) top left no-repeat;
padding:20px 0 0 20px;
}

#contentnorightbar {
margin:0 0 0 240px;
background:url(../images/content.jpg) top left no-repeat;
padding:20px 0 0 20px;
}

p {
margin:15px 0;
line-height:22px;
background-position: left;
}

h2 {
font:190% Arial;
color:#79B933;
border-bottom:2px solid #f6f6f6;
}

h2 a {
color:#79B933;
text-decoration:none;
}

h2 a:hover {
color:#00FF33;
background-color: #CCCCCC;
}


#footer {
clear:both;
border-top:1px solid #eee;
padding:10px;
margin:30px 0 0;
}

a {
color:#222;
}

a:hover {
text-decoration:none;
}

h3 {
font:140% Trebuchet MS;
margin:10px 0;
}

#content ul {
margin:15px 0 15px 0;
line-height:25px;
padding:15px 0 15px 15px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
color:#79B933;
width: 100%;
}
#content ul span {
color:#444;
}
#contentnorightbar ul {
margin:15px 0 15px 20px;
line-height:25px;
padding:15px 0;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
color:#79B933;
}
#contentnorightbar ul span {
color:#444;
position: relative;
width: 100%;
}

img {
padding:1px;
background:#ccc;
border:4px solid #f6f6f6;
}

form {
padding:10px;
border:1px solid #f6f6f6;
}

label {
display:block;
font-weight:bold;
color:#444;
margin:5px 0;

}
input {
width:100%;
padding:4px;
border:none;
border-bottom:1px dotted #ccc;
font:90% Verdana;
color:#777;
}

textarea {
width:100%;
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}

p img {
float:left;
margin:0 10px 0 0;
}

blockquote p {
font:160% Georgia;
color:#aaa;
padding:0 10% 0 0;
line-height:30px;
}


I'm happy with the layout and nice clean look of the page but I can't for the life of me work out how to align the main text column to the left of the page.

All I can get is this...

http://i40.photobucket.com/albums/e219/etymology/Image1-20.jpg

The column or whatever it is seems immovable but there must be a way to move it mustn't there? All I want to do is align the bit beginning 'Introduction' to the left. I'm just looking for the page as it is but with the left aligned text box.
Xhris
11-22-2007, 07:35 PM
It looks as if you still have some code that is calling the left column. Did you try removing a left column? I mean did you try going from a 2 column CSS template to a 1 page template?

Which template did you get off that site?
Xhris
11-22-2007, 08:01 PM
Find this code in your CSS:

#content {
margin:0 210px 0 240px;
background:url(../images/content.jpg) top left no-repeat;
padding:20px 0 0 20px;

Change it to this:

#content {
margin:0 210px 0 0;
background:url(../images/content.jpg) top left no-repeat;
padding:20px 0 0 20px;





That will make the content of the page align to the left side.

HTHs
protheory
11-23-2007, 02:05 AM
It looks as if you still have some code that is calling the left column. Did you try removing a left column? I mean did you try going from a 2 column CSS template to a 1 page template?

Which template did you get off that site?
That's right, I removed a left column from the Dreamweaver design interface and it set itself to the current position you see above. The edit you provided worked first time perfectly, thanks :D I'm (obviously) still learning but now my website looks just as I'd pictured it.

Awesome :yes:

EDIT - It was the 'aqueuos' template I downloaded and am editing.

vBulletin

seo book

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum