PDA

View Full Version : Page sides



afesoccer
Aug 23rd, 2007, 11:34 PM
How do you add two lines around the content on your page in Dreamweaver?
Like This...
|OOOOOOO|
|qwertyuiop|
|asdfghjklzx|
|cvbnm,./;''|
|[]`=-\/*-1|

lesmith
Aug 23rd, 2007, 11:42 PM
with CSS.

CSS File coul be.

.content{ border-left:1px solid #000000; border-right:1px solid #000000;}


Then your content coul be.

<div class="content">text here</div>

or

<p class="content">text here</p>

Hope this gets you on your way

ahallicks
Aug 24th, 2007, 02:25 AM
Or, if you are meaning around the whole site, wrap everything in a div called #wrapper, or something similar and use the border method as stated above. Also look to your other thread on how you can use this wrapper to center the page too.

I'd use an id rather than a class too because a content div is something you really only should be using once on a page.

afesoccer
Aug 24th, 2007, 04:21 AM
It is not working.

kaitco
Aug 24th, 2007, 05:04 AM
Can you post what you have so far? Then we can see what, if any, errors you might have made.

afesoccer
Aug 24th, 2007, 05:14 AM
Ok, here it is... http://thousandislandhosting.com/newindex.php

kaitco
Aug 24th, 2007, 05:51 AM
There are a couple of things making this not work.

The Short Answer:

This

.content{ border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF;}
is CSS and needs to be placed at the very least within style tags inside the head tags of the document. It should look like this


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.:TIH:. Thousand Island Hosting</title>

<link href="TIHCSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #000000;
margin: 0 auto;
}
.style1 {color: #FFFFFF}
.content{ border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF;}
-->
</style>
</head>



The Long Answer:

1) Your code is, for lack of a better phrase, screwed up. You have multiple <html>, <head> and <body> tags within the same document. The basic layout of a document should look like this:


<!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" lang="en">
<head>
<title> Blah </title>

<style>
Blah
</style>

</head>

<body>

Blah
Blah
Blah

</body>
</html>

where everything you expect to be viewed on the page is inside the <body></body> tags.

2) You are using a rather complicated script to create a mouseover effect that is very simple to edit using CSS. The best way to do it is found in the example here (http://bonrouge.com/~rollover3). And, if all that is changing with the mouseover effect, you may not even need the images. You could simply use the border attribute and change the colour using


a:hover {
color: X;
}


3) Still going off of 2); You are using a table for the menu, when you really should be using a list. It would look something like


<div id="menu">
<ul>
<li>(Home image)</li>
<li>(Plans image)</li>
<li>(Testimonials image)</li>
<li>(cPanel image)</li>
<li>(Terms image)</li>
<li>(Links image)</li>
<li>(Contact image)</li>
</ul>
</div>

and use CSS to create the effect you want.


#menu {
margin: auto 0;
text-align: center;
}

#menu ul {
padding: 0;
margin: 0;
}

#menu li {
display: inline;
padding: 0 1em;
border: 2px solid #fff;
}

#menu li a {
text-decoration: none;
border: 2px solid #fff;
}

#menu li a:hover {
text-decoration: none;
border: 2px solid #009966;
}


The code above would need some tweaking to get precisely what you have now, but it is a much better way to create the same effect.

4) If you insist on using a script, place the script in a separate file (script.js) and link it into the document.

<!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" lang="en">
<head>
<title> Blah </title>

<style>
Blah
</style>

<script type="text/javascript" src="script.js"></script>

</head>
<body>

Blah
Blah
Blah

</body>
</html>

5) Always validate your code (http://validator.w3.org/check?uri=http%3A%2F%2Fthousandislandhosting.com%2Fnewindex.php&charset=%28detect+automatically%29&doctype=Inline&group=0). Your page in its current state has 17 errors. Validating is the first step to troubleshooting anything you create.

afesoccer
Aug 24th, 2007, 05:58 PM
Ohh ok, thanks, it worked. However, how do I make it right beside the menu, banner and etc... instead of the ends of the page?

afesoccer
Aug 25th, 2007, 05:46 PM
It's on www.thousandislandhosting.com/newindex.php

kaitco
Aug 25th, 2007, 06:46 PM
Give it width depending on the images you are using for the menu. I am assuming it is about 800px, but you can always change it.

<style type="text/css">
<!--
body {
background-color: #000000;
}
.style1 {color: #FFFFFF}
.content{
border-left:3px solid #FFFFFF;
border-right:3px solid #FFFFFF;
width: 800px;
margin: 0 auto;
}
-->
</style>

However, you are still going to run into major problems with your site until you correct the tag problems I mentioned in my previous post. You should correct the issues with the multiple <html> and <body> tags and then implement new things.

It also seems that you are very new to HTML and CSS in general. You should look at this site (w3schools.com (http://www.w3schools.com)) to get some of the basics before you move onto more complicated things.

afesoccer
Aug 26th, 2007, 01:22 AM
Thanks a lot, how do I make it go all the way down to the page?

jlhaslip
Aug 26th, 2007, 01:27 AM
fix the duplicate dtd and head tags first

afesoccer
Aug 26th, 2007, 05:36 PM
Whats that?

jlhaslip
Aug 26th, 2007, 05:58 PM
Result: 0 errors / 34 warnings

line 30 column 36 - Warning: <img> element not empty or not closed
line 31 column 5 - Warning: <img> element not empty or not closed
line 31 column 85 - Warning: discarding unexpected <!DOCTYPE>
line 32 column 1 - Warning: discarding unexpected <html>
line 33 column 1 - Warning: discarding unexpected <head>
line 29 column 1 - Warning: <meta> isn't allowed in <div> elements
line 29 column 1 - Warning: <title> isn't allowed in <div> elements
line 88 column 1 - Warning: discarding unexpected <body>
line 99 column 3 - Warning: replacing <p> by <br>
line 99 column 3 - Warning: inserting implicit <br>
line 99 column 3 - Warning: <br> element not empty or not closed
line 136 column 3 - Warning: discarding unexpected <!DOCTYPE>
line 137 column 1 - Warning: discarding unexpected <html>
line 138 column 1 - Warning: discarding unexpected <head>
line 29 column 1 - Warning: <meta> isn't allowed in <div> elements
line 29 column 1 - Warning: <title> isn't allowed in <div> elements
line 143 column 1 - Warning: discarding unexpected <body>
line 30 column 36 - Warning: <img> lacks "alt" attribute
line 31 column 5 - Warning: <img> lacks "alt" attribute
line 89 column 1 - Warning: <table> lacks "summary" attribute
line 91 column 9 - Warning: <img> escaping malformed URI reference
line 91 column 9 - Warning: <img> proprietary attribute "onload"
line 91 column 296 - Warning: <img> proprietary attribute "onload"
line 91 column 601 - Warning: <img> proprietary attribute "onload"
line 91 column 926 - Warning: <img> proprietary attribute "onload"
line 91 column 1258 - Warning: <img> escaping malformed URI reference
line 91 column 1258 - Warning: <img> proprietary attribute "onload"
line 91 column 1566 - Warning: <img> proprietary attribute "onload"
line 91 column 2088 - Warning: <img> proprietary attribute "onload"
line 91 column 2411 - Warning: <img> escaping malformed URI reference
line 91 column 2411 - Warning: <img> proprietary attribute "onload"
line 91 column 2496 - Warning: <img> escaping malformed URI reference
line 91 column 2496 - Warning: <img> proprietary attribute "onload"
line 143 column 7 - Warning: <img> lacks "alt" attribute
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Transitional//EN"
Info: Document content looks like HTML Proprietary

afesoccer
Aug 26th, 2007, 06:32 PM
I don't get it.

Jutlander
Aug 26th, 2007, 06:52 PM
Let me give you a piece of advice. I think it has been suggested before but I'll suggest it again. Read and try out a tutorial on HTML and when you're done with that, read and try one on CSS. Read every word and don't skip any steps.

There are two good ones here:

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

kaitco
Aug 26th, 2007, 08:06 PM
I don't get it.

Look at the notes I made in bold and red:



|------ This is good. A page should begin with a doctype and html, head and title tags ------|
<!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=iso-8859-1" />
<title>.:TIH:. Thousand Island Hosting</title>

<link href="TIHCSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #000000;
margin: 0 auto;
}
.style1 {color: #FFFFFF}
.content{ border-left:3px solid #FFFFFF; border-right:3px solid #FFFFFF; width: 680px;
margin: 0 auto; font-size: 0px;}
.style2 {color: #009999}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; }
.style5 {font-size: 1}
-->
</style></head>

<body>

<div align="center" class="content">
<p align="center" class="style5"><img src="logofinal.jpg">
<img src="http://www.thousandislandhosting.com/images/banner.jpg">

|------ Here is where you run into your problem! All of a sudden you have another doctype and also, html, head and title tags. This is not necessary. You only include these tags once in any document. ------|
<!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=iso-8859-1" />
<title>.:TIH:. Thousand Island Hosting</title>
|------ take out everything in between here and the above note ------ |

<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];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head> <------ Take this out. ------|

|------ You are using a new body tag here. This is not necessary. You only have one body tag in a document. Everything you need to put on your page goes inside of a single set body tags <body> and </body>. These tags, like the ones I mentioned earlier, should appear once and only once on a page. ------|

<body onload="MM_preloadImages('Menu/HOMEhover.gif','Menu/PLANShover.gif','Menu/TERMShover.gif','Menu/CONTACT UShover.gif','Menu/TESTEMONIALShover.gif','Menu/cPANEL DEMOhover.gif','Menu/LINKShover.gif')">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img name="LeftSide" src="Menu/LEFT SIDEGIF.gif" border="0" alt="" onLoad="" /><a href="http://www.thousandislandhosting.com" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','Menu/HOMEhover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="Menu/HOMEGIF.gif" alt="" name="Home" border="0" id="Home" onload="" /></a><a href="http://www.thousandislandhosting.com/plans.php" target="_top" onclick="MM_nbGroup('down','group1','Plans','',1)" onmouseover="MM_nbGroup('over','Plans','Menu/PLANShover.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Plans" src="Menu/PLANSGIF.gif" border="0" alt="" onload="" /></a><a href="http://www.thousandislandhosting.com/testemonials.php" target="_top" onclick="MM_nbGroup('down','group1','Testemonials','',1)" onmouseover="MM_nbGroup('over','Testemonials','Menu/TESTEMONIALShover.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Testemonials" src="Menu/TESTEMONIALSGIF.gif" border="0" alt="" onload="" /></a><a href="http://www.thousandislandhosting.com/cpaneldemo.php" target="_top" onClick="MM_nbGroup('down','group1','cPanelDemo','',1)" onMouseOver="MM_nbGroup('over','cPanelDemo','Menu/cPANEL DEMOhover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="cPanelDemo" src="Menu/cPANEL DEMOGIF.gif" border="0" alt="" onLoad="" /></a><a href="http://www.thousandislandhosting.com/terms.php" target="_top" onclick="MM_nbGroup('down','group1','Terms','',1)" onmouseover="MM_nbGroup('over','Terms','Menu/TERMShover.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Terms" src="Menu/TERMSGIF.gif" border="0" alt="" onload="" /></a><a href="http://www.thousandislandhosting.com/terms.php" target="_top" onclick="MM_nbGroup('down','group1','Terms','',1)" onmouseover="MM_nbGroup('over','Terms','Menu/TERMShover.gif','',1)" onmouseout="MM_nbGroup('out')"></a><a href="http://www.thousandislandhosting.com/links.php" target="_top" onClick="MM_nbGroup('down','group1','Links','',1)" onMouseOver="MM_nbGroup('over','Links','Menu/LINKShover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="Links" src="Menu/LINKSGIF.gif" border="0" alt="" onLoad="" /></a><a href="mailto:[email protected]?subject=information" target="_blank" onclick="MM_nbGroup('down','group1','ContactUS','',1)" onmouseover="MM_nbGroup('over','ContactUS','Menu/CONTACT UShover.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="ContactUS" src="Menu/CONTACT USGIF.gif" border="0" alt="" onload="" /></a><img name="RightSide" src="Menu/RIGHT SIDEGIF.gif" border="0" alt="" onload="" /></td>
</tr>
<tr>

<td>&nbsp;</td>
</tr>
</table>

|----- Your page should end with these two tags. There should not be anything else appearing after them. Everything you have appearing after these tags needs to be move in front of the </body> tag. ------|
</body>
</html>
</p>
<div align="left" class="style1">

<blockquote>
<p align="justify" class="style3"><span class="style2">AFFORDABLE WEB SITE HOSTING STARTING AT $9.99 A YEAR</span><br />

Discount Web Hosting for those who do not want to sacrifice quality, reliability or experience.<br />
We have a variety of Web Hosting plans designed to meet your needs and budget. Fully featured, banner free, Ad free, (We do not place Ads on your web site), hosting plans with no setup fees, contracts or hidden costs involved starting at $9.99 a Year. Monthly plans are also available.<br />
(See Hosting plans for full details &amp; Prices).&nbsp; <br />
<span class="style2"><br />
AFFORDABLE WEB SITE DESIGN STARTING AT $49.99 PER MONTH </span><br />

Discount Web Design for those who do not want to sacrifice quality, reliability or experience.<br />
We have a variety of Web Design plans designed to meet your needs and budget. Fully featured, banner free, Ad free, (We do not place Ads on your web site), hosting plans with no setup fees, contracts or hidden costs involved starting at $9.99 a Year. Monthly plans are also available.<br />
(See Web Design plans for full details &amp; Prices).&nbsp; </p>
<p align="justify" class="style3"><span class="style2">RELIABLE SERVICE AND SUPPORT:</span><br />
Fast, friendly service and support that responds in minutes, not days.<br />

Email or Telephone. <br />
FAQs &amp; Online Tutorials including Video cPanel, Email and FTP support Tutorials.<br />
<br />
Service &amp; Support are cructial to your web site and your needs. When you need us, we'll be there.<br />
<br />

<span class="style2">MULTIPLE SERVERS&nbsp; &amp;&nbsp; STABLE ENVIRONMENT:</span><br />
We DO NOT overcrowd our servers like some hosting providers do.&nbsp; This ensures a faster system response and a better overall &quot;crash free&quot; environment.&nbsp; Our servers are up to date with the latest versions of PHP, MySql, Apache, Zend Optimizer 2.5.7 (enhances PHP applications), Mhash, Curl, GD, FreeType, ImageMagick and Mcrypt that are stable with our OS and cPanel.&nbsp; <br />

When security patches are announced and available, we update our servers immediately!<br />
Includes Clam AntiVirus protection for email and filemanager uploads.<br />
<br />
<span class="style2">THE MOST RECENT STABLE RELEASE OF CPANEL&nbsp; 11.4.6 </span><br />
Our cPanel supports multiple languages, colors and themes.&nbsp; <br />

Features include Fantastico DeLuxe 2.10.2, OsCommerce, Box Trapper (Helps Stop Spam), PHP Nuke,<br />
invision BB, Aw Stats, Webalizer stats, AntiVirus software, phpmyadmin 2.8.2.4, and much more.<br />
For a demo of cPanel please click the link above on the menu bar.<br />
<br />
Annual Payments can be made by Major Credit Cards, Paypal or Cheque.&nbsp; Automatic monthly subscriptions are payable by Major Credit Card or Paypal only.</p>
</blockquote>

</div>
<blockquote class="style3">
<p align="justify" class="style1">&nbsp; </p>
</blockquote>

|------ Again, you are starting over with a doctype here. There is only one doctype, one set of <html></html>, <head></head> and <title></title> tags in a single 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body><img src="copyright.gif" width="650" height="46" />
</body>

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

What I have noticed is that you are most likely using php includes and this is where your problem lies. The php include is pulling everything from the include and inserting it in the document. This means that if you start a page with a single doctype, html tag, etc, and your php include also has that same information, it will be included in the full document when it is rendered by a browser.

What might help us help you better is if you post the actual code you are using straight from Dreamweaver. If we just look at your code as it is on the site, we only see what the browser renders and it will not show that data was pulled from a php include. It will only show the "included" material.