View Full Version : position: property problems

07-17-2007, 11:25 AM

I am having trouble with positioning my rollover div. When you rollover "quick contact" a div appears with the contact information, but it is in completely the wrong place. So I used position:absolute and some different values of top: and left: but all they do is change the width and height of the div, not move it at all.

Any suggestions?


07-17-2007, 12:34 PM
Please post a link or some relevant source of your page.

07-17-2007, 12:39 PM
Hmmm... pretty sure I answered this one last time? You need to move where you have put the absolutely positioned item because it will be positioned from the div you place it in after the one before. Because you are going to have users with different resolutions/window sizes and you want it to appear in a specific place, it could be tricky. I suggest you attempt to use a CSS rollover trick to create the pop up rather than just an absolutely positioned div:


07-17-2007, 12:56 PM
Sorry, I thought I had posted the link.

Ah thankyou ahallicks, I will try that soon, (after lunch :)).

P.S. I remember asking that last time, but I do not remember getting an answer, maybe I just missed it.


07-17-2007, 01:06 PM
Thanks but after trying it, I realised that it is basically what I am already doing but with a <span> rather than a <div>. This is better for the fact that it will now pass the w3c xhtml validation test, but I don't see any other difference (except for the z-index change, that wasn't needed on my webpage).

07-17-2007, 01:18 PM
And the fact that it will appear right next to the mouse when you hover over it, rather than at the very left hand side of the screen as it did when I hovered over the div. This acts as a tooltip, and that's basically all you need. You then position the tooltip to appear a certain distance from the mouse, so the contact details will ALWAYS appear next to the part that says 'contact details'.

I did attempt to answer it in the last thread, sorry if you missed it. This answer was better anyway :p

07-17-2007, 02:51 PM
Ah right ok, I thought when I was reading it that it was going to be like a tooltip, but when I rolled over their example, it didn't seem to display next at the pointer, just always in the same place. Maybe that is just safari. I'll try it out with some different browsers, thanks for the help.

07-17-2007, 03:36 PM
Ok, thanks for all the help on this website so far alhallicks and others. I just have two more small problems:

1. There seems to be a gap between the header and the main content now, no idea why, nothing around there has been changed, neither has the placement of the logo or the "quick contact box".

2. All the text in the rollover quick contact box is all underlined even though I have
text-decoration:none; I was thinking this could be because it is inside an
<a></a> but I don't know how to get rid of it.

The site is temp at: http://www.mpagbyorksregion.co.uk/tomsmith/Blooms all css is within the page.

Any ideas of how to solve these would be welcomed.


EDIT: Whoops, forgot to upload the new versions of the pages. Done now.

07-17-2007, 03:49 PM
To get rid of the underline just put the following in the stylesheet, it will apply to all links, so you can redefine if you want other links to have an underline when hovered:

a:hover {
text-decoration: none;

Put that 'Welcome To...' section in an <h1> tag as it's your main heading, then you can give it a class and style it independantly. Not sure which bit you mean has a big gap in it? If it is that header then you should be able to sort that using the <h1>.

I'm going to suggest you add the following to your style sheet to zero out margins and padding, which may make life a little easier:

* {padding: 0; margin: 0;}

li {
margin-left: 20px;
padding: 2px 0;

p {
margin: 12px 0;

And then follow on by saying... put the paragraphs of text into <p> tags

07-17-2007, 04:09 PM
ok thanks again ahallicks,

I thought I had put my titles in h1s and h2s but obviously not, so thanks for pointing that out. Also, does the 0 after a padding definition and margin definition 0 out all the other padding properties except for the one that has just been defined? Is that why it is used?

Also, the gap that I am talking about, is between the top rounded corners and the logo

07-18-2007, 10:07 AM
The Universal Selector I mentioned above (the * bit in the CSS) will zero out ALL margins and padding, making it easier to create sites that look closer to the same in all major browsers. This will help get rid of strange gaps, usually in IE.

To get rid of the gap, use:

.topcontainer { height: 10px; width: 382px;}

I've taken out the display: inline; bit, which seems to work

Oh, and before my internet died yesterday I was going to suggest to you that you center the site properly changing your container div (which should be an id, rather than a class) to:

.container {margin: 5% auto; width:382px;}

07-18-2007, 10:52 AM
Thanks for the help.

I now understand the universal selector.

But one thing is that
margin: 5% auto;

What does the auto part do? does it just auto the other margins, such as margin-right, margin-bottom and margin-left?

Thanks for the help so far, it has really made it simpler.

07-18-2007, 10:59 AM
margin: 5% auto;

Basically it's short hand for adding margins... the first is the top and bottom and the second is the right and left. So this is going to give you 5% on the top and bottom, and auto on the left and right. Auto, when used in conjunction with a set width will center the page horizontally as long as you have a correct doctype.

Universal Selector Info (http://www.ahallicks.co.uk/universal_selector.php) just in case ;)

07-18-2007, 11:02 AM
Ok thanks, that seems to have worked.

Actually I just tried the #container part, and it just put it all on the left with no margin atall.

07-18-2007, 11:16 AM
In .quickcontact:hover span change the height to 110px, I've just noticed that the text flows out of the bottom of the box in FF2! Update your live site with your changes so I can take a look please, the margins haven't been applied to the live site yet.

Also, curiously, what is this line about?

<center><a class="image" href="#" alt="flower"><img src="images/content/flower.jpg" border="0" /><span>A flower</span></a></center>

the second image has no alt tag, and there is no attribute 'border' that should be defined in the CSS with:

img {border: none;}

Also there is no <center> attribute either and should be placed in a <p> and given a class that has text-align: center; in it ;)

07-18-2007, 12:00 PM
The pages and images are uploaded now.

You see I am having to use an online uploader at the moment, and it takes its time.

That <a class="image"... is for the caption below the image when a user rolls over, right now it just says "a flower" but obviously that is going to change.

I have one problem though (I am sure you are please). On the services page, because my client wants the images from the old site on, I have put them in another little rollover part. Under each block of text about a certain service (weddings for example). There is a piece of text saying "rollover for examples of our work". This makes the 2 images viewable.

The problem is that they display one under the other, even though there is obviously enough space for both on the same line. I have tried display:inline and display:compact, neither of which worked.

Any ideas?


EDIT: Could I just put the images in a div, that has margins etc and is display:inline, and then have that div inside the <a></a> tags, and reference the div in the script.

EDIT2: Oh no, because then it wouldn't be XHTML valid, doesn't matter about that last part.

07-18-2007, 12:51 PM
First things first use the following for #container:

#container {margin: 5% auto; width:382px;}

You have set all of the margins and then added auto afterwards, which is making things appear a little off! That is what you need, so stick it in instead of all of the other stuff you have.

As for these rollovers, they are not actually working for me? I have FF2 and when I hover over the text that says "Rollover for examples of our work" nothing happens?

And you still need to change the height of .quickcontact:hover span to 110px!

07-18-2007, 03:44 PM
I have now got my container centred using the auto property, so thanks for that.

Also, I have been using Safari and the images open up fine. But now I have just tested it in FF2, and you are right, nothing in happening. I have no idea why not, because I am doing the same method as the rollover tutorial as I remember, not followed perfectly, but definitely a lot like it.

I have made the box longer now also :)

07-18-2007, 04:53 PM
Well, the rollovers seem to be working well now, so nice one. However, you need to add:

img {border: none;}

to your style sheet to get rid of those horrible blue borders on the image links! Also you're top and bottom sections seemed to be messed up now... any ideas what the reason for that is? What have you changed?

07-19-2007, 11:04 AM
As you can see I have changed the width to accomodate the images and make it able to display more content, only that meant I had to change the top and bottom middle images.

You see, in the top container there was 2 rounded corners and a middle image, but obviously that image isn't long enough anymore, same for the bottom.

So for the top I made a class for it, with the background-color the same as the original image and a border across the top.

With the bottom, I made the bit that had a bit of flower in it an image, then made a 1-pixel wide image to repeat in a div or something, for thr rest of it.

The classes are called topmid and bottommid respectively, they both have their width property set to fit exactly inbetween the rounded corners.

I made them divs, but that didnt work, so next I tried span which didn't work, and then I tried <object> which did work for the browser I am using "Safari" but subsequently, not for other browsers like Opera and FF.

Any idea why? And any idea what other tags I could use?


07-19-2007, 11:42 AM
I have rectified this problem for now just by creating two images that are the right lengths, because of my short time scale.

But I would it to be able to work with varying lengths using the classes I had created called topmid and bottommid, which can be seen in the stylesheet for the pages called style.css.

Any ideas?


07-19-2007, 11:52 AM
Have you tried width: 100%?

Also, I'd recommend that you add:

height: 100.01%; to the html because this will give you a constant scroll-bar as, at the moment, if you hover over the 'Hover to see the image' links the whole page shifts very annoyingly in FF!

07-19-2007, 11:56 AM
Ok thanks I've done that scrollbar thing.

About width:100% as the two rounded corner images and this main thing (class element?) with the top border and background-color, if I make it width 100%, will it not just cover the rounded corners too?

This also would not work for the bottom rounded corners because there are the rounded corners and the small image with the bit of pink flower, and then the repeating image element.

07-19-2007, 12:02 PM
Actually the scrollbar thing hasn't worked, where do I add it?

07-19-2007, 12:09 PM
Hmmm... it seemed to work when I tested it?

.bottomcontainer {height: 10px; width: 100%;}
.topcontainer {height: 10px; width: 100%;}

And for the height thing add this in:

html {height: 100.01%;}

Edit: and I suggest you add text-align: justify; to the .textcontent to make things look neat

07-19-2007, 12:14 PM
Ok thanks I'll try those now.

07-19-2007, 12:44 PM
So should I be using divs for this or spans or...?

07-19-2007, 02:38 PM
divs should be fine... as long as they are floated left they will sit next to each other... we are talking about the top and bottom sections right?

07-20-2007, 10:46 AM
Yeah we are talking about the divs "topcontainer" and "bottomcontainer", I'll try the float thing later thanks, just in FF and Safari, the divs didn't even display. For now I will leave them as images as I have some other work on the site and it has to be done today.

Thanks though, I'll probably do it for my own site sometime :)