help needed with layout (and adsense)

remo · Aug 15th, 2006, 11:52

Hello All,

Its my first post but I came across this site the other and liked it so much have decided to sign up

I was wondering can anyone help me, this might end up being a CSS question but as dont know my way round CSS that, hopefully it can be solved by HTML.

So to explain, on my site I am looking to run my own "Adsense Style Ads"

So for a skyscrapers I have made a template which is 4 text boxes with ads displayed like adsense. And of course at the bottom of the Ad I have "Ads by Remo"

I did not have to built a java script ad and call the JS file to control the look and feel, as I use an adserver so I can make sure the ads are targeted by the users own language. So all I have done is build a test ad in HTML, with the colors of my site and correct sized boxes and uploaded it to my adserver, and that works without a problem

To get it more in line with the color scheme of my site I want to customise the click through urls. Like ad sense it has a title which is clickable, discrip and then display url which is clickable again

What I would like to do is be able to set the clickable title to X color, display URL to another and lastly "Ads By" to another.

Does anyone have any suggestions what I can do to change the colors?

Any help really appreciated

Remo

snow · Aug 15th, 2006, 12:13

That is indeed a CSS question, could you show us the relevant HTML code?

remo · Aug 15th, 2006, 14:14

I thought it might be, heres the code but as you can see its just a HTML table with no CSS.

I know its an easy thing to fix but the person who would normally do it has decided he should be on two weeks holiday

Here it is

Code: Select all

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Adobe GoLive" />
        <title>new-ad-format</title>
    </head>

    <body>

        <table width="120" border="0" cellspacing="2" cellpadding="0" align="left" bgcolor="#b4c2ef" height="600">
            
            <tr bgcolor="#ee0e0e" height="145">
                <td bgcolor="white" width="110" height="145">
                    <p align="left"><font size="-1" color="#61874f" face="serif"><a href="http://www.test.com">Blah Blah Blah</a></font><font size="-1" face="serif"><a href="(EmptyReference!)"> </a></font><font face="serif"><br />
                        </font><font size="-1" face="serif">This is the reason you should click the links below</font><font face="serif"><br />
                        </font><font size="-1" face="serif"><a href="http://www.test.com">http://www.test.com</a></font></p>
                </td>

            </tr>
            <tr bgcolor="#ee0e0e" height="145">
                <td bgcolor="white" width="110" height="145">
                    <p align="left"><font size="-1" color="#61874f" face="serif"><a href="http://www.test.com">Blah Blah Blah</a></font><font size="-1" face="serif"><a href="(EmptyReference!)"> </a></font><font face="serif"><br />
                        </font><font size="-1" face="serif">This is the reason you should click the links below</font><font face="serif"><br />
                        </font><font size="-1" face="serif"><a href="http://www.test.com">http://www.test.com</a></font></p>
                </td>

            </tr>
            <tr bgcolor="#ee0e0e" height="145">
                <td bgcolor="white" width="110" height="145"><font size="-1" color="#61874f" face="serif"><a href="http://www.test.com">Blah Blah Blah</a></font><font size="-1" face="serif"><a href="(EmptyReference!)"> </a></font><font face="serif"><br />
                    </font><font size="-1" face="serif">This is the reason you should click the links below</font><font face="serif"><br />
                    </font><font size="-1" face="serif"><a href="http://www.test.com">http://www.test.com</a></font></td>
            </tr>
            <tr bgcolor="#ee0e0e" height="145">

                <td bgcolor="white" width="110" height="145"><font size="-1" color="#61874f" face="serif"><a href="http://www.test.com">Blah Blah Blah</a></font><font size="-1" face="serif"><a href="(EmptyReference!)"> </a></font><font face="serif"><br />
                    </font><font size="-1" face="serif">This is the reason you should click the links below</font><font face="serif"><br />
                    </font><font size="-1" face="serif"><a href="http://www.test.com">http://www.test.com</a></font></td>
            </tr>
            <tr bgcolor="#ee0e0e" height="19">
                <td bgcolor="#b4c2ef" width="110" height="19">
                    <div align="right">
                        <a href="http://www.test.com"><font size="-2" face="serif">Ads By Remo</font></a></div>
                </td>
            </tr>
        </table>
        <p></p>
    </body>

</html>

snow · Aug 15th, 2006, 15:02

hmm, well that's a nasty mess if ever I saw one! If you generated the code then you're probably not wanting to hear this, but all those things dictating style should be in a style sheet. (I'm not quite sure what it is you're displaying - the tables could be the right tool for the job).

Look out some css tutorials to get that sorted, but I'll give you a bit of a heads up incase you're really lost here.

1) Make a new notepad file save it as a css file (i.e. call it 'ad.css' or 'something.css')

2) In your HTML tags where you have those style attributes (i.e. 'bgcolor="ee0e0e') instead use classes (i.e. 'class="someClassName"') where there are lots of tags needing the same style or IDs (i.e. 'id="someIdName") where there is only one tag needing the style.

3) Add a link into the head of the document to that css file you made.

I've done the current html code for you with steps 2 & 3:

Code: Select all

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Adobe GoLive" />
        <title>new-ad-format</title>
        <link rel="stylesheet" type="text/css" href="something.css"
    </head>

    <body>

        <table id="adsTable">
            
            <tr>
                <td>
                    <a href="http://www.test.com">Blah Blah Blah
                    <a href="(EmptyReference!)"></a>
                    This is the reason you should click the links 
below
                    <a href="http://www.test.com">http://www.test.com</a>
                </td>
            </tr>

            <tr>
                <td>
                   <a href="http://www.test.com">Blah Blah Blah</a>
                   <a href="(EmptyReference!)"></a>
                   This is the reason you should click the links below
                    <a href="http://www.test.com">http://www.test.com</a>    
               </td>
            </tr>

            <tr>
                <td><a href="http://www.test.com">Blah Blah Blah</a>
                 <a href="(EmptyReference!)"> 
                 This is the reason you should click the links below
                  <a href="http://www.test.com">http://www.test.com</a></td>
            </tr>

            <tr>
                <td><a href="http://www.test.com">Blah Blah Blah</a><a href="(EmptyReference!)"></a>
                 This is the reason you should click the links below
                 <a href="http://www.test.com">http://www.test.com</a></td>
            </tr>
            <tr class="diffHeightTr">
                <td class="rightAlignedTd">
                        <a href="http://www.test.com" class="lastA">Ads By Remo</font></a>
                </td>
            </tr>
        </table>
        <p></p>
    </body>

</html>

And the css code:

Code: Select all

.adsTable {width:120px;
          height:600px;
          border:0
          cellspacing:2;
          cellpadding:0;
          align:left;
          background-color:#B4C2EF;
          font:-1 serif;
          color:#61874f;}
.adsTable tr {background-color:#ee0e0e;
              height:145px;}
.adsTable td {align:left;
              background-color:white;
              width:110px;
              height:145px;}
.adsTable a {display:block;
             margin-bottom:3px;}
.adsTable .diffHeightTr {height:19px;}
.adsTable .rightAlignedTd {align:right;}
.adsTable .lastA {font:-2 serif;}

gotta go, couldn't check it sorry, I'll explain it when I get back

Snow

remo · Aug 15th, 2006, 15:08

of course its a mess I created it

- as you can probably guess I generally leave that side up to someone else.

Thanks for the pointers, I want to get this done right but I am also using it as a distraction as its not overly urgent, for some unknown reason since yesterday I have decided to become slightly obsessive about it

Oh well

snow · Aug 15th, 2006, 18:53

Hey hey,

I didn't have time to test the code that I wrote earlier, but it should bring up something similar to what you were getting before if you follow the instructions? Hopefully in a slightly more standards compliant way

For adding the extra styles you initially wanted (I hope I'm getting your request right! I wasn't exactly sure!) then you need to add extra 'Class'es or 'Id's where you want the specific styling to go.

To style an element in the CSS has quite a lot to it, you may want to look up a tutorial, but I'll give you the basics anyhow...

You can style any tag by writing its generic name into the CSS, so:

Code: Select all

td {color:red;}
body{background-color:black;}

would change all the text in all the tds on the page to red and the background colour to black.

You can style a specific tag(/s) that has a class or id, by putting either a '.' for classes, or a '#' for ids in the css:

Code: Select all

 
.someClass {margin-left:20px;}
#someId {width:50%;
              background-color:yellow;}

Would change all components with the attribute 'class=someClass', so that they would all get a 20px gap at the left side. And the #someId, would change the component that had 'id=someId' in their tag so that they took up 50% of the screen. It would also make the background color yellow - even if this was in the same style-sheet as the declaration making the background-color black. Styles are inherited by the child components, but they can be over-written, that's why it's called cascading!

You can also mess about with the parent child relationship:

Code: Select all

 
td .someClass {padding:4px}
.someClass td {border:solid 2px black}

For the first one all components of the class 'someclass' inside a td element gets some padding. With the second all tds in a component with the class 'someclass' get a solid black border.

Oh, and:

Code: Select all

A:link {}
A:visited {}
A:active {}
A:hover {}

Will probably come in handy for what you're needing!

I really hope I got the right end of the stick about what you wanted!

Best of luck,
Snow

remo · Aug 16th, 2006, 11:46

Snow you have been a great help in finally getting me to look at CSS properly

Looking at what you have done you have essentially done everything that is needed, but as you can guess from my initial questions I no diddley squat about how to code CSS but undertstand the logic in how it works

I am new to this forum so hope I am not breaking any rules, but maybe I can strike a deal - you have done most of what needs to be done, if you have a paypal a/c I will prepay you to finish it my email is devilfish06@googlemail.com

Yes it is a case of laziness for this part, but ultimately what I want is get this done (as to stop obsessing about it) but then your pointers and go off and start reading some CSS tutorials as I probably should be shot or at least mildly stoned by the city gates for not getting off my ass previously and learning what I should need to know

moojoo · Aug 16th, 2006, 12:51

Can you send me some $$ too? I have a craving for some soft tacos and heineken. But in all seriousness it is less complicated than you think..

CSS is the act of keepig your design away from your content. and you use "calls" to do so for example in a CSS sheet you would put:

#foo {
font-weight:bold;
}

then in your HTML:

<div id="foo">Some Text Here</div>

remo · Aug 19th, 2006, 07:59

I know its less complicated than I think and I have to say Snow is a star as fixed it for me.

Its kind of stupid as I am reasonably good with HTML so should be able to do it. Im self taught and get someone else who works with me normally fix these problems, I just need to understand the logic and once I saw what snow did, I was actually was able to design a CSS file and adapt it for someone else, so hopefully less "please help me" posts

So get off my ass and actually do CSS has finally happened