15 replies [Last post]
dotancohen
Offline
Regular
Haifa
Last seen: 14 years 1 week ago
Haifa
Joined: 2007-05-26
Posts: 29
Points: 0

Hi all, first post.
On http://what-is-what.com I have added Adsense advertisements to the articles. Most articles are three paragraphs, and the first ad is at the top left of the article, like so:

AD AD text text text
AD AD text text text
AD AD text text text
text text text text
text text text text

text text text text
text text text text
text text text text
text text text text
text text text text

text text text text
text text text text
text text text text
text text text text
text text text text

So far so good. Now, I'd like to add a second advertisement in the opposite diagnal corner (bottom right) like so:

AD AD text text text
AD AD text text text
AD AD text text text
text text text text
text text text text

text text text text
text text text text
text text text text
text text text text
text text text text

text text text text
text text text text
text text text text
text text text AD AD
text text text AD AD
text text text AD AD

The first ad is in a span with this style:

display:block;float:left;margin:0px 20px 20px 0px;

What must the style be for the second ad? Doing the obvious and changing the "float:left" to "float:right" did no work. Smile

Thanks in advance for any ideas and solutions.

Dotan Cohen

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Have a question: What is?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Like music? Song Lyrics

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hi Dotan,

Hi Dotan,

You're making things harder on yourself by styling piecemeal. The ads should simply be in the left column styling context. IOW, make a left column, and put things in it. See my 2 column demo. The same with the lower right ads, depending on whether they're in a third, right hand column or at the bottom of the main content column. See the lower left Firefox link in my html and css playpen.

It would help if you were to put the code for the ads in a test page and link it. It's hard to style what isn't there. Smile

//edit: Ignore most of this. I should have read the post more closely. You might change the link to point to an article rather than the index page. --g

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dotancohen
Offline
Regular
Haifa
Last seen: 14 years 1 week ago
Haifa
Joined: 2007-05-26
Posts: 29
Points: 0

Here, I picked an

Here, I picked an appropriate page:
http://what-is-what.com/what_is/css.html

I'll rephrase the question: how does one wrap text around an image such that the image is at the bottom right/left of the paragraph instead of the top right/left?

Thanks.

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Have a question: What is?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Like music? Song Lyrics

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not as I think you want.

Not as I think you want. The float element aligns its top to the next line below whatever point it's injected. You could guesstimate a spot to put it, but it could not reach the bottom or it could go below the bottom of its parent.

An alternative would be to place it at the bottom of a third column. There would be no wrap,

I dummied up a page to illustrate both methods. View it at several window sizes to see the effects. (Speaking of which, were you aware of the breakage when your pages are viewed at 800

AttachmentSize
dotan-test.html.txt 6.64 KB
what-logo-500.gif 2.1 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dotancohen
Offline
Regular
Haifa
Last seen: 14 years 1 week ago
Haifa
Joined: 2007-05-26
Posts: 29
Points: 0

Thanks KK. Those links are

Thanks KK. Those links are 404ing.

I'm aware of page breakage in the past at that resolution, but I thought that I corrected that problem and that it was confined to IE6 anyway. What browser/OS are you using? What kind of breakage? Is a screenshot possible?

Thanks.

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Have a question: What is?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Like music? Song Lyrics

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Odd about the attachments.

Odd about the attachments. I'll paste the document below.

Without bothering with a screen cap, at any browser width less than 1024px, the right side of the page is clipped, without any scrolling; it's just lost.

This occurs in:
Iceweasel 2.0.0.3/Debian Etch;
Konqueror 3.5.5/Debian Etch;
Opera 9.21/Win;
Firefox2.0.0.3/Win;
IE6/Win.

Lynx doesn't care one way or the other. Wink

IE is well and truly a mess in other ways which I have no desire to study. Smile

Here's the markup.




Dotan Cohen Test



/**/









What is CSS



Free stuff for all. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur sollicitudin.
Suspendisse vitae velit.




Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce ut mi. Morbi lorem turpis, mollis eget, dignissim
a, rhoncus sit amet, nunc. Vestibulum ipsum sem,
condimentum eget, fermentum et, consequat sit amet, mi.
Nunc tortor. Morbi pellentesque, nulla nec tempus cursus,
leo nisl venenatis ipsum, quis volutpat nulla odio at
dui. Nam vel odio. Donec sit amet nisi eget eros aliquam
varius. Nulla a urna. Phasellus pulvinar pharetra diam.
Suspendisse eu libero nec felis condimentum volutpat.




Free stuff for all. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur sollicitudin.
Suspendisse vitae velit.




Cras adipiscing, neque vel laoreet sodales, sem mauris
nonummy augue, in commodo elit ipsum at sapien. Curabitur
faucibus sollicitudin leo. Aliquam erat volutpat. Nunc ut
elit at nisl laoreet porta. Donec leo mi, egestas ut,
posuere a, mattis non, elit. Integer convallis, eros ac
accumsan cursus, metus nulla consectetuer velit, et
varius leo tellus ut libero.







Bookmarks



  • Social

  • Network

  • Social

  • Network

  • Social

  • Network





Free stuff for all. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur sollicitudin.
Suspendisse vitae velit.



Free stuff for all. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur sollicitudin.
Suspendisse vitae velit.



Free stuff for all. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur sollicitudin.
Suspendisse vitae velit.






cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Gary wrote:Without bothering

Gary wrote:
Without bothering with a screen cap, at any browser width less than 1024px, the right side of the page is clipped, without any scrolling; it's just lost.

This is to what I refered on your 'site check' thread.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dotancohen
Offline
Regular
Haifa
Last seen: 14 years 1 week ago
Haifa
Joined: 2007-05-26
Posts: 29
Points: 0

Thanks, KK, I see it now.

Thanks, KK, I see it now. It's the bit of the table in the header. I'll get around to that next weekend. I may just wind up redesigning that bit.

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Have a question: What is?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Like music? Song Lyrics

dotancohen
Offline
Regular
Haifa
Last seen: 14 years 1 week ago
Haifa
Joined: 2007-05-26
Posts: 29
Points: 0

KK, I can't believe that you

KK, I can't believe that you just recoded my whole layout! That's a time-consuming way of making a point, but I do see where there is much room for improvement and where the improvements were made. Would you mind if I base a new layout on your code?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Have a question: What is?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Like music? Song Lyrics

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

dotancohen wrote:KK, I can't

dotancohen wrote:
KK, I can't believe that you just recoded my whole layout! That's a time-consuming way of making a point,…

Actually, I didn't, and it isn't. That's just a mock up, other than the banner/search part. The point was just to illustrate some choices you have with the ads, which is the reason for the third column. A layout done with contextual groupings like that is fairly trivial to code; or to alter. You'll want to view the DOM.

Feel free to use whatever you need. I suppose someday I'll put an article together on my not all that unique approach to making the layout work. Now that will be time consuming. Wink

cheers,

gary
--

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dotancohen
Offline
Regular
Haifa
Last seen: 14 years 1 week ago
Haifa
Joined: 2007-05-26
Posts: 29
Points: 0

Thanks. I've got a few

Thanks. I've got a few questions regarding the code, if I may. I'm trying to learn from it, as I'd like to be a bit self-sufficient.

html, body {
margin: 0;
padding: 0;
}

This I understand, to make the defaults the same on all browsers. I already do this.

body {
font: 84% verdana, helvetica, sans-serif;
line-height: 1.25;
color: black;
background: white url("/images/background.png") left top repeat-x;
}

Any particular reason for specifing the 84% font and the 1.25 line-height? I'd actually prefer to leave these at the user's preferences, as they don't affect the design and I'd assume that a user knows better than I do what he likes for himself.

p {
font-size: 1em;
margin: 1.25em 0 0;
}

The margin is a good idea, but again, why the font-size?

p + p {
margin-top: 0;
text-indent: 1.25em;
}

p + p? What is that? I've tried to google it, but that's not googleable!

#header {
}

Is there a reason that this is specified, even though it is blank?

#header form {
height: 80px;
margin: 0;
margin-left: 499px;
background: url("/images/underline.png")repeat-x;
}

The margin-left bit is brilliant! I'll be using that a lot!

* html #bodyblock { /*trigger hasLayout, alternate method*/
height: 1%;
}

This is a bit confusing, but I'm sure that I'm be able to google it. This is the star-hack, no? I feel that I should already know this, but as I've thus far avoided hacks, I've never learned it.

#bookmarks {
padding-bottom: 18em; /*makes some room for ads; adjust as needed*/
}

Why em? Should this not be in pixels, as the size of the ads does is a fixed size and does not change with font size?

#google1, #google2, #google3 {
font-size: .8em;
line-height: 1.1;
}

Why the line-height?

I very, very much appreciate your effort. There's quite a few methods in there that I like, and a lot of things that I can learn from.

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Have a question: What is?

. ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . ' . Like music? Song Lyrics

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

dotancohen wrote:Any

dotancohen wrote:
Any particular reason for specifing the 84% font and the 1.25 line-height? I'd actually prefer to leave these at the user's preferences, as they don't affect the design and I'd assume that a user knows better than I do what he likes for himself.

For decent cross-browser rendering and easy readability. Trust me, a larger line-height is beneficial to users, who by default probably have it set at 1 - anything higher makes the page MUCH easier to read.

Quote:
p + p? What is that? I've tried to google it, but that's not googleable!

IIRC it means the first paragraph following the first paragraph. If that made sense.

Quote:
#header {
}

Is there a reason that this is specified, even though it is blank?

Probably not, no Tongue

Quote:

* html #bodyblock { /*trigger hasLayout, alternate method*/
height: 1%;
}

This is a bit confusing, but I'm sure that I'm be able to google it. This is the star-hack, no? I feel that I should already know this, but as I've thus far avoided hacks, I've never learned it.

Googling "hasLayout" would be better Wink

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

+ is the adjacent sibling

+ is the adjacent sibling selector, it affects the second of two consecutive elements at the same level of nesting and is one of a select set of CSS2 selectors not selected for support in IE7 (or earlier).

e.g.

p + p, targets any paragraph following another paragraph.
h2 + p, would target any paragraph which immediately followed an h2.

For hasLayout, checkout the link in my signature.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

kk5st wrote:Iceweasel

kk5st wrote:
Iceweasel 2.0.0.3/Debian Etch;

Shock

/edit something new learned today!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Iceweasel , oh come on

Iceweasel , oh come on you're having a laugh!
edit/ blimey it's a complicated business OS development

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You've got questions, we've got a blank stare.

dotancohen wrote:
Thanks. I've got a few questions regarding the code if I may. <snip>
body {
font: 84% verdana, helvetica, sans-serif;
line-height: 1.25;
color: black;
background: white url("/images/background.png") left top repeat-x;
}

Any particular reason for specifing the 84% font and the 1.25 line-height? I'd actually prefer to leave these at the user's preferences, as they don't affect the design and I'd assume that a user knows better than I do what he likes for himself.
I had it my mind that you had a smaller than default font, so I did it to loosely match. 100% font size would be my preference, too.

The line height is to improve readability. The smidgen increase over the usual default 1.2 forces rounding up, thus a default 20px instead of 19. It also has other advantages should you try to closely follow good typographic style.

Quote:
p {
font-size: 1em;
margin: 1.25em 0 0;
}

The margin is a good idea, but again, why the font-size?
It explicitly sets the text size to the inherited value. It is implicit, but stating it makes it lucid.

Quote:
p + p {
margin-top: 0;
text-indent: 1.25em;
}

p + p? What is that? I've tried to google it, but that's not googleable!
This is the immediate sibling selector. It says that a <p> that is the next element after another <p> gets these rules. In particular, the rules remove the margin between this paragraph and the previous one, and indent this one. They are based on Robert Bringhurst’s book The Elements of Typographic Style, §2.3 Blocks and Paragraphs. The sibling selector won't work for IE, but it won't matter; it'll just fall back to the normal block paragraph presentation.

Quote:
#header {
}

Is there a reason that this is specified, even though it is blank?
Since #header is a major layout element, I feel it should have its ordered place in the stylesheet, even if it has no rulesets of its own. After all, you might decide differently at some later time.

Quote:
<snip>
* html #bodyblock { /*trigger hasLayout, alternate method*/
height: 1%;
}

This is a bit confusing, but I'm sure that I'm be able to google it. This is the star-hack, no? I feel that I should already know this, but as I've thus far avoided hacks, I've never learned it.
True. It's used here because IE requires that the positional reference for AP elements not just have position (which is sufficient for the specs, and for modern browsers), but also have hasLayout. The {overflow: hidden;} triggers hasLayout in IE7, but not in IE6. So, we add the Holly Hack to trigger it. In other cases, I used Claire Campbell's Tripswitch hack.

Quote:
#bookmarks {
padding-bottom: 18em; /*makes some room for ads; adjust as needed*/
}

Why em? Should this not be in pixels, as the size of the ads does is a fixed size and does not change with font size?
Oh?

Quote:
#google1, #google2, #google3 {
font-size: .8em;
line-height: 1.1;
}

Why the line-height?
I was simply trying to compact the ads a bit to differentiate them from regular content. It's not necessary.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.