SitePoint Sponsor

User Tag List

Page 52 of 66 FirstFirst ... 24248495051525354555662 ... LastLast
Results 1,276 to 1,300 of 1630
  1. #1276
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    forgot to tell you this...

    the background image i am actually going to use isn't going to be a flat line horizon type of image but a gradient background...so if it is resized w/ the css it won't match the 'content fixed image 800x600' area. make sense?

    - skinnybonez

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

    Its just a repeating background image fixed to the body and placed centrally.

    Code:
    body {
      background: #000 url(images/black-white.jpg) repeat-x fixed 0 50%; 
      color: red;
    }
    The image is deep enough to cover the requirements of a centred page. I think the image is about 2000px but is still only about a half k.

    Here are a couple of similar examples.

    http://www.pmob.co.uk/temp/flashbg.htm
    http://www.pmob.co.uk/temp/centre-again.htm
    http://www.pmob.co.uk/temp/centred-stripe.htm

    Hope its of some use

  3. #1278
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up



    THANK YOU!!!!

    works perfectly...and a lot simpler than i was originally thinking.

  4. #1279
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Here goes quickly

    Mozilla and Opera7 support min-height which IE doesn't so for ie you have to use height alone.
    <<snip>>
    I hope the above all makes sense but I've just rushed of off quickly and I didn't have time to find you the links (I'm not supposed to be on the computer right now as we have guests lol)

    Anyway hope that helps.

    Paul
    Paul, 4 years later, here's a question for you... does it still fly in IE7? I've been using this for years, but I've recently had reports of a couple of previously stable things dieing in IE7.

    TIA!

    Ben

  5. #1280
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, it works perfectly (just tried it in IE 7 just to be certain).

    Courtesy of the resident browser junkie .

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

    Yes most of the demos are fine in IE7. There may be he odd one that I haven't changed yet but the only issues were an ie7 bug in some layouts with the min-height.

    If you used this version:

    Code:
    #outer{
    height:100&#37;;
    min-height:100%
    }
    html>body #outer{height:auto}
    For some reason ie 7 forgets about the min-height when you re-define height:auto so you have to also add the min-height again.

    e.g.

    Code:
    #outer{
    height:100%;
    min-height:100%
    }
    html>body #outer{height:auto;min-height:100%;}
    However most of my demos were using this version below which is fine in IE7 anyway. and needed no changes.

    Code:
    #outer{
    min-height:100%
    }
    * html #outer{height:100%}
    The switch to ie7 has been relatively painless and I have coded hundreds of sites this year for clients and there have been very few problems at all.

    The only other fixes you will probably need for IE7 are to force "haslayout" (see faq) and this can simply be done by adding a min-height:0 to the block level element concerned.

    You will see this most notably in lists and elements that have their dimensions defined by margins rather than height or width. However IE7 is a lot better than ie6 and "haslayout" isn't such a big issue now.

  7. #1282
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dan
    Yup, it works perfectly
    Thanks for the confirmation Dan

  8. #1283
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, Paul .

  9. #1284
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Chicago
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it all right to use spans instead of divs for your column layout?

    What I've grown accustomed to doing is to use three spans with a float attribute (left or right, depending on orientation) and finishing it off with a "spacer" div, with a clear attribute set to "both".

    Since the bulk of the content is in these three columns, I'd need to distinguish different entries for easy viewing. Using only divs inside the column throws off the layout since the columns are spans. However, a span-div-span-div inside the columns approach worked for me. Here's what I took.

    HTML Code:
    <!-- left column -->
    <span>
         <!-- first article -->
         <span>content</span>
         <div class="spacer"></div>
         <!-- second article -->
         <span>content</span>
         <div class="spacer"></div>
    </span>
    <!-- end left column -->
    
    <!-- middle column -->
    <span>
         etc.
    </span>
    <!-- end middle column -->
    
    <!-- right column -->
    <span>
         etc.
    </span>
    <!-- end right column -->
    
    <div class="spacer"></div>
    
    <!-- footer content here -->
    Is it okay to do this, to put a spacer div inside spans?

  10. #1285
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Block level elements (such as DIVs) cannot go inside inline elements (such as spans), so no, it is not OK to do this.

  11. #1286
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Chicago
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a feeling it didn't seem right because of their inline quality, even though it did look fine in IE, Firefox and Opera (Windows). Looks like it's back to using relative spacing for me...

  12. #1287
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are you laying out your HTML files to start with? (Perhaps we should take this to a new thread.)

  13. #1288
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help on a similar issue...

    Hello, I'm having CSS Firefox/IE problems and I need help identifying the problem. Any help will be much appreciated.
    Thread: http://www.sitepoint.com/forums/showthread.php?t=457385

    Thanks.

  14. #1289
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ccricers
    Since the bulk of the content is in these three columns, I'd need to distinguish different entries for easy viewing. Using only divs inside the column throws off the layout since the columns are spans. However, a span-div-span-div inside the columns approach worked for me. Here's what I took.
    As Dan said start a new thread and then you will get some good advice as you are desperate need of help

    First of all spans are an inline elements and can only hold other inline content (even though css allows you to turn then into block level "boxes" they are still not to be used as block level "elements" and must still obey the html rules.)

    Irrespective of that there is no reason why you couldn't have used divs (or perhaps more semantic html elements) in this context as you can style them exactly as you want anyway.

    Looks like it's back to using relative spacing for me...
    If you mean relative positioning then you shouldn't be using that at all anyway

    Start a new thread with what you are trying to do and you will soon get put on the right track.

  15. #1290
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I need to design a layout in which the right content should be fixed and should have 300px width and the left content should be 100%. I have tried to make changes in the code http://www.pmob.co.uk/temp/2colfixedtest_4.htm. But when shrink the browser(IE), the left contents are stacked below the right content. can anyone help me?

    here is my code
    ============

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>3 col layout with equalising columns and footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">

    /* mac hide \*/
    html, body {height:100%}
    /* end hide*/
    body {
    padding:0;
    margin:0;
    color: #000000;
    }
    #outer{
    min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    margin-right:300px;

    color: #000000;
    }
    * html #outer{height:100%;margin-right:227px}/* ie 3 pixel jog*/

    #left {
    position:relative;/*ie needs this to show float */
    width:300px;
    float:right;
    margin-right:-229px;/
    right:-1px/* line things up exactly*/
    }
    * html #left {margin-left:-3px}/* three pixel jog*/

    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="left" style="border:1px solid red; ">
    <p>Left Content goes here : Left Content goes here : Left Content goes here
    : Left Content goes here : Left Content goes here : Left Content goes here
    : Left Content goes here : Left Content goes here : Left Content goes here
    : Left Content goes here : </p>
    </div>

    <div id="centrecontent" style="border:1px solid red;padding-right:15px;"><!--centre content goes here -->
    <div style="background-colorink;">
    <p>Centre Content goes here</p>
    <p><img src="imgBuyHubCars.jpg " width="600px"/>
    </div>
    </div>
    <!-- to clear footer -->
    </div><!-- end outer div -->

    </body>
    </html>

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

    Quote Originally Posted by vspriya
    can anyone help me?
    You have a 600px wide image in your page so there seems little point in having a fluid page as your page is already over 900px minimum width anyway.

    You would need to set a min-width for mozxilla and then change the layout around a bit to make ie stop dropping the floats.

    I have an old demo that has a 300px right column and i have just added a 600px image to show the effect.

    http://www.pmob.co.uk/temp/2col-columnonright3.htm

    If you wanted the page to collapse then you could use overflow:hidden on the centrecontent instead.

    http://www.pmob.co.uk/temp/2col-columnonright2.htm

    Be aware that dimensions are critical and you can't go adding padding and borders to elements that have width or they will be too big. You need to take this into account with your calculations or add the padding on inner elements instead.

    Hope it helps

  17. #1292
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Its working :-) thank you....

  18. #1293
    SitePoint Member
    Join Date
    Feb 2007
    Location
    south africa
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi i need some help right i got

    two divs in one div how can i make it so that it scales acordingly to the other two div's inside the main div

    the main div has a repetable background that rep on the x axis

    what im needing is that the 2 div's in the main div scale equaly verticaly to the main div

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

    You need to repeat a background image on the main containers' y-axis to create the illusion of 2 columns and then just float the columns over the background.

    Here is the basic example that shows three columns but the technique is the same.

    http://www.pmob.co.uk/temp/three-equal-divs-bg.htm

    There are other methods but the above is the simplest (see the demo at the start of this thread for other ways)

  20. #1295
    SitePoint Enthusiast pravatr's Avatar
    Join Date
    Feb 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    Great job - many thanks - looks great

  21. #1296
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Ben,

    Yes most of the demos are fine in IE7. There may be he odd one that I haven't changed yet but the only issues were an ie7 bug in some layouts with the min-height.

    If you used this version:

    Code:
    #outer{
    height:100%;
    min-height:100%
    }
    html>body #outer{height:auto}
    For some reason ie 7 forgets about the min-height when you re-define height:auto so you have to also add the min-height again.

    e.g.

    Code:
    #outer{
    height:100%;
    min-height:100%
    }
    html>body #outer{height:auto;min-height:100%;}
    However most of my demos were using this version below which is fine in IE7 anyway. and needed no changes.

    Code:
    #outer{
    min-height:100%
    }
    * html #outer{height:100%}
    The switch to ie7 has been relatively painless and I have coded hundreds of sites this year for clients and there have been very few problems at all.

    The only other fixes you will probably need for IE7 are to force "haslayout" (see faq) and this can simply be done by adding a min-height:0 to the block level element concerned.

    You will see this most notably in lists and elements that have their dimensions defined by margins rather than height or width. However IE7 is a lot better than ie6 and "haslayout" isn't such a big issue now.

    Hi Paul, firstly thanks for all the help so far, even if it was not from talking with you directly... That said, i have another style sheet prob. I have taken one of your 3 col examples to show you... basicall the footer overlaps the text if the text goes longer than the page. This only happenes in ie7. I made the changes above, by adding i the min height but it still happens.. I am fairly new to this so anyhelp would be apppriciated...


    p.s. i renamed the html file to txt so i could upload it to show you what i mean. If you rename it back to htm and have a look in ie7 you will see what i mean.

    again, many thanks....
    Phil

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

    The problem is that you have saved the webpage instead of viewing the source code (view source) and the cutting and pasting the code from there.

    Whatever you used to save the webpage has turned it into a nice mess and has omitted things like the * html hack.

    The main problem is the 100&#37; height which needs to be like this.

    Code:
    #outer {min-height:100%}
    * html #outer { height: 100%;}
    Make sure there are no other height properties defined for #outer.

    You would be better off going back to my page and copying the code correctly and start with nice valid and optimised code instead of the junk that was produced when you saved the webpage

  23. #1298
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I followed your "Equalising Columns Without Images" here:

    http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

    I test it on IE 6, 5.x and FireFox and it works fine.

    The problem happened when I test it on IE7. When doctype tag included:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/code">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    I got this:
    http://www.sambaweb.net/3col/2.htm

    While it is Ok when I take it out:
    http://www.sambaweb.net/3col/1.htm

    Check the image:
    http://www.sambaweb.net/3col/ie7.gif

    Do you have any idea?

    Thanks

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

    I thought I'd fixed that It's fixed for the page that you view it on but it seems I left the code out of the explanation in the page.

    Add this layout fix for IE7.

    Code:
    #header{
    background:#FF0000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    color: #000;
    text-align:center;
    position:relative;
    margin:0 -131px;
    padding-top:56px;
    min-height:0;
    }
    That should bring the header on top

  25. #1300
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great ... Thanks a lot


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
  •