SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Belgium
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <h1> not wide enough

    Little question:

    http://www.croontje.be/fotoalbum.php

    When you click on a link on this page you see a photo album, when you enlarge a pic everything looks ok unless you use a low resolution like 800x600. Then you can see that the title isnt as wide as the picture itself.

    You can see the same effect on this page (not only at 800x600 but also at higher res)

    http://www.croontje.be/cartoon.php

    Is there a solution for this problem?
    It only occurs in IE. I use firefox and with this program it looks always ok

    Btw. is my css correct? I recently changed all my tables to css but i hope i use it correctly ...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that your table is about 520px wide with the images and you also have margins on the side which make it larger than 600px. When the browser resizes and meets the table then the other elements keep on re-sizing smaller such as your h1 but the table is held wide.

    Mozilla still collapses the background but behind the table.

    You could give your table a width and take out the margins to make it look ok at 600pxl
    Code:
    .inhoud{
     border: 1px dashed;
     border-color: #909090;
     margin: 10px 10px;
     width:520px;
     z-index: 2;
     text-align: left;
     padding: 0px 0px 0px 10px;
     font-size: 12px;
    }
    Alternatively just float your images left (not in a table) and then the page can resize at leisure. You should try and make your images the same size so that it looks neater.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Belgium
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    The problem is that your table is about 520px wide with the images and you also have margins on the side which make it larger than 600px. When the browser resizes and meets the table then the other elements keep on re-sizing smaller such as your h1 but the table is held wide.

    Mozilla still collapses the background but behind the table.

    You could give your table a width and take out the margins to make it look ok at 600pxl
    Code:
    .inhoud{
     border: 1px dashed;
     border-color: #909090;
     margin: 10px 10px;
     width:520px;
     z-index: 2;
     text-align: left;
     padding: 0px 0px 0px 10px;
     font-size: 12px;
    }
    Alternatively just float your images left (not in a table) and then the page can resize at leisure. You should try and make your images the same size so that it looks neater.

    Paul
    But the width from the "inhoud" DIV is set in % so when i view my site on a high res it still fills up my screen ....

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    But the width from the "inhoud" DIV is set in % so when i view my site on a high res it still fills up my screen
    I thought I just explained that the minmum width of your table (with margins) is greater than 600px so that is the reason it won't fit into 600px or smaller. You can't have it fluid and also want a fixed width item inside. You would need to set a min-width to hold the layout intact but your min-width looks to be about 860px wide. Of course Ie doesn't understand min-width so you'd have to use one of the script/expression options if you went that route.

    You could either float the images (recommended) as I mentioned earlier or change your design so the headers don't have background colours. You could put background images in the parent which would then stay full width.
    Code:
    .inhoud{ background: url(images/bg.gif) repeat-x left top;}
    Of course you could always put your headers inside a table cell and then they would stop with the images.

    I think you may need to re-think your design a little bearing in mind that you have a large width element in the middle of your pages.

    Sorry I can't offer a full solution but this seems to be more of a design issue than a problem with the css.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Belgium
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanx

    Quote Originally Posted by Paul O'B
    I thought I just explained that the minmum width of your table ...

    Code:
    .inhoud{ background: url(images/bg.gif) repeat-x left top;}
    ...

    Paul

    Ok, i didn't understand it the first time but now i do and i think the solution with the small background pic is a nice one so i ll try that one. Thanx a lot

    /me is a happy new sitepoint member

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    me is a happy new sitepoint member
    Glad to hear it

    Just shout if you need any more help.

    Paul


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
  •