please help me with my footer

Freddy

No it doesn't, i lied, sorry.

any reason that the footer image cant all be one image that resizes as you resize the screen, i think if you declare the image width in % in the css instead of in the HTML it will expand/contract with the window.

Okay so the bottom of the page will jusp about when you first load it but hopefully no-one will head to your footer first. Not ideal, or even tidy but it should work

Freddy

Can you please explain how I can do this? I don't understand how I can give a background image a width of 100% and that will make the browser interactively resize thet image depending on it's width--- If this is possibly, please share the secret!

It is depressing though to know that accomplishing this with tables is so easy-- yet not easy with css...

on w3.org they say:

div {
background-image: url(plasma.png);
background-size: 100%;
background-origin: content}

and I tried that and it does not work... It's almost that background-size is ignored by my browsers (deerpark and safari).

-patrick

background-repeat:repeat-x

that does not solve the problem either. I do not want the image to repeat.

I have a gradation of colors that goes dark to light from left to right, and then a 1 pixel width image that is at full lightness, which is what I would want to repeat. I could not get this to work with CSS, and was then told about making it resize to the window-- but as far as I can tell, this is a css3 feature which is not working in my browser...

-patrick

patrick, could you post a pic of what you want to accomplish? I see no footer or footer2 divs in your page.

erm I think he's taken them out...as I no longer see them there now either.

larmyia

sorry.. yeah I did take them out.. but I put it back up as a differnet file:

http://collinatorstudios.com/music/indexfoot.html

-patrick

Ah, okay, I see what you're trying to do now. The problem is you will only get what you want with an exact width of 1000px. You could put a wrapper around the entire page of that width. If you did that, I would just make it one image instead of two. Now on the other hand, if you want it to be flexible, you need to nest the divs. The outer footer div would have the repeating 1px slice, the next inner div would have the left side image (of 800px width) set to no-repeat top left and would 'cover' the preceding repeating image. Another way to accomplish this is to use only one image larger in width than you need (say 1500px) so that it would fit most any viewport. I'm guessing you've split the image to save file size, but the left most image is very large (96.44KB) for web background images to begin with. Also, it looks like you have a developing case of divitis. It really isnt' necessary to wrap everything in a div. Why not use header tags for your genre classed divs? It's not even necessary to wrap every anchor in a p tag. In fact the entire content may be served better as a definition list.

blah!

ok.. I want to know how to do everything right!! but see still to this day, I do not know when to use a class or an id.. or when to ever use a definition list... I just don't understand why that is better.. why is using paragraphs unnecessary.. what is the difference between using my class of genre and using h3? How is it really different? why is it better?

-patrick

ok.. I want to know how to do everything right!! but see still to this day, I do not know when to use a class or an id.. or when to ever use a definition list... I just don't understand why that is better.. why is using paragraphs unnecessary.. what is the difference between using my class of genre and using h3? How is it really different? why is it better?

-patrick

Semantically, why use this:

<div class="genre">

	<p>solo piano:</p>
</div>

It's a heading for a group of items. Therefore it makes sense to use a heading tag.

Also, it's a kind-of definition list. Try this:

<dl>
<dt> Orchestral </dt>
<dd> <a href="http://collinatorstudios.com/music/nedtheme.mp3">
Nightmare Ned Theme</a> </dd>
..
</dl>

The links aren't paragraphs of text, so they shouldn't be wrapped in paragraph tags.

dl.genre {
	font-size: 10pt;
	margin: 0;
	width: 100%;
	padding: 3px 0px;
	letter-spacing: 0;
	float: left;
}

dl.genre dt {
	background: #112;
	text-transform: uppercase;
	padding: 3px 0;
		}

dl.genre dd {
	font-size: 10pt;
	letter-spacing: 4px;
	text-transform: lowercase;
	margin: 0px 36px;
	padding: 0;
			}

<dl class="genre">
<dt> orchestral:</dt>
<dd> <a href="http://collinatorstudios.com/music/nedtheme.mp3">Nightmare Ned Theme</a> </dd>
<dd> <a href="http://collinatorstudios.com/music/medical.mp3">Medical World</a> </dd>
<dd> <a href="http://collinatorstudios.com/music/balloon.mp3">Balloon World</a> </dd>
<dd> <a href="http://collinatorstudios.com/music/cin1.mp3">Revenant Theme #1</a> </dd>
<dd> <a href="http://collinatorstudios.com/music/cin2.mp3">Revenant Theme #2</a> </dd>
<dd> <a href="http://collinatorstudios.com/music/cin3.mp3">Revenant Theme #3</a> </dd>
</dl>

ok.. I see.. but what if I want to do multiple columns for my links? how will I accomplish that?

like how it would look as if each song was in a table perfectly spaced apart from each other...

how can I accomplish this using the dt and dl method?

-patirck

I did as you suggested with the dd and dl's-- though I am still wanting to do the multiple columns..

Anyway, once I changed this, my footer got all screwed up and suddenly it was floating at the top of the screen-- and I cant get the bottom nav bar to fit perfectly center with the footer background.. its behaving very strangely.. any ideas? The updated page is at:

http://www.collinatorstudios.com/music/

also, for the <dt> headers, how can I move the text to the right? When I do padding or margin, it just pushes the whole thing over (including the background)-- I want to be able to move the text over slightly (independantly of the background).

-patrick

Things are looking better, but you only need one definition list - not eight.

<dl class="music">
  <dt>orchestral:</dt>
    <dd><a href="http://collinatorstudios.com/music/cin1.mp3">Revenant Theme #1</a></dd>
    <dd><a href="http://collinatorstudios.com/music/cin2.mp3">Revenant Theme #2</a></dd>
    <dd><a href="http://collinatorstudios.com/music/cin3.mp3">Revenant Theme #3</a></dd>
    <dd><a href="http://collinatorstudios.com/music/nedtheme.mp3">Nightmare Ned Theme</a></dd>
    <dd><a href="http://collinatorstudios.com/music/medical.mp3">Medical World</a></dd>
    <dd><a href="http://collinatorstudios.com/music/balloon.mp3">Balloon World</a></dd>
    <dd><a href="http://collinatorstudios.com/music/graveyard.mp3">The Graveyard</a></dd>
    <dd><a href="http://collinatorstudios.com/music/attic.mp3">The Attic</a></dd>
    <dd><a href="http://collinatorstudios.com/music/manor1.mp3">Manor Theme #1</a></dd>
    <dd><a href="http://collinatorstudios.com/music/manor2.mp3">Manor Theme #2</a></dd>
    <dd><a href="http://collinatorstudios.com/music/drawingroom.mp3">The Drawing Room</a></dd>

  <dt>solo piano:</dt>
    <dd><a href="http://collinatorstudios.com/music/prelude.mp3">Prelude in A Major</a></dd>

  <dt>electro-acoustic with vocals:</dt>
    <dd><a href="http://collinatorstudios.com/music/sweetbliss02.mp3">Sweet Bliss</a></dd>
    <dd><a href="http://collinatorstudios.com/music/kywodMP3.mp3">Killed Yourself Without Dying</a></dd>

  <dt>instrumental electronic:</dt>
    <dd><a href="http://collinatorstudios.com/audio/landscape.mp3">Landscape</a></dd>
    <dd><a href="http://collinatorstudios.com/music/avenger.mp3">The Avenger</a></dd>

  <dt>sound tracks:</dt>
    <dd><a href="http://collinatorstudios.com/music/indulgence.mp3">Indulgence Soundtrack</a></dd>
    <dd><a href="http://collinatorstudios.com/music/robotracers.mp3">Robot Racers I</a></dd>
    <dd><a href="http://collinatorstudios.com/music/mastervirus.mp3">Robot Racers II</a></dd>
    <dd><a href="http://collinatorstudios.com/music/finalbattle.mp3">Robot Racers III</a></dd>

  <dt>sound tracks:</dt>
    <dd><a href="http://collinatorstudios.com/music/indulgence.mp3">Indulgence Soundtrack</a></dd>
    <dd><a href="http://collinatorstudios.com/music/robotracers.mp3">Robot Racers I</a></dd>
    <dd><a href="http://collinatorstudios.com/music/mastervirus.mp3">Robot Racers II</a></dd>
    <dd><a href="http://collinatorstudios.com/music/finalbattle.mp3">Robot Racers III</a></dd>

  <dt>sound tracks:</dt>
    <dd><a href="http://collinatorstudios.com/music/indulgence.mp3">Indulgence Soundtrack</a></dd>
    <dd><a href="http://collinatorstudios.com/music/robotracers.mp3">Robot Racers I</a></dd>
    <dd><a href="http://collinatorstudios.com/music/mastervirus.mp3">Robot Racers II</a></dd>
    <dd><a href="http://collinatorstudios.com/music/finalbattle.mp3">Robot Racers III</a></dd>

  <dt>sound tracks:</dt>
    <dd><a href="http://collinatorstudios.com/music/indulgence.mp3">Indulgence Soundtrack</a></dd>
    <dd><a href="http://collinatorstudios.com/music/robotracers.mp3">Robot Racers I</a></dd>
    <dd><a href="http://collinatorstudios.com/music/mastervirus.mp3">Robot Racers II</a></dd>
    <dd><a href="http://collinatorstudios.com/music/finalbattle.mp3">Robot Racers III</a></dd>
</dl>

Now to move the text on the dts over you can either use padding or text-indent. They should both work without affecting the background image.
Now for the footer, delete the width: 100%. A div, by nature, will expand to all available width. Declaring 100% will result in scrollbars if you add borders, padding or margin. You only need two divs to achieve want you want in the fashion your implementing (have you tried the one image yet?).

<div id="footer">
  <div id="footernav">
    <a href="../index.html">Home</a> | <a href="index.html" class="current">Portfolio</a> | <a href="../lessons/index.html">Lessons</a> | <a href="../projects/index.html">Projects</a> | <a href="../management/index.html">Management</a> | <a href="../resume.html">Resume</a> | <a href="../articles/index.html">Articles</a> | <a href="mailto:[email protected]">Contact</a>
    <p>Copyright &copy; 2005 | Last Updated: 08/14/05</p>
  </div>
</div>


#footer {
    background: url(../images/backgroundright.png) repeat-x;
    border: 1px red solid;  /* I'm guessing this is for testing only */
    font-size: 10pt;  /* really shouldn't use points for screen */
    letter-spacing: 0;
    text-align: center;
    position: relative;
    height: 205px;
    padding: 90px 0 0 0;
    }

#footernav { 
    background: url(../images/background6d.png) no-repeat;
    }
    

As for columns you could float the dt or dd to your liking.

I tried what you suggested.. and it's still messed up... what am I doing wrong?

http://www.collinatorstudios.com/music/

-patrick

nevermind.. got it working..

-patrick

And the solution was....

Did the code examples TPH and esp Wolfcry provided at length prove a help then ?

Hugo.

I actually don't know-- I just kept messing with it until it finally worked.. changing the order of the divs, and the float left/right......

-p