SitePoint Sponsor

User Tag List

Page 50 of 66 FirstFirst ... 4046474849505152535460 ... LastLast
Results 1,226 to 1,250 of 1630
  1. #1226
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG Paul,

    guess i'm still in the css kindergarten... thanks a lot!!!

    If u ever come to Malaysia, i shall buy u beer!!!

  2. #1227
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul,
    is there a way to repeat div id wisely?
    like divs for the dividers and other graphical elements...

    thanx

  3. #1228
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    is there a way to repeat div id wisely?
    I'm not sure what you mean. If you want to re-use styles then use classes as ID's are unique and can only be used once per page.

  4. #1229
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you so much for your thread. It will clear so many of my CSS doubts. I am so thankful I came across your thread and also your site.

  5. #1230
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Example nor rendering when I download!

    Paul,
    can you tell me when I download your example "Three Columns in detail " and have a look at it on my own machine; why does it not stretch 100% width and there are gaps at the right hand side and below the header.
    Also the images are not rendering properly.
    Im probably doing something stupid!

    Ive attached a pic so you can see.

    David
    Attached Images Attached Images

  6. #1231
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ive attached a pic so you can see.
    Hi,

    It looks like you've corrupted the code. How did you download the page?

    You should just view source and copy and paste the code. If you downloaded the page in ie then it will corrupt all the code and change it all.

    If that isn't the problem then view the source of your local page and paste it inside code blocks here so I can see where its gone wrong

  7. #1232
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is such a great reference, not simply for the template layouts, but also the nice little nav menus. Kudos to Paul for that.

    One issue as someone learning CSS, though - playing with the horizontal menu example, I've got it to work great:
    http://www.pmob.co.uk/temp/drop-down-multi.htm

    Only problem is, it defines the ul and li class - so I can only have horizontal ul menus on the page after.

    I've tried editing the CSS to different values, ie, navbar.ul and navbar.li, and even changing the class names, but it kills the menu entirely.

    How would I apply unique classes to the menu so that I can use generic ul and li classes in the normal page content?

    Much appreciated not simply if you can reply, but also understand what I'm saying.
    Internet Business Forums - free business help & advice

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

    You just need to put the id #nav at the start of every ul.

    e.g.

    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>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    <style type="text/css">
    body {
        font: normal 11px verdana;
        }
    
    ul#nav,ul#nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        }
    
    ul#nav li {
        position: relative;
        float: left;
        width:149px;
    }
        
    #nav li ul {
        position: absolute;
        left: 0; /* Set 1px less than menu width */
        top: auto;
        display: none;
        }
    #nav li ul ul{
        position: absolute;
        left:100&#37;; /* Set 1px less than menu width */
        top: -.1em;
        display: none;
        }
    
    /* Styles for Menu Items */
    ul#nav li a {
        display: block;
        text-decoration: none;
        color: #777;
        background: #fff; /* IE6 Bug */
        padding: 5px;
        border: 1px solid #ccc;
        }
    /* commented backslash mac hiding hack \*/ 
    * html ul#nav li a {height:1%}
    /* end hack */ 
    
    /* this sets all hovered lists to red */
    #nav li:hover a,#nav li.over a,
    #nav li:hover li:hover a,#nav li.over li.over a,
    #nav li:hover li:hover li:hover a,#nav li.over li.over li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover,
    #nav li:hover li:hover li:hover a:hover,#nav li.over li li a:hover,
    #nav li:hover li:hover li:hover li:hover a:hover,#nav li.over li.over li.over li.over a:hover 
    {
       color: #fff;
       background-color: red;
    }
    
    /* set dropdown to default */
    #nav li:hover li a,#nav li.over li a,
    #nav li:hover li:hover li a,#nav li.over li.over li a,
    #nav li:hover li:hover li:hover li a,#nav li.over li.over li.over li a
     {
        color: #777;
       background-color: #fff;
    }
    #nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    display:none;
    }
    
    ul#nav li:hover ul,ul#nav li li:hover ul,ul#nav li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul,ul#nav li li li.over ul {
        display: block;
    }
    
    </style>
    </head>
    <body>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">testing ></a>
                    <ul>
                        <li><a href="#">test 1</a></li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">testing ></a>
                            <ul>
                                <li><a href="#">test 1</a></li>
                                <li><a href="#">test 2</a></li>
                                <li><a href="#">test 3</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    That should show you the way

  9. #1234
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, many many thanks for that - you're an absolute star.
    Internet Business Forums - free business help & advice

  10. #1235
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    This is an excellent 3 column design design as all th other posters have pointed out.

    I've read a number of these 1200+ posts discussing this layout but certainly not all. So I don't know whether my particular question has already been addressed.

    I am trying to build a 3 col layout with a header and footer but with one additional factor: margins on both the right and left sides. Specifically, I want there to be no margins when the screen width is less than 1000px but I want the two margins to form and divide up any extra width above 1000px.

    To do this, I wrapped all the html inside the body within a <div id="wrapper"> tag. I then gave the wrapper a maximum width (and applied the necessary ie js workaround). Works beautifully. Then I realized, after removing some content that was pushing the footer below the bottom of the viewport, that the footer no longer rides the bottom of the screen.

    Have you come across including this margin requirement into the 3 col plus header plus footer css layout? Any thoughts as to the best way to do that? Note that the right and left margin color will need to be different from both the right and left column colors.

    Any suggestions would be greatly appreciated.

    Thanks.

  11. #1236
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    peeked back at some of the earlier posts and found this link...

    http://www.pmob.co.uk/temp/3col-centred-template6.htm

    Similar to what I am looking for (as per my post above) except I want the center content area to expand and contract within the constraints of a minimum and maximum width.

    The 3col-centred-template6.htm example has a div with id of "outer" that surrounds everything within the body. Seems it has a function different than the div with id of "outer" in the primary example that this thread is based on, a function similar to my "wrapper" div. I added min-height: 100&#37; to my wrapper div (and * html #wrapper{height:100%;} for ie). Now this is what I get: in ff the right and left columns continue to the bottom of the page but the footer remains just beneath the content; in ie the footer sits at the very bottom of the viewport as it should, but the left and right columns extend slightly beneath the footer, causing a vertical scrollbar to form.

    I'll continue playing with this puzzle and let you know if I solve it. If you know of any other examples or suggestions, I would very much appreciate it.

    Thanks.

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

    You are unlikely to get a cross browser version working of this because you need an extra wrapper to hold the layout together and soon as you do that then you loses the inner 100&#37; height because elements will not inherit the 100% height from a min-height element.

    You can get firefox to work by using display:table and just using 100% height as then it will allow the element to expand past the 100% as required. You can also get ie6 and under to work by using just height:100% because it will always expand the height. However ie7 won't work because height has been fixed and works like firefox and other browsers now but ie7 doesn't understand display:table (a sad omission) so ie7 will not work.

    This means that you can't really use display :table as ie7 will soon be the largest used browser around.

    If you forget about the 100% height then you can get it working ok and there is a min-width demo linked from the main example.

    There is a complicated method using a 100% height wrapper that you expand out of and forget about but it makes the code rather too complicated to work with.

    You could just use the basic 100% set up and then use the equalising columns techniques from PIE but they are also very buggy but do work.

    This is one of those occasions where a table would be more suitable due to the extra css code needed to do it otherwise.

    If you didn't want a fluid centre then the whole thing can be faked easily with images.

    e.g.

    http://www.pmob.co.uk/temp/3col-centred-template7.htm

  13. #1238
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks for your informative reply. I am rather disappointed to hear this news as I was hoping to go table free. I wonder if anyone has made any attempts to come up with an ie7 hack for display:table yet. Or, alternatively, I wonder if there may be a completely different approach to making this work in ie7. Probably not.

    You think the equalising columns techniques techniques from PIE would do the trick? What are the downsides of that technique? How is it buggy?

    And if I were to admit defeat and go the table route...(I know this is not what this thread is about, but...) are there any good examples of a table version of the 3 col layout? Seems like it should be simple but I can't seem to get the table to expand to the bottom of the viewport.

    Thanks again for your informative response and this terrific thread.

  14. #1239
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I can't accomplish what I was trying to do with css, I think that, instead of going the table route, I will opt for a fixed-margin layout: fixed right and left columns, fluid center, header and footer, and fixed-width right and left margins that are 100&#37; high on either side. The margins will be the same color as each other but different color from either of the columns.

    I seem to recall seeing an example of this layout in one of your demos but I can't find it now. Perhaps I imagined it.

    I'd be delighted if you could point me in the right direction.

    Thanks!

  15. #1240
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I am quite new to CSS. I was looking at your 3 column example and trying it out myself. You can see the result at
    http://www.freewebs.com/jagpri/3columnLayout2.html

    I am not able to get my links to get centralised in the left column. It is getting aligned to the right. I tried various methods but am not succeeding. I have put my CSS code in the html file itself so that you can view it.

    One more thing, in your examples, the CSS code is not in the html page itself, but there is a link to a css file. I know that this is the right procedure but as a beginner, how do I view your css codes if I cannot see them?

    Thanks once again for your wonderful site and the various examples.

  16. #1241
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi jppp,
    I am not able to get my links to get centralised in the left column.
    That's because an unordered list -ul- has a default left padding
    #left ul { padding: 0; }

  17. #1242
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not able to get my links to get centralised in the left column.
    Add this to your css:

    [PRE]
    #left ul {
    padding: 0; }[/PRE]

    Lists have a built in padding that needs to be removed.

    how do I view your css codes if I cannot see them?
    Look at the css link in the head of the html document. This is the relative path to the css file. Replace the html file name in the browser address bar with that path and your browser will display the css.

    Hope this helps.

  18. #1243
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I have now answered all my questions in post #1238. Still having a bit of trouble with the fixed-margin-fixed-column layout (post #1239) so any suggestions or demos you are aware of would be very much appreciated.

  19. #1244
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    markbrown4, runremix, thanks a lot.

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

    I think I've lost track of where we are on this now. Your request in post #1339 seems to sound the same as what you were asking originally or have I misunderstood.

    In answer to your other question about how a table would do this then here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    * {    padding:0px;    margin:0px;}
    html, body {    height:100&#37;;}
    
    body {
        font-family:verdana, helvetica, sans-serif;
    }
    #header,#footer {
        background:blue;
        height:50px;
        position:relative;
        z-index:999;
        width:80%;
        margin-left:10%;
    }
    
    table#middle {
        border-collapse:collapse;
        width:80%;
        height:100%;
        table-layout:fixed;
        margin:-50px 10%;
    }
    
    #middle td {
        padding:60px 5px;
        vertical-align:top;
    }
    
    #middle .left {
        width:250px;
        background:green;
    }
    
    #middle .center {
        background:red;
    }
    
    #middle .right {
        width:250px;
        background:yellow;
    }
    
    
    </style>
    </head>
    <body>
    <div id="header"> Header </div>
    <table id="middle">
        <tr>
            <td class="left"> Left Content </td>
            <td class="center"> Center Content </td>
            <td class="right"> Right content     </td>
        </tr>
    </table>
    <div id="footer"> Footer</div>
    </body>
    </html>
    As you can see the html is very simple compared to a css version and although I never use tables (except for tabular data) I have to admit that in this case it would seem the appropriate option.

    To get different colurs on the outside of the left and right of the table you would need to use a background image on the body as used in this demo.

    http://www.pmob.co.uk/temp/3col-centred-template7.htm

    (or add an extra 2 table cells and make the table 100% width).

  21. #1246
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jppp
    how do I view your css codes if I cannot see them?
    Mark has already answered the question for you but the demo does have a link to the main explanation that explains each section of css in detail.

    Most of my demos do in fact have the css in the head but I changed the main one to a linked file as I was gong to upgrade the pages but never got around to it.

    To save yourself time and effort just use firefox with the web developer extension and you can just view the css at a the click of a button. You can even edit the css in real time to see what happens when you change something and is a good way to learn.

  22. #1247
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code Paul. I did figure out a way to do this using tables (as I alluded to in my last post) but your approach is a little different in that it separates the header and footer from the table resulting in less table code overall. Might be a better way to go for that reason.

    Your request in post #1339 seems to sound the same as what you were asking originally or have I misunderstood.
    Actually my quest described in post #1239 is different than what I was originally asking for. My original goal was to have margins on either side of the 3 column assembly that only appear when the viewport exceeds 1000px. I wanted the two margins to form and divide up any extra width above 1000px. In other words, the center content area would have a fluid width when the viewport width is less than 1kpx but a fixed width when viewport greater than 1kpx. I tried to do this by wrapping everything in a div and using max-width but this broke the footer.

    My somewhat simpler quest now is to have margins on either side of the 3 column assembly that are fixed. They would always be present and have a constant width regardless of the viewport width. The columns would also have fixed width. The centre content area would always be fluid. I'd still need the header and footer, of course. Also, the margins would need to be of a different color than either column.

    Does that make sense? Is this second goal attainable purely with css?

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

    As I said earlier I thought it was possible by using some extra wrappers but i thought it would be too much code.

    I have just done a quick example to show what I mean but it does need testing.

    http://www.pmob.co.uk/temp/3col-cent...uid-centre.htm

    It uses two outer wrappers of 100&#37; to hold the left and right images and then basically my normal 3 col layout sits inside. The inner elements also have the same background images applied to them so that when the inner elements burst out of the 100% high wrapper the illusion of equalising columns is continued.

    I haven't tested on much as I am short of time but firefox and ie look ok. (Opera never likes the 100% footer (even in the table version) as it never redraws properly after a window move.)

    Older safari dont understand min-height but there are hacks for that but I don't usually bother these days as the latest versions should support min-height (although I don't have safari to test.)

    As I said before most things can be done in css but its up to you to weigh up the pro's and cons and decide what's best for you

    Hope its of some use

  24. #1249
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you are truly a wizard of the css layout.

    Your example works great, in ie6 and ie7. And this satisfies my first goal with flexible margins, not my scaled-down second goal.

    As you pointed out though, it doesn't quite render right in opera. However, the table version does seem to render perfectly in opera. Can't seem to break it in O9. Are you referring to earlier opera versions?

    I do see your point about weighing the pros and cons of going all css in this case. It seems that if the goal is to have less code and easiest updates (which css usually accomplishes), tables actually work better in this instance.

    However, usability is an important goal of the site I'm building. So I'm interested in your or anyone's thoughts on how much is lost in terms of usability by using the small table as in your code above.

    And would there be any other significant downsides to going the table route?

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

    In the table version if you drag the bottom of the window up or down in opera it doesn't move at all even with no content. It should slide up and down with the screen size. You have to click refresh to make it jump into position.

    This is the same problem as in the css version.

    The only problem of using a table is the same old problem of accessibility and the fact that older screen readers will apparently read the first line of each column rather than read the contents of each column.

    I suppose there is the issue that later on you may want to change the design completely and the table design probably couldn't be co-erced into a different design whereas the css design probably could. However I think the simplicity of the table wins out in this case due to the three extra wrappers used in the css version.

    When you compare the basic html the css version is about 25&#37; bigger.

    Code:
    <table id="middle">
        <tr>
            <td class="left">Left</td>
            <td class="center">Content </td>
            <td class="right">Right</td>
        </tr>
    </table>
    <div id="footer">Footer</div>
    Code:
    <div id="out1">
        <div id="out2">
            <div id="inner1">
                <div id="inner2">
                    <div id="header">Header</div>
                    <div id="content">
                        <div id="left">left</div>
                        <div id="right">right</div>
                        <div id="center-content">center</div>
                        <div class="clearer"></div>
                    </div>
                </div>
            </div>
            <div id="footer">footer</div>
        </div>
    </div>


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
  •