Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    position: property problems

    Hi,

    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?

    Thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post a link or some relevant source of your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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:

    http://psacake.com/web/jl.asp
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Thanks.

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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).

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Code:
    text-decoration:none;
    I was thinking this could be because it is inside an
    Code:
    <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.

    Thanks.

    EDIT: Whoops, forgot to upload the new versions of the pages. Done now.
    Last edited by Blekk; 07-17-2007 at 02:46 PM. Reason: Forgot Upload

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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:

    Code:
    * {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
    Last edited by ahallicks; 07-17-2007 at 02:53 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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;}
    Last edited by ahallicks; 07-18-2007 at 09:16 AM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help.

    I now understand the universal selector.

    But one thing is that
    Code:
    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.

  • #13
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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 just in case
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #14
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Blekk; 07-18-2007 at 10:07 AM.

  • #15
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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?

    Code:
    <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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •