Hi there,

 

I currently have a website that was designed for me, now looking to maintain the website myself and learn something.

 

My current home page index.html is set up so I have the main content centered, I have some written text and a designed prices box going vertical down the page, on either side I have a blank space on the left and right.

 

I wish to use the left and right blank spaces to put a ad banner on my site for affiliation, I tried adding some text to see if I could align it to the left but all it did was stay in line with the current text and would not go any further to the left to fill the empty space.

 

 

I believe that my designer has set up the page attributes with css stylesheets that control how the text / prices box is displayed..... I am just wandering if I need to add a new css attribute to add the banners to the left and right, I enclose the css style sheet that I think needs changing below.

 

 

* {

margin:0;

}

body, html {

height:100%;

text-align: center;

background-image: url(../images/bg2.gif);

background-repeat: repeat-x;

font-family: Arial, Helvetica, sans-serif;

}

#wrapper {

width:950px;

text-align: left;

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -200px;

}

#header {

height: 43px;

width: 950px;

margin:0 auto;

padding-top: 3px;

}

#logo {

background-image: url(../images/logo.gif);

height: 136px;

width: 950px;

margin: 0 auto;

text-align: left;

padding-top: 15px;

background-repeat: no-repeat;

font-size: 14px;

font-family: Arial, Helvetica, sans-serif;

letter-spacing: 9px;

text-indent: 328px;

}

#body_copy {

width: 450px;

margin-left: 25px;

position: absolute;

}

#pricelist {

position: relative;

left: 475px;

top: 0px;

margin-bottom: -78px;

background-color: #0A1C55;

width: 450px;

}

#contentwrapper {

width: 950px;

text-align: left;

margin: 0 auto;

}

.push {

height: 200px;

}

#footer {

height: 200px;

color: #FFFFFF;

background-color: #000000;

}

#footerheader {

height: 78px;

background-image: url(../images/footer-shadow.jpg);

background-repeat: repeat-x;

}

#foot_info {

background-color: #003399;

height: 50px;

text-align: center;

}

#foot_info p {

font-size: 20px;

width: 950px;

margin:0 auto;

padding-left: 20px;

padding-top: 10px;

}

#footbase {

margin:0 auto;

padding-left: 35px;

padding-top: 0px;

width: 440px;

position: absolute;

text-align: left;

font-size: 12px;

line-height: 2;

}

#footerd {

width: 950px;

margin: 0 auto;

}

#affiliate {

width: 475px;

float: right;

margin-top: 5px;

}

#contentwrapper2 {

width: 900px;

text-align: left;

margin: 0 auto;

}

#contact {

margin-bottom: -78px;

position: relative;

}

#pricelist2 {

width: 450px;

position: absolute;

margin-left: 25px;

margin-bottom: -78px;

}

#computerimages {

background-image: url(../images/PC_images.jpg);

height: 148px;

width: 450px;

background-repeat: no-repeat;

}

ul#news /* Listen */

 

img {

border: 1px solid #ccc;

padding: 4px;

margin-left: 30px;

}

ul#news li {

list-style-type: none;

margin-left: -30px;

}

#bestseller {

background-image: url(../images/bestseller-stamp.png);

height: 115px;

width: 115px;

background-color: #1039C4;

border: 0px;

}

#facebook a {

background-image: url(../images/Facebook_icon.png);

width: 30px;

height: 30px;

float: left;

margin-right: 10px;

display: block;

background-position: 0 0;

background-repeat: no-repeat;

}

#facebook a:hover {

background-image: url(../images/Facebook_icon.png);

background-position: 0px -30px;

background-repeat: no-repeat;

}

#twitter a {

background-image: url(../images/twitter_logo.png);

width: 30px;

height: 30px;

float: left;

background-position: 0 0;

}

#twitter a:hover {

background-image: url(../images/twitter_logo.png);

width: 30px;

height: 30px;

float: left;

background-position: 0 -30px;

}

 

 

 

 

So can I just add to this by editing it or do I need to use something else then crimson editor?

Without seeing your site I am assuming that when you view your site you see the main content of your site centered with white space to the left and right of the main content. Your designer has done this to enable your site to be viewed correctly in most browsers.

 

You could utilise that space but on certain resolutions it may force the user to scroll to see all your site.

 

Then again I may have compeletly misunderstood your question.

Hi Pat and thanks for your reply, your reply seems relevant to my question mate ..... I will see if I can take a screen grab of my website that shows the white space .... but yes the text and main content is centered

Here is a screen grab showing the page setup Pat

 

You could utilise that space, but as said it could cause visitors to your site having to scroll to see all of your site, as a test you could try this

 

#right {

float: left;

height: 400px;

width:50px;

}

 

In your html you would have to put something like this <div id="right"><p>your content here</p></div>

 

This would have to be outside your wrapper div in the html.

Thanks Pat, I will try that and get back to you ..... and I can just edit the file by downloading via ftp which I have done then using notepad+ crimson to edit those fields yeh?

 

thanks Jay

Thanks Pat, I will try that and get back to you ..... and I can just edit the file by downloading via ftp which I have done then using notepad+ crimson to edit those fields yeh?

 

thanks Jay

 

should be ok, just back up the files before changing

ok thanks Pat...... only question I need to ask, where do I add the new css value amongst the other values? also would I be better uploading the banner image to my images folder then adding it that way or just adding the http link?

ok thanks Pat...... only question I need to ask, where do I add the new css value amongst the other values? also would I be better uploading the banner image to my images folder then adding it that way or just adding the http link?

 

Yes just add the css I would add it before the #wrapper, I would upload the image after you check on the position of the new #right div

ok Pat,

 

so this is for the right hand side, so for the left do I need to add the same but with the opposite values?

ok Pat,

 

so this is for the right hand side, so for the left do I need to add the same but with the opposite values?

 

Yes but check the right works first, if you give me a link to your site I can check using firebug

ok pat,

 

did that but unsure if I put it in the correct place on the index.html file, end result as below.

 

Can I pm you my website through here?

 

ok pat,

 

did that but unsure if I put it in the correct place on the index.html file, end result as below.

 

Can I pm you my website through here?

 

Yes just pm the address

pm sent Pat.... cheers for your help, much appreciated

Hi Pat,

 

unless I am adding the html <div> wrong that you gave me then all it does when adding the new value is throw all the other text out on the page?

Hi Pat,

 

unless I am adding the html <div> that you gave me then all it does when adding the new value is throw all the other text out on the page?

 

Are you adding this after your <div id="wrapper">

 

<div id="right">ffffgg</div>

 

and adding width: 100% to #wrapper

Hi Pat,

 

have a quick look on the website to see how it is placed ..... I put it too far down chucking everything out!!! my fault lol

Hi Pat,

 

have a quick look on the website to see how it is placed ..... I put it too far down chucking everything out!!! my fault lol

 

Looks ok just needs some margin-left to bring it off the side, bear in mind though it may appear different in browsers using different reolutions

ok that is fine, I am adding a banner which will have my affiliate id etc ..... the next thing will be how best to insert this?

 

you have been a great help so far .... more then my old web design guy who would not even help with basic stuff so thanks for this Pat

ok that is fine, I am adding a banner which have my affiliate id etc ..... the next thing will be how best to insert this?

 

you have been a great help so far .... more then my old web design guy who would not even help with basic stuff so thanks for this Pat

 

No problem, what dimensions is your banner is it a gif, jpeg

Try this

<div id="right"><img src="image/yourimage.jpg" /></div>

banners are vertical 123x600

 

like you say could do with coming out a little bit as pretty tight in the corner but at least I am in that white space thanks to you.

 

Got to pop out now but will you be around later?

 

thanks again for all your help, Jay

banners are vertical 123x600

 

like you say could do with coming out a little bit as pretty tight in the corner but at least I am in that white space thanks to you.

 

Got to pop out now but will you be around later?

 

thanks again for all your help, Jay

 

should be around most of the day

Hi pat still out and about but will be back after 6pm, I will then add the banner image and see how it displays, then will try the right handside, unsure what code I need to use if I upload the image and how it works with my affiliate id. Also will then look at bringing it inwards more with your help if ok? Thanks again.... Can't do anything at the moment as on the blackberry and doing jobs.