CSS help?

[matgb]

OK, I've got to the point that I can read .css, but writing it? Completely beyond me.

So, what I want, is to sort http://not-little-england.blogspot.com/ so that the search box is on the right of the logo, the logo left justified and no longer centered. It's such an easy job, but I can't get it to work properly. What very basic principle am I missing?

Oh yeah; what's the html tag to force a display of unformatted text and/or code? Playing around with the blogger template is teaching me a fair amount, but I just don't 'get' code in the way the code monkeys I know do...

Comments

I think this'll work...

[daweaver.livejournal.com]

On the latter question, <pre> .. </pre> will preserve the formatting exactly, including line-breaks. <tt> .. </tt> will convert text to monospaced format, but this will otherwise wrap. There's a worked example in this comment.

On the former question, try introducing a containing DIV. It doesn't need any formatting of its own, just to act as a box around the other two. Something like:

<div id="container">
  <div id="header">
    (rest of the header here)
  </div>
  <div id="googlebox">
    (rest of the search here)
  </div>
</div>

Then you'll want to add the magic value display:inline; to the CSS for Googlebox. The result, I think, will be the existing 660px Header box, followed by the search box on the same line where both will fit on the screen. Where it won't, the search will wrap to the next line. It's far more graceful than a fixed-width table.

Good luck!

Re: I think this'll work...

[matgb]

That looks like it makes sense; I'll try it tomorrow when my brain is switched on, Passage to India just finished, so I'm going to turn in. Thanks.

[innerbrat]

The google box is part of the header, is part of the problem then. If you make the img algin=left, then the description ceases be underneath.

What you need, which you haven't got, would be separate dvi tags around [img and description] and [googlebox], which you haven't got. You've got [img [description] [googlebox]], which AFAICS restricts you from aligning them.

I don't know how much freedom you have with the layout on blogspot, so I can suggest too much, but I'll keep working on it.

[matgb]

It's currently part of the header because that at least made it display in a sane place; every preview I tried made it jump everywhere. Separate div tags were jumping everywhere and I gave up.

As for freedom? Whatever you like, the template can be completely coded in any way that appeals, gNeil uses the same system, you wouldn't tell from his blog that it's in any way different fromt eh rest of the site, as far as I can see, no limits.

I'll give it another go tomorrow; thx for looking tho; I sort of get code, but not enough to use it independently, which is a shame but I'd rather concentrate on stuff I actually do do reasonably well...

[halcyon-shift.livejournal.com]

I haven't looked precisely at what you're after, but as long as you set width, float is handy.

<div style='width:200 ; float:right'>whatever</div> something else

will set "whatever" to the right of "something else", but on the same line.