SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange overlap error - but not using z-indexes

    Hi there,

    I have a strange problem with my CSS page - I am getting an unusual overlap error where the #login div is overlapping the .header div . I am not sure why this is happening as I am using no z-indexes as the site is meant to have a 'block' style to it.

    CSS:-
    Code:
    body{background:url(images/bg.png) repeat-x;background-color:#5f6970;padding-top:7px;}
    .container{width:750px;margin:0px auto;background-color:#ffffff;border:solid 2px #bcbcbc;}
    .header{width:740px;height:85px;background:url(images/header.jpg);margin:5px;}
    #login {height:56px;float:left;background-color:#aaaaaa;margin-left:5px;margin-right:5px;display:inline;border:solid 1px #bcbcbc;}
    #date {height:25px;background-color:#dadada;margin-left:5px;margin-top:-33px;border:solid 1px #bcbcbc;}
    
    #date,#login,#pridebulleted,#pridetitle,#latestnewstitle,#latestnews,#testimonial{width:233px;}
    #pridetitle{height:32px;background-color:#d6d6d6;margin-top:5px;margin-left:5px;border:solid 1px #d6d6d6;background:url(images/home/titles/weprideourselveson.jpg);}
    #pridebulleted{height:88px;margin-left:5px;border:solid 1px #aaaaaa;background:url(images/misc/weprideourselveson_bulletedlist.jpg) center no-repeat;background-color:#aaaaaa;}
    
    #latestnewstitle{height:28px;background-color:#436e83;margin-left:5px;border:solid 1px #436e83;margin-top:5px;}
    #latestnews{border:solid 1px #bcbcbc;margin-left:5px;}
    
    
    
    #head-ad{width:500px;height:124px;float:right;margin-right:5px;margin-top:5px;}
    
    #maincontent{width:500px;float:right;margin-right:5px;margin-top:5px;}
    
    #maincontent h1,#maincontent h1#services{font-family:Arial;font-size:19px;color:#444444;font-weight:normal;}
    
    #maincontent h3{font-family:Arial;font-size:19px;color:#ff0000;font-weight:normal;}
    
    #maincontent h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;}
    
    #maincontent h4{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-bottom:-10px;margin-top:-3px;text-align:center;}
    
    #maincontent h5{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:12px;margin-left:9px;margin-right:9px;}
    
    #maincontent h6{font-family:Arial;font-size:13px;color:#ff0000;font-weight:bold;margin-left:5px;margin-bottom:-5px;}
    
    #maincontent li{font-family:Arial;font-size:11px;color:#333333;}
    
    
    
    #maincontent-bulleted{width:250px;float:left;height:150px;}
    
    #maincontent-bulleted h1{font-family:Arial;font-size:13px;color:#ff0000;font-weight:bold;margin-left:13px;}
    
    #maincontent p{font-family:Arial;font-size:11px;color:333333;font-weight:normal;margin-left:5px;line-height:18px;}
    
    #maincontent p li {margin-left:10px;}
    
    #maincontent-text{width:310px;}
    
    
    #maincontent-text h1{font-family:Arial;font-size:11px;color:#666666;float:left;font-weight:normal;line-height:15px;margin-left:10px;}
    
    #maincontent-girl{height:212px;width:190px;background:url(images/misc/girlholdinghips.jpg);float:right;}
    
    #testimonial{height:147px;border:solid 1px #bcbcbc;margin-left:5px;margin-top:5px;}
    
    #testimonial a img{border:none;}
    
    #pgbtm-titlecontainer,#pgbtm-textcontainer{width:245px;}
    
    #pgbtm-titlecontainer{height:28px;background-color:#999999;margin-right:5px;}
    
    #pgbtm-textcontainer{height:122px;border:solid 1px #bcbcbc;margin-right:5px;}
    
    
    
    #pgbtm-textcontainer-sidetext{width:120px;float:left;}
    
    #pgbtm-textcontainer-sidetext h1{margin-left:5px;}
    
    #pgbtm-textcontainer-sidetext h1 a{text-decoration:none;color:#ff0000;}
    
    #pgbtm-textcontainer-sidetext h1 a:hover{text-decoration:underline;}
    
    #pgbtm-textcontainer-sidetext h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:-5px;margin-left:5px;}
    
    .pgbtm-container{float:right;}
    
    #footer{width:740px;height:50px;background:url(images/misc/footer.png);margin-left:5px;margin-top:5px;margin-bottom:5px;position:relative;display:block;clear:both;}
    
    #latestnews h1 {font-family:Arial;color:#333333;font-size:11px;font-weight:bold;margin-left:15px;}
    
    #latestnews h2 {font-family:Arial;color:#333333;font-size:11px;font-weight:normal;margin-left:15px;margin-top:-8px;}
    
    .imgthumb{margin:8px;float:left;border:solid 1px #bcbcbc;}
    
    .imgthumb a img{border:none;}
    
    #pgbtm-textcontainer-sidetext h1,.projectcontainer h1{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;}
    
    .projectcontainer h1{text-align:center;margin-top:-3px;}
    
    .projectcontainer h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:-7px;margin-left:9px;margin-left:9px;}
    
    
    
    /* PORTFOLIO */
    
    .projectcontainer{width:230px;height:185px; border:solid 1px #bcbcbc;float:left;margin:9px;background-color:#d8d8d8;}
    
    .portfoliothumb{margin:5px auto;border:solid 1px #bcbcbc;width:173;height:107px;}
    
    .portfoliothumb a img{border:none;}
    .portfoliothumb a:hover img{border:1px solid #999999;}
    
    /* END PORTFOLIO */
    
    /* BUTTONS */
    
    
    
    
    /* PROJECT */
    
    #imgcontainer{border:1px solid #BCBCBC;margin-left:5px;float:left;margin-right:5px;}
    
    
    
    
    /* SERVICES */
    
    #maincontent li#services{font-family:Arial;font-size:13px;color:#333333;}
    
    #maincontent li#services a{text-decoration:none;}
    
    #maincontent li#services a:hover{text-decoration:underline;}
    
    #featuredproject{}
    
    #featuredproject h1{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-bottom:-10px;margin-top:-3px;text-align:center;}
    
    #featuredproject h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:12px;margin-left:9px;margin-right:9px;}
    
    #head-ad a img{border:none;}
    Page - www.jh-webdesign.co.uk/test

    Any idea why this is happening?

    Thanks in advance for your help and advice

    Cheers

    James
    Last edited by redhillccwebmas; Jul 16, 2006 at 06:33.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your link is dead.

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that - the link is now corrected

    Thanks for taking a look at least

    James

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Remove height:56px from #login and it will work.

  5. #5
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit - Thanks, that is quite a nice fix - however if I want any text within the #login div then it now overlaps #pridetitle. Any idea how to keep these two elements within blocks so that they don't overlap each other?

    Your advice and help is much appreciated

    James

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Looks like you have a case of divitis. You are using too many divs unnecessarily. Classic examples are your #pride divs that just serve as images really - instead, you might as well use a simple img tag. The same goes for the girl. Also, the menu container is a div wrapped around a ul - a ul is a block element already so you don't need a div around it. You're also using h1 all wrong - it's supposed to be a header for a paragraph or some other content. Your "we are locally based" block of text ought to be a <p> for example, not an h1.

    #login is overlapping because it's floated and you haven't cleared it. If you add clear:left; you'll fix your problem (you can also give #login it's height of 56px back).

    However, your markup is not good. I count 17 floats on your page, which is bound to give you problems. Since your layout is bicolumnar, you should split it into two big columns, floating one to the left and the other to the right. Then you put all your blocks into them and they'll behave themselves.

    Simplify your code. Learn about CSS selectors so that not every single element has a class or an id. Get rid of the excess divs. You'll find it's easier to work with, easier to spot errors and easier to understand what is going on. For example, your Featured Services box contains another div which contains the header image. You don't need the div - the image is already a block. In this way you are likely to avoid things like those blocks misaligning.

  7. #7
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice - I have been recoding it and it is looking better with improved markup.

    However, on one of my pages, after recoding it, there is a layout problem. It is to do with .projectcontainer . I have 6 .projectcontainer boxes on my page at present. I want the .projectcontainer boxes to display like they do on the old page :- http://www.jh-webdesign.co.uk/test/portfolio.asp .
    However, when I tried transferring them to my new version of my page they display strangely, I think because I am new a new element, '.leftcolumn'. The float:right that I used before in my old page doesn't work and only makes the problem worse.

    The new version of my page is at http://www.jh-webdesign.co.uk/test/portfolio2.asp

    CSS for my new page -

    Code:
    body{background:url(images/bg.png) repeat-x;background-color:#5f6970;padding-top:7px;}
    .container{width:750px;margin:0px auto;background-color:#ffffff;border:solid 2px #bcbcbc;padding:5px;}
    .header{width:750px;height:85px;background:url(images/header.png);margin:0 0 5px 0;}
    #login {float:left;background-color:#aaaaaa;margin-right:5px;display:inline;border:solid 1px #bcbcbc;height:56px;width:233px;margin-bottom:5px;}
    #date {height:25px;background-color:#dadada;margin-left:5px;margin-top:-33px;border:solid 1px #bcbcbc;}
    
    #date,#login,#pridebulleted,#pridetitle,#latestnewstitle,#latestnews,#testimonial{width:233px;}
    #pridetitle{height:32px;background-color:#d6d6d6;margin-top:5px;margin-left:5px;border:solid 1px #d6d6d6;background:url(images/home/titles/weprideourselveson.jpg);}
    #pridebulleted{height:88px;margin-left:5px;border:solid 1px #aaaaaa;background:url(images/misc/weprideourselveson_bulletedlist.jpg) center no-repeat;background-color:#aaaaaa;}
    
    #latestnewstitle{height:28px;background-color:#436e83;border:solid 1px #436e83;margin-top:5px;}
    #latestnews{border:solid 1px #bcbcbc;}
    
    
    
    #head-ad{margin-left:3px;width:500px;}
    
    #maincontent{margin-top:5px;width:500px;}
    
    #maincontent h1,#maincontent h1#services{font-family:Arial;font-size:19px;color:#444444;font-weight:normal;}
    
    #maincontent h3{font-family:Arial;font-size:19px;color:#ff0000;font-weight:normal;}
    
    #maincontent h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;}
    
    #maincontent h4{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-bottom:-10px;margin-top:-3px;text-align:center;}
    
    #maincontent h5{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:12px;margin-left:9px;margin-right:9px;}
    
    #maincontent h6{font-family:Arial;font-size:13px;color:#ff0000;font-weight:bold;margin-left:5px;margin-bottom:-5px;}
    
    #maincontent li{font-family:Arial;font-size:11px;color:#333333;}
    
    
    
    #maincontent-bulleted{width:250px;float:left;height:150px;}
    
    #maincontent-bulleted h1{font-family:Arial;font-size:13px;color:#ff0000;font-weight:bold;margin-left:13px;}
    
    #maincontent p{font-family:Arial;font-size:11px;color:333333;font-weight:normal;margin-left:5px;line-height:18px;}
    
    #maincontent p li {margin-left:10px;}
    
    #maincontent-text{width:310px;}
    
    
    #maincontent-text h1{font-family:Arial;font-size:11px;color:#666666;float:left;font-weight:normal;line-height:15px;margin-left:10px;}
    
    #maincontent-girl{height:212px;width:190px;background:url(images/misc/girlholdinghips.jpg);}
    
    #testimonial{height:147px;border:solid 1px #bcbcbc;margin-left:5px;margin-top:5px;}
    
    #testimonial a img{border:none;}
    
    #pgbtm-titlecontainer,#pgbtm-textcontainer{width:245px;}
    
    #pgbtm-titlecontainer{height:28px;background-color:#999999;}
    
    #pgbtm-textcontainer{height:122px;border:solid 1px #bcbcbc;}
    
    
    
    #pgbtm-textcontainer-sidetext{width:120px;float:right;}
    
    #pgbtm-textcontainer-sidetext h1{margin-left:5px;}
    
    #pgbtm-textcontainer-sidetext h1 a{text-decoration:none;color:#ff0000;}
    
    #pgbtm-textcontainer-sidetext h1 a:hover{text-decoration:underline;}
    
    #pgbtm-textcontainer-sidetext h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:-5px;margin-left:5px;}
    
    .pgbtm-container{float:left;}
    
    #footer{width:740px;height:50px;background:url(images/misc/footer.png);margin-left:5px;margin-top:5px;margin-bottom:5px;position:relative;display:block;clear:both;}
    
    #latestnews h1 {font-family:Arial;color:#333333;font-size:11px;font-weight:bold;margin-left:15px;}
    
    #latestnews h2 {font-family:Arial;color:#333333;font-size:11px;font-weight:normal;margin-left:15px;margin-top:-8px;}
    
    .imgthumb{margin:8px;float:left;border:solid 1px #bcbcbc;}
    
    .imgthumb a img{border:none;}
    
    #pgbtm-textcontainer-sidetext h1,.projectcontainer h1{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;}
    
    .projectcontainer h1{text-align:center;margin-top:-3px;}
    
    .projectcontainer h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:-7px;margin-left:2px;}
    
    
    
    /* PORTFOLIO */
    
    .projectcontainer{width:230px;height:185px; border:solid 1px #bcbcbc;margin:3px;background-color:#d8d8d8;}
    
    .portfoliothumb{margin:5px auto;border:solid 1px #bcbcbc;width:173;height:107px;}
    
    .projectcontainer h4{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-bottom:-10px;margin-top:-3px;text-align:center;}
    
    .projectcontainer h5{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:12px;margin-left:9px;margin-right:9px;}
    
    
    .portfoliothumb a img{border:none;}
    .portfoliothumb a:hover img{border:1px solid #999999;}
    
    /* END PORTFOLIO */
    
    /* BUTTONS */
    
    
    
    
    /* PROJECT */
    
    #imgcontainer{border:1px solid #BCBCBC;margin-left:5px;float:left;margin-right:5px;}
    
    
    
    
    /* SERVICES */
    
    #maincontent li#services{font-family:Arial;font-size:13px;color:#333333;}
    
    #maincontent li#services a{text-decoration:none;}
    
    #maincontent li#services a:hover{text-decoration:underline;}
    
    #featuredproject{}
    
    #featuredproject h1{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-bottom:-10px;margin-top:-3px;text-align:center;}
    
    #featuredproject h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:12px;margin-left:9px;margin-right:9px;}
    
    #head-ad a img{border:none;}
    
    .right{float:right;margin-left:0px;}
    .left{float:left;width:233px;}
    
    a img{border:none;}
    Can anyone help me or tell me what I need to do for the .projectcontainer boxes to display on my new page like they do on my old version of the page?

    Thanks for any help you can give me

    Cheers

    James

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You have .right floated to the right. Give it a fixed width (your layout is a fixed-width one anyway, so it's OK), 515px works well, and then give the .projectcontainer boxes float:left. That should do what you want.

    The amount of CSS in your stylesheet really is still a bit insane. It's not a very big page and there is absolutely loads of CSS. You still have way too many divs. For instance, you don't need a div to wrap around your thumbs inside .projectcontainer. Images are blocks already so you can treat them in the same way you would a div.

  9. #9
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles, that's helped me somewhat. However I have been using probably overkilled on the CSS as I am still unsure as to perform some layout functions without the use of CSS. For example, I want the thumbs inside my .projectcontainer boxes to centre themselves - how can I do this without using 'margin:0px auto' in a div if I just outputted the image as just an img src?

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you want to do that, you give the img the margin:0 auto; (you don't need to specify px if it's just 0, after all, it's nothing so needs no units). Like I said, you can treat the img in much the same way as a div as they are both block-level elements. And thus margin:0 auto; will work on the img too:
    Code:
    div.projectcontainer img {margin:0 auto;}
    Another option is to give the outer div text-align:center; but that will center absolutely everything, including the text below the img. I'd still use the margin method though.

  11. #11
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles

    I have tried ur code snippet but it is not working - any ideas why not?

    Page - http://www.jh-webdesign.co.uk/test/portfolio.asp

    Thanks for your help - its appreciated.

    Kind Regards

    James

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You know, I've been talking out of my ****, don't know why I said that. img elements are inline not block. So you have two options:

    1. Keep the margin:0 auto; and give the images display:block (you'll also have to give them a margin-bottom of about 5px otherwise they'll align badly with the text underneath - or just set the margin to margin:5px auto; or whatever you wish). The downside to this is that IE doesn't do margin:auto, so you'll also have to throw in a text-align:center; which is also something IE does wrong (it shouldn't align the image but it does).

    2. Give .projectcontainer text-align:center; and this will centre the images. However, it will also centre all the text underneath it. You can alleviate this by wrapping the text in a span and giving it text-align:left;

  13. #13
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles for all your help on this - I am tidying my CSS now and its looking squeaky clean now!


Bookmarks

Posting Permissions

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