By eileen on

I'm feeling especially stupid tonight. Why (oh why!) can't I get my text to wrap around my avatars? I need help.

Here's my node.tpl.php file, and I think (?) it's ok, so does anyone know if I need to alter any other files to make this work? I'm using gespaa theme, see below.

<div class="entry<?php print ($sticky) ? " sticky" : ""; ?>"> 
<?php if ($page == 0): ?>
<h3 class="entrytitle"><a href="<?php print $node_url ?>" rel="bookmark" title="Permanent Link to <?php print $title ?>"><?php print $title ?></a></h3>
<?php endif; ?>
<div class="entrybody">
<strong><?php print $submitted ?></strong>
<?php if ($picture): ?>
<div class="picture" align="left">
<?php print $picture ?>
</div>
<?php endif; ?> 
<?php print $content ?>
<?php if ($links): ?> 
<img src="http://www.thewordslinger.org/wordslinger_callout.png" title="file" alt="*" />&nbsp;<?php print $links ?> »</p> 
<?php endif; ?>
</div>
</div>

I've tried all the following (unsuccessful) additions to my gespaa theme, in the style.css:

.node .picture {
float: left;
margin: 5px;
}

#main .picture {
float: left;
margin-left: 5px;
}

.picture img {
float:left;
}
⋅ Categories: Drupal 4.6.x

Comments

uzbekjon’s picture

uzbekjon commented

Hi Eileen,

Try to change:
#main .picture
to:
.picture

I c no other reason...

---------------------------------
Uzbek Lyrics Database - http://lyrics.boo.uz
Uzbekistan Forum - http://www.uzforum.com

eileen’s picture

eileen commented

Thanks for trying, but it didn't change anything. I'm guessing there's code somewhere writing over the css? What about in the blog or comment modules? Or what about the "picture" module itself? Would this override the css or node.tpl.php? What should I be looking for? Gespaa doesn't have pictures coded already, so perhaps it's just that I'm not finding the right code to add?

So clueless,
Eileen

eileen’s picture

eileen commented

I've hacked into other themes and found a script that almost works - it needs some tweaking because it creates an unsightly gap under the avatar, but at least the text is now wrapping around the picture. I can't believe how hard this is - I've put in another 20 hours!

Here's the node.tpl.php code that's "working," for gespaa, stolen in part from the "friends electric" theme. I hope it helps somebody else ....

<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
  <?php if ($page == 0): ?>
    <h3 class="entrytitle"> <a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
  <?php endif; ?>
<?php if ($submitted): ?>
    <div class="info"><?php print format_name($node) . ' – ' . str_replace('-', ' – ', format_date($node->created)) ?></div>
  <?php endif; ?>
   <div class="content">
  <?php print $picture ?> 
    <?php print $content ?>
  </div>
  <?php if ($picture): ?>
    <span class="clear"></span>
  <?php endif; ?>  
  <?php if ($terms): ?>
    <div class="terms"><?php print $terms ?></div>
  <?php endif; ?>
<?php if ($links): ?> 
<img src="http://www.thewordslinger.org/wordslinger_callout.png" title="file" alt="*" />&nbsp;<?php print $links ?> »</p> 
<?php endif; ?>
</div>
eileen’s picture

eileen commented

If you put the above code into your node.tpl.php in the theme blix, the avatars float where they should!

Happy happy joy joy!

(note: delete this line: Only local images are allowed.  )

ergophobe’s picture

ergophobe commented

Your initial version at least was not creating valid code. You have unmatched tags (a "

" with no "

" that I could find). You're also using the "align" attribute in a DIV, which is deprecated in HTML 4.01 and not supported in XHTML 1.0. I'm not sure if any of those things would affect your floats, but as a first step, validate your page. That can eliminate a lot of headaches.

More importantly, there are many other things that could be going on in the original. If "content" has a defined width > what's left after the avatar, for example, it will not float the text around it. It's hard to know without the fully generated HTML. The best way to deal with CSS issues is to bring up a sample page, save it as HTML and tweak from there. Get rid of elements one at a time until you solve the problem, then build it back up, always testing in all target browsers after every change.

Yosemite Explorer - hiking and climbing in Yosemite (drupal)

eileen’s picture

eileen commented

I'm a flash developer/designer, so this css and php is making me feel like an idiot. I've been reading tutorials, but truth is, I need a few classes to get up to speed. I appreciate your help -- you're the first person who has made sense to me thus far. You should teach :)

One thing I really don't get is how the php calls the css -- it seems that the php "class" doesn't always appear verbatim in the css. In flash actionscript this would never work - the code must match the variables exactly. How do I know what snippet of css is controlling the avatars if the php doesn't define a class?

Eileen

ergophobe’s picture

ergophobe commented

Sorry about the missing tags. I meant that the "p" tag was unmatched. I forgot that the HTML would not show. I'm used to forums that just show code by default.

Anyway, that's not really how CSS and PHP interact. What you're calling a PHP class is not a PHP class at all (that's a whole different thing). You have to understand that you can't really make that sort of analogy between Flash on the one hand and PHP + CSS + HTML on the other hand. Remember this: NO PHP GETS SENT TO THE BROWSER. In other words, your browser knows whether a page is HTML or Flash or text or XML, but it does not have any idea whatsoever whether that page was generated by PHP, Python, PERL, C++, Java, or Scheme (unless you send headers to the browser, but in fact no browser that I know of actually does anything with that information. By default PHP sends a header that looks something like "X-Powered-By: PHP/4.4.4-pl6-gentoo" but it can be suppressed)

Drupal is fairly complex and any given element of a template may or may not get put on a page when you have it enclosed in an "if". That's why when you are debugging an HTML+CSS layout, it makes the most sense to save the generated page as an HTML file and debug from there, where you can easily get rid of parts in a text editor and knock it down to the simplest case, and then build it back up from there.

Yosemite Explorer - hiking and climbing in Yosemite (drupal)

sepeck’s picture

sepeck commented

Drupal filters assume nothing. You could write a filter for that probably but unless you do, Drupal assumes that your content must obey the the input format rules you allow people to post in.

Per the example in the 'collapsed' input format 

Allowed HTML tags: <h1> <h2> <h3> <h4> <h5> <h6> <em> <strong> <code> <del> <blockquote> <q> <sub> <p> <br> <pre> <ul> <ol> <li> <dl> <dt> <dd> <a> <b> <u> <i> <sup>

This has the advantage of leaving your actual content untouched while protecting your site from those with insufficient rights from blowing it up .)

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

ergophobe’s picture

ergophobe commented

I understand that since, of course that's the way it works on my site. What I was referring to was that I usually post to coding-oriented forums (e.g. webmasterworld.com) where any HTML is automatically escaped and shown as plain text. I tend to forget that when I post to the drupal forums and throw HTML into my post only to have it disappear from my post because it doesn't get escaped, so when I say
you have an unmatched <p> tag"
it comes out as
you have an unmatched tag"

which is not as helpful to the OP

Yosemite Explorer - hiking and climbing in Yosemite (drupal)

dman’s picture

dman commented

How do I know what snippet of css is controlling the avatars if the php doesn't define a class?

Read up on the cascading rules. It's what the C of CSS means.

You could add the class to your template yourself - that's usually clearest.
Or create a pattern match that says the same thing. #content img for example could work (but not exclusively)

  • Use Firefox
  • Install the developer toolbar addon, or at least opt for the DOM inspector when installing
  • View your page, VALIDATE IT and fix all problems first
  • Open the DOM inspector, use 'select element by click' to find the bit that's giving you trouble.
  • In the DOM detail view, drop down to display the 'Current Styles'. This displays every style and every pattern and every rule that applies to every element, and which css sheet the rule comes from. Very useful.
  • If you find a rule you don't like and want to override - you add a negating line in your own theme css with the same match pattern as the rule you don't want, and it will have the same weight, yet come after, therefore over-ride the cascade. There's more about this weighting behaviour in the W3C spec.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

ergophobe’s picture

ergophobe commented

>>Use Firefox

Yes, the webdev toolbar, liveHTTPheaders, several other features are virtually indispensable and I spend 99% of my time in Firefox. That said, the web developer toolbars for IE and Opera provide similar functionality so if you don't want to jump on the Firefox bandwagon for some reason (like you are in a managed environment where you can't choose your broswer, though in that case, you probably can't add extensions/pugins/whatever). None of them are totally overlapping in functionality and even the IE toolbar has its merits

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4...

http://operawiki.info/WebDevToolbar

Yosemite Explorer - hiking and climbing in Yosemite (drupal)

dman’s picture

dman commented

The IE DOM ispector is fine too, but I couldn't find an equivalent for 'view current styles' per-element that I've found usesful when working with a lot of different cascading stylesheets - like the drupal.css vs the ones given to me by a designer.

If it had that level of detail - telling me that the LIs are indented 12px due to the directive in line 256 of customglobal.css, even though line 32 of style.css is saying left-margin should be 0.5em, I'd be happy with it for sure.

Haven't tried Opera lately.

... that was just one possible troubleshooting route that I've started using.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

ergophobe’s picture

ergophobe commented

The IE toolbar won't help with tracing back through the cascade, that's true, but it will outline divs and img for example, or even simply any floated element, and those options can help a lot with debugging floats.

Opera has a similar, though sort of messier, outline function and then this other thing where you can hover and get style information on an element, but it will not trace back up the cascade like FF.

Like I say, no one of them is a superset of the others, and they all have a couple of nice little features that can help out.

Yosemite Explorer - hiking and climbing in Yosemite (drupal)