18 replies [Last post]
patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

Hi, can someone please help me with my footer? I want it so that div footer2 always begins immediately after div footer ends, so that if you stretch the windows horizontal width, there will be no gap between them.. And vice-versa, if you shrink the horizontal width, I don't want the two images to overlap or to have the gradient lighting look wrong.. Is there a way to accomplish this without tables?

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

css is at:

http://collinatorstudios.com/music/music.css

thank you in advance.
-patrick

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 19 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

please help me with my footer

Quote:
looks fine on FF - i guess you're checking in IE

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

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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:

Quote:

The first example stretches the background image independently in both directions to completely cover the content area:

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

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

please help me with my footer

background-repeat:repeat-x Wink

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

please help me with my footer

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

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

please help me with my footer

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

larmyia

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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

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

-patrick

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

please help me with my footer

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.

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

please help me with my footer

patrickco wrote:
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

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.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

please help me with my footer

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>

Verschwindende wrote:
  • CSS doesn't make pies

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

please help me with my footer

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.

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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

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

-patrick

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

nevermind.. got it working..

-patrick

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

please help me with my footer

And the solution was....

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

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 36 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

please help me with my footer

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