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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    my layout question

    so i've finally gotten into coding again after 5ish years of downtime... i'm starting another project and need help with css.

    here is a GENERAL idea of what i need help with.. i've seen it done a long time ago but the website is gone now.

    can someone point me in the right direction as to how to make this?



    when you rollover across the top, how can i get the whole thing to change? as in if you hover over prices, the big text area changes to the text for prices and so on.. know what i'm trying to say? lol
    how would i do that

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I don't have the time to help in detail but you will need to learn CSS.
    See the url "Sources" in my signature for many useful sites.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    This can only be done with JavaScript (I tried a more dramatical solution with pure CSS but...that didn't work.)
    This should do nicely (I'm not a guru, but it works.)
    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Let&rsquo;s get divvy!</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                html {
                    font: 95&#37;/2 Georgia, sans-serif;
                    padding: 2em;
                }
                #home1, #prices1, #order1, #faqs1, #about1 {
                    display: none;
                    height: 200px;
                    width: 330px;
                    padding: 5px 10px;
                    background: #39f;
                }
                #home1 {
                    display: block;
                }
                #nav li {
                    display: inline;
                    float: left;
                    text-align: center;
                    width: 70px;
                }
                #nav a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    color: #333;
                    text-decoration: none;
                }
                #nav a:hover {
                    background: #39f;
                    color: #fff;
                }
                #nav {
                    height: 2em;
                }
                #nav #home {
                    background: #39f;
                    color: #fff;
                }
            </style>
            <script type="text/javascript">
            //<![CDATA[
            function display(link) {
                var page = link.id;
                var page = page + "1";
                document.getElementById("home1").style.display = "none";
                document.getElementById("prices1").style.display = "none";
                document.getElementById("order1").style.display = "none";
                document.getElementById("faqs1").style.display = "none";
                document.getElementById("about1").style.display = "none";
                document.getElementById("home").style.color = "#333";
                document.getElementById("home").style.backgroundColor = "transparent";
                if(page == "home1") {
                    var home = document.getElementById("home");
                    home.style.color = "#fff";
                    home.style.backgroundColor = "#39f";
                }
                document.getElementById(page).style.display = "block";
            }
            </script>
        </head>
        <body>
            <ul id="nav">
                <li><a href="home.html" id="home"onmouseover="display(this)">Home</a></li>
                <li><a href="prices" id="prices" onmouseover="display(this)">Prices</a></li>
                <li><a href="order" id="order" onmouseover="display(this)">Order</a></li>
                <li><a href="faqs" id="faqs" onmouseover="display(this)"><abbr title="Frequently Asked Questions">FAQ<abbr>s</a></li>
                <li><a href="about" id="about" onmouseover="display(this)">About</a></li>
            </ul>
            <div id="home1">Home content</div>
            <div id="prices1">Price content</div>
            <div id="order1">Order content</div>
            <div id="faqs1">FAQs content</div>
            <div id="about1">About content</div>
        </body>
    </html>
    Last edited by Apostropartheid; 12-03-2007 at 10:59 PM.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Purely out of interest, is this what you are trying to do.

    http://www.exitfegs.co.uk/Alice.html#nogo4

    Not my programming, but I did modify it a little.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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