Need a CSS guru...

Factual Questions
1

I am redesigning my site, and doing a lot of it with CSS (big step!!!).

I want to put Google ads in my articles, and what I’m trying to do is this:

I want to use the 200x200 ad, and have it over on the right side of the page, not at the very top (like maybe down 500 pixels from the top) and have the article text wrap around that. I’m guessing this will involve wrapping the ads in a div of some sort, but how to do the style? Foggiest <–what I don’t have
I may have other CSS questions as well as I go through this…

2

Wrap the ad block in its own DIV and make sure that DIV is placed as a float: right; attribute.

Such as




div#adblock {
  float: right;
  margin: 10px 0 10px 10px;
  width: 200px;
  }

The margins should help you separate the ad block from the content.

3

Thanks :slight_smile: That did part of it! The thing is, now I need to position it vertically. You see I can’t just insert it into the articles, because I’m putting it into a template, not putting it individually into each article. I don’t want it either at the beginning or at the end–I want it somewhere in the middle. However, the template structure I am working with is like this:

<txp:zem_prblock target="_blank" rel=“external”>
<span class=“x-small”><txp:etz_pg_if_paginated><txp:etz_pg_if_not_start>(cont’d)</txp:etz_pg_if_not_start></txp:etz_pg_if_paginated></span>
(Here is where it puts in the article)
<txp:etz_pg_body />
(Here is where it puts in the ad)
<txp:output_form form=“google200x200ad” />
</txp:zem_prblock>
<span class=“x-small”><txp:etz_pg_if_paginated><txp:etz_pg_if_not_end>continued:</txp:etz_pg_if_not_end></txp:etz_pg_if_paginated></span>
<txp:etz_pg_pages noextremes=“1” />

So I need for it to show up midway down the page, on the right, with the article text wrapping around it, but the actual source code has to have the ad div inserted either wholly before or wholly after the article text.

Ideas?

(edited to disable smilies. Man did that look weird!)

4

Use CSS positioning. More info here: CSS Layout - The position Property

5

That was the first thing I tried, but the problem is the text didn’t wrap around it, the ad just sat on top of the article, blocking the words.

6

You should also put your content in a div and float that to the left. Post a link to your site so we can have a look-see.

Oh, and tell us what browsers you are testing it with.

7

OK, now that we have more information, things are clearer, and muddied at the same time.

Lush Puppy’s suggestion for a URL to view a test page is in order. What sort of pre-defined template are you using? I was assuming you were starting from scratch and not a pre-defined template (well, it certainly looks like it from the obfuscated code!).

If you don’t insert the adblock into the article, any positioning you do with the adblock on its own (absolute or relative) will cause the adblock to appear sitting on top or (or underneath) the article text.

(You might have to rework the template.)

8

Which CSS? The CSS Virginia, the CSS Alabama, or another Confederate States Ship? :smiley:

9

I’m switching my website from static pages to a database system that renders the pages according to templates that you create. The software I’m using is a “blogging” software called Textpattern, and the markup in the templates is all proprietary Textpattern tags (and tags created by plugins for Textpattern–such as the etz_pg plugin for breaking articles into multiple pages).

Right now the test site is up at http://test.opalcat.com but I don’t have the ad mentioned in the OP activated in the template at the moment. Will play with it again tonight.

10

…and yes, I’m aware of the stray “<” that is appended to the end of each article… I’m in the process of tracking it down in the templates.

The templates, btw, are broken down into two types, pages and forms. Forms are bits that can be inserted into pages. The tag “<txp:output_form form=“google200x200ad” />” for example, spits out the code that is contained in the form “google200x200ad”. This way you can create everything in bits and then assemble and reassemble them how you want for any given need.

11

And therein may be the answer.

I went to the TextPattern web site for a bit of background information. It appears you may have success if your adblock DIV is actually a plugin. That way you should be able to insert that particular plugin into any article you choose.

12

A couple of days ago I did a search of their plugin site (textpattern.org) for “google” and didn’t see one…

13

You probably would have to create your own. I belive the site lists the code you can use.

14

Plugins are written in php. I wouldn’t have the foggiest clue how to do that.

15

Ok I have a different CSS question now.

Here is an example page from my test site: http://test.opalcat.com/Personal/the-candy-corn-incident

If you look at it (under Windows) in Firefox, the left nav bar looks ok. If you look at it in IE there are little strips of the “scroll” background from the menus showing underneath each menu. I have fought with this for two weeks and can’t figure out why it is there.

Also the word “Comment” at the bottom of the article, in the ribbon… I got it to line up right in IE using padding: 11px 0px 0px 0px; but that made it too low in Firefox… I made that line in the style sheet apply only to IE, and have been playing with the corresponding line in the regular part of the stylesheet, but I can’t move it. I need to nudge it up. padding: -10px 0px 0px 0px; didn’t do anything. I tried giving it a positive bottom padding… that didn’t help… :confused:

16

Looking at your source code, you’ve got multiple divs with identical “id” attribute values. For instance, you’ve got two divs both called “leftmenutitle” and each is followed by a div called “leftmenu”. Using the same id attribute value more than once on a page is a no-no (the point of the id attribute is to uniquely identify elements), and might be causing some unpredictable behavior in the browser. I’d try changing that first and see if the problem goes away.