Display issues for relative positioning

HTML & CSS
21

I think it’s updated now, you should see the green arrows behind and the click here to find out doesn’t activate like a link

22

I would put the .readmore div after the sections div rather than before it. At the moment, the sections div is sitting on top of it, which is why it’s not clickable. Placing readmore after sections means you won’t need all that absolute positioning, either. It’s just following the natural document flow.

For the arrows to appear properly, you’ll have to raise the z-index of their container at least to 5.

23

great, thanks, it sorted the arrows out and I moved the readmore after the sections div but wierdly there’s still no link activated to it. Is there something wrong will my div tags or code or something, I’ve tryed some varitions like adding img tag or p tag but no diff

24

cheers

I’ve been using chromes inspect element till now but I will certainly give the firebug a go as it sounds good.

Thanks again, we can safely say this thread is resolved

25

OK, just a few minor changes needed.

Make the change in red below:

.readmore {
  background-image: url("http://organicwebdesigns.co/wp-content/themes/eBusiness/images/readmore-Smooth-Blue_s1.jpg");
  border: medium none;
  float: left;
  height: 36px;
  margin: -15px 0 15px;   [COLOR="Red"]// change to 0 0 15px;[/COLOR]
  text-indent: -5000px;
  width: 950px;
}

Remove the line in red here:

.slider-left-2 {
  float: left;
[COLOR="Red"]  height: 292px;[/COLOR]
  width: 490px;
}

Remove these two lines:

.readmore {
  background-position: left center;
  background-repeat: no-repeat;
[COLOR="Red"]  margin-top: 10px; 
  padding-left: 20px; [/COLOR]
}

Add this to your style sheet:

.readmore a {
  display: block; 
  height: 36px;
}

Hope that sorts it. :slight_smile:

26

wow, that sure did sort it out!!! I never would have figured that out!!! Any advice to a aspiring designer? I mean how do I learn all that? Can you give me any critisisms on my design so far?

I really appreciate all your help, I think you’ve worked really hard to help me on this. Any way I can return a favour?

cheers

27

Ha ha, that’s what we do here: tinker with people’s sites and fix ‘em. I’ve hung around here for a few years and thus learned to look ‘under the hood’. If you don’t have it already, download Firebug for Firefox. It lets you look at a site’s code and even tinker with it. You hover over each element, look at the styles set on it, and modify them until everything works. Very handy—not only for helping others but for examining one’s own sites. Most browsers have ‘developer tools’ like this, but curently Firebug lets you do just a bit more than the others’—though the dev tools for Safari, Chrome and Opera are all good.

PS: if you want a site review, the best thing to do is head over to the Webiste Reviews forum:

That way, you’ll get much more useful feedback than you’re likely to get here. :slight_smile: