SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Navigation at Top & Base

    I want to create a drop down menu on this menu equal to this menu with a graphic at the top of the navigation as well. From my knowledge I have to place a {backgound:image} on ID#Nav but I'm also concerned about positioning of the graphic for precise placement. For the top navigation graphic I'm at a loss, here is what the end result will look like:


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

    As I mentioned before I've already done this exact menu including images for you before but as you seem to have lost all of it therefore I'll do it once more only.

    Here's the example:

    http://www.pmob.co.uk/temp/sh-nav.htm

    The bottom part of the image has been sliced off an made transparent so that it can sit without rubbing the original image out. The sub nav is floated instead of position:absolute so that the menu can extend with the submenu.

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I got the navigation somewhat working here but when I incorporated it into the actual construction site, things went a little wrong, and I'm wondering where did I go wrong ?

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked good on the practice page, well I knew how to fix one of the flaws but when I add it to the word in progress page, lets just say, not so good

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

    I don't see both images in that example.

    You need 2 images made like the ones that did here:

    http://www.pmob.co.uk/temp/images/snavbase.gif
    http://www.pmob.co.uk/temp/images/snavtop.jpg

    You also seemed to have mixed my nav code with the one from your site. I based my code on yours but you need to use only my nav code now and not any of the existing nav code because the dynamics are changed to accommodate the new images.

    The nav also needs to be on a black background or it won't look right so you are probably better off centring it with the main layout.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="/construction/css/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/fadeinsequence.js"></script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.min.js"></script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.js"></script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/flowplayer-3.1.1.min.js"></script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.cycle.all.min.js"
    </script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.fancybox-1.2.1.pack.js"></script>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="/construction/fancyplayer.js"></script>
    <script type="text/javascript">
    var videopath = "http://www.thecreativesheep.ca/construction/";
    var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
    var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
    var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";
    </script>
    <script type='text/javascript'>
    $(document).ready(function() {
        $("#services_content li,#Serv p").hide().fadeInSequence(2000);
    });
    </script>
    <script type="text/javascript">
    jQuery(function ($)
    {
        $("#nav").each(function()
        {
            $("a", this).click(function()
            {
                if (this.hash)
                {
                    $("#content").children().hide();
                    $(this.hash).show();
                    var pic = $(".pic",this.hash).html();
                    var sil = $("#silhouette");
                    sil.animate(
                        {height:"hide"},
                        {duration: 1000, easing: "easeInBounce"});
                        if (pic) {
                    setTimeout(function ()
                    {
                        sil.html(pic).animate(
                            {height: "show"},
                            {duration: 1500, easing: "easeOutBounce"});
                        }, 1200);
                    }
                    return false; 
                }
            });
            $("a:eq(2)", this).click();
        });
    });
    
    
    </script>
    <style type="text/css">
    html, body {
        height:100%;/*reference for #wrapper min-height:100%*/
    }
    body {
        margin:0;
        padding:0;
        background:#555;
        font:100%/1.3 arial, helvetica, sans-serif;
        color:#000;
    }
    h1 {
        margin:0;
        font-size:1.6em;
        text-align:center;
    }
    h2 {
        margin:10px 10px 0;
        font-size:1.3em;
    }
    p {
        margin:10px;
    }
    #videos a img {
        margin-top: 32px;
        border:none;
        vertical-align:bottom;
    }
    #gallery a img {
        margin-top: 32px;
        border:none;
    }
    /*=== Float Containment and Bug Fixes ===*/
    body:before {/*Opera min-height 100% fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element*/
    }
    #wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/ #content:after { /*#content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
    /*===  Beginning of Layout Structure ===*/
    #wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
        width:1160px;
        min-height:100%;
        overflow: hidden;
        margin:0 auto;
        background:#000000;/*BG color for #content*/
        position: relative;
    }
    #header {
        /*position:relative;/*establish containing block for AP children (#nav)*/
        min-height:120px;/*152px total w/ padding*/
        position:relative;
        background: #FFFFFF;
        padding:2px 0 12px;/*preserve space for #nav and uncollapse child margins*/
        background:#AAA;
        min-width:1160px;
        border-width: medium;
    }
    .logo {
        background: #008080;
        width: 400px;
        position:absolute;
        height: 109px;
        margin: 6px 25px 0 40px;
    }
    .partwo {
        background: #FFFF00;
        margin: 20px 0 34px 260px;
        width: 65px;
        height: 50px;
    }
    /*-- Menu Styles --*/
    #navouter {
        margin:25px auto 0;/*pull up into header div*/
        height:60px;
        width: 1160px;
        position:relative;
        background:#000 url(http://www.pmob.co.uk/temp/images/snavtop.jpg) no-repeat 0 0;
    }
    #navwrap {
        width: 650px;
        position:absolute;
        left:0;
        top:0;
        padding:0;
        background: url(http://www.pmob.co.uk/temp/images/snavbase.gif) no-repeat 0 100%;
    }
    ul#nav, #nav ul {
        margin:0;
        padding:0;/*remove the defaults*/
        list-style:none;
        width: 650px;
    }
    ul#nav {
        width: 650px;
        color: #0000FF;
        padding:3px 0 5px;
        background:url(http://www.pmob.co.uk/temp/images/snavbase.gif) no-repeat 0 100%;
    }
    #nav li {
        display:inline;
    }
    #nav li a {
        display:inline-block
    }
    #nav:hover {
        background:transparent
    }
    #nav ul {
        float:left;
        clear:left;
        display:none;/* display:none is used to hide menu as it is easier because we are floating it - but not so accessible of course*/
        width:650px;
    }
    #nav li:hover ul {
        display:block;
    }
    #nav a {
        margin:0 2px 0 -3px;
        padding:8px 15px 5px 0;
        color:#FFF;
        font:bold 12px/15px arial;
        text-decoration:none;
    }
    #nav li a {margin:0 30px 0 0}
    #nav li a.first {margin-left:80px}
    #nav li:hover a {color:red}
    #nav li:hover li a {color:#fff}
    #nav li li a:hover {color:red}
    
    #intro {
        width: 576px;
        height: 408px;
        background: #ff8000;
        margin: -35px 0 0 20px;
    }
    #intro p {
        padding-top: 150px;
        font-size: .6em;
    }
    #nav li:hover ul {
        margin-left:0;
    }
    /*-- Content Styles --*/
    #content {
        width:100%;/*IE6/7 haslayout for future float containment*/
        padding-bottom:80px;/*set a bottom padding to preserve the footer*/
        background:#000000;/*same as #wrapper or none at all*/
        min-height:500px;
    }
    #content p {
        margin:40px 10px;
    }
    /*-- Footer Styles --*/
    #footer {
        position:fixed;
        width:100%;
        left:0;
        bottom:0;
        height:108px;
        background:url('/construction/images/footer.png');
    }
    #gears {
        position: absolute;
        bottom: 34px;
        background: #800000;
        width: 250px;
        height: 112px;
        float: left;
    }
    .innerfoot {
        width:1120px;
        height:80px;
        margin:0 auto;
        overflow:hidden;/*uncollapse child margins*/
        background:#AAA;
        text-align:center;
    }
    #silhouette {
        position: fixed;
        margin-left:50px;
        bottom:80px;
        width: 150px;
        height: 285px;/*background: #FF0000;*/
    }
    #intro img {
        margin-left: 575px;
        margin-top: -225px;
    }
    #Serv {
        position: relative;
        background:url('/construction/images/servicesbg.jpg')1px -25px;
        overflow: hidden;
        padding: 78px 0 90px 268px;
    }
    .services_info {
        font-size: 2em;
        color: white;
    }
    #Contact {
        background: #C0C0C0;
        overflow: hidden;
        width: 650px;
        margin: 40px 35px 0 300px;
    }
    #Serv h1, #Contact h1, #Illus_3D h1, #ThreeDMot h1, #DemoR h1 {
        position: absolute;
        right:24px;
        top:450px;
        color: #FFFFFF;
    }
    #Contact h1 {
        right:120px;
        top:480px
    }
    #Illus_3D h1 {
        right:100px;
        top:475px
    }
    #ThreeDMot h1 {
        right:40px;
        top:415px
    }
    #DemoR h1 {
        right:40px;
        top:480px
    }
    #Contact p {
        color: #FFFFFF;
    }
    #Contact name {
        background: #00FF00;
        font: helvetica;
    }
    #services_content, p {
        height: 35px;
        font-size: -3em;
        color: white;
    }
    #contactForm {
        height: 150px;
        width: 250px;
    }
    #gallery {
        overflow: hidden;
        margin: 30px 0 0 0px;
        padding:0;
        list-style: none;
    }
    #gallery li a {
    background:yellow display:block;
    }
    .pic {
        display:none;
    }
    #gallery li {
        display: block;
        float:left;
        margin: 0 0 0 20px;
    }
    #videos li {
        float: left;
        display:block;
        margin: 2px 0 0 0px;
    }
    #videos li a {
        display:block;
        padding: 10px 13px;
    }
    #videos li a {
        display:block;
    }
    #videos li a:hover {
        background:url('/construction/images/3dmoticon.jpg')1px 31px no-repeat;
    }
    #videos a img {
        border:none;
    }
    #videos {
        overflow:hidden;
        margin:17px 0 0 220px;
        padding:0;
        list-style:none;
    }
    #ThreeDMot {
        min-height: 400px; /*hasLayout Property*/
        /*margin: 0 0 0 220px;*/
        background:url('/construction/images/3dmotbg.jpg');
        background-position: 24%;
    }
    #Illus_3D {
        min-height:400px; /*hasLayout Property*/
        padding: 2px 0 0 220px;
        background:url('/construction/images/illbg.jpg')1px -3px;
        position:relative;
    }
    #DemoR {
        margin:17px 0 0 350px;
        min-height:425px;
        overflow:hidden;
        background:url('/construction/images/demobg.jpg');
    }
    #DemoR a img {
        margin-top: 32px;
        border:none;
    }
    #header, ul#nav {
        position:relative;
        z-index:1;
    }
    #nav li a {
        margin:0 30px 0 0
    }
    #nav li a.first {
        margin-left:80px
    }
    #nav li:hover a {
        color:red
    }
    #nav li:hover li a {
        color:#fff
    }
    #nav li li a:hover {
        color:red
    }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
    #wrapper{height:100%;}/*min-height for IE6*/
    #footer{/*fixed footer for IE6 using expression*/
        position:absolute;
        top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    }
    </style>
    <![endif]-->
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-21454093-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    </head>
    <body>
    <div id="header">
        <div class="logo">
            <div class="partwo"></div>
        </div>
    </div>
    <div id="navouter">
        <div id="navwrap">
            <ul id="nav">
                <li><a class="first" href="#intro">Main {Portfolio}</a>
                    <ul class="drop">
                        <li><a class="first" href="#Illus_3D">Illustrations &amp; 3D Stills</a></li>
                        <li><a href="#ThreeDMot">3D Motion</a></li>
                        <li><a href="#DemoR">Demo Reel</a></li>
                        <!--<li><a href="#">Ready Link</a></li>-->
                    </ul>
                </li>
                <li><a href="#Serv">Services</a></li>
                <li><a href="http://www.someone.com">Bio3Design</a></li>
                <li><a href="#Contact">Contact</a></li>
            </ul>
        </div>
    </div>
    <div id="wrapper">
        <div id="content">
            <div id="intro">
                <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
                <img src="block.jpg" alt="LogoGraphic" /></div>
            <div id="Serv">
                <!--Beginning of Service ID -->
                <span class="services_info">The following services are offered:</span>
                <ul id="services_content">
                    <li>Character Design</li>
                    <li>Animation</li>
                    <li>Logo Design & more...</li>
                </ul>
                <p><a href="#Contact">Contact</a> for more info!</p>
                <h1>Services</h1>
            </div>
            <!-- end of Service ID -->
            <div id="Contact">
                <h1>Contact</h1>
            </div>
            <div id="Illus_3D">
                <ul id="gallery">
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                </ul>
                <div class="pic"><img src="img/one.jpg" alt="one" width="150" height="250" /></div>
                <h1>Illustrations & 3D Stills</h1>
            </div>
            <div id="ThreeDMot">
                <ul id="videos">
                    <li> <a class="video_link" title="Caf� Tour" name="videos/truck.flv" href="images/tour_video.png" rel="gallery"> <img height="75" width="123" alt="truck" src="images/tour_video.png"> </a> </li>
                    <li> <a class="video_link" title="Gorilla" name="videos/gorilla.flv" href="images/gorilla_video.png" rel="gallery"> <img height="75" width="123" alt="gorilla" src="images/gorilla_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                    <li> <a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="75" width="123" alt="bottleopener" src="images/bottleopener_video.png"> </a> </li>
                </ul>
                <div class="pic"><img src="img/two.jpg" alt="one" width="150" height="250" /></div>
                <h1>3D Motion</h1>
            </div>
            <div id="DemoR"> <a class="video_link" title="Place Holder" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="260" width="525" alt="Place Holder" src="images/bottleopener_video.png"> </a>
                <div class="pic"><img src="img/two.jpg" alt="one" width="150" height="250" /></div>
                <h1>Demo Reel</h1>
            </div>
        </div>
        <div id="silhouette"></div>
    </div>
    <!-- end wrapper -->
    <div id="footer">
        <div id="gears"></div>
    </div>
    </div>
    </body>
    </html>

  6. #6
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does it make a difference if I updated the images ???

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Does it make a difference if I updated the images ???
    No, you need the images and the correct code. One or the other is not enough. You need it all.

    The above is a working example of the menu in action as I have linked to my images to show it working.

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to use new images that are identical just with different color, and the code unless I missed a rule is identical but still breaks the page.

    Edit: Change!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I want to use new images that are identical just with different color, and the code unless I missed a rule is identical but still breaks the page.

    Edit: Change!
    Which example are you referring to now?

    The code in your main page is still the wrong code and will not work.

    Changing the color of the images will make no differences as long as you have made then the right size and format.

    As I said the code above is fully working so all you need do is copy and paste and remove your original code for the nav.

    The demo is still online so you can see it works.

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I copied the code from your example and did some adjustments on this page which is the page I'm trying to add the 'drop-nav' too. It has broke the header and look where the top navigation graphic is slab in the middle of the navigation and the navigation buttons are spaced apart.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'm beginning to sound a bit like a parrot but you are still not using my code.

    Refer to post 5 for the full example and make sure your code matches that example for all the navigation rules.

    As an example you still have this in your code:

    Code:
    #nav ul {
        position:absolute;/*remove from page flow*/
        left:0;
        top:100%;
        margin:0 0 0 -999em;
    }
    My example is not using that method and that rule will break my example. There are many other rules in there that need to be removed and corrected.

    You still don't seem to have uploaded the images that you are using as I can only see on image present for the nav top and not the nav base. The image design also seems to have changed completely from the image example I was working from!

    Just keep referring to the previous examples. There's not much more I can do until you put the right code in place as I will just be giving you the same code I gave before.

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul, I'll re-examine the styles again and let you know how things went I could have overlooked some styles !

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I got things working strictly focusing on the navigation, there are some things I can't solve.

    The top graphic on the navigation is invisible, and I want to make the size of the block elements on the navigation more larger horizontally on :hover. I can't remove the space that is occurring on the :hover drop menu, and I have tried with no success. I know there is no drop menu graphic, I'm hoping that once the top navigation graphic is visible it will cause a ripple effect and fix the drop navigation graphic, atleast I hope.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The top image isn't showing because you have set the height to zero so it can't possibly show and then you have also dragged it up under the element above anyway so even if the element had height the image would still be chopped off. You seem to have actually gone out of your way to make sure that the image will never show.

    Code:
    #navouter {
      background: url("images/topnavline.png") no-repeat scroll 0 0 transparent;
      height: 66px;
      margin:0;
      position: relative;
      width: 650px;
    }
    If you want the nav to overlap the content underneath then you will need to change #navouter to position:absolute and raise the z-index.

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh z-index. How do I remove all the spacing between the Li elements, what style is responsible for that, I tried all the related navigation styles and I can't change it.

  16. #16
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I may not know the correct terminology but how do I change the size of the list elements block-size currently they are exact width and height of the text I would like to be able to adjust their size and maybe positioning. And to re-phrase my previous post the space between the list elements vertically and horizontally has to much of a gap, how can I reduce this? Most of the list styles either muck up the design or have no effect once modified.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It looks like you have managed to do this already.

    You just need to remove the widths and min-widths form the list element (and from the anchor if specified). Then you would use padding and margins to space them out.

    Your example doesn't seem to be showing any widths now and seems to be using margins to space themselves out. Just reduce the margins if you want the elements closer together.

    e.g. there is 20px margin here which you could reduce to 10px if you wished.

    Code:
    #nav li a {
      margin: 0 10px 0 0;
    }

  18. #18
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The space between the drop and the submenu & the hover block how can I make this larger and the space shorter The other stuff I took care off, but I can't solve those two

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

    If you want the submenu further away from the top menu then add some padding to the nested ul .e.g.

    Code:
    #nav ul {
      clear: left;
      display: none;
      float: left;
      padding: 20px 0 0;
      width: 650px;
    }
    If you want the reverese then add a negative margin instead.

    Code:
    #nav ul {
      clear: left;
      display: none;
      float: left;
      margin-top:-5px;
      width: 650px;
    }
    I'm not sure if that's what you meant though.

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is one of the things, the other thing is when you hover over there is a block around the text, how can I make this larger ?

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    That is one of the things, the other thing is when you hover over there is a block around the text, how can I make this larger ?
    The background of the element is controlled by its padding so if you want more background then you need more padding on the nested anchor.

    Code:
    #nav .drop li a{padding:5px 3px;}/* or whatever you need*/

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, how can I cause a H1 tag to lock it self to the base of a footer even when there is scrolling ?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Use the same method as used for the #gears element. i.e. place it in the footer to start with and drag it up into posiition

  24. #24
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Paul you said to place each of the h1 tags into the Footer div:

    Code HTML4Strict:
     <h1>3D Motion</h1>
    Code HTML4Strict:
    <div id="footer">
        <div id="gears"></div>

    Then drag it up into position, what I had done is changed this;

    Code CSS:
    #Serv h1,#Contact h1,#Illus_3D h1,#ThreeDMot h1,#DemoR h1 {
        position: absolute;
        right:24px;
        top:450px;
        color: #FFFFFF;
    }

    to this (and only one rule, just to make sure it's right)
    Code CSS:
    #footer h1 {
        position: absolute;
        right:24px;
        top:450px;
        color: #FFFFFF;
    }
    My H1 disappeared but I think it could be from the top:450px; if I'm right and everything is good, besides the top:450 let me know I want to be sure

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Look at the rules for #gears and then compare your rules for the and see why yours may not be working

    However, I don't think this is going to be any good to you because you have multiple h1s in that page (even though you really should only have one h1 per page).

    If you fix the position for the h1 above the footer then all your h1s will end up on top of each other which will be rather silly.

    You can't do this any other way either because the footer is fixed to the bottom of the viewport and there is no way that you can make an element that is contained outside of the footer appear above it because that would depend on how tall someone's screen was.

    You are trying to do something impossible in your current setup.

    As I suggested you could make an element like your #gears element appear above the footer but not multiple elements contained elsewhere.

    Put the heading at the top of the page where it should be.


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
  •