£10/£20 for a little css work.

[Martin_Man]

Hey, I overwrote the css style to my site and big mistake I never made a back up copy. Things got messed up from then on and now I can't get it back to the way it was. So I’m looking for someone who can quickly fix my css file to my site and I’ll pay them £10 through PayPal as I can’t stand any more head aches. I'm not an expert at this so it would be nice to let someone with a bit more experience then me to just give it a brush over quickly.

I’ll send you the css and just correct what you think is right. I’ll give you some details of which I want doing and then what you can do is go onto my site and click source to check the html.

Things I need done:

1, When clicking on different links, the every-occasional-videos logo always changes position. Which can get very confusing so I think the position needs to be changed?
2, The tables in the blog section are too big and need flattening down a bit so it fits snazzy to the text.
3, The text which displays the page your on also changes position all the time, so they must all stay in the same place so it doesn't confuse the eye.
And
4, the last 1 is to just change the text to what you think would be good for the eye as I can’t find the right one.

Apart from that I want to keep the colour and background pretty much like that.

Is there anything else you need?

Am I asking for to much? If so, I’ll pay £20.

Thanks martin

www.every-occasional-videos.co.uk

body{
	background-color: #262626;
	text-align: center;
}
A:link {
	font-family: Verdana, Geneva, sans-serif;
	font-size: x-small;
	color: #FFF;
	text-decoration: none;
}
A:visited {
	font-family: Verdana, Geneva, sans-serif;
	font-size: x-small;
	color: #FFF;
	text-decoration: none;
}
A:active {
	font-family: Verdana, Geneva, sans-serif;
	font-size: x-small;
	color: #FFF;
	text-decoration: none;
}
A:hover {
	font-family: Verdana, Geneva, sans-serif;
	font-size: x-small;
	color: #666;
	text-decoration: none;
}

/*Banner*/
div#banner {
	background-image: url(images/banner.jpg);
	height: 100px;
	width: 468px;
}

/*center*/

div.stage1{

}

div.stage2 {
	width: 468px;
	margin-top: 30px;
}

/*bottom*/

div#bottom {
	background-image: url(images/bottom.jpg);
	width: 468px;
	height: 30px;
}

div#copy {
	width: 468px;
}

div#news1 {
	width: 468px;
	vertical-align: bottom;
	} 
	div#news2 {
	width: 468px;
	background-color: #333;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: dotted;
	border-right-style: none;
	border-bottom-style: dotted;
	border-left-style: none;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
	}
	div#news3 {
	width: 468px;
	background-color: #262626;
	text-align: right;
	vertical-align: top;
	}

/*text*/
h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	text-align: center;
}

h2
{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #F90;
	text-align: left;
}

h3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: x-small;
	color: #FFF;
	text-align: left;
}

h4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #F90;
	text-align: center;
}

p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	font-style: italic;
	color: #F90;
	vertical-align: top;
}

 

[PMWD]

1. I think it's moving from page to page because some pages are long enough to require a scroll bar and some aren't. Only way to fix it really is to create an outer div round the whole content with a minimum height set for it to force the scroll for each page.

2. Just get rid of the <br />'s that are sitting between the divs. BTW, multiple instances of divs should be used as classes and not id's.

3. Verdana is fine, Tahoma would be a good option also.

 

[Martin_Man]

1. I think it's moving from page to page because some pages are long enough to require a scroll bar and some aren't. Only way to fix it really is to create an outer div round the whole content with a minimum height set for it to force the scroll for each page.

2. Just get rid of the <br />'s that are sitting between the divs. BTW, multiple instances of divs should be used as classes and not id's.

3. Verdana is fine, Tahoma would be a good option also.

ok, if this works then thank you! if not would you be able to help out? i want it to look nice. do you think its a possible to get rid of the scroll bar and have a javascript image scroller on on the side?

 

[Pho]

You should be able to fix page shift by adding to the top of your style.css:

html { min-height: 101%; margin-bottom: 1px; }

This always forces a vertical scrollbar to show, thus stopping the pages jumping when a page requires it.

 

[Martin_Man]

You should be able to fix page shift by adding to the top of your style.css:

html { min-height: 101%; margin-bottom: 1px; }

This always forces a vertical scrollbar to show, thus stopping the pages jumping when a page requires it.

wow that helps loads!!! your a money saver! thanks!

a few little things more could be done, sorry if i sound greedy. i still notice the tables in the blog are still a little thick for the text, could i change any of that by making it inline? also the video section bounces out of position a bit, i don't understand why either. i think it could be to do with the thickbox i have on there.

 

[Pho]

I'd do this.. replace style.css with this. What I've done is:

1. Added the line above at the top.
2. Added #container{ margin: 0 auto; width: 600px; } - this is a container we wrap around everything on your page to force it to be centred, and 600px wide (this helps keep all pages looking the same).
3. Removed the width from div.stage2 (it's not needed now).

Then, in all of your php files replace:

<center> (the one at the top of the page)

with

<div id="container">

and

</center> (the one at the bottom of the page)

with

</div>

<center> is depreciated (phased out, killed off ) and besides, we're doing the same thing using the #content CSS now.

i.e. http://pastebin.com/d3879f153 (if you use any PHP code in your page don't use this version because it won't contain it - but you can see what I've done).