DC Eliott: How am I doing?

[animgirl]

Hey,

Remember you tremendously helped me put together a page for a site for me?

Well, I've been working and building onto the site and was wondering how I was doing as far as scripting and stuff like that.

So, if you would take a look at it I would really appreciate it!

You can see here (http://www.alliancemusic.org/newversion/homepage.html)

I know some things need some tweaking...

Thank you,
animgirl

[DCElliott]

Generally I like what I see effect-wise. It is quite a stylish page.

I have attached some modified code. Extract it to a separate directory. You wont get the images or Flash but you will see the placeholders.
I ran your HTML through HTML tidy with the xhtml option. Look at how the tags are rendered - all lowercase - and the singular tags like <img><br> etc. have a /> at the end. XHTML requires all tags to be paired or "closed".

I have changed the p.half code a bit and it should give better rendition of your paragraphs at smaller screen widths - I didn't like what happened as the page got smaller. At smaller sizes the images will start pushing in the text rather than flipping downwards.

I also changed the footer - play around with the colors. I think you wanted to have a class="one" for the page that was being viewed. I found it hard to see your links - too dark against the black, so brightened them up and gave a different mouseover effect.

Note - all the page elements will be outlined when you view the modified code - you can turn off the outlines by commenting out the last line of the CSS. (CSS comments start with /* and end with */ )

Oh, and by the way - you don't include <style or <!-- in an external css file that you are linking.

Coming along nicely!

[animgirl]

Hey,

That really helps!

Here's what I'm gonna do: I'm gonna apply that to the rest of the pages and stuff tomorrow and then I will re-post the link.


Oh, and by the way - you don't include <style or <!-- in an external css file that you are linking.

Truthfully, I knew that but I forgot to apply it to this site, but I did apply it to another...

Thanks so much.

[DCElliott]

Upon giving it even further thought, you might play around with this:
.imgleft {float: left; clear:left;
border: 0;
margin:0 0 0 7%;
}
.imgright {float: right; clear:right;
border: 0;
margin:0 7% 0 0;
}A value of around 7% from the side will put the images nestled up against the text without pushing it in if the page is displayed at your target 800px resolution. Much smaller and you start to push in the text. There is a way to center the images between the text and the browser margin, but I don't know if you want to go to that trouble.

Basically, you would float 25% divs to the right and left to contain the images. The divs would have centered content so any image would be halfway between the text and the margins. If you are interested, we can discuss it later.

In the meantime, I suggest you try the above code and play with the 7% value up and down a bit over a range of resolutions.

[animgirl]

okay:D

[animgirl]

There is a way to center the images between the text and the browser margin, but I don't know if you want to go to that trouble.

I guess not for now. I messed with the 7% margin and with different res.'s and put it at 2% because it looks good at 640 x 480, centered-like.

My problem is that on the Newsletter page, when I linked the stylesheet to it, it margined the text the way I didn't want it to, because that's what it was told to do in the stylesheet, so I thought putting


<p class="margin-left: .5cm; margin-right: .5cm">

In to replace what it was being told to do would work, but it isn't.
'Cause all the text is smooching the corners and it looks stupid. I also want some paragraph indents.

looking here (http://www.alliancemusic.org/newversion/newsletter.html) might help.

[DCElliott]

<p class="margin-left: .5cm; margin-right: .5cm">should be<p style="margin-left: .5cm; margin-right: .5cm">

or you could <p style="margin-left: 15%; margin-right: 15%; text-indent:5%;">or, taking a different approach -
create a div called letter to wrap all your <p>s in like this:
div.letter {margin-left: 15%; margin-right: 15%;}
div.letter p {text-indent:5%}
and in your HTML:
<div class="letter">
<p >
Happy New Year Everyone
</p>
<p>
I trust everyone had
. . .
when we're in your area.
</p>
</div><!-- end of letter div -->

Why are you concerned about 640? - your real minimum page width is determined by the width of your flash object at width="760". The other page elements move over because some stuff is set to auto but once the window width < 760 wide your flash stays put. You could enforce a minimum width for everything in most browsers by setting body {min-width:760px;}

I kinda like how the footer looks now. The text is a little pink on my monitor here at work - it has a different color balance - but it is very readable now and the mouseover is better. I think giving a margin-bottom:1em to the footer might make it look better - try it if you like. You have to play lots before you get what you like.

[animgirl]

my 100th post!

Well, I thought it was best to test it on the major res.'s out there. I know the header is longer than 640 x 480, but I still thought it would be good to try it just to see (?)

I don't know if this is right, but I changed:

div.letter {margin-left: 15%; margin-right: 15%;}
div.letter p {text-indent:5%}
to
div.letter {margin-left: 5%; margin-right: 5%; text-indent:5%}

It works and it makes it a bit easier.

I was actually playing with the idea of maybe changing the header a bit.

Wouldn't this site be considered liquid?

[animgirl]

Thanks, but it's DC Eliott, all the way :D


The header part of it with the navigation buttons and logo and all is not though. It does not attempt to conform to the window size at all because it is a fixed size.

I kinda figured that, and it kinda bugs me, actaully, yes it bugs me and I am going to test making separate flash button elements and putting those into a table so that I could have flash and yet it would conform to the window size. So, that it's just not one big flash ice block while the rest kinda flows.

This is so exciting though. I've been confined to flash and never really had looked into HTML but this is fun!:eyebrow:

btw DC, I bruised my bottom because I was kicking myself so hard from the last class-style incident.:verymad:

[DCElliott]

[list=1]
Widen engagements table a bit - on my system some of the stuff is wrapping and it really shouldn't if the table was ~80% wide
Correct the contacts page (screenshot appended)
On the pictures page the URL:http://www.alliancemusic.org/newversion/travisatwork.jpg doesn't display - did you upload it?
You could make the Flash menu a tad narrower if you didn't have HOME and CONTACT so far right. I know this would affect two menus and countless hours of bleary eyed work . . .
The song lists are crowding the pictures a bit on the recordings page. Try an ordered list <ol><li> selection 1 </li> . . . It will give you more of an indent. You also have an unclosed <p> tag here: <P style="font-size: 15px; text-align: left;">
<p class="half">

[/list=1]

As far as liquidity goes, you have a "jello" page with content that flows when squeezed. However, when you have a piece of rigid content like a large graphic (or flash menu) you start to impede the flow. That is why I have been going on about resizable titles - that is the only way to NOT create a rigid element that will compromise the liquid flow.

A liquid page might have the content in a scrolling division with the footer always visible as I have in, for example, Orchid (http://www3.ns.sympatico.ca/d.elliott/orchid.html). The elastic divisions must all be dimensioned with percentages of window sizes - anything specified in pixels will ruin the liquid effect by making a statically positioned or sized element.

[DCElliott]

Originally posted by animgirl
Thanks, but it's DC Eliott, all the way :D
I am going to test making separate flash button elements and putting those into a table so that I could have flash and yet it would conform to the window size.
Did I hear the word table? Shame.:shy:

How about a bunch of little divs all in a row in a container centering div. Each little div has %age R+L margins so that they are rubbery and contract as the page gets narrower. The container div can be set with a min-width that could keep the divs from wrapping if the page got too narrow.

In fact, if you absolutely positioned them as %age distance from the left side, the little divs would actually shingle one over the next as the page collapsed.
Originally posted by animgirl
btw DC, I bruised my bottom because I was kicking myself so hard from the last class-style incident.:verymad:
Don't worry - been there - done that :rolleyes:

[animgirl]

I knew I had all those problems but I didn't want to scrape mine (or your) brain all at once. :)


I know this would affect two menus and countless hours of bleary eyed work . . .

{insert groan here}


That's what I've been saying I'd like to try, instead of keeping the ice block nav-bar-header-thing I would like to try making the buttons separate flash elements and then <div> -ing those so there was some flow. But I wanna fix the other stuff first.

Thanks for all the help, I'm gonna go tweak it all.

[animgirl]

Hey,

Was working on the recordings page, did the list thing, messed and messed with it, and I can't figure out why it's still not wrapping around the picture. I've only done it to the first recording thus far.

See it here (http://www.alliancemusic.org/newversion/recordings.html)

I actually need 2 lists, one that lists all the songs and another for selected songs that have a lo & hi quality option sound file.

[animgirl]

Yeah, I guess I could do that.

first I fix the __!!__ recordings page.
:bang:

[DCElliott]

AG

Create a new div for your list like this: div.playlist {float:left}and use it to wrap your list:<div class="playlist">
<OL class="decimal">
<LI>
Come See A Man
</LI>
. . .
<LI>
A Blessing's On The Way
</LI>
</OL>
</div>

[DCElliott]

1. Engagements Table :thumbup:
2. Pictures Page :thumbup:
. . .

And a better way for the playlist:ol.playlist {
display:block;
width:40%;
float : left;
list-style : decimal;
background:#666;
}
li{
margin-left:3em;
}(you would need to change class="decimal" to class="playlist") I kinda like the effect.

[animgirl]

Here's what I've got (http://www.alliancemusic.org/o/recordings.html)

Now don't you dare tell me what the problem is ;)

You can give me a little clue though.

[DCElliott]

Not sure I'm seeing a problem, although you do have a <!-- HTML comment --> rather than a /*CSS comment*/ in your stylesheet.

With the OL and LI styles I posted, you don't need the div.playlist anymore. The OL behaves as a block and "floats" up against the IMG. At very narrow widths, it will snap underneath the picture, which is very acceptable behaviour. Also, the 60% width for the OL is calculated on the basis of the parent div rather than the width of the page.

Oopsie
I had been looking at it in IE5 and just switched to Gecko - now I see what you mean. My suggestions re the div still hold plus I recommend you not wrap the IMG in a <p>.

If you want a centering effect to put the img and ol more in the middle of the page - what do you think you should do? Hint: what if all the img and ol were in a big div with ~20% margins.

[ByteWizard]

I just wanted to compliment you on your progress since you first visited us. Your site is coming along nicely. People like you who work hard on their own are the kind of folks we like to help the most.

Again, congrats!

Joel

[animgirl]

Hey, thanks Joel.
That's pretty nice.

:weee:

[animgirl]

Okay

Here's what's happenin' (http://www.alliancemusic.org/new/recordings.html)

plus I recommend you not wrap the IMG in a <p>.

Then can you give me a clue as to how I would put some space height in there between each album?

Don't worry about the flash banner not loading, I didn't upload it

[DCElliott]

Here is a tip for you or anyone who wants to add a variable height break.
For variable height (with user changes in font size) insert where you would put a break:
<div style="clear:both; height:##em"></div> (an em corresponds to about 1 text line)

For fixed height:
<div style="clear:both; height:##px"></div>

In both cases sustitute ## with your value.

Oh, and PS - I don't consider a style called "middlecrap" to be very ladylike. :p

[animgirl]

ask me if I give a :rolleyes:
(jk) I'll be changing it.

For some reason, that last bit of code isn't working.

He Still Can
</LI>
<LI>
We Shall Rise
</LI>
<LI>
A Blessing's On The Way
</LI>
</OL>
<div style="clear:both; height: 100px"><div>
<!-- Alliance Live --><IMG class="imgleft" src="(R)Live.jpg" width="180" height="182">
<OL class="playlist">
<LI>
Blessed Assurance
</LI>
<LI>
Stand Strong in the Lord
</LI>
<LI>

The top of the code being the bottom of a list and the end of the code being the beginning of a new list. It seems to have no effect.
What did I do?

[DCElliott]

I forgot.:smack: (it happens, occasionally) By default OL has 1em of leading (vertical downward margin at top and bottom) - You have to set it to 0 to get image and outline to line up at the top.

Try the following in your <style></style> section and then incorporate the final into your stylesheet.

ol.playlist {width:180px;margin-top:0;}
li {margin-left:0;}

[animgirl]

this is what I have in my stylesheet now

ol.playlist {width:180px; margin-top:0;}
display:block;
width: 10cm;
float : left;
list-style : decimal;
background:#513C49;
}
li {margin-left:0;}
}


And this is what it looks like: (http://www.alliancemusic.org/holdon/recordings.html)

I did a boo-boo, but where is it?

[DCElliott]

ol.playlist {width:180px; margin-top:0;}
display:block;
width: 10cm;/*<-get rid of that*/
float : left;
list-style : decimal;
background:#513C49;
}
li {margin-left:0;}
}

Misplaced '}'

I set the width to 180 cuz that is what the picture is. You might consider making middlecrap {width:440; margin-left:auto; margin-right:auto;} and changing ol.playlist to a float:right since it is now constrained by the right border of the middlecrap div.

[animgirl]

:cons:

I don't understand why it's messing with my footer if I closed off the middlecrap </div> before the footer!

Is this how it's supposed to look? (http://www.alliancemusic.org/holdon/recordings.html)

[DCElliott]

very sorry, my bad.<div style="clear: both; height: 100px;"></div> dunno how I missed that. sorry for the frustration. this has knocked the capital letters right off my computer.

i corrected the earlier post so others won't get screwed up as well.

it wasn't all me though, you forgot the closing "}" in the middlecrap style.

[animgirl]

ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

I SHOULDA SAW THAT!

{breath of relief}
:)

That was kinda fun, can we do that again!

Now, was the intent to not center the pictures now?
Or did I screw up something?

[DCElliott]

Our posts crossed, see the end of my previous.

[animgirl]

you forgot the closing "}" in the middlecrap style.

So I'm supposed to close there, but not here?
:)ol.playlist {width:180px; margin-top:0;


Okay, but it didn't fix anything.

[DCElliott]

You had a couple of forgotten ; and }s.

Here is the cleaned code:body {width:100%;
min-width:760px;
background:#312031 url("../images/smiley.gif")
no-repeat fixed;
color:bisque;
margin:0;
border:0;
padding:0;
}

p.margin {margin: 0cm 2.5cm 3cm 4cm;
}

p.half {display:block;
/* widths for IE 5 */
width:auto; margin:0 25% 1em 25%;
/* the following code hides the second
width specification from IE 5 */
voice-family: "\"}\"";
voice-family: inherit;
/* widths for IE 6 & NN | Gecko */
width:50%; margin:0 auto 1em auto;
}

html>body p.half {
/*This helps Opera get it right*/
width: 50%;
margin-top:0 ;
margin-bottom:1em;
margin-right: auto;
margin-left: auto;
}

p.half:first-line {padding-left: 3em;
}

/*images are left right or title
title images clear (force breaks) on
both sides*/

.imgleft {float: left; clear:left;
border: 0;
margin:0 0 0 2%;
}

.imgright {float: right; clear:right;
border: 0;
margin:0 2% 0 0;
}

.imgtitle {float: left; clear:both;
margin: 0;
border: 0;
padding: 3px;
}

#footer {
margin-top:1em;
background-color:#513C49;
color: ivory;
font-size: smaller;
text-align : center;
}

#footer a:link, #footer a:visited {
font-decoration:none;
color:pink;
}

#footer a:hover {
color:ivory;
}

#footer a.one {
color:bisque;
}

/* A Header */

#header {
margin-top:3em;
background-color:#666;
color: ivory;
font-size: smaller;
text-align : center;
}

#header a:link, #header a:visited {
font-decoration:none;
color:pink;
}

#header a:hover {
color:ivory;
}

#header a.one {
color:bisque;
}

div.letter {margin-left: 5%;
margin-right: 5%;
text-indent:5%;
}

ol.playlist {display:block;
float : right;
width:180px;
margin-top:0;
list-style : decimal;
background:#513C49;
}

li {margin-left:0;
}

div.middlecrap {width: 440px;
margin-left: auto;
margin-right: auto;
}
div.homepage {margin-left: auto;
margin-right: auto;
text-indent:0%;}


/*DIAGNOSTICS*/
/*comment out these styles to turn off the dotted lines*/
img {border:1px dotted blue ! important;}
p {border:1px dotted green ! important;}
div {border:1px dotted white ! important;}

[animgirl]

I popped that code in and I was like, oh.

'cause you accidentally went
colorink;

But I fixed it and it's okay.

Oh wait, that was an automaitcally done thing. cause a : next to a P makes that face... okay
Here's the whole thing altogether thus far: (http://www.alliancemusic.org/newversion/homepage.html)

It's cacheing on mine, but you should see the new.

I don't want to jump ahead or anything, I'm just curious where the numbers went that were next to all the songs.



I so appreciate how very very helpful you are!!! ;)

[DCElliott]

There are issues with differences in the formatting of lists between browsers that I hadn't know about before. I have appended a copy of recordings with cross-browser html. (Don't worry - I'm glad I learned this myself - will save me grief in the future)

There are two important things to know for cross browser in what you ae doing. Older IE browsers won't center the division properly so you have to trick it with another outer division with the text-align:center property.

The other thing is setting different widths for your ol.playlist depending on the browser. That is how you get your numbers back in IE.

I put the styles in the HTML. You would have to take the styles out to an external stylesheet. It is easier to quickly change styles by keeping them in until they are "done".

I changed the <!doctype to 4.01 strict - it will provide for less quirky implementation and consistency between browsers. I suggest you copy the doctype to the other pages as well. You will find that some default behaviors change like the default margins|padding on block elements. That is why it is important to keep the "diagnostic" borders on while figuring things out. The borders are color-coded in the latest styles.

I've done a bit of documentation in the code - if you have questions about why something was done, just let her rip. Post the relevant code excerpt, though, so others can benefit from the discussion as well.I so appreciate how very very helpful you are!!! ;)Please don't wink at me - I'm an old man and my heart can't take it. :love:

[animgirl]

I suggest you copy the doctype to the other pages as well.
Did it.

font:normal 1em/1.1em verdana, helvetica, tahoma, arial, sans-serif;
I added times to the top of the font list :)

ol.playlist {display:block;
float : right;
width:250px;

I changed this from 180 to 250, because I had to add 'lo' and 'hi' for audio choices.

take a look here... (http://www.alliancemusic.org/newversion/recordings.html)
So you think that's a good way to put the audio?
there are no actual audio files uploaded yet.

After I read on the box model the other day, I decided it would help to put the borders back on and now that they are colored, it helps more.

Older IE browsers won't center the division properly so you have to trick it with another outer division with the text-align:center property.
So pretty much a div nested within a div.

Just curious, why did you put a line break -here- on the recordings page?

</OBJECT>
-here-</div>

[DCElliott]

By habit I put divs on lines by themselves - it provides a visual separation of major block elements. The exception here is the spacer <div> which is acting like a <br /> on steroids so I leave it on one line.

If you want to use a serif font, create a font list from most favorite to least. If you chose, for example:
body {font: normal 1em/1.1em 'cg times', georgia, 'century schoolbook', times, serif ;}
the browser would proceed left to right until it found a matching font on the user's system. (note the use of single quotes for fon names with spaces in them.)

BE AWARE the <!--[if IE] . . . section has to be edited in tandem with any changes you make to the same styles above, and it has to be in the head section, not the stylesheet, plus it has to come after the linking statement (thats part of the cascade in cascading stylesheets - most recent takes precedence). When you edited the playlist to 250, you made it too wide for Gecko browsers. ALWAYS CHECK IN BOTH BROWSERS. (Sorry for shouting, but I found the capitals on my keyboard again :p)

What about those hi lo links - pretty hard to see, don't you think?

[animgirl]

:whoaa:

Something just happened, I took out the <!--[if IE]>
<style type="text/css" media="screen">
/* styles need for IE because it formats lists differently */
ol.playlist {width:220px;}
li {list-style-position:outside;
margin-left:3em;
padding-left:0em;
}

and put it where I was supposed to:

<HEAD>
<LINK rel="stylesheet" type="text/css" href="alliance.css">
<STYLE type="text/css" media="screen">
<!--[if IE]>
<style type="text/css" media="screen">
/* styles need for IE because it formats lists differently */
ol.playlist {width:220px;}
li {list-style-position:outside;
margin-left:3em;
padding-left:0em;
}
</style>
<TITLE>

and now in IE I see nothing.

You see (http://www.alliancemusic.org/recordings.html)

I don't have a gecko browser. Never heard of it. Who the heck has a gecko browser?

[DCElliott]

This is the complete code block required:<!--[if IE]>
<style type="text/css" media="screen">
/* styles need for IE because it formats lists differently */
ol.playlist {width:220px;}
li {list-style-position:outside;
margin-left:3em;
padding-left:0em;
}
</style>
<![endif]-->
You missed the endif.

What this does is checks to see if the browser is Internet Explorer (<!--[if IE]>)and applies a modified style, finishing with the closing <![endif]-->.

For more information on Microsoft conditional comments do a webserch on: microsoft AND conditional AND comments.

Its bad HTML but better than bad pages.

[ByteWizard]

I don't have a gecko browser. Never heard of it. Who the heck has a gecko browser?

Gecko is the "engine" used by Netscape and Mozilla. Get your own reptiles here . (http://dev.home.mindspring.com/#Browsers)

[animgirl]

ooo, thank you for the wonderful link.
:weee:

Okay, DC.

Fixed it.

When I went to tidy the HTML, it fixed it so that it worked the way we didn't want it to; so I un-did it.

here she is (http://www.alliancemusic.org/newversion/recordings.html)

I changed the color of the links.

[DCElliott]

Lookin' good :cool:

Add a little blurb at the top of the page to explain what it is all about and what the hi and lo mean and you are there. You need to clean up a wee boo-boo in the anchors <A class= "one" A href="comeseeamanhi.mp3">That second A doesn't belong.

You also have to get rid of the <style . . .> just before the start of the conditional comment.

You also need to subtract 40px from the ol.playlist width. You see, there are actually two widths in play here. Non IE browsers get their ol width from the linked stylesheet, IE browsers get their width in that special conditional comment block. Since you don't have a "gecko" browser like Netscape or Mozilla (get Mozilla - it gives you excellent NERD cred! :p ) you can't see the effect of the styles being displayed "properly". The width in the stylesheet is, by my estimation, 40px too wide and causes the ol block to slip down under the picture.

[DCElliott]

Sheesh - where did the time go. Animgirl has been egging me on here.

Anyhow, can't let you get too far ahead.:bang:

My posts are gonna slow down a lot I'm afraid cause I'm teaching a Master's course in epidemiology this semester. It is a lot of preparation.:hmmmm:

[animgirl]

it gives you excellent NERD cred!ooo gimmie some o' dat :eyebrow:

Here's what's cookin' (http://www.alliancemusic.org/newversion/recordings.html)

iz wanderful

Good Luck with your Master's Course!

I sure have appreciated all your help!!!!!!!!!!!!!
...which is a total understatement.

no winks, just a smile :)

[DCElliott]

<style type="text/css" media="screen">

<!--[if IE]>
<style type="text/css" media="screen">

/* styles need for IE because it formats lists differently */
ol.playlist {width:220px;}

li {list-style-position: outside;
margin-left:3em;
padding-left:0em;
}
</style>
<![endif]-->
</style>

The code in red should be removed.
The code in green should be moved to where the purple code is.
Upon reflection - do you think the breaks between each recording are too large?
WEre you planning on using the .one style for the link of the page you are viewing

[animgirl]

Were you planning on using the .one style for the link of the page you are viewing
Could you please restate that?

I made the space between the albums 1/2 of what it was {100 is now 50.} I think it looks better.

Because I couldn't make the width of the ol.playlist {display:block; 250 because of the Gecko browser, some of the 'hi' 'lo's are kind of sparatic in IE. So I thought changing this
<!--[if IE]>
<style type="text/css" media="screen">
/* styles need for IE because it formats lists differently */
ol.playlist {width:220px;}
li {list-style-positionoutside;
margin-left:3em;
padding-left:0em;
}
</style>
<![endif]-->

From 220 to 250 would be okay, 'cause it would only affect the look in IE, and with it being 250, the 'hi' & 'lo's fit on the same line as the song.

See it here (http://www.alliancemusic.org/newversion/recordings.html)

[DCElliott]

I ran the CSS through a CSS checker (http://jigsaw.w3.org/css-validator/validator-upload.html) and it picked up a few more errors. Now that you have your first stylesheet under your belt, use the CSS checker to pick up mistakes for you. The validator doesn't like named colors - ignore those warnings for now. I use named colors when I'm developing pages because I have a memory for what they look like. You can find the equivalents fairly easily: there is a chart at Brobst Systems (http://www.brobstsystems.com/colors1.htm)

You had font-decoration instead of text-decoration (or did I do that? :eek: )

The cleaned code, minus color code changes is here:body {
border-right: 0px;
padding-right: 0px;
border-top: 0px;
padding-left: 0px;
background: url(../images/smiley.gif) #312031 fixed no-repeat;
padding-bottom: 0px;
margin: 0px;
font: 1em/1.1em 'century schoolbook', georgia, 'cg times', times, serif ;
border-left: 0px;
width: 100%;
color: bisque;
padding-top: 0px;
border-bottom: 0px;
min-width: 760px;
}
p.margin {
margin: 0cm 2.5cm 3cm 4cm;
}
p.half {
display: block;
margin: 0px 25% 1em;
width: auto;
}
.blurb {
display: block;
margin: 0 25%;
width: auto;
font-size:130%;
line-height:100%;
font-style: oblique;
}
p.half:first-line {
padding-left: 3em;
}
.imgleft {
clear: left;
border-right: 0px;
border-top: 0px;
float: left;
margin: 0px 0px 0px 2%;
border-left: 0px;
border-bottom: 0px;
}
.imgright {
clear: right;
border-right: 0px;
border-top: 0px;
float: right;
margin: 0px 2% 0px 0px;
border-left: 0px;
border-bottom: 0px;
}
.imgtitle {
clear: both;
border-right: 0px;
padding-right: 3px;
border-top: 0px;
padding-left: 3px;
float: left;
padding-bottom: 3px;
margin: 0px;
border-left: 0px;
padding-top: 3px;
border-bottom: 0px;
}
#footer {
font-size: smaller;
margin: 10px 0px;
color: ivory;
background-color: #513c49;
text-align: center;
}
#footer a:link {
color: pink;
text-decoration: none;
}
#footer a:visited {
color: pink;
text-decoration: none;
}
#footer a:hover {
color: ivory;
}
#footer a:active {
color: bisque;
}
#footer a.one {
color: bisque;
}
#header {
margin-top: 3em;
font-size: smaller;
color: ivory;
background-color: #666;
text-align: center;
}
#header a:link {
color: pink;
text-decoration: none;
}
#header a:visited {
color: pink;
text-decoration: none;
}
#header a:hover {
color: ivory;
}
#header a.one {
color: bisque;
}
div.letter {
margin-left: 5%;
text-indent: 5%;
margin-right: 5%;
}
ol.playlist {
margin-top: 0px;
display: block;
background: #513c49;
float: right;
margin-left: 0em;
width: 210px;
list-style-type: decimal;
}
li {
padding-left: 0px;
list-style-position: outside;
margin-left: 0em;
}
div.bigcrap {
width: auto;
text-align: center;
}
div.middlecrap {
display: block;
margin-left: auto;
width: 440px;
margin-right: auto;
position: relative;
text-align: left;
}
div.middlecrap .imgleft {
clear: left;
border-right: 0px;
padding-right: 0px;
border-top: 0px;
padding-left: 0px;
float: left;
padding-bottom: 0px;
margin: 0px;
border-left: 0px;
padding-top: 0px;
border-bottom: 0px;
}
div.homepage {
margin-left: auto;
text-indent: 0%;
margin-right: auto;
}
a.one:link {
color: pink;
}
a.one:visited {
color: white;
}
a.one:hover {
color: ivory;
}
a.two:link {
color: #cae0e1;
}
a.two:visited {
color: white;
}
a.two:hover {
color: ivory;
}

I also think you should create a div called blurb to do the intro rather than in-lining a style. It give you better control and allows you to use <p> instead of <br> like this: <DIV class="blurb">
<P>
Music samples are availabale on selected songs.
</P>
<P>
Click "hi" to hear a high quality sample and "lo" to hear a low quality sample.
</P>
<P>
Note: "lo" quality samples will load in a considerably less amount of time.
</P>
</DIV>Finally, now that you have the conditional comment working, I think you can reduce the left-margin for IE as follows:<!--[if IE]>
<STYLE type=text/css media=screen>
OL.playlist {
WIDTH: 250px
}
LI {
PADDING-LEFT: 0em; MARGIN-LEFT: 1em; list-style-position: outside;
}
</STYLE>
<![endif]-->
You need to do some spell-checking and look for an a="" in some of your anchor tags.

[animgirl]

A question. When I put in a div in an html page, do I also have to declare it in the external stylesheet?


Because in this code:
<DIV class="blurb">
<p>
Music samples are availabale on selected songs.
</P>
<P>
Click "hi" to hear a high quality sample and "lo" to hear a low quality sample.
</P>
<P>
Note: "lo" quality samples will load in a considerably less amount of time.
</P>
<P>
Samples Require the <A class="one" href="http://windowsmedia.com
/9series/download/download.asp" target="_blank">Windows Media Player</A>
</P>
</DIV>
I'm not exactly sure where to tell it to make the
font smaller and I can't figure out how it knows
to make the text oblique already without me telling it.

[animgirl]

ugh, I did look through the stylesheet, but somehow skipped over that. that was silly.

Wow, had enough of this page? (http://www.alliancemusic.org/newversion/recordings.html)

:D

CRAP! Look what happens to the text when you make the window smaller vertically...

[DCElliott]

If you look in the stylesheet I posted above, there is a section:
.blurb {
display: block;
margin: 0 25%;
width: auto;
font-size:130%;
line-height:100%;
font-style: oblique;
}

that positions and formats the "blurb". Sorry, I should have highlighted the addition.

You can have styles that are "generic" like .blurb above. By using the blurb style on any block type element, you would get it positioned in the middle 50% of the parent block. In the case where we have used it here - the parent is the body. However, looking at the "crap" divisions, "middlecrap" is the child of "bigcrap" and takes its positioning relative to "bigcrap". Boxes within boxes. ol.playlist is another box and is positioned relative to its parent "middlecrap" - that is why we can float it to the right against the right border. But I digress. The point I was originally trying to make is that you can make your stylesheet more generic sometimes by removing the selector (stuff like p div, etc.) and just specifying the style. It is a more "global" approach.

You have made the width in the conditional comment 260px - that is too wide - see pic below.

Try changing the line height to a higher percentage.

[animgirl]

AAAAHHHHHH, I shoulda thought of that. I really should have. So simple!!!
{LINE HEIGHT}

I changed 260 to 250.
I don't seem to have that problem in my browser, is that screenshot a view in gecko or something?

[DCElliott]

It is IE5.5. I think it handles the LI formatting slightly differently or something. Or maybe dimensions the div differently. I'm not sure.

You got the blurb fixed up, I see. I would make the text slightly bigger, but that is a matter of personal preference.

BTW - I think we may have set a record for posts on a topic other than, perhaps, one of the stickies. I hope others have a better insight into the iterative process of creating a stylesheet.

[animgirl]

aaahhh, that page is beautiful! (http://www.alliancemusic.org/newversion/recordings.html)

I made the font slightly larger.
:)

Oh, I made sure to bookmark those links a couple posts ago, the CSS validation one and the color chart - very good to have:)

I liked how you took the underline text decoration out of the footer links, looks much cleaner.

[DCElliott]

Lets try some CSS buttons. No graphics involved.

You can define links as blocks and give them borders and mouseover effects. If you look at the simulated links on my templates (on my website accessible through the website button at the top of this message) they look like regular buttons but are made of CSS, not bitmaps so there is no javascript or anything required.

To use the buttons for the hi and lo links I had to do a couple of things: Make the CSS boxes. Since I wanted them to float to the right, I had to move the links to the BEGINNING of the <li>, just after the tag. That allows for proper wrapping, but is not intuitive. A few size adjustments so that the buttons scaled properly with the font and - presto- CSS buttons, color-coded, no less.

I've attached a modified file of HTML and CSS and will do a second post of a screenshot so that other folks can see what we are talking about.

[DCElliott]

Screenshot for the above.

Before is above, CSS buttons below

And Animgirl - I got the class="lo" and "hi" mixed up when I changed the styles - sorry - I ain't perfect. :mad:

[animgirl]

the buttons, they... they... indent
I :love: indenting buttons.

It's like, too good. It's too ridiculously good.
:mouthopen

delicious all the way (http://www.alliancemusic.org/newversion/recordings.html)

no joke, I'm going to eat-my-monitor good.
I just got chills...

[DCElliott]

Here is the proper code block for those yummy buttons. There were a couple of minor errors and tweaks required:/*CSS buttons*/
a.hi:link, a.hi:visited,
a.lo:link, a.lo:visited {
display:block;
float:right;
width:1.2em;
height:1em;
padding:1px 0;
margin:0 0 0 2px;
text-align: center;
color:black;
font: normal small-caps bold 0.8em/0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.hi:link, a.hi:visited {
background-color: pink;
border:2px outset pink;
}
a.hi:hover {
border:2px inset pink;
}
a.lo:link, a.lo:visited {
background-color: #99CCFF;
border:2px outset #99CCFF;
}
a.lo:hover {
border:2px inset #99CCFF;
}Please check to see if there is an unmatched } just before the CSS buttons code - if there is, it will mess things up in Netscape. IE tolerates coding errors better, which is not necessarily a good thing.

[animgirl]

There was a hammer and I took it out (http://www.alliancemusic.org/newversion/recordings.html)

Now they want another topic - I think pretty flash banner's gonna have to go bye-bye...

[DCElliott]

It is still there:div.homepage {
margin-left: 2cm;
text-indent: 0%;
margin-right: 2cm;
}
}<<<<<<<<<<<<There is the lil devil
a.hi:link, a.hi:visited,
a.lo:link, a.lo:visited

[animgirl]

I checked and I did take that hammer out.
I know I re-uploaded it too!

My web server's cache time is slow....

I re-uploaded it (http://www.alliancemusic.org/newversion/recordings.html)

sorry for the confusion...