PDA

View Full Version : DIV Tags & Backgrounds


triplemoons
12-13-2006, 11:31 AM
I did a search and couldn't find an exact answer...So I thought I'd ask!

If you go to any of my sites (let's use http://www.triplemoonsexotic.com/ for example), everything is aligned to the left in FireFox instead of being centered per the CSS. This is because I used Tables so that it all aligned properly and I could use a background image in the table & still put text & links over top of it. When I try to use DIV instead, I lose my background image.

So, how do I use the DIV tags and still keep my background image?
______________________

I did find this though for CSS & don't know how to use it:

background-image:url(image.gif);
background-repeat:repeat-y;
______________________

Here is a section of code for the top bar (as an example) as it is now:

<table width="750" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="732" align="right" background="media/text_area.jpg"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><span class="style1"><a href="http://www.triplemoonsexotic.com">Home</a> &bull; <a href="http://www.triplemoonsexotic.com/collection.html">Collection</a> &bull; <a href="http://www.triplemoonsexotic.com/available.html">Available</a> &bull; <a href="http://www.triplemoonsexotic.com/resources.html">Resources</a> &bull; <a href="http://www.triplemoonsexotic.com/terms.html">Terms</a> &bull; <a href="http://www.triplemoonsexotic.com/contact.html">Contact </a></span></td>
</tr>
</table> </td>
</tr>
</table>

triplemoons
12-13-2006, 01:16 PM
Would something like this be correct?

<div id='firstbar'>
<a src="media/text_area.jpg">
<td align="right"><span class="style1"><a href="http://www.triplemoonsexotic.com">Home</a> &bull; <a href="http://www.triplemoonsexotic.com/collection.html">Collection</a> &bull; <a href="http://www.triplemoonsexotic.com/available.html">Available</a> &bull; <a href="http://www.triplemoonsexotic.com/resources.html">Resources</a> &bull; <a href="http://www.triplemoonsexotic.com/terms.html">Terms</a> &bull; <a href="http://www.triplemoonsexotic.com/contact.html">Contact </a></div>

domedia
12-13-2006, 01:20 PM
triplemoons, you're not saying if you're using a stylesheet or not, so I'm going to assume that you're not. You should probably look for a basic CSS tutorial to get your feet wet first. CSS can be applied in 3 ways:
1. inline in the tag ex: <div style="background: url(image.gif) repeat-y;">
2. within the document header area, ex:
<style type="text/css">
<!--
#main {background: url(image.gif) repea-y;}
-->
</style>
</head>
<body>
<div id='main">
3. In a seperate CSS file (preferred!)
HTML:
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id='main">

CSS file:
#main {background: url(image.gif) repea-y;}

I really wish we had some basic CSS tutorials on this website, but I ahven't gotten that far yet. The help files inside DW should help you some, and Adobe has a very neat section to help you as well:
http://www.adobe.com/devnet/dreamweaver/css.html

Gmcrone also wrote a nice tutorials on centering content with CSS:
http://www.dreamweaverclub.com/css-center-content.php

triplemoons
12-13-2006, 08:09 PM
Yes, I did say I was useing CSS...

If you go to any of my sites (let's use http://www.triplemoonsexotic.com/ for example), everything is aligned to the left in FireFox instead of being centered per the CSS. This is because I used Tables so that it all aligned properly and I could use a background image in the table & still put text & links over top of it. When I try to use DIV instead, I lose my background image.

FireFox is the problem, it looks fine in IE.

I also still need this answered thorougly:

So, how do I use the DIV tags and still keep my background image?

If you look at the link I provided, it's not just one simple background to use. I don't think CSS will work. I ran through a tutorial on background & CSS last night (can't recall the site, but it allowed me to edit code they had to the left, hit a button & it changed it to the right; pretty neat) and it just doesn't look like that's what I need. I have no idea where to place what in CSS & with the different sections, it would take way too long and I would not have enough control.

domedia
12-13-2006, 09:03 PM
I didn't say you weren't using CSS. I said I didn't know if you were using a stylesheet or not (you only pasted part of your code), so I had to give you example on how to apply background images in all 3 ways possible.

You can control background images far better with CSS than with HTML.
Implementing a background image like I outlined above will work, and what you're looking for some pretty basic. How did you implement it?
If you get any problems using it, paste all your current HTML and CSS code and we can troubleshoot from there if you're interested.

triplemoons
12-14-2006, 10:42 AM
Here's the code for the index page (as an example):

<!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>Welcome to Triple Moons Exotic!</title>
<link href="center.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<style type="text/css">
<!--
.style1 {color: #330033}
-->
</style>
<link rel="shortcut icon" href="/favicon.ico" />
</head>

<body>
<table width="750" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="732" align="right" background="media/text_area.jpg"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><span class="style1"><a href="http://www.triplemoonsexotic.com">Home</a> &bull; <a href="http://www.triplemoonsexotic.com/collection.html">Collection</a> &bull; <a href="http://www.triplemoonsexotic.com/available.html">Available</a> &bull; <a href="http://www.triplemoonsexotic.com/resources.html">Resources</a> &bull; <a href="http://www.triplemoonsexotic.com/terms.html">Terms</a> &bull; <a href="http://www.triplemoonsexotic.com/contact.html">Contact </a></span></td>
</tr>
</table> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="752" align="right" background="media/text_area.jpg"><img src="media/banner_cornsnake.jpg" width="750" height="228" longdesc="http://www.triplemoonsexotic.com/media" /></td>
</tr>
</table>
<table width="750" height="191" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="732" align="center" valign="top" background="media/text_area.jpg"><table width="700" height="171" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><a href="http://www.statcounter.com/" target="_blank"></a>
<p align="justify">Triple Moons Exotic is based in Hanover, Pennsylvania. Our love of reptiles began, like most, at a very young age. Today, we are proud to have in our collection over fifty individual animals from nine different species, five of which we breed.</p>
<p align="justify">We take meticulous measures to ensure that all of our animals not only receive the best of care, but also the time and attention they deserve. We are always available to answer questions or just to &quot;talk herps,&quot; so feel free to message or <a href="mailto:info@triplemoonsexotic.com">email us</a> anytime. We want your experience with us and our reptiles to be a positive one. We would like to consider our customers as friends, and we hope to provide you with beautiful captive bred reptiles for years to come!</p></td>
</tr>
</table></td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="752" align="right" background="media/text_area.jpg"><img src="media/single_bar.jpg" width="750" height="27" longdesc="http://www.triplemoonsexotic.com/media" /></td>
</tr>
</table>
<table width="750" height="326" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="752" align="center" valign="top" background="media/text_area.jpg"><table width="720" height="321" border="1" cellpadding="5" cellspacing="0" bordercolor="#000000">
<tr>
<td width="360" align="center" valign="top"><div align="justify"><img src="media/2006_cornsnakes.jpg" width="350" height="200" border="0" usemap="#Map7" longdesc="http://www.triplemoonsexotic.com/media" /><br />
<br />
Most of our cornsnakes hatched will be available for registration with the <a href="http://www.triplemoonsexotic.com" onclick="MM_openBrWindow('http://www.herpregistry.com/acr','','')">American Cornsnake Registry</a>. We are thrilled to be participating with the ACR, and back up the registry and what it stands for whole heartedly.<br />
</div> </td>
<td width="360" align="center" valign="top"><div align="justify"><img src="media/2006_leopardgecko.jpg" width="350" height="200" border="0" usemap="#Map8" longdesc="http://www.triplemoonsexotic.com/media" /><br />
<br />
All Leopard Geckos hatched will be available for registration with the <a onclick="MM_openBrWindow('http://www.leopardgeckoregistry.com','','toolbar=yes,loca tion=yes,status=yes,menubar=yes,scrollbars=yes,res izable=yes')" href="http://www.triplemoonsexotic.com">Leopard Gecko Registry</a>. We ourselves have founded the LGR and have high hopes for the project in the future. Look out for a Bearded Dragon registry when the LGR is more established.</div></td>
</tr>
</table>
<br />
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="style1"><a href="http://www.triplemoonsexotic.com">Home</a> &bull; <a href="http://www.triplemoonsexotic.com/collection.html">Collection</a> &bull; <a href="http://www.triplemoonsexotic.com/available.html">Available</a> &bull; <a href="http://www.triplemoonsexotic.com/resources.html">Resources</a> &bull; <a href="http://www.triplemoonsexotic.com/terms.html">Terms</a> &bull; <a href="http://www.triplemoonsexotic.com/contact.html">Contact </a></span></td>
</tr>
</table></td>
</tr>
</table>
<table width="750" height="90" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="752" align="center" background="media/double_bar.jpg"><span class="style1">All Content &copy; Triple Moons Exotic 2006 &bull; Web Design by <a href="http://www.triplemoonsdesign.com">Triple Moons Design<br />
</a>
<map name="Map" id="Map">
<area shape="rect" coords="-26,0,131,152" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/shop.html');return document.MM_returnValue" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="14,15,116,119" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com');return document.MM_returnValue" />
</map>
<map name="Map3" id="Map3">
<area shape="rect" coords="15,15,116,117" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/collection.html');return document.MM_returnValue" />
</map>
<map name="Map4" id="Map4">
<area shape="rect" coords="15,15,116,119" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/available.html');return document.MM_returnValue" />
</map>
<map name="Map5" id="Map5">
<area shape="rect" coords="14,16,119,120" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/shop.html');return document.MM_returnValue" />
</map>
<map name="Map6" id="Map6">
</map>
<!-- Start of StatCounter Code -->
<a href="http://www.statcounter.com/" target="_blank"><img src="http://c10.statcounter.com/counter.php?sc_project=1318326&java=0&security=4b7e1f39&invisible=0" alt="free stats" border="0"></a>
<!-- End of StatCounter Code --></span></td>
</tr>
</table>

<map name="Map7" id="Map7">
<area shape="rect" coords="-5,-2,410,223" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/2006_cornsnake.html');return document.MM_returnValue" />
</map>
<map name="Map8" id="Map8"><area shape="rect" coords="-2,-4,888,239" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/2006_leopardgecko.html');return document.MM_returnValue" />
</map></body>
</html>

Here's the CSS:

/* CSS Document */

body { text-align: center; }
div.wrapper {
width: 750px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
body,td,th {
font-family: Century Gothic;
font-size: 14px;
color: #000000;
}
body {
background-color: #000000;
margin-top: 0px;
margin-bottom: 0px;
}
a:link {
color: #330033;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #330033;
}
a:hover {
text-decoration: underline;
color: #666666;
}
a:active {
text-decoration: none;
color: #330033;
}

You can control background images far better with CSS than with HTML.

I don't know about that. It seems that I would have to figure out a bunch of XY coordinates instead of dragging and dropping. That, and not all the pages are the same height. It varies depending on what information is on the page.

triplemoons
12-14-2006, 11:10 AM
I tried inputting what you suggested in your original post into a blank file and it doesn't do anything but give me:

<div id='main">

in my Design screen. :confused:

HTML:

<!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>Welcome to Triple Moons Exotic!</title>
<link rel="stylesheet" type="center/css" href="center.css">
</head>
<body>
<div id='main">
</body>
</html>

CSS:

/* CSS Document */

body { text-align: center; }
div.wrapper {
width: 750px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
body,td,th {
font-family: Century Gothic;
font-size: 14px;
color: #000000;
}
body {
background-color: #000000;
margin-top: 0px;
margin-bottom: 0px;
}
a:link {
color: #330033;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #330033;
}
a:hover {
text-decoration: underline;
color: #666666;
}
a:active {
text-decoration: none;
color: #330033;
}
#main {background: url(media/banner_cornsnake.jpg) repea-y;}

And this is what I was playing with yesterday: http://www.w3schools.com/css/tryit.asp?filename=trycss_background

triplemoons
12-14-2006, 11:23 AM
This worked directly in the HTML:

<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('media/banner_cornsnake.jpg') no-repeat fixed center;
}
</style>
</head>
<body>
blah blah blah blah
</body>
</html>

BUT I have no control in the Design screen, which is what I need. Even if I was able to place all the images in the background via CSS, how am I to have control over the text that is supposed to go over top it?

I looked at the source on this site: http://hisss.net/

And their tables work on FireFox properly.

triplemoons
12-14-2006, 11:47 AM
Ok, now I'm totally lost... :confused:

Whatever is in the HTML of the HISSS website works...

http://www.triplemoonsexotic.com/index_test.html

PERFECT.

BUT, I want to understand WHY it works. I've been racking my brain for months on this...

<HTML>
<head>
<title>Welcome to Keystone Exotics</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
...

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
.style1 {color: #330033}
-->
</style>
<link href="center.css" rel="stylesheet" type="text/css">
</head>
<body onload="popupwindow();">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="750">
<tbody>
<tr>
<td width="760" background="media/text_area.jpg">
<script language="JavaScript"> ... </script></td>
</tr>
<tr>
<td valign="top" background="media/text_area.jpg"><table width="750" border="0" cellspacing="13" cellpadding="0">
<tr>
<td align="right"><span class="style1"><a href="http://www.triplemoonsexotic.com">Home</a> &bull; <a href="http://www.triplemoonsexotic.com/collection.html">Collection</a> &bull; <a href="http://www.triplemoonsexotic.com/available.html">Available</a> &bull; <a href="http://www.triplemoonsexotic.com/resources.html">Resources</a> &bull; <a href="http://www.triplemoonsexotic.com/terms.html">Terms</a> &bull; <a href="http://www.triplemoonsexotic.com/contact.html">Contact </a></span></td>
</tr>
</table>
<img src="media/banner_cornsnake.jpg" width="750" height="228" longdesc="http://www.triplemoonsexotic.com/media" /><br>
<table width="750" height="171" border="0" cellpadding="0" cellspacing="13">
<tr>
<td align="left" valign="top"><a href="http://www.statcounter.com/" target="_blank"></a>
<p align="justify">Triple Moons Exotic is based in Hanover, Pennsylvania. Our love of reptiles began, like most, at a very young age. Today, we are proud to have in our collection over fifty individual animals from nine different species, five of which we breed.</p>
<p align="justify">We take meticulous measures to ensure that all of our animals not only receive the best of care, but also the time and attention they deserve. We are always available to answer questions or just to &quot;talk herps,&quot; so feel free to message or <a href="mailto:info@triplemoonsexotic.com">email us</a> anytime. We want your experience with us and our reptiles to be a positive one. We would like to consider our customers as friends, and we hope to provide you with beautiful captive bred reptiles for years to come!</p></td>
</tr>
</table>
<img src="media/single_bar.jpg" width="750" height="27" longdesc="http://www.triplemoonsexotic.com/media" /></td>
</tr>
<tr>
<td height="15" align="center" background="media/text_area.jpg"><br>
<table width="720" height="321" border="1" cellpadding="5" cellspacing="0" bordercolor="#000000">
<tr>
<td width="360" align="center" valign="top"><div align="justify"><img src="media/2006_cornsnakes.jpg" width="350" height="200" border="0" usemap="#Map7" longdesc="http://www.triplemoonsexotic.com/media" /><br />
<br />
Most of our cornsnakes hatched will be available for registration with the <a href="http://www.triplemoonsexotic.com" onclick="MM_openBrWindow('http://www.herpregistry.com/acr','','')">American Cornsnake Registry</a>. We are thrilled to be participating with the ACR, and back up the registry and what it stands for whole heartedly.<br />
</div></td>
<td width="360" align="center" valign="top"><div align="justify"><img src="media/2006_leopardgecko.jpg" width="350" height="200" border="0" usemap="#Map8" longdesc="http://www.triplemoonsexotic.com/media" /><br />
<br />
All Leopard Geckos hatched will be available for registration with the <a onclick="MM_openBrWindow('http://www.leopardgeckoregistry.com','','toolbar=yes,loca tion=yes,status=yes,menubar=yes,scrollbars=yes,res izable=yes')" href="http://www.triplemoonsexotic.com">Leopard Gecko Registry</a>. We ourselves have founded the LGR and have high hopes for the project in the future. Look out for a Bearded Dragon registry when the LGR is more established.</div></td>
</tr>
</table>
<br>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="style1"><a href="http://www.triplemoonsexotic.com">Home</a> &bull; <a href="http://www.triplemoonsexotic.com/collection.html">Collection</a> &bull; <a href="http://www.triplemoonsexotic.com/available.html">Available</a> &bull; <a href="http://www.triplemoonsexotic.com/resources.html">Resources</a> &bull; <a href="http://www.triplemoonsexotic.com/terms.html">Terms</a> &bull; <a href="http://www.triplemoonsexotic.com/contact.html">Contact </a></span></td>
</tr>
</table>
<br>
<img src="media/single_bar.jpg" width="750" height="27" longdesc="http://www.triplemoonsexotic.com/media" /><span class="style1">All Content &copy; Triple Moons Exotic 2006 &bull; Web Design by <a href="http://www.triplemoonsdesign.com">Triple Moons Design<br />
</a>
<map name="Map" id="Map">
<area shape="rect" coords="-26,0,131,152" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/shop.html');return document.MM_returnValue" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="14,15,116,119" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com');return document.MM_returnValue" />
</map>
<map name="Map3" id="Map3">
<area shape="rect" coords="15,15,116,117" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/collection.html');return document.MM_returnValue" />
</map>
<map name="Map4" id="Map4">
<area shape="rect" coords="15,15,116,119" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/available.html');return document.MM_returnValue" />
</map>
<map name="Map5" id="Map5">
<area shape="rect" coords="14,16,119,120" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/shop.html');return document.MM_returnValue" />
</map>
<map name="Map6" id="Map6">
</map>
<!-- Start of StatCounter CSode -->
<a href="http://www.statcounter.com/" target="_blank"><img src="http://c10.statcounter.com/counter.php?sc_project=1318326&java=0&security=4b7e1f39&invisible=0" alt="free stats" border="0"></a></span>
<map name="Map7" id="Map7">
<area shape="rect" coords="-5,-2,410,223" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/2006_cornsnake.html');return document.MM_returnValue" />
</map>
<map name="Map8" id="Map8">
<area shape="rect" coords="-2,-4,888,239" href="#" onclick="MM_goToURL('parent','http://www.triplemoonsexotic.com/2006_leopardgecko.html');return document.MM_returnValue" />
</map>
<br>
<img src="media/single_bar.jpg" width="750" height="27" longdesc="http://www.triplemoonsexotic.com/media" /></td>
</tr>
</tbody>
</table>
</body>
</html>

ADDED:

All of this stressing...And I finally figured out what all this problem is...

It should be:

<table align= "center" width="750" border="0" cellspacing="0" cellpadding="10">

NOT

<table width="750" border="0" cellspacing="0" cellpadding="10">

I feel like SUCH an idiot! I'm very, very sorry for being a pest! Thank you for your suggestions!

domedia
12-14-2006, 01:46 PM
hey triple, there's only one way of learning and that is practice, so don't worry about it. :)

davidj
12-14-2006, 03:06 PM
We are here to help and we exist soley to help others

nobody is a pest and you can ask as many questions as you like.

there are no easy or hard questions

Question difficulty is relative to the knowledge of the person giving the answer!

:confused: