
Responsive Theme - Post ID 206237
Hey guy's, I just got done working on my craig judd website, and I actually had the images layed out perfectly on a 21.5" screen, however when I got to my laptop, two buttons aren't showing up.. visit craigjuddpinstriping.net and check it out please, I don't know where I went wrong.. thanks again guys for your help.

Which buttons on which page?
Also MAX you need to clean up the transparency on the bowling pins. :)There's straggler bits of white and rough white edge doesn't look very crisp and clean like a pin stripper would demand.
Looks like you left the html out for the Media and Store buttons on the other pages. closed <a tags down there in that area. So your missing a >. Look at your source code and run it through the validation.



I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
I had a look at it, and in the styles in the document head two of the image id's are missing on at least the About and the Contact page (haven't gone further into it). Then the insertions of these divs are also partly missing, that is probably because you have the styles in the head and have to edit it on every page. It would be easier to edit if you had the styles in a file of its own, then you edit once, and the change takes effect on all the pages.
Then there are some errors in the code. This bit:
has far too many end divs and no start divs. It should be like this:
You will also notice that I have removed the '<div' in front of the id's. When used like this, it's the anchor, the 'a', that takes the id.
After I corrected that code, though, the small logo image in the heading went off center and is partly hiding underneath the two left 'cloudy' buttons. I haven't had time to look at that yet, but I don't know... If I were you, I would not use all that absolute positioning, rather create a containing div, float the contents and give them some padding, so that they stay with a bit of distance from each other.
I think I would recommend you to clean up the code a bit, then it seems to me that you have a mix of old and new styles/code.
And then what Eric said about cleaning up the edges of some of the objects. I'd recommend the same for the text on the cloud buttons. It's easy if you have Photoshop or another good image editing software, or, you could put the text directly on top of the clouds, which are background images anyway. The best would actually be if the site owner, Craid Judd, would create those buttons+text for you and you would just bang them in.
Then there are some errors in the code. This bit:
<a href="pics.html" <div id="img1"></a>
</div>
<a href="services.html" <div id="img2"></a>
</div>
<a href="store.html" <div id="img4"></a>
</div>
<a href="media.html" <div id="img5"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="services.html" <div id="img2"></a>
</div>
<a href="store.html" <div id="img4"></a>
</div>
<a href="media.html" <div id="img5"></a>
</div>
</div>
</div>
</div>
</div>
has far too many end divs and no start divs. It should be like this:
<div><a href="pics.html" id="img1"></a>
</div>
<div>
<a href="services.html" id="img2"></a>
</div>
<div>
<a href="store.html" id="img4"></a>
</div>
<div>
<a href="media.html" id="img5"></a>
</div>
</div>
<div>
<a href="services.html" id="img2"></a>
</div>
<div>
<a href="store.html" id="img4"></a>
</div>
<div>
<a href="media.html" id="img5"></a>
</div>
You will also notice that I have removed the '<div' in front of the id's. When used like this, it's the anchor, the 'a', that takes the id.
After I corrected that code, though, the small logo image in the heading went off center and is partly hiding underneath the two left 'cloudy' buttons. I haven't had time to look at that yet, but I don't know... If I were you, I would not use all that absolute positioning, rather create a containing div, float the contents and give them some padding, so that they stay with a bit of distance from each other.
I think I would recommend you to clean up the code a bit, then it seems to me that you have a mix of old and new styles/code.
And then what Eric said about cleaning up the edges of some of the objects. I'd recommend the same for the text on the cloud buttons. It's easy if you have Photoshop or another good image editing software, or, you could put the text directly on top of the clouds, which are background images anyway. The best would actually be if the site owner, Craid Judd, would create those buttons+text for you and you would just bang them in.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Try this for the 4 clouds:
Note the lines in bold.
And then in the default.css set the margins to auto for the #logoTxt. Then you should get the top of the pages centered. Never mind those white stripes, they are just borders that I created to see how wide the body is. That way it's easier to see what you are doing.
#img1
{
background: url(gall.png) top right no-repeat;
position: absolute;
top: 0px;
right: 40px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
#img2
{
background: url(services.png) top right no-repeat;
position: absolute;
top: 0px;
right: -210px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
#img4
{
background: url(store4.png) top right no-repeat;
position: absolute;
top: 0px;
left: 15px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
#img5
{
background: url(media3.png) top right no-repeat;
position: absolute;
top: 0px;
left: -235px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
{
background: url(gall.png) top right no-repeat;
position: absolute;
top: 0px;
right: 40px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
#img2
{
background: url(services.png) top right no-repeat;
position: absolute;
top: 0px;
right: -210px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
#img4
{
background: url(store4.png) top right no-repeat;
position: absolute;
top: 0px;
left: 15px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
#img5
{
background: url(media3.png) top right no-repeat;
position: absolute;
top: 0px;
left: -235px;
width: 225px;
height: 215px;
border: none;
padding-bottom: 0px;
}
Note the lines in bold.
And then in the default.css set the margins to auto for the #logoTxt. Then you should get the top of the pages centered. Never mind those white stripes, they are just borders that I created to see how wide the body is. That way it's easier to see what you are doing.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Ooops, forgot to attach an image...
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
I think a little z-index will be needed on those button images.
You can get two links mixed up.
Or trim the div down to 197 high but then their still close.

Or trim the div down to 197 high but then their still close.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
lol, thanks guys I got it working perfectly, I just need to adjust the banner in the css, and probably a z-index will be used for the coding as well. I appreciate you guys helping me. Thanks !!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.