Question about presentation vs. content?

lorie

05-26-2007, 06:38 PM

Tell me if I am understanding this separation between presentation and content correctly:

My site has a section where artwork by certain artists is featured. Currently, a typical page would look like this (between appropriate DOCTYPE, <html></html> etc block, of course):

<h1>Artist Name</h1>
<p class="pic1"> </p>
<p class="alignCenter"><img src="pix/featuredWork.jpg" width="700" height="879" alt="" /></p>
<h3 class="alignCenter">“The Featured Work”</h3>
<p class="tightenTop alignCenter">(1832)</p>
<p class="indentDbl">Some information about the featured artwork or the person portrayed.</p>
<p class="indentDbl">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus elit tellus, auctor in, aliquet ac, faucibus ut, ante.</p>
<p class="indentDbl">Mauris bibendum dignissim odio. Donec ullamcorper, quam vitae fringilla lacinia, ante mi luctus odio, id mollis diam sapien non mauris. Fusce fermentum vulputate nibh.</p>

As you can see, I have a style that centers the image or heading, one that closes the distance between two lines (tightenTop) and one that increases the margins on both side of the main text paragraphs. (indentDbl)

I use these over and over, sometimes together, to lay out my page; the stylesheet can be very short that way.

But I think I am now understanding that it would be better to have a longer, more detailed stylesheet, even though some styles would be virtually the same. For example, a class p.artFeatured that would center the featured picture; a class h3.artTitle that centers the title of the featured picture, etc. Both of those styles would be text-align:center;

Is that correct? Pardon if this seems a silly question but I want to be sure I am getting the right idea so that I can change the stylesheets if I am going about it the wrong way...

Thanks for all the helpful tips this forum provides.

lorie

_Aerospace_Eng_

05-26-2007, 06:42 PM

Can you post your CSS? I have a feeling you aren't using the elements correctly with CSS.

lorie

05-26-2007, 06:58 PM

Here is the salient CSS:

body {
margin-left: 5%;
margin-right: 7.5%;
background-color: transparent;
color: black;
font-family: Century Gothic;
font-size: 15px;
}
a {
text-decoration: none;
}
h1 {
font-family: Harrington;
font-size: 30pt;
font-weight: normal;
text-align: center;
}
.pic1 {
background-image: url("images/scrolledline.gif");
background-position: center;
background-repeat: no-repeat;
height: 60px;
}
.alignLeft {
text-align: left;
}
.alignCenter {
text-align: center;
}
.alignRight {
text-align: right;
}
.alignJust {
text-align: justify;
}
.tightenTop {
margin-top: -12pt;
}
.indentDbl {
margin-left: 50px;
margin-right : 50px;
}

And yes, I do realize that those are not standard fonts; this is on my internal intranet and the machines concerned have those fonts loaded. For a 'public' site I would not use them...

Thanks for the quick response. And excuse if this posts twice--I submitted and it got caught in a long delay so I'm not sure if it posted.

lorie

_Aerospace_Eng_

05-26-2007, 07:15 PM

I would do something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}

body {
background:#FFF;
color:#000;
font-family:'Century Gothic', Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
margin:0 7.5% 0 5%;
}

a {
text-decoration:none;
}

.artistinfo {
text-align:center;
}

.artistinfo h1 {
font-family:Harrington, Verdana, Arial, Helvetica, sans-serif;
font-size:30pt;
font-weight:400;
text-align:center;
}

.artistinfo hr {
background:url(images/scrolledline.gif) no-repeat center;
height:60px;
line-height:0;
font-size:0;
}

.artistinfo h3 {
font-weight:400;
}

.artistinfo p {
margin-left:50px;
margin-right:50px;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class="artistinfo">
<h1>Artist Name</h1>
<hr>
<img src="pix/featuredWork.jpg" width="700" height="879" alt="">
<h2>“The Featured Work”</h2>
<h3>(1832)</h3>
<p>Some information about the featured artwork or the person portrayed.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus elit tellus, auctor in, aliquet ac, faucibus ut, ante.</p>
<p>Mauris bibendum dignissim odio. Donec ullamcorper, quam vitae fringilla lacinia, ante mi luctus odio, id mollis diam sapien non mauris. Fusce fermentum vulputate nibh.</p>
</div>
</body>
</html>
Its less CSS and less coding too. I think now you need to look into the term semantics. The three most important things on that page to me are the artist name, the name of the work, and the year so they should be in header tags which I have done going in order. Since the pic1 class was a divider I think an hr would be a better element to use there.

lorie

05-26-2007, 08:25 PM

Thanks for the advice, Aerospace_Eng...

I can see how implementing your suggestions would clean everything up; and I do like clean code.

lorie

lorie

05-30-2007, 06:50 PM

Aerospace_Eng,

I don't know if you'll check this post again, but I am having a little trouble implementing this in Firefox. IE7 renders the img and h2, h3, etc with the .artistinfo styling, but in Firefox, the elements do not inherit the styling (text-align: center) from the div. Only those styles listed explicitly for each element are rendered...

If these are the only styles on the page it works, but my actual stylesheet has other styles for the h3 element; unless it is spelled out, Firefox reverts to the other styles.

More suggestions? Should I just spell out each style as I want it and forget about the div containing the main artwork and its description?

VIPStephan

05-30-2007, 07:00 PM

I hope you don’t mind me looking at it instead of Aero? :)

The styles are inherited in my Firefox, at least in the code Aero posted. Can you supply us with your current code or post a link to the page in question? This seems to be a simple error but I can’t really guess what it is.

lorie

05-31-2007, 01:37 AM

Thank you for your response, VIPStephan...

Even though my CSS seemed to validate, there was apparently something wacky in it; I redid the stylesheet (needed to be done anyway, as I have been adding and subtracting styles as I am learning how to use them more effectively...)

And now it works in FF...

Didn't want to spend too much time comparing line by line so I do not know what broke it...

So, again, thanks for weighing in. Hope you'll be around to help with the next thorny problem.

One side note though: In Aero's CSS, he recommends using the image as an HR; that does not seem to work very well in IE. You get a box around the image. That was the reason I went with a paragraph with image background for the decorative rule in the first place...

But I do appreciate the other suggestions; they tightened up the stylesheet quite a bit!

lorie

VIPStephan

05-31-2007, 03:17 AM

Yeah, horizontal rules are nasty to style… They are treated differently by IE and the other browsers. I.e. in IE you have to set the color and in FF you set the background color for the same result. And that’s one of the easier things. To remove the default border you need to explicitly remove the border (border: 0;). However, I think if you set a transparent background color or something like this IE will still display some weird border. You can never do it right. :rolleyes:

But there was a nice article on how to style an hr (http://www.sovavsiti.cz/css/hr.html). You’ll find more on that if you do a search.