Need some CSS help please -

Hey,
Please take a look at my website:

Here is a /test/ directory I've created to do my work, so please don't post a live link to it:

pokereagles.com/test/

First, I'm not even bothering with IE yet. I want to finish it in FF and then move to fixing it in IE.

My first problem is with the spade image that is currently in the middle of the page to the right....

Here is the code I wrote:

<div id="bottomright"><img src="images/bottomright.gif" /></div>

Code (markup):

and here is the CSS for it:

#bottomright {
	position: absolute;
	right: 0;
	bottom: 0;
}

Code (markup):

But im not sure why the picture is not appearing at the very bottom of the page.

Thanks a lot for your help.
Nima

 

You can instead add the following to your body style:

background:url(images/bottomright.gif) bottom right no-repeat;

Code (markup):

and remove this code

<div id="bottomright"><img src="images/bottomright.gif" /></div>

Code (markup):

at all.

 

and there's going to be half your problem. You should be testing each block in EVERY browser as you go, instead of the 'code for FF, hack for IE' mentality. What's going to happen is you are going to make a page built around firefox's errors and quirks, instead of 'standardized' code that works in all browsers in the first place. You should be testing each section you code in IE, FF, Opera AND Safari (we PC folks have NO excuse on that last one anymore) and if it doesn't work, instead of hacking it try to figure out if there's another way to code it without hacks. You hear a lot of "Experts" chanting "Code for FF, hack for IE" like it was a religious mantra - which is a bit like saying you play both kinds of music, country AND western.

That said, JOGS_DEV hit in on the head, assign it as a background-image to the body tag.

 

That was amazing to work.

Deathshado, I think you are right, but i saw so many people do it that way that I just started doing that myself. I will get the footer and start working from the beginning to fix for IE. but I doubt that it can be done without some of the IE hacks.

----------------------------------------------

I have a new problem now. Basically the same problem with the "Footer" section.
This is the code itself:

<div id="footer">Footer</div>

Code (markup):

This is what I have for the CSS

#footer {
	position: relative;
	bottom: 0;
	background: #000000;
	color: #990000;
	height: 100px;
}

Code (markup):

The text "footer" shows up where it is supposed to, but the black background shows up in the wrong place...

Thanks again
Nima

 

position: relative;
bottom: 0;

that bottom:0 should do nothing with position relative - unneeded declaration... actually no, would that ride it up? Either way that is NOT what I would try to use to move the footer. Fix the height and use a negative top-margin... I think.

From that code I can't even tell what you are trying to do with it... Good rule of thumb, position:relative with bottom or right is a BAD idea.

 

Im just trying to have a 100px footer area in the footer.

How does the negative height work though?

Nima

 

Then

#footer {
	background:#000;
	color:#900;
	height:100px;
}

Code (markup):

Negative top margin - if you apply a negative margin to the top of the element, it will ride up 'over' the content above it. I thought that's what you were trying to do with that position:relative - apparantly not...

Wait, are you trying to position the text at the BOTTOM of the footer?

If you can post up a picture of what you want the footer to do, I can show you the code to do it.

 

I already have the content and navigation and everything...

I just want the footer area to be at the bottom of the page.


A footer with 100px height, gray background and 100% width....

I am using the following code:

#footer {
	positoin: absolute;
	background: #CCCCCC;
	margin-top: -100px;
	height: 100px;
	width: 100%;
	border: solid 3px #4160D5;
	border-top: 0;
	color: #FFF;
}

Code (markup):

But its putting the footer area in the middle of the page (instead of bottom of the page) (here is a a preview of what I am doing right now:

http://www.pokereagles.com/test/

Code (markup):

 

Ok, WAY too much CSS for what you are trying to do. The footer is at the bottom of the code, you have floats... Hmm, maybe just clear the float?

It's a DIV, it's already display:block and 100% width...

#footer {
background: #CCCCCC;
height: 100px;
clear:both;
border: solid 3px #4160D5;
border-top: 0;
color: #FFF;
}

That should be ALL the code you need if you want it to appear at the bottom of the page - STAY AWAY FROM POSITION: as for what you are trying to do it's just overcomplicating the matter (and made me not even understand you are just trying for a simple footer)

Oh, and that margin top I mentioned WAS not a suggestion to add it to your code, it was my misinterpreting what you were trying to do with that position relative. It LOOKED like you were TRYING to move it up the page, not position it at the bottom. You were using positioning code where none was needed - as such I thought you were trying to add positioning of it further UP the page - and so did the browser. If it's in source order and the LAST thing in the source, it appears at the bottom BY DEFAULT.

Though I think your REAL problem was that you weren't clearing your floats.

 

Great, thanks a lot. I can't give Rep again. I will once I've spread rep enough....

Can you help me with this one too?:

Remember at top that i asked how to fix the picture in the bottom right of my website? Well. that got fixed, but the footer is now overlapping it. I want the picture to be on top of the footer (Obviously).....

I know that is done by z-index, but in this case the picture is being defined in the BODY part of the CSS so how do I give it z-index?


Thanks again,
Nima

 

Nima, with regard to your footer, were you trying to position it at the very bottom of the screen if there wasn't enough content to push it over the edge by any chance? I can show you how to do that if that's the effect you were after.

 

I want the footer to be in the very bottom of course. But I don't understand what you mean Dan,

 

He's asking one of two things - both of which I think are outside the scope of what you are doing.

The first would be that if there's enough content above it, to make the footer ALWAYS float on the screen letting the content push past it when you scroll up and down... I'm fairly certain that's not what you want.

The second would be if there isn't enough content to fill the screen, still have the footer always appear at the bottom of the screen... You seem to have enough content I wouldn't worry about that sort of thing.

As to putting the SPADE on top, in that case I think we'd have to attach it to the footer... in which case you DO want relative/absolute positioning given you've got that 3px background around it.

Gimme a few to shake out the cobwebs and wake up, I'll take a stab at that.

 

#footer {
	clear:both;
	height:100px;
	color:#FFF;
	background:#CCC;
	border:3px solid #4160D5;
	border-top:0;
	position:relative;
	overflow:visible;
}

#footer .spade {
	width:200px;
	height:200px;
	position:absolute;
	right:-3px;
	top:-97px;
	z-index:5000; /* just in case */
	background:url(images/bottomright.gif) no-repeat;
}

Code (markup):

and the HTML:

<div id="footer">
	Footer
	<div class="spade"></div>
</div>

Code (markup):

That should do what you want I think... It also puts the spade OVER the 3px border - if you want it inside the 3px border just change the right to zero, and the top to -100px;

 

Beautiful...

Thanks a lot. I'm working on this slowly slowly. Hopefully it will turn out to be a better design that the current one.

 

I just checked my website in IE and surprisingly not much wrong....

Except one big one : The right menu.


I'm not sure at all why the right menu is first, not showing up, and second, it seems like the page has a wider width (the same width as the right menu)....

http://www.pokereagles.com/test/

Code (markup):

Do you have any idea why it is doing that?

Here are the code that I am using:

  <div id="navigation"> 
    <h5><a href="http://www.pokereagles.com/">Hosting Poker Game</a></h5>
    <h5><a href="http://www.pokereagles.com/poker-rules/">Poker Rules</a></h5>
    <h5><a href="http://www.pokereagles.com/poker-strategy/">Poker Strategy</a></h5>
    <h5><a href="http://www.pokereagles.com/poker-movies/">Poker Movies</a></h5>
    <h5><a href="http://www.pokereagles.com/poker-superstars/">Poker Celebrities</a></h5>
    <h5><a href="http://www.pokereagles.com/entertainment/">Poker Entertainment</a></h5>
    <h5><a href="http://www.pokereagles.com/review/">Poker Reviews</a></h5>
    Advertisement<br/>
    Advertisement<br/>
    Advertisement<br/>
  </div>

Code (markup):

#navigation {
	position: absolute;
	top:0;
	float: right;
	right: 10px;
	background: #F6FF61;
	padding-bottom: 50px;
	width: 185px;
}

Code (markup):

And the Navigation is wrapped in a <DIV id="wrapper"> along with the "Content' section...

Nima

 

Those links aren't headings, so I wouldn't use them. Instead, I'd use a list.

<div id="navigation">
    <ul>
        <li><a href="/">Hosting Poker Game</a></li>
        <li><a href="/poker-rules/">Poker Rules</a></li>
        <li><a href="/poker-strategy/">Poker Strategy</a></li>
        <li><a href="/poker-movies/">Poker Movies</a></li>
        <li><a href="/poker-superstars/">Poker Celebrities</a></li>
        <li><a href="/entertainment/">Poker Entertainment</a></li>
        <li><a href="/review/">Poker Reviews</a></li>
    </ul>
    Advertisement<br />
    Advertisement<br />
    Advertisement<br />
</div>

Code (markup):

Also, don't mix absolute positioning and floats - they're as separate as night and day.

 

But if I dont position it absolute, it falls down and doesn't show up where it is supposed to at all....

http://www.pokereagles.com/test/

Code (markup):