PDA

View Full Version : Miva and CSS



heather.greer
02-22-2005, 09:38 AM
Hello,
I hope someone out there can help me with this coding dilemma. I've created a website using CSS, but when I put the code into the headers and footers in Miva, it wouldn't work right.
Following is the code:
XHTMLfile:
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Patton Enterprises</title>
<meta name="generator" content="BBEdit 7.1.4" />
<link rel="stylesheet" type="text/css" href="patton4.css" />
</head>
<body>
<div id="header"><img src="images/pelogo.jpg" height="100" width="75" /><br />
<span class="title">
<span class="letters">P</span>rofessionalism<br />
                  & <span class="letters">E</span>xpertise<br />
</span>
<div class="clear"></div>

</div>
<div id="topmenu">
<a href="index4.htm">Home</a> |
<a href="about.htm">About the Company</a> |
<a href="contact.htm">Contact Us</a> |
<a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=SFNT&Store_Code=PE">Store</a> |
<a href="faq.htm">FAQ</a>
</div>
<p>
</p>
<p></p>

<div id="content">
<div id="leftcolumn">
<div class="categories"><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=PLST&Store_Code=PE">
PRODUCTS</a></div>
<ul class="leftmenu" name="leftmenu">
<li><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=F">Firearms</a></li>
<li><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=SG">Stun Guns</a></li>
<li><a href=" http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=K">Knives</a></li>
<li><a href=" http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=RT">Rescue Tools</a></li>
</ul>
<div class="categories">RESOURCES</div>
<ul class="leftmenu" name="leftmenu">
<li><a href="safetytips.htm">Safety Tips</a></li>
<li><a href="faq.htm">FAQ</a></li>
</ul>


<p></p>
Phone: <br />
864-378-4619 <br />
864-446-8013<br /><br />
Fax: <br />
864-446-8013<br /><br />
E-mail:<br />
<a href="mailto:cservice@personaldefensefirearms.com" style="color:#E8DCBA;">cservice@<br />
personaldefensefirearms.com</a><br />
<br />
<a href="mailto:webmaster@personaldefensefirearms.com" style="color:#E8DCBA;">webmaster@<br />
personaldefensefirearms.com</a>
<br />
<br />
Address:<br />
68 Kincaid Valley Drive<br />
Abbeville,South Carolina 29620<br />

<p><img src="images/verticalcards.jpg" /></p>
Layaway your purchase or <br />
set up a payment plan. <br />
We are here to serve you.
</div>

<div id="rightcolumn">
<div class="bluebar"></div>
<div class="leftfloat"><img src="images/g1_45_1911sm.gif"></div>
Welcome to Patton Enterprises! <br />
We specialize in selling to the general public and law enforcement. Our products are top-quality and our customer service is simply excellent. If you have any questions, please do not hesitate to contact us.<br /><br />
Thank you,<br />
Ed Patton
<p></p>
<p></p>
<div class="bluebar"></div>
<h3>Firearms</h3><br />
<div class="leftfloat"><img src="images/firearm.jpg"></div>We sell only top-quality firearms. A good selection is always in stock plus we can do special orders. Check out our store for all the latest firearms we offer.
<p> </p>
<p> </p><p> </p>

<h3>Stun Guns</h3><br />
<div class="leftfloat"><img src="images/stungun.jpg"></div>Our stun guns are always a good choice for your protection.
<p> </p>
<p> </p><p> </p>
<h3>Knives</h3><br />
<div class="leftfloat"><img src="images/knife.jpg"></div>We sell many different knives, some with many different tools.
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<h3>Firearms</h3><br />
<div class="leftfloat"><img src="images/firearm.jpg"></div>We sell only top-quality firearms. A good selection is always in stock plus we can do special orders. Check out our store for all the latest firearms we offer.
<p> </p>
<p> </p><p> </p>

<h3>Stun Guns</h3><br />
<div class="leftfloat"><img src="images/stungun.jpg"></div>Our stun guns are always a good choice for your protection.
<p> </p>
<p> </p><p> </p>
<h3>Knives</h3><br />
<div class="leftfloat"><img src="images/knife.jpg"></div>We sell many different knives, some with many different tools.
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
</div>
</div>

<div id="footer">
<div id="footermenu">
<a href="index4.htm">Home</a> |
<a href="about.htm">About the Company</a> |
<a href="contact.htm">Contact Us</a> |
<a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=SFNT&Store_Code=PE">Store</a> |
<a href="faq.htm">FAQ</a>
</div>
<hr />
Have comments about this page? Tell us through our <a href="contactus.htm">Contact Us</a> page.
</div>
</body>
</html>

CSS file:
body {
background: #333333 none;
color: white;
padding: 0;
margin:0;
}
table td{
color:black;
background:#E8DCBA none;
}
.leftfloat{
float: left;
}
.rightfloat{
float: right;
}

/* This rule is for the blue dividing bar.*/
.bluebar{
position:relative;
display:block;
background: #07076D none;
width: 100%;
height: 15px;
margin-top:10px;
margin-bottom:10px;
left:0;
}
/*Top bar with logo.*/
#header {
background:#E8DCBA url(images/header4.gif) scroll;
font:italic 18px Arial, Helvetica, sans-serif;
margin: 5px 25px 0 11px;
padding:10px;
color: black;
display: block;
height: 120px;
border: 1px solid #07076D;
text-align: left;
width: 720px;
letter-spacing: .1em;
}
#header .title{
font: 25px Times New Roman, serif;
letter-spacing: .2em;
height:100px;
padding: 10px 0;
}
#header .letters{
font: bold 30px Arial, Helvetica, sans-serif;
letter-spacing: .1em;
}
#header img{
float:left;
padding: 10px 5px 10px 5px;
}


#topmenu{
margin:0 0 0 11px;
padding:5px;
width: 730px;
text-align: center;
border:1px solid #07076D;
font: 16px "Times New Roman", serif;
background:#E8DCBA none;
color:black;
}
#topmenu a:link{
color:blue;
background:#E8DCBA none;
text-decoration:underline;
}
#topmenu a:hover{
color:blue;
background:#E8DCBA none;
text-decoration:underline;
}
#topmenu a:visited{
color:blue;
background:#E8DCBA none;
text-decoration:underline;
}

/*Overall content area of page.*/

#content {
display: block;
margin-left: 11px;
margin-top: -10px;
width:741px;
padding:0;
background:#07076D none;
border:1px solid #07076D;
}


/*This rule is the block of color that contains the left menu.*/
#leftcolumn{
float:left;
width:170px;
background:#07076D none;
border:1px solid #07076D;
padding:0 0 10px 0;
text-align:center;
color: #E8DCBA;
font:12px Arial, Helvetica, sans-serif;
height:100%;
margin-right:-160px;
}
#leftcolumn p{
font: 14px "Times New Roman", serif;
color:#E8DCBA;
background:#07076D none;
}
.categories{
font:14px "Times New Roman", serif;
text-align:center;
background:#7E7E82 none;
color:#E8DCBA;
height:25px;
list-style:none;
margin:0 0 0 2px;
padding:10px 0 0 0;
width:172px;
}
.categories a:link{
display: block;
text-align: center;
text-decoration: none;
color:#E8DCBA;
background:#7E7E82 none;
}
.categories a:visited{
display: block;
text-align: center;
text-decoration: none;
color:#E8DCBA;
background:#7E7E82 none;
}
.categories a:hover{
color: #07076D;
display: block;
text-align: center;
text-decoration: none;
background:#7E7E82 none;
}
/*Left-side navigation menu.*/
ul.leftmenu{
list-style: none;
margin: 0;
padding: 0;
background: #E8DCBA none;
border:1px solid #07076D;
font: 12px "Times New Roman", serif;
}
ul.leftmenu li{
display: block;
}
ul.leftmenu li a:link{
display: block;
padding: 5px;
text-align: center;
text-decoration: none;
color:black;
border: 1px solid #07076D;
background:#E8DCBA none;
width:162px;
height:20px;
}
ul.leftmenu li a:visited{
display: block;
padding: 5px;
text-align: center;
text-decoration: none;
color:black;
border: 1px solid #07076D;
background:#E8DCBA none;
width:162px;
height:20px;
}
ul.leftmenu li a:hover{
color: white;
background: #666600 none;
display: block;
padding: 5px;
text-align: center;
text-decoration: none;
border: 1px solid #666600;
height:20px;
width:161px;

}


/*This rule applies to the right column.*/
#rightcolumn{
position:relative;
background:#E8DCBA;
color:black;
padding:10px;
border-left:5px solid #333333;
left:176px;
top:0;
height:100%;
width:539px;
}


/*The following is the footer at the bottom of the page.*/
#footer {
position:relative;
background: #E8DCBA none;
width: 740px;
margin-left: 11px;
margin-bottom: 5px;
margin-top:3px;
padding: 0;
border:1px solid #07076D;
color: black;
text-align:center;
}

#footermenu{
width: 100%;
font: 16px "Times New Roman", serif;
background:#E8DCBA none;
color:black;
}
#footer p{
position: relative;
}



/*Use this rule to clear float properties.*/
.clear{
clear: both;
}

In Miva, I used the following for the header:
<link rel="stylesheet" type="text/css" href="patton4.css" />
</head>
<body>
<div id="header"><img src="images/pelogo.jpg" height="100" width="75" /><br />
<span class="title">
<span class="letters">P</span>rofessionalism<br />
                  & <span class="letters">E</span>xpertise<br />
</span>
<div class="clear"></div>

</div>
<div id="topmenu">
<a href="index4.htm">Home</a> |
<a href="about.htm">About the Company</a> |
<a href="contact.htm">Contact Us</a> |
<a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=SFNT&Store_Code=PE">Store</a> |
<a href="faq.htm">FAQ</a>
</div>
<p>
</p>
<p></p>

<div id="content">
<div id="leftcolumn">
<div class="categories"><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=PLST&Store_Code=PE">
PRODUCTS</a></div>
<ul class="leftmenu" name="leftmenu">
<li><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=F">Firearms</a></li>
<li><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=SG">Stun Guns</a></li>
<li><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=K">Knives</a></li>
<li><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=PE&Category_Co de=RT">Rescue Tools</a></li>
</ul>
<div class="categories">RESOURCES</div>
<ul class="leftmenu" name="leftmenu">
<li><a href="safetytips.htm">Safety Tips</a></li>
<li><a href="faq.htm">FAQ</a></li>
</ul>


<p></p>
Phone: <br />
864-378-4619 <br />
864-446-8013<br /><br />
Fax: <br />
864-446-8013<br /><br />
E-mail:<br />
<a href="mailto:cservice@personaldefensefirearms.com" style="color:#E8DCBA;">cservice@<br />
personaldefensefirearms.com</a><br />
<br />
<a href="mailto:webmaster@personaldefensefirearms.com" style="color:#E8DCBA;">webmaster@<br />
personaldefensefirearms.com</a>
<br />
<br />
Address:<br />
68 Kincaid Valley Drive<br />
Abbeville,South Carolina 29620<br />

<p><img src="images/verticalcards.jpg" /></p>
Layaway your purchase or <br />
set up a payment plan. <br />
We are here to serve you.
</div>

<div id="rightcolumn">
<div class="bluebar"></div>
<div class="leftfloat"><img src="images/g1_45_1911sm.gif"></div>
Welcome to Patton Enterprises! <br />
We specialize in selling to the general public and law enforcement. Our products are top-quality and our customer service is simply excellent. If you have any questions, please do not hesitate to contact us.<br /><br />
Thank you,<br />
Ed Patton
<p></p>
<p></p>
<div class="bluebar"></div>
<h3>Firearms</h3><br />
<div class="leftfloat"><img src="images/firearm.jpg"></div>We sell only top-quality firearms. A good selection is always in stock plus we can do special orders. Check out our store for all the latest firearms we offer.
<p> </p>
<p> </p><p> </p>

<h3>Stun Guns</h3><br />
<div class="leftfloat"><img src="images/stungun.jpg"></div>Our stun guns are always a good choice for your protection.
<p> </p>
<p> </p><p> </p>
<h3>Knives</h3><br />
<div class="leftfloat"><img src="images/knife.jpg"></div>We sell many different knives, some with many different tools.
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<h3>Firearms</h3><br />
<div class="leftfloat"><img src="images/firearm.jpg"></div>We sell only top-quality firearms. A good selection is always in stock plus we can do special orders. Check out our store for all the latest firearms we offer.
<p> </p>
<p> </p><p> </p>

<h3>Stun Guns</h3><br />
<div class="leftfloat"><img src="images/stungun.jpg"></div>Our stun guns are always a good choice for your protection.
<p> </p>
<p> </p><p> </p>
<h3>Knives</h3><br />
<div class="leftfloat"><img src="images/knife.jpg"></div>We sell many different knives, some with many different tools.

And this for the footer:

<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
</div>
</div>

<div id="footer">
<div id="footermenu">
<a href="index4.htm">Home</a> |
<a href="about.htm">About the Company</a> |
<a href="contact.htm">Contact Us</a> |
<a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=SFNT&Store_Code=PE">Store</a> |
<a href="faq.htm">FAQ</a>
</div>
<hr />
Have comments about this page? Tell us through our <a href="contactus.htm">Contact Us</a> page.
</div>

I would appreciate any help in this matter as it is for a client and I need to find a solution as soon as possible.

sunzon
02-22-2005, 11:00 AM
Hate to say something stupid, but.................

Seems to me the problem is your:
<link rel="stylesheet" type="text/css" href="patton4.css">

I don't know what page you are giving the html for, but I did take a quick look at the home page I could discern:
http://www.personaldefensefirearms.com/
and I tried to see if the "patton4.css" file was at that level like this:
http://www.personaldefensefirearms.com/patton4.css
and indeed it was there.


So, since the page you describe is not "http://www.personaldefensefirearms.com/" as I can see from the code, this link:
<link rel="stylesheet" type="text/css" href="patton4.css">
cannot be right.

Either make it a correct relative link, for instance:
<link rel="stylesheet" type="text/css" href="../patton4.css">
or better still make it absolute:
<link rel="stylesheet" type="text/css" href="http://www.personaldefensefirearms.com//patton4.css">

hth

torrin
02-22-2005, 11:01 AM
From the example that you have give, I don't see anything wrong, so I'll ask a few questions.


Exactly what is not working right?
Do some of the styles come through and not others?
Are you sure that the CSS file is named patton4.css and it is in the correct directory? That is, it should be in the same directory with your XHTML file.
If you have a smaller example that demonstrates the problem, it would be easier the spot.

heather.greer
02-22-2005, 04:34 PM
Thank you both for your reply.
I changed the path in the link tag to an absolute path and tried it out again. Everything works except for the footer and left column. I used float:left for the left column and clear:both before the footer, but they still cross paths.
Any more ideas?

See the link below to see what I'm talking about.

http://www.personaldefensefirearms.com/Merchant2/merchant.mvc

It's doing this in Firefox.

sunzon
02-22-2005, 05:01 PM
I dont know Miva.
Since the various parts (header,leftside, footer) are pulled together and since header works where you have the link to the css file, try adding the link in the leftside and footer pieces as well.
Maybe over simplistic, but it can't hurt to try.

torrin
02-22-2005, 05:06 PM
Yes, I've seen this problem before when I created a page like that. I don't remember being able to solve it without using tables.

If I remember correctly, the problem was that you have a left column floating in space. The footer has no idea about the left column. The header, right column and footer actually follow the flow of the page. Therefore the footer is created right after the right column.

So here are some suggestions.


Float the right column instead, since it's shorter. (You'll need to make sure the right column is shorter for all pages that are using this layout.)
Shorten the left column, so it's shorter than the right column. (You'll need to do this for all pages that are using this layout.)
Use tables instead.


Personally, I don't like neither of these suggestions. Maybe somebody else has a better suggestion.

sunzon
02-22-2005, 05:30 PM
Some tinkering........

<div class="categories"><a href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=PLST&Store_Code=PE">
PRODUCTS</a></div>

What happens if you make that line like this:

<a class="categories" href="http://www.personaldefensefirearms.com/Merchant2/merchant.mvc?Screen=PLST&Store_Code=PE">
PRODUCTS</a>

since you have a ".categories a:" defined in the css.

(I say this because the subcategories defined by <ul class="leftmenu" name="leftmenu"> seems to be working).

heather.greer
02-22-2005, 07:40 PM
Thank you all for your help. I finally solved it, but I had to use a few tables.
For the two main columns, I wrote one table with two cells. Inside each cell I put another table and made it look like the rest of the website.
For the top header and the footer, I was able to leave those in CSS.
Thanks again.