Text and Image Position Issues

HTML & CSS
1

Okay, having some CSS issues (obviously) – the first one is prolly something stupid, but the second one I’m not so sure about.

I just need the links at the bottom of the sky background, resting on top of the water… The part with the sky is it’s own div, and then the water is another div. :confused:

The other one may just be some kind of image rendering issue; not sure. I guess you’ll figure it out as soon as you see it >.>

The sea turtle is in there as an img (it’s in the main wrapper div, but outside/below the main content div), the blue bg is just the body bg color, the sand where the drop-shadow is is a separate div, and then the color change beneath that is another div. As you can see there is that funny line where the drop shadow cuts off. I’ve triple-checked the div hight… it’s correct (measured it and everything), the sea turtle image itself doesn’t cut off like that, so I have no clue what’s causing it :sick: The sand bg is only on repeat-x, so I know it’s not repeating below were it’s suppose to.

Let me know if you need to see the code for that one x.x

Help please! :confused:

2

Re the absolute positioning idea… it’s something I would do if my div could GROW. But if it’s a div who has rather fixed dimensions, I’ll use top-padding on the div to push down its contents instead. The background image still starts at the top of the div, and if any height were set on the div, reduce that height by the amount of padding you’ve added in.

I’m not sure which of the two methods is best for dealing with text-enlarge though.

3

See attached files.

4

Yep, that’s fine.

5

A link to what? I haven’t put it online yet :injured:

And if I put it online I’ll have to put EVERYTHING online :sick: and it’s not done yet.

I’d rather just attach/send a rar/zip file if that’s okay?

6

OK, but I think it’s time for a link. :wink: (If you prefer, we can always remove it later.)

7

Yes! :injured:

The second image, in the original post, below the sea turtle drop shadow – it needs to be fixed. I am trying to figure out if it’s the CSS, the image, or something screwy x.x If it can be fixed, obviously I’d like to do that; or if it can’t be fixed then I need to know so I can do something different.

8

I’ve lost track of this. Do you have an actual question or problem now?

9

Also, it seems you keep changing your coat/fur style weekly!

Football’s over. My poes was turning into a lion, which is a symbol of the Netherlands esp wrt football : )

10

Well I didn’t see a place to edit my previous post… I thought I’d add the actual image file too :sick:

Sorry guys, here it is now :slight_smile:

11

Duuuh, I guess I should have thought of that one on my own :shifty: Oh wells.

Also, it seems you keep changing your coat/fur style weekly! :eek:

12

A lot of this you just have to learn when you come to it. It took me about a year to find out why that space kept appearing under images. :frowning: (I wasn’t a SitePoint member at that stage…)

13

Wow… I love how all my issues are retardedly easy to fix.

Oh well, at least they’re not difficult. Looks like my CSS skills just need a bit of fine-tuning.

Thanks so much :slight_smile:

14

Okay cool. Thanks guys.

As for the image…
Haha, this is gonna look ugly – don’t judge me! :mad:

<div id="FooterTopper">
	<img src="images/backgrounds/seaturtle.png" alt="A Sea Turtle" />
</div>

<div id="Footer">
	<div>
    	<p>Footer info here.<br /><br />
    
    	Website design and development by Monique MaiGnan.</p>
    </div>
</div>

#FooterTopper
{
	background-image: url(../images/backgrounds/footer_sand.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	width: 100%;
	max-height: 610px;
	overflow: hidden;
	
}

#FooterTopper img
{
	margin-left: 439px;
	border: none;
}

#Footer
{
	margin: auto;
	min-height: 100px; /* must match negative margin of #Wrap */
	clear: both;
	
	width: 100%;
	background-image: url(../images/backgrounds/footer_subsand.gif);
	font-size: 16px;
}

The footer isn’t inside any other div or anything else; just the <body> tag :slight_smile:

15

Yes it wil work, though occasional bugs will pop out from it, but just whack it in the head when they come :slight_smile:

16

I’m a bit wary of using relative/absolute positioning. Will that work in every browser? (every != < IE8)

Yeah I figured, I will get that for you as soon as I get back to my laptop (haha, couldn’t get online yesterday).

17

That code I gave is very reliable. It’s never failed me in any browser, which is why I suggested it. Give it a shot… I’m pretty confident you won’t have a problem. :slight_smile:

18

Funny how much easier this is with files to play with, though I should have seen the problem without them.

By default, a little bit of space is left below images, so that if they are in line with text their bottom will align with the baseline of the text. That means there is a bit of space under the image below which the text descenders hang. That is, the image aligns with the the line the text sits on, rather than the bottom of letters with descenders, like p, y, g etc. This happens even if there is no text next to the image.

The fix is simple:

#FooterTopper img
{
	margin-left: 439px;
	border: none;
	[COLOR="Red"]vertical-align:bottom;[/COLOR]
}

Let us know if any other problems crop up. :slight_smile:

19

Hi ShinoKage,

For the nav to sit at the bottom of its div, give the div

position: relative

and give the nav

position: absolute;
bottom: 0;

As for the turtle drop shadow, you guessed it, we need to see some code. :wink: Really, though, a link would be better. (Just as, if you want us to rate your music, we’d rather hear it than look at sheet music.)

Anyhow, both issues should be easy to fix, I would think. :slight_smile: