Please comment on my website

[purplepixie]

Hi all
i’ve just updated my website and would like to hear your comments about it.
I've changed the navigation so its easier to know which page the buttons link to and i've completely changed the portfolio page .. please let me know what you think xxx
Pix and Mix - Complete Business Start-up, Support & Website design & Graphics Service St Neots, cambridgeshire - home

[tommylogic]

looks ok so far.. I would clean up your XHTML and your CSS has an error too

Index page; I can see some artifacts behind the inactive text next to nav images.

Your Lightbox.. all the images should be grouped in galleries

gallery-name]" title="Claire Cruze Personal Website.">

That will allow navigation from within your lightbox.

[Toon]

Looks much better the gallery is a big improvement

[purplepixie]

Thanks for the advice guys i’m glad the sites looking better now i’ll put the gallery images in a group over the next few days and sort out the text on the home page like you’ve suggested
thanks for your comments
xxx

[purplepixie]

Hi again all
i've done some more changes to my site but am having problems with my lightbox gallery in the portfolio section, the PREV/NEXT buttons aren't showing up .. does anyone have any idea why
many thanks xxx

[PR Design]

Are they in the right places on your server?

[purplepixie]

Originally Posted by PR Design

Are they in the right places on your server?

yes i think so .. its the first time i've used lightbox and followed their instructions on how to do it .. if you click on the left or right side of the pictures the buttons work and change the picture but the PREV/NEXT text doesn't show up

[Toon]

I might be going blind, but it's been a really long day but I can't see you lightbox.css?

[purplepixie]

Originally Posted by Toon

I might be going blind, but it's been a really long day but I can't see you lightbox.css?

I copied and pasted the lightbox css in to my sites css sheet .. here it is for you to have a look at
#body {
background-color: #CC99CC;
margin: 0px;
padding: 0px;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: center;
background-repeat: repeat;
background-position: centre;
}
#container {
width: 760px;
background-repeat: no-repeat;
padding: 0px;
height: 900px;
background-image: url(assets/photos/backgroundmain.jpg);
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
text-align: center;
margin: 0px;
width: 100%;
float: left;
clear: both;
padding: 0px;
}

#nav {
text-align: left;
width: 60px;
padding: 0px;
clear: both;
float: left;
height: 375px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 65px;
margin-left: 28px;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav li {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
#nav a {
margin: 0px;
padding: 0px;
}
#content {
text-align: left;
float: left;
width: 630px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
height: auto;
font-size: 80%;
line-height: 135%;
font-weight: bold;
}
#content a {
color: #CC99CC;
text-decoration: underline;
}
#content h1 {
font-size: 115%;
font-weight: bold;
margin: 0px;
color: #CC99CC;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
}
#content h2 {
font-size: 100%;
color: #CC99CC;
}

#content li {
margin: 0px;
padding: 0px;
display: inline;
font-size: 105%;
}
#content ul {
padding: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #CC99CC;
}
#graphicbullets {
background-color: #660066;
padding: 3px;
margin-top: 10px;
margin-right: 255px;
margin-bottom: 0px;
margin-left: 0px;
font-size: 105%;
}
#graphicbullets ul {
margin: 0px;
padding: 0px;
}
#graphicbullets li {
margin: 0px;
padding: 0px;
color: #CC99CC;
}
#images {
margin: 0px;
padding: 0px;
}
#images ul {
display: inline;
margin: 0px;
padding: 0px;
text-align: left;
}
#images li {
margin: 0px;
padding: 0px;
}
#portfolio {
width: 530px;
height: 420px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 70px;
}
#portfolio p {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 5px;
}
#portfolio ul {
list-style-type: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#portfolio li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
display: inline;
}
#portfolio a {
margin: 0px;
padding: 7px;
}
#images img {
padding: 0px;
margin: 20px;
}
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
margin: 0px;
padding: 0px;
}
#lightbox img{
width: auto;
height: auto;
margin: 0px;
padding: 0px;
}
#lightbox a img{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
padding: 0px;
}
#outerImageContainer{
position: relative;
background-color: #fff;
width: 240px;
height: 240px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#imageContainer{
padding: 1px;
margin: 0px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
margin: 0px;
padding: 0px;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
margin: 0px;
padding: 0px;
}
#imageContainer>#hoverNav{
left: 0;
margin: 0px;
padding: 0px;
}
#hoverNav a{
outline: none;
margin: 0px;
padding: 0px;
}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
display: block;
margin: 0px;
padding: 0px;
}
#prevLink {
left: 0;
float: left;
margin: 0px;
padding: 0px;
}
#nextLink {
right: 0;
float: right;
margin: 0px;
padding: 0px;
}
#prevLink:hover, #prevLink:visited:hover {
background: url(../images/prevlabel.gif) left 15% no-repeat;
margin: 0px;
padding: 0px;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(../images/nextlabel.gif) right 15% no-repeat;
margin: 0px;
padding: 0px;
}
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
line-height: 1em;
overflow: auto;
width: 100%;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#imageData{
color: #666;
margin: 0px;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
}
#imageData #imageDetails{
width: 70%;
float: left;
text-align: left;
margin: 0px;
padding: 0px;
}
#imageData #caption{
font-weight: bold;
margin: 0px;
padding: 0px;
}
#imageData #numberDisplay{
display: block;
clear: left;
padding-bottom: 1em;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#imageData #bottomNavClose{
width: 66px;
float: right;
padding-bottom: 0.7em;
outline: none;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
margin: 0px;
padding: 0px;
}
#footer {
height: 50px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
width: 750px;
top: 635px;
}
#footer p {
font-size: 70%;
text-align: left;
padding: 0px;
margin-top: 5px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 17px;
}
#footer ul {
text-align: left;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 15px;
list-style-type: none;
}
#footer li {
display: inline;
padding: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
#footer a:link, #footer a:visited {
font-size: 70%;
color: #FFCC66;
text-decoration: underline;
margin: 0px;
padding: 0px;
}
#footer a:hover, #footer a:active {
font-size: 70%;
color: #CC99CC;
text-decoration: underline;
margin: 0px;
padding: 0px;
}
.clearfloat {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
margin: 0px;
padding: 0px;
}

[Toon]

Images aren't in the correct place....

http://www.pixandmix.org.uk/images/prevlabel.gif