Stylesheets - extreme newbie Q about positioning

Author

extreme newbie Q about positioning

Colin Peters

2006-04-04, 6:54 pm

OK, no flames, you were warned it was a newbie question.

I have a page with repeating list of entries, each entry consists of a
title, date, summary, image etc. The HTML is marked up so that each
entity is in its own DIV and class.

At the moment I'm using negative margins to push elements up in order
that the date lines up with the title. Without any styling the date
would simply follow on the line below.

At some stage I might want to alter the apparent order and positioning
of the element to, say, put the image above the title. Am I going down
the right road by trying push things about with negative margins or have
I missed some really cool CSS feature for doing this?

Spartanicus

2006-04-04, 6:54 pm

Colin Peters <cpeters@coldmail.com> wrote:

>I have a page with repeating list of entries, each entry consists of a
>title, date, summary, image etc. The HTML is marked up so that each
>entity is in its own DIV and class.

Sounds like you've abandoned structural and semantic markup and
substituted it with styled divs, not the way to go.

>At the moment I'm using negative margins to push elements up in order
>that the date lines up with the title. Without any styling the date
>would simply follow on the line below.
>
>At some stage I might want to alter the apparent order and positioning
>of the element to, say, put the image above the title. Am I going down
>the right road by trying push things about with negative margins or have
>I missed some really cool CSS feature for doing this?

Instead of vague descriptions, upload what you have, then we can comment
properly.

--
Spartanicus

Colin Peters

2006-04-04, 6:54 pm

Spartanicus wrote:
> Colin Peters <cpeters@coldmail.com> wrote:
>
>
>
>
> Sounds like you've abandoned structural and semantic markup and
> substituted it with styled divs, not the way to go.
>
>
>
>
> Instead of vague descriptions, upload what you have, then we can comment
> properly.
>

Yep. good idea. To keep things simple I've stripped out some stuff which
is not related to the problem at hand. Here is the link:

http://www.wils.ch/sample.html

In its' current state the news blocks just follow one after the other.
Each news block has a title, date, abstract, plus a "more" link, which
are in DIV classes. Later there may be more elements, an image for
example. I want a large degree of freedim to change the positioning
without changing the source HTML.

What's the reason for not using classified DIVs to identify the
elements? I didn't want to mark the abstract as a parapgraph because
there are other genuine paragraphs on the page. And the new title isn't
really a header. How would you mark the date with anything other than a DIV?

At the moment I'm more at sea than before. Hopefully I'll spot some land
before too long.

Thanks for your input so far.

Emil Stenström

2006-04-04, 6:54 pm

I would suggest using:
<div class="news">
<h2>News Title</h2>
<p class="date">Date here</p>
<p>Abstract here... ending with a <a href="url" title="Descriptive
title here">Read More</a></p>
</div>

.... or something similar. Have a look at the code, does not that made
more sense than a few classed divs? You don't need to class the
subitems of the first classed divs as CSS allows you do just do ".news
a { styles; }" to give all links inside the news div a certain style.

and the CSS to put the title and date on the same line:
..news h2 {
float: left;
width: 20em;
}

Spartanicus

2006-04-04, 10:51 pm

Colin Peters <cpeters@coldmail.com> wrote:

>Yep. good idea. To keep things simple I've stripped out some stuff which
>is not related to the problem at hand. Here is the link:
>
>http://www.wils.ch/sample.html

You've fallen in the common "div soup" trap alright, plus you've got a
number of other problems.

Look at it with CSS disabled, it should then present itself as a
properly structured document. Consecutive links forming a navbar should
be marked up as an unordered list. The MastHead div should be replaced
with an <h1>, and assuming that the jpeg is an image of text the alt
content for the image should contain the same text. Use paragraphs,
don't use <br><br> to create a blank line.

--
Spartanicus

Colin Peters

2006-04-05, 7:18 pm

Spartanicus wrote:
> Colin Peters <cpeters@coldmail.com> wrote:
>
>
>
>
> You've fallen in the common "div soup" trap alright, plus you've got a
> number of other problems.
>
> Look at it with CSS disabled, it should then present itself as a
> properly structured document. Consecutive links forming a navbar should
> be marked up as an unordered list. The MastHead div should be replaced
> with an <h1>, and assuming that the jpeg is an image of text the alt
> content for the image should contain the same text. Use paragraphs,
> don't use <br><br> to create a blank line.
>

Thanks to both you and Emil. I could tell something was awry with the
whole setup by the way I was having to style everything. I'll go away
and try to get the raw HTML into better shape.

Just one question though. Is it possible (or avisable) to try to affect
changes in the normal document flow using CSS. Or is it much better
change the order of the raw HTML. I'm thinking here about how to render
items in different visible sequences. Like:

Date
Title
Text

rather than

Title
Date
Text.

To give some background on this, I want to offer different orders to
different visitors. I was hoping to do it through simply swapping
stylesheets rather than serving different HTML. But if the general
concensus is not to do this then I'll change the HTML, which was
generated through ASP.NET anyhow. But you probably guessed this from the
"DIV soup".

Many thanks, once again. Reading through some of the other posts has
turned up some real golden nuggets regarding the best way to go about
using CSS.

Colin Peters

2006-04-05, 7:19 pm

Spartanicus wrote:
> Colin Peters <cpeters@coldmail.com> wrote:
>
>
>
>
> The reason why you'd want that isn't clear, but if you have to do this
> then don't mess with the CSS, change the HTML instead.
>
The objective is to let users customise the site themselves. So some may
prefer to see their news date at the top of each news item, some at the
bottom, some parallel with the title, or even not at all. In other
words, is it recommended to puch page elements around with CSS. I
wondered if such a policy falls into the category "it is possible, but
not a good idea". It seems that it does, so I'll change the HTML instead
to output things in the correct order at least.

I've taken your advice about cleaning up the markup. But the BR tags
were there to retain line breaks for poetry - what else could I use?

Beauregard T. Shagnasty

2006-04-05, 7:19 pm

Colin Peters wrote:

> I've taken your advice about cleaning up the markup. But the BR tags
> were there to retain line breaks for poetry - what else could I use?

How about a styled <pre> element?

<pre class="poetry">
There once was a man from Nantucket,
Whose HTML was so long he could suck it,
He used <br> instead of <pre>,
Got more comments than you or me,
And his code completely filled the bucket.
</pre>

pre {
font-family: sans-serif;
font-style: italic;
padding-left: 3em;
/* or whatever trips your trigger */
}

--
-bts
-Warning: I brake for lawn deer

Spartanicus

2006-04-05, 7:20 pm

Colin Peters <cpeters@coldmail.com> wrote:

>I've taken your advice about cleaning up the markup. But the BR tags
>were there to retain line breaks for poetry - what else could I use?

<pre>
My salad days,
When I was green in judgment, cold in blood,
To say as I said then!
</pre>

--
Spartanicus

Colin Peters

2006-04-06, 7:08 pm

Beauregard T. Shagnasty wrote:
> Colin Peters wrote:
>
>
>
>
> How about a styled <pre> element?
>
> <pre class="poetry">
> There once was a man from Nantucket,
> Whose HTML was so long he could suck it,
> He used <br> instead of <pre>,
> Got more comments than you or me,
> And his code completely filled the bucket.
> </pre>
>
> pre {
> font-family: sans-serif;
> font-style: italic;
> padding-left: 3em;
> /* or whatever trips your trigger */
> }
>
Yep. That looks better. I also downloaded the Firefox web dev toolbar.
Looks like I've got a lot to fix. I've still got one or two questions,
but I'll get the site into better shape and if I still haven't sorted
them along the way I post back, with link.

Thanks once again to all who posted. I must say the signal to noise
ratio on this board is very high.

axlq

2006-04-06, 7:08 pm

In article <44343513_1@news.bluewin.ch>,
>I've taken your advice about cleaning up the markup. But the BR tags
>were there to retain line breaks for poetry - what else could I use?

I say, use BR if you need it. If BR didn't exist, you'd have to
muck with styling the PRE tag as others suggest. To me, that's a
kludge. BR exists because it has uses -- and forcing a line break
for aesthetic reasons (as in poetry presentation) seems like a valid
use of it, to me.

The religious argument to avoid presentational markup at all costs,
does get tiresome. In this case the result for the user is the
same, and it's not any more efficient to redifine PRE as it is to
use a few line breaks.

-A