# Solved: 2 New Problems - Help Please



## 57corvette (Sep 7, 2012)

*First:* Not sure what happened here as the site was up and looking good ..... I like to change the photos on the index page every so often and with the new addition of a photo, the footer bar has moved over to the right. If I eliminate the second photo, the bar appears correctly, but a white bar then appears around the counter.....which I can live with, but prefer not to have. I also want at least two photos on the page. I had two photos there before and it all appeared correctly. Maybe the size of the photo has something to do with it ....

*Second:* I don't know if my site had black borders on both sides.....but I don't think so. If I did, they were not as large as they are now. The top navigation bar use to look correct, but now the "home" button is too far to the left and appears in the black border. Is there a way without too much trouble, to make everything on the page expand so the brown background image covers the entire page? If not, what do I do to get the top navigation buttons to all fit across the top of the page and not be in the black borders? How did this change on every page??

The website is www.RatRodStudios.com

Thanks for any thoughts or help .......


----------



## 57corvette (Sep 7, 2012)

I'm trying to edit the style page for the navigation fonts. I made the font smaller, but still have the same problem. I guess what I'm looking for is how to edit the space between the top navigation links. I'm not sure which line of code needs to be changed.


----------



## JiminSA (Dec 15, 2011)

Just a reminder, Bob ... you may want to reconsider that navigation amendment Cara and I offered a while back? (see Screen Shot attached)
Have you perhaps upgraded your PC's screen-size? The black background has always been there, but probably not visible on your previous screen.
Will take a look at pictures problem later - this is just a flying visit


----------



## JiminSA (Dec 15, 2011)

Bob I am not trying to sell you anything, but I believe if you adopt Cara's css that problem with the footer mis-aligning will disappear...


----------



## 57corvette (Sep 7, 2012)

I might revisit your idea Jim .....just thought the boxes around the links may look too busy. I'll read your e-mail again and see if I know how to make the changes. Just wondering how this happened......it all looked fine for months.


----------



## 57corvette (Sep 7, 2012)

Jim,

I changed the code on my links page for the navigation to this:


Home
About Bob
Examples
Contact Us
Order Page
Links
Site Map

That didn't help....so I uploaded the css file you sent me....that totally caused havoc on the page. Was I suppose to do something else? At this time I changed everything back to what I had. Header links are still not right as well as the footer on the index page.


----------



## colinsp (Sep 5, 2007)

You need to run your site through the W3C validator. You have over 100 errors on your index page. Fix those and your image will probably display fine. See http://validator.w3.org/check?verbose=1&uri=http://www.ratrodstudios.com/


----------



## JiminSA (Dec 15, 2011)

Hi Bob...



> so I uploaded the css file you sent me....that totally caused havoc on the page


...yes, it would.
The original mods made by Cara were for the links page only. So when you overlayed your style.css with the one we sent you a lot of your styling script vanished - hence the chaos.

May I suggest that you take a look at these lines in your current style.css

```
.site-nav {position:absolute;left:36px;top:298px}
.site-nav ul li {float:left;font-size:20px;line-height:1.2em;padding:0 47px}
.site-nav ul li a {text-decoration:none;color:#000}
.site-nav ul li a:hover {color:#6e6774}
```
baring in mind that left:36px refers to the menu's absolute positioning on your webpage and padding:0 47px to the space between the menu items.

I would also heed Colin's advice


----------



## 57corvette (Sep 7, 2012)

Colin, thank you for your suggestion ....I have done that in the past, but I guess there are things I don't understand. For instance, it states _Line 3, Column 73_: end tag for "link" omitted, but OMITTAG NO was specified 
[/U][/COLOR][/B]But when I look at the source code on my website, the code reads like this:
<head><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

It appears that there is nothing wrong......so I'm unsure as what to correct. Any thoughts would be appreciated.

Jim, I was looking at that yesterday and trying to make changes.....will try again today. Can you tell me why the footer image is too far to the right when I add a second image? Again, all this was correct, so not sure how it chances on it's own.


----------



## colinsp (Sep 5, 2007)

You have this


```
<head><linkrel="shortcut icon" type="image/x-icon" href="/favicon.ico">
```
What you should have is a space between the words link and rel and you should also have a closing /


```
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
</head>
```
You need to read up on tags and the HTML standard that you have written the page in to understand what is needed. For instance if your page was coded as HTML5 then you wouldn't need the /


----------



## 57corvette (Sep 7, 2012)

The code I used for that was supplied by the favicon website .....I really don't know how to write this code. But looking at what you said and what the validator said, I would not know to put the space between link and rel ....... if it's an issue, shouldn't the validator have pointed it out?

While I understand that there are errors in the code, the site was correct for some time, at least in appearance. I'm only trying to get the appearance back to the way it was. I can go over the issues that the validator points out, but it's beyond my skill level to know a space is needed, especially when the code came from a web developer.

I will try to find and correct the mistakes and thank you for your help, it's much appreciated .....


----------



## JiminSA (Dec 15, 2011)

> Can you tell me why the footer image is too far to the right when I add a second image? Again, all this was correct, so not sure how it chances on it's own.


I'm sure this has to do with the 2 preceding columns having different heights ( and ). I've had problems of a similar nature, which I've overcome by "persuading" the browser that the columns are of the same height.
There is no truly straightforward way in which to do this, unless you want to set both in the col-1 col-2 css to read e.g. height:1950px - having determined an optimum height. This would work fine, but would have to be re-evaluated, whenever you change the picture or text content in either column.
Surer methodologies can be found at this link, but may not be easily understood, but give it a looksee and persevere matey


----------



## JiminSA (Dec 15, 2011)

P.S.
I see you've been experimenting with the site-nav css settings - may I suggest that this line

```
.site-nav {position:absolute;right:250px;top:310px}
```
be amended to read

```
.site-nav {position:absolute;top:310px}
```
this will default the horizontal positioning to 0px and should align leftmost of the background image (you could also leave the 'left' in and adjust the px setting to centralise the menu... just a suggestion)


----------



## 57corvette (Sep 7, 2012)

Thank you Jim as always,much appreciated. I was able to correct the footer by changing this code:
<div class="col-2"><div class="indent"><img src="34fordrat.jpg" alt="1934 Ford Ratrod"title="1934 Ford Ratrod" </div><BR><BR><BR> <div class="col-2"><div class="indent"><img src="34fordrat.jpg" alt="1934 Ford Ratrod"title="1934 Ford Ratrod" </div><BR><BR><BR>

</div>  and adding 

I will try changing the site-nav code today. It looks good on my 21" screen but off center on my 26" screen. I was hoping there was a code that would center it on the page rergardless of screen size. I tried changing "left" to "center" but that didn't work.....so I changed it to waht you see now. Will go back and try your new code today. Many thanks ......


----------



## 57corvette (Sep 7, 2012)

Jim, I tried the amended code but it pushed the nav links too far two the left. Two of them were in the black border again.


----------



## caraewilton (Nov 7, 2007)

Look the problem here is the original template is using css code that makes it rather inflexible. Part of the reason is that it has absolute positioning for some parts and negative margins. All this works, but if you make little changes in the divs things to go out of whack, which is what you are experiencing here. Fixing it, is like trying to trace a single strand in a matted ball of a thousands strings. Loosen one part results in another becoming tangled.

Solution: keep at it, eventually you will get it sorted, one strand at a time.

Alternatively start again with a fresh roll of string as it where, or use a cleanly coded template.


----------



## caraewilton (Nov 7, 2007)

Here is your css code at present

```
/* TAGS */
* {margin:0;padding:0}
html {min-width:1000px} 
body {background:#000;font-family:Tahoma, Arial, helvetica, sans-serif;font-size:100%;line-height:1em;color:#000;min-width:1000px}
object {vertical-align:top;outline:none}
input, textarea, select {font-family:Tahoma, Arial, helvetica, sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
fieldset {border:0}
p {margin:0;padding:0}
img {border:0;vertical-align:top;text-align:left}
ul, ol {list-style:none}
/* GLOBAL */
#header, #content, #footer {font-size:0.75em;width:1000px;margin:0 auto}
.col-1, .col-2, .col-3 {float:left}
/* ALIGMENT */
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
.container {width:100%}
/* FORMS */
#poll-form .field {height:28px;width:100%;overflow:hidden}
#poll-form label {float:left}
#poll-form input {float:left;width:14px;height:14px;margin:2px 9px 0 0}
/* */
#contacts-form {clear:right;width:100%;overflow:hidden}
#contacts-form .field {width:100%;overflow:hidden}
#contacts-form label {float:left;width:97px;line-height:18px;padding-bottom:8px;font-weight:bold;color:#000}
#contacts-form input {width:225px;float:left;padding:1px 0 1px 3px;background:url(images/png-tail.png) left top;border:1px solid #000;color:#70635b;color:#000}
#contacts-form textarea {width:403px;height:442px;padding:1px 0 1px 3px;background:url(images/png-tail.png) left top;border:1px solid #000;color:#70635b;float:left;overflow:auto;color:#000}
#contacts-form .alignright {padding-top:15px}
/* LISTS */
.site-nav {position:absolute;right:250px;top:310px}
.site-nav ul li {float:left;font-size:20px;line-height:1.2em;padding:0 25px}
.site-nav ul li a {text-decoration:none;color:#000}
.site-nav ul li a:hover {color:#6e6774}
.list li {line-height:1.5em;padding-bottom:18px}
.list li a {text-decoration:none;font-weight:bold;display:inline-block}
.list li a:hover {background:#000}
.list1 {margin-top:-5px}
.list1 li {width:100%;overflow:hidden;vertical-align:top;margin-left:-18px;position:relative;line-height:1.5em;padding-top:5px}
.list1 li img {float:left;margin-right:5px}
.list1 li a {font-weight:bold;text-decoration:none}
.list1 li a:hover {text-decoration:underline}
.list2 {margin-top:-18px}
.list2 li {width:100%;overflow:hidden;vertical-align:top;position:relative;line-height:1.5em;padding-top:18px}
.list2 li img {float:left;margin:6px 26px 0 0}
.list2 li strong {display:block;padding-bottom:6px}
.list2 li a {text-decoration:none}
.list2 li a:hover {text-decoration:underline}
.list3 {padding-bottom:15px;margin:0}
.list3 li {font-weight:bold;padding:0 0 3px 8px;background:url(images/arrow.gif) no-repeat left 6px}
.list3 li ul {padding:3px 0 0 0;margin-bottom:-4px}
/* OTHER */
.img-box1 {width:100%;overflow:hidden;margin:-12px 0 0 -27px;padding:12px 0 0 27px;position:relative}
.img-box1 img {float:left;margin:-12px -10px -25px -27px;position:relative}
.img-box2 {width:100%;overflow:hidden;padding-bottom:20px}
.img-box2 img {float:left;margin:5px 20px 0 0}
p {margin-bottom:15px;line-height:1.5em}
.p0 {margin-bottom:0}
/* TXT, LINKS, LINES, TITLES */
a {color:#fff;outline:none}
a:hover {text-decoration:none}
h2 {font-size:2.83em;font-family:Georgia, "Times New Roman", Times, serif;font-weight:normal;line-height:1em;margin-bottom:20px}
h3 {font-size:2.17em;line-height:1em;font-family:Georgia, "Times New Roman", Times, serif;font-weight:normal;margin-bottom:20px}
h4 {font-size:1em;line-height:1.5em;color:#fff;margin-bottom:20px}
.link1 {display:inline-block;background:url(images/link1-right.gif) no-repeat right top;color:#fff;text-decoration:none;font-size:1.67em;font-family:Georgia, "Times New Roman", Times, serif;line-height:1.2em;cursor:pointer}
.link1 em {display:inline-block;background:url(images/link1-left.gif) no-repeat left top;padding:0 5px}
.link1 b {display:inline-block;background:url(images/link1-tail.gif) repeat-x left top;padding:3px 20px 4px 20px;font-style:normal;font-weight:normal}
.link1:hover b {text-decoration:underline}
/* HEADER */
#header {height:337px;position:relative;background:url(images/header-bg.jpg) no-repeat left top}
#header .logo {position:absolute;left:50px;top:94px}
/* CONTENT */
#content {background:url(images/cont-tail.jpg) repeat-y left 216px}
#content .top {background:url(images/cont-top.jpg) no-repeat left top}
#content .bot {background:url(images/cont-bot.jpg) no-repeat left bottom;min-height:713px;height:auto !important;height:713px}
#content .inner {padding:65px 0 40px 94px}
.inner_copy, .inner_copy a {border:0;float:left;color:#444;width:35%;line-height:0;font-size:0;margin:-202px 0 0 0;overflow:hidden;padding:0}
#content .col-1 {width:237px;margin-right:68px;padding-top:6px}
#content .col-2 {width:517px}
#content .indent {padding-bottom:44px}
/* FOOTER */
#footer {height:57px;background:url(images/footer-bg.jpg) no-repeat left top}
#footer .indent {padding:5px 129px 20px 94px}
#footer img {position:relative;top:-4px}
/* */
```
Here is what it could be

```
/* === Default Styles === */html, body, div{margin: 0; padding: 0;}
body{background: #0A0A00; color: #000; font-size: 90%; font-family: "Lucida Grande", "Verdana", sans-serif;}
p{overflow: hidden;}
a{color: #fff; text-decoration: none;}
a:visited{}
a:hover{text-decoration: underline;}
h1{font-family: Impact, Charcoal, sans-serif;}
h2{}
h3{}
h4{}
h5{}
h6{font-size: 12px; line-height: 20px; font-weight: normal; float: left; padding: 0; margin: 0;}
img{border: 3px double #fff; padding: 7px;}
ul{}
li{}
/* === Wrapper === */
#wrapper{background: #BB9A6F url(images/cont-tail.jpg) repeat-y; width: 1000px; margin: 0 auto; padding: 0;}
/* === Header === */
#header{background: url(images/header-bg.jpg) no-repeat; height: 337px;}
#header img{border: none; display: block; padding: 35px 0 0 0;}
/* === Horizontal Menu === */
#navigation {list-style: none; padding: 10px 60px; margin: 0; overflow: hidden;}
#navigation li{display: inline;}
#navigation a{display: block; float: left; border-top: 1px solid #8C7255; border-right: 1px solid #8C7255; background: #695640; height: 21px; padding: 0 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 0 0 0 #666; -webkit-box-shadow: 0 0 1px 0 #666; box-shadow: 0 0 1px 0 #666; text-shadow: 0 0 1px #666; font-weight: bold; font-size: 15px; color: #F0E9DA; text-decoration: none; margin: 0 10px 0 0;}
#navigation a:hover, body.home #navigation .home, body.about #navigation .about, body.examples #navigation .examples, body.links #navigation .links{border-top: 1px solid #907D52; border-right: 1px solid #907D52; background: #C0A76D; color: #fff;} /* === content === */
#content{background: url(images/cont-top.jpg) no-repeat top;}
#columns{background: url(images/cont-bot.jpg) no-repeat bottom; overflow: hidden; padding: 90px 80px 40px 80px; min-height: 650px;}
/* === narrow column === */
#narrow-column{display: inline; float: left; width: 300px; padding: 0 30px 0 0;}
#narrow-column dl{padding: 0; margin: 10px 0 0 0;}
#narrow-column dt{font-family: Impact, Charcoal, sans-serif; font-weight: bold; font-size: 1.8em; letter-spacing: .01em; padding: 5px; margin: 0;}
#narrow-column dd{background: url(images/eye-small.png) no-repeat left 12px; margin: 0; padding: 5px 5px 5px 60px; font-size: 1.1em;}
#narrow-column dl span{display: block; margin-left: -30px;}
#narrow-column dl a{padding: 10px 15px; display: block; text-decoration: none;}
#narrow-column dl span{font-family: "Times New Roman", Times, serif; font-style: italic; color: #000;}
#narrow-column dl a:hover span{color: #ffffff;}
/* === broad column === */
#broad-column{display: inline; float: right; width: 480px; padding: 0 0 0 30px; line-height: 1.5em;}
/* === footer === */
#footer{background: #855A2F url(images/footer-bg.jpg) repeat-y; padding: 10px 100px; overflow: hidden;}
/* === Footer Menu === */
#footnav {list-style: none; padding: 0; margin: 0; float: right;}
#footnav li{float: left; padding: 0; margin: 0 0 0 1px; font-size: 12px; line-height: 20px; background: none;}
#footnav a{display: block; padding: 0 10px; color: #fff; text-decoration: none;}
#footnav a:hover{background: #644423; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
/* === tool box === */
.picture-right{float: right; margin: 4px 0 10px 10px;}
.picture-left{float: left; margin: 4px 10px 10px 0;}
.borderless{border: none; padding: 0;}
.right{text-align: right;}
.left{text-align: left;}
.centre{text-align: center;}
.float-l{float: left;}
.float-r{float: right;}
.clear{clear: both;}
```


----------



## caraewilton (Nov 7, 2007)

Okay how about your html with the 100 odd errors:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hot Rod Art And Hotrod Artwork By Rat Rod Studios - Home Page





[URL=http://www.ratrodstudios.com/index.html][IMG alt="Rat-Rod-Studios-Art"title="Rat-Rod-Studios-Art"]logo1.png[/IMG][/URL]

		[LIST]
			[*][URL=http://www.ratrodstudios.com/index.html]Home[/URL]
			[*][URL=http://www.ratrodstudios.com/about.html]About Bob[/URL]
			[*][URL=http://www.ratrodstudios.com/examples.html]Examples[/URL]
			[*][URL=http://www.ratrodstudios.com/contact.html]Contact Us[/URL]
			[*][URL=http://www.ratrodstudios.com/order.html]Order Page[/URL] 
                        [*][URL=http://www.ratrodstudios.com/Site%20Map.html]Site Map[/URL]

		[/LIST]



			More [URL=http://www.ratrodstudios.com/]Rat Rod Studios[/URL]

[B][SIZE=14]What's Available[/SIZE][/B]

							[LIST]
							[*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/examples.html]Examples Of Hot Rod Art[/URL]
Here you will find many examples of Hot Rod and Rat Rod Art.
							[*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/original%20artwork.html]Original Hot Rod Art[/URL]
Samples of original artwork of Bob Kramer and Rat Rod Studios.
							[*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/sketches.html]Sketches Of Hot Rod Art [/URL]
Some photos look great in a painted or sketched fashion.
                                                        [*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/black%20background.html]On Black Background[/URL]
Samples of hot rods and rat rods placed on a black background, sometimes with colored smoke and always with great reflections.
							[*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/hotrods%20and%20girls.html]Hot Rod and Rat Rod Girls[/URL]
Place your ride in a fantasy photo with girls or pin-ups.
							[*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/holidays.html]Holiday Hot Rods [/URL]
Super looking holiday photos with your hot rod, rat rod or motorcycle.
                                                        [*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/bikes.html]Motorcycles Artwork[/URL]
Examples of Bikes, Trikes and Motorcycles.
							[*][IMG]eye.png[/IMG][URL=http://www.cafepress.com/ratrodstudios]Hot Rod Art Merchandise [/URL]
Merchandise sold by Rat Rod Studios. How cool would it be after you received your custom Hot Rod Artwork to place that image on a tee shirt, calendar, etc. or any number of different products. Check out the merchandise page and tell me what you would like.
							[*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/calendar.html]Hot Rod Art Calendar [/URL]
Here you will find a new photo of the month by Rat Rod Studios with a calendar. Custom calendars can be ordered for your hot rod groups or clubs.
                                                        [*][IMG]eye.png[/IMG][URL=http://www.ratrodstudios.com/Testimonials.html]Rat Rod Studios Testimonials[/URL]
(Actual letters and testimonials of present and past clients.)

[*]

							[/LIST]

[B][SIZE=14]Rat Rod Studios ....	[/SIZE][/B]

							[IMG alt="Rat-Rod-Studios-Art"title="Rat-Rod-Studios-Art"]skull.png[/IMG]

Hotrod Artwork and Ratrod Artwork ..... [/B]Thanks for cruising into [B]Rat Rod Studios[/B] where we exclusively feature the breathtaking automotive photographic artwork of [URL=http://www.ratrodstudios.com/about.html]Bob Kramer[/URL]
and is your source for custom [B]Hot Rod and Rat Rod artwork.[/B] Whatever type of automotive art you're looking for; custom, classic, hot rod, rat rod or motorcycle, Bob Kramer will transform your ordinary car photos into[B] Custom Hot Rod Art. [/B]

 A custom photograph showcasing your [B]hotrod, ratrod or motorcycle [/B]will make an excellent birthday, Fathers Day, Christmas or anniversary gift. Why settle for a snapshot or ordinary photo of your amazing ride, when you can have a custom, one of a kind, classic piece of Hot Rod Art.  Your ride is special and it deserves to be showcased as a beautiful piece of artwork that you will be proud to share with family and friends.

You have invested thousands of dollars and countless hours in building your custom ride, so doesn't it make sense to have a fantastic piece of automobile artwork that showcases the time and effort you spent on it? If you want a WOW photo of your [B]hotrod, ratrod or motorcycle[/B] and want it to look a bit different from all the ordinary car photos out there, you should definitely check out the [B]custom art of Rat Rod Studios.[/B]  For pricing information or to order your prints, please look at the[URL=http://www.ratrodstudios.com/order.html] Order page.[/URL]

Click on the links to the left to take you to the pages of Rat Rod Studios. [B]Examples[/B], (here you will find a few examples of Hot Rod Art) [B]Original Art[/B], (samples of original artwork of Bob Kramer and Rat Rod Studios) [B]Sketches[/B], (some photos look great in a painted or sketched fashion) [B]On Black Background[/B], (samples of hot rods and rat rods placed on a black background sometimes with colored smoke and always with great reflections) [B]Hot Rod Girls[/B], (place your ride in a fantasy photo with girls or pin-ups) [B]Holiday Hot Rods[/B], (super looking holiday photos with your hot rod, rat rod or motorcycle) [B]Motorcycles[/B], (example of Bikes, Trikes and Motorcycles) [B]Merchandise[/B], (this page will take you to the merchandise sold by Rat Rod Studios. How cool would it be after you received your custom Hot Rod Artwork to place that image on a tee shirt, calendar, cap, sticker or any number of different products. Check out the merchandise page and tell me what you would like.)
[B]Calendar[/B], (here you will find a new photo of the month by Rat Rod Studios with a calendar. Custom calendars can be ordered for your hot rod groups or clubs) [B]Testimonials[/B], (actual letters and testimonials of present and past clients) For pricing information or to order your prints, please look at the [URL=http://www.ratrodstudios.com/order.html]Order page.[/URL]

[IMG]bucketmoon.jpg" alt="Bucket T And Moon"title="Bucket T And Moon"

[IMG]34fordrat.jpg" alt="1934 Ford Ratrod"title="1934 Ford Ratrod"

						[/LIST]

                                                
[URL=http://www.hitwebcounter.com/]
[IMG alt="Free Hits Counters"]http://hitwebcounter.com/counter/counter.php?page=4490786&style=0025&nbdigits=8&type=page&initCount=49795[/IMG]
[/URL]



		Copyright - Bob Kramer and Rat Rod Studios

[URL=http://www.ratrodstudios.com/index.html]Home[/URL]   [URL=http://www.ratrodstudios.com/about.html]About[/URL]      [URL=http://www.ratrodstudios.com/examples.html]Examples[/URL] [URL=http://www.ratrodstudios.com/order.html]Order[/URL] [URL=http://www.ratrodstudios.com/contact.html]Contact[/URL] [URL=http://www.ratrodstudios.com/links.html]Links[/URL] [URL=http://www.ratrodstudios.com/Site Map.html]Site Map[/URL]
[URL=http://www.cafepress.com/ratrodstudios]Merchandise[/URL] [URL=http://www.ratrodstudios.com/videos.html]Videos[/URL]
```
Alternatively clean code with no errors:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  Links With Rat Rod Studios

      [URL=http://www.ratrodstudios.com/index1.html][IMG]images/logo1.png[/IMG][/URL]
      [LIST]
        [*][URL=http://www.ratrodstudios.com/index1.html]Home[/URL]
        [*][URL=http://www.ratrodstudios.com/about.html]About Bob[/URL]
        [*][URL=http://www.ratrodstudios.com/examples.html]Examples[/URL]
        [*][URL=http://www.ratrodstudios.com/contact.html]Contact Us[/URL]
        [*][URL=http://www.ratrodstudios.com/order.html]Order Page[/URL]
        [*][URL=http://www.ratrodstudios.com/order.html]Links[/URL]
        [*][URL=http://www.ratrodstudios.com/Site%20Map.html]Site Map[/URL]
      [/LIST]

            What's Available
            [URL=http://www.ratrodstudios.com/examples.html]Examples of Hot Rod Art
Here you will find many examples of Hot Rod and Rat Rod Art.[/URL]
            [URL=http://www.ratrodstudios.com/original%20artwork.html]Original Hot Rod Art
Samples of original artwork of Bob Kramer and Rat Rod Studios.[/URL]
            [URL=http://www.ratrodstudios.com/sketches.html]Sketches Of Hot Rod Art
Some photos look great in a painted or sketched fashion.[/URL]
            [URL=http://www.ratrodstudios.com/black%20background.html]On Black Background
Samples of hot rods and rat rods placed on a black background, sometimes with colored smoke and always with great reflections.[/URL]
            [URL=http://www.ratrodstudios.com/hotrods%20and%20girls.html]Hot Rod & Rat Rod Girls
Place your ride in a fantasy photo with girls or pin-ups.[/URL]
            [URL=http://www.ratrodstudios.com/holidays.html]Holiday Hot Rods
Super looking holiday photos with your hot rod, rat rod or motorcycle.[/URL]
            [URL=http://www.ratrodstudios.com/bikes.html]Motorcycles Artwork
Examples of Bikes, Trikes and Motorcycles.[/URL]
            [URL=http://www.cafepress.com/ratrodstudios]Hot Rod Art Merchandise
Merchandise sold by Rat Rod Studios. How cool would it be after you received your custom Hot Rod Artwork to place that image on a tee shirt, calendar, etc. or any number of different products. Check out the merchandise page and tell me what you would like.[/URL]
            [URL=http://www.ratrodstudios.com/calendar.html]Hot Rod Art Calendar
Here you will find a new photo of the month by Rat Rod Studios with a calendar. Custom calendars can be ordered for your hot rod groups or clubs.[/URL]
            [URL=http://www.ratrodstudios.com/Testimonials.html]Rat Rod Studios Testimonials
Actual letters and testimonials of present and past clients.[/URL]

[B][SIZE=15]Rat Rod Studios...[/SIZE][/B]

[IMG]images/skull.png[/IMG]

Hotrod Artwork and Ratrod Artwork ..... Thanks for cruising into
          Rat Rod Studios where we exclusively feature the breathtaking
          automotive photographic artwork of Bob Kramer and is your source for
          custom Hot Rod and Rat Rod artwork. Whatever type of automotive art
          you're looking for; custom, classic, hot rod, rat rod or motorcycle,
          Bob Kramer will transform your ordinary car photos into Custom Hot
          Rod Art.

A custom photograph showcasing your hotrod, ratrod or motorcycle
          will make an excellent birthday, Fathers Day, Christmas or anniversary
          gift. Why settle for a snapshot or ordinary photo of your amazing
          ride, when you can have a custom, one of a kind, classic piece of Hot
          Rod Art. Your ride is special and it deserves to be showcased as a
          beautiful piece of artwork that you will be proud to share with family
          and friends.

[IMG]images/richfield3.jpg[/IMG]

You have invested thousands of dollars and countless hours in
          building your custom ride, so doesn't it make sense to have a
          fantastic piece of automobile artwork that showcases the time and
          effort you spent on it? If you want a WOW photo of your hotrod, ratrod
          or motorcycle and want it to look a bit different from all the
          ordinary car photos out there, you should definitely check out the
          custom art of Rat Rod Studios. For pricing information or to order
          your prints, please look at the Order page.

[IMG]images/fox.jpg[/IMG]

Click on the links to the left to take you to the pages of Rat Rod
          Studios. Examples, (here you will find a few examples of Hot Rod Art)
          Original Art, (samples of original artwork of Bob Kramer and Rat Rod
          Studios) Sketches, (some photos look great in a painted or sketched
          fashion) On Black Background, (samples of hot rods and rat rods placed
          on a black background sometimes with colored smoke and always with
          great reflections) Hot Rod Girls, (place your ride in a fantasy photo
          with girls or pin-ups) Holiday Hot Rods, (super looking holiday photos
          with your hot rod, rat rod or motorcycle) Motorcycles, (example of
          Bikes, Trikes and Motorcycles) Merchandise, (this page will take you
          to the merchandise sold by Rat Rod Studios. How cool would it be after
          you received your custom Hot Rod Artwork to place that image on a tee
          shirt, calendar, cap, sticker or any number of different products.
          Check out the merchandise page and tell me what you would like.)
          Calendar, (here you will find a new photo of the month by Rat Rod
          Studios with a calendar. Custom calendars can be ordered for your hot
          rod groups or clubs) Testimonials, (actual letters and testimonials of
          present and past clients) For pricing information or to order your
          prints, please look at the Order page.

[B][SIZE=13]Copyright - Bob Kramer and Rat Rod Studios[/SIZE][/B]

      [LIST]
        [*][URL=http://www.ratrodstudios.com/index1.html]Home[/URL]
        [*][URL=http://www.ratrodstudios.com/about.html]About[/URL]
        [*][URL=http://www.ratrodstudios.com/examples.html]Examples[/URL]
        [*][URL=http://www.ratrodstudios.com/order.html]Order[/URL]
        [*][URL=http://www.ratrodstudios.com/contact.html]Contact[/URL]
        [*][URL=http://www.ratrodstudios.com/links.html]Links[/URL]
        [*][URL=http://www.ratrodstudios.com/Site Map.html]Site Map[/URL]
      [/LIST]
```


----------



## 57corvette (Sep 7, 2012)

Wow, thank you ........that is very nice of you. I will change the code and see how it looks. Right now, I can live with the look.....it's a little different on each of my 2 screens, but is OK. I really appreciate the work you did on this for me.


----------



## caraewilton (Nov 7, 2007)

You know with a little php, you could have the pictures on the front page load a random two photographs each time you refresh the page, which would mean you need not change the pictures manually every couple of months. You can see what I mean here, each time you refresh the page you will a random two images in the text come up


----------



## NegativeKelvin (Apr 12, 2012)

Just a comment, but your index.html looks more like a CSS and you may have gotten them mixed up. About the black borders, perhaps you zoomed out with your web browser (You can do this with CTRL+, CTRL-, CTRL 0, and CTRL Mousewheel)?


----------



## 57corvette (Sep 7, 2012)

britishcommando2 said:


> Just a comment, but your index.html looks more like a CSS and you may have gotten them mixed up. About the black borders, perhaps you zoomed out with your web browser (You can do this with CTRL+, CTRL-, CTRL 0, and CTRL Mousewheel)?


Thanks for your thoughts .........I used a ready made template and only changed the images. The borders may have always been there, but they seem larger now.....and when some of my nav text was no longer on the page but in the borders, I thought the borders may not have been there before.


----------



## JiminSA (Dec 15, 2011)

As I said earlier Bob, you should have tried tweaking that 'site-nav' css... but with Cara's overhaul of your site that will become unnecessary. The reason that the black borders now show is that you are using a larger screen resolution and yes they have always been there...


----------



## colinsp (Sep 5, 2007)

You need to change your navigation positioning

.site-nav needs right 350px


----------



## 57corvette (Sep 7, 2012)

Jim, I have been tweaking the site-nav and the setting I have now allows the links to fit across the top when viewed in my 21" monitor as well as my 26"screen. 

Cara, if I change the index HTML code to what you posted above, are you saying the errors will be gone and the page will look the same? Will that happen without changing the css page? I can change both if that will correct problems and make the site look correct.


----------



## JiminSA (Dec 15, 2011)

Bob - the big disadvantage with using absolute positioning is that it will look different depending upon the screen resolution. Cara's solution is the ultimate answer as it does the alignment universally for all resolutions and yes, if you go that route you must adopt Cara's error-free css as well... the html won't work without the css - out with the old in with the new matey!


----------



## JiminSA (Dec 15, 2011)

P.S.
Bare in mind that your other pages must also fall in line with the new css as per the index page...


----------



## colinsp (Sep 5, 2007)

Bob,

Your current page looks horrible on my 22" monitor and even worse on my old 17" laptop with a 1024 x 768 screen. This is the disadvantage of fluid width and fixed positioning it only works for one screen resolution.


----------



## 57corvette (Sep 7, 2012)

Jim, Colin, thank you both ..... so much to learn. I looked at my site on my 17" laptop and it looked aweful on an old IE but OK on FireFox.

I'm going to try to change the css and the html to what Cara suggested. Jim,are you saying this will correct the index page, but I will then have to edit all the other pages?


----------



## colinsp (Sep 5, 2007)

Yes you will need to edit your other pages to reflect the new CSS.


----------



## 57corvette (Sep 7, 2012)

Thank you Colin ....guess I better to all that on my hard drive so all the pages are done before I upload.


----------



## JiminSA (Dec 15, 2011)

> Jim,are you saying this will correct the index page, but I will then have to edit all the other pages?


Yup! e.g. Cara refers to narrow-column and broad-column and the old css refers to col-1 and col-2. It's not that difficult a task, but if you get stuck, you know where to call


----------



## 57corvette (Sep 7, 2012)

JiminSA said:


> Yup! e.g. Cara refers to narrow-column and broad-column and the old css refers to col-1 and col-2. It's not that difficult a task, but if you get stuck, you know where to call


Thanks Jim, I working on it now ..........


----------



## caraewilton (Nov 7, 2007)

I have an aversion to using col-1, col-2 because as things develop, it becomes increasingly difficult to remember which column is for what ... just a personal thing...


----------



## JiminSA (Dec 15, 2011)

I agree Cara, the more meaningful the div names, the better:up:


----------



## 57corvette (Sep 7, 2012)

Cara, I have sent you an e-mail with the revised pages ....just wondering if you received it?


----------



## 57corvette (Sep 7, 2012)

My thanks to Colin, Jim and Cara ......I appreciate your help with this. I have uploaded my new pages and I think it's working much better. Thank you again for all your help.


----------



## JiminSA (Dec 15, 2011)

I'm glad that you are happy with the new look...


----------

