Display issues for relative positioning

HTML & CSS
1

Hi

I have an arrow I am trying to position and the first issue is that it is positioning differently in different browsers and the second issue is that have of it is hidden.

I also have a 3d " is this what I need? " button that I am trying to possition slightly under the slider but when I move it down to where I want it that too is hiding.

You can see it here; organic web design, web design packages, wordpress web design

and the css I have used is here:

#arrow { height: 72px; width: 80px; background-image: url(images/green_arrow_s1.png); position: absolute; top: 80px; right: 100px; z-index: 1; }

is this what I need button is here:

.readmore { float: right; border: none; margin: 18px 0px 0px 0px; position: relative; z-index: 1; }

2

The arrow image is 100px wide but the container is only 80px wide, so you need to change that. Where do you want the arrow to appear?

3

yes that is right, the arrow is now fully showing. The arrow I want to place under the link " the 3 steps to success " so it points towards the tabs.

The " is this what I need " 3d button I want in the same place but the bottom is being cut off. It shows if I move it up 5 px but I want it to look like it is folding under the slider

Many thanks for your reply
I have to say i am very impressed with this forum so far, It is the best one I have used

4

OK, firstly add position:relative to

#pages-inside {
  height: 72px;
  margin: auto;
  [COLOR="Red"]position: relative;[/COLOR]
  width: 950px;
}

Then change the “right” setting to 0 (or whatever you prefer):

#arrow {
  background-image: url("images/green_arrow_s1.png");
  height: 72px;
  position: absolute;[COLOR="Red"]
  right: 0;[/COLOR]
  top: 80px;
  width: 100px;
  z-index: 1;
}

Not sure what the “is this what I need” button is. Can’t see it. :frowning:

5

ok, that’s sorted it, so you mean it has to have the relative in the part i want it relative to, but then how does the absolute in the arrow css know that it has to be relative to pages-inside?

Sorry I should have explained the " is this what I need " is called .readmore ( only I have changed the text in the image to show is this what I need, it is on the bottom of the slider on my home page )

6

When an element has position: absolute, it needs to know what to position itself in relation to. So place something like position:relative on the parent to give it context.

Not sure what you mean by “how does the absolute in the arrow css know that it has to be relative to pages-inside?”

the " is this what I need " is called .readmore

At the moment the image isn’t showing, and the link to it seems to be wrong.

7

I get it now, you explained it well thank you.

ok what I mean about the " is this what I need button ". I have just changed it to a transparent grey with the words " Find out which great website is best for you "

I’ve not set the link yet but the issue is that I want it to look like it is folding under the slider so it needs to sit just under the green but however if I move it ( by incrasing the top margin ) it dissapeas when it gets to the end of the slider and also it won’t go into the center when I increase the left or right margin

8

The image is still missing here. Could you check the file path? Where is that image stored?

9

mmm strange, it is showing when I refresh organic web design, web design packages, wordpress web design

can we upload attachments on here for me to show a screen shot? Can you not see a transparent dark grey " Find out which great site is best for you " just under the Ben Hunt quote

10

No, the image doesn’t show for me in any browser. I either see alt text or a broken image icon. You are seeing the image because it’s located here:

[noparse]http://localhost.localdomain/wpmu/wp-content/themes/eBusiness/images/readmore-Smooth-Blue_s1.png[/noparse]

But that’s on your computer. You need to upload it to the web for us to see it! (You’ll also need to change the file path.)

11

ahh right, changed it, is it working now? Are there any other images that do not show for you? ( except slider 3 and 4 as I’ve not added them Yet )

12

ok sorted all the images, I copied and pasted all my edited work from my localhost onto my hosting account and completely forgot about that - hanks for drawing it to my attention

  • so the button should be there now just under Ben Hunt’s quote. As you can see it should fit under the slider but when it goes beyound the edge of the slider it starts to cut it off only showing the part that is on the scroller - hope that makes sense
13

It gets cut off because of the overflow hidden here:

#sections {
  color: #FFFFFF;
  float: left;
  height: 267px;
  margin-bottom: 15px;
  [COLOR="Red"]overflow: hidden;[/COLOR]
  position: relative;
  width: 950px;
  z-index: 2;
}

My suggestion would be to place this link outside the #sections div and move it up over that div—though this assumes that you can use the same link for each slide panel.

14

I got a bit confused about where to put it then I decided to add a longer rectangle on the whole of the bottom. But strangely the 2nd scroller doesn’t position it the same as the others, even though the class is the same and the css is the same.
.
This is my first website, what is your opinion of it? And I’m not too sure now about how that find out more button looks at the bottom there and what’s the issue with the 2nd one?

Your a great help thanks

15

Hmm, I would move the whole thing out of the slider div and have it underneath it, not sliding with each slide, as it isn’t specific to each slide. Then you only need it there once.

16

Great, I gave it a go. Only problem now is the slider arrows ( either side ) are now behind. I’m guessing it’s something to do with the z index?

Sorry won’t keep you much longer

17

Have you updated the page? It doesn’t seem to have changed.

18

sorry just did that now and also the link on the readmore rectangle does not activate either

19

Hmm, still hasn’t changed for me. Maybe I’m missing something. :frowning:

I would change the height on the slider to eliminate the button at the bottom, which I would remove from the slider div altogether. I would place that as a static div underneath the slider, which didn’t move with the slider, but is just a simple link.

20

i’ve updated it but sometimes for some reason it takes a long time for the updates to show, which is why I am editing it in the local host mostly, but the only issues now is the two scroller arrows are placed behine and the readmore link does not activate a pointer when you roll over it…

your website looks good by the way