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 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV Menu Not Working Within Layout

    Hey guys,

    Found this free-to-use CSS template and I'm trying to insert a DIV CSS menu into a certain position but everytime i insert the DIV in between another DIV tag the menu doesn't show properly at all. It removes all formatting.

    The code for the layout is:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style type="text/css" media="screen">

    html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background:#fff;
    font-size:80%;
    font-family: "Verdana", tahoma, verdana, arial, sans-serif;

    overflow: hidden;
    /* */
    }
    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
    #content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:200px; position:relative; z-index:3; word-wrap:break-word;}
    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}
    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:51px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
    .pad1 {display:block; width:18px; height:50px; float:left;}
    .pad2 {display:block; height:100px;}
    #content p {padding:5px;}
    .bold {font-size:1.2em; font-weight:bold;}
    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
    h2 {margin-left:5px;}
    h3 {margin-left:5px;}
    </style>
    <style type="text/css" media="print">
    html {padding:0; margin:0; border:0; background:#fff; font-size:10pt; font-family: arial, sans-serif;}
    body {padding:0; margin:0; border:0;}
    #content {display:block; position:relative; z-index:3; word-wrap:break-word;}
    #head {display:none;}
    #printhead {height:100px; background:#fff; font-size:24pt; color:#000; border-bottom:1px solid #000;}
    #printfoot {height:50px; background:#fff; color:#000; text-align:right; font-size:12pt; border-top:1px solid #000; margin-top:20px;}
    #foot {display:none;}

    </style>
    </head>
    <body>
    <div id="printhead">www.s7u.co.uk - Cutting Edge CSS</div>
    <div id="head">



    <div class="pad1"></div>

    Header


    </div>
    <div id="content">

    <a name="Top"></a>
    <div class="pad2"></div>
    <h2>&nbsp; </h2>
    <p>You can now add the header and footer using position:absolute; with a suitable z-index such that it appears over the content div. When the content is scrolled it will disappear under the header / footer.</p>
    <p>BUT note that the header and footer will need to be positioned right:18px; to avoid covering the scroll bar. This will make the header and footer overhang the left of the screen by 18px so you may need a 'pad' of 18px to bring header and footer back on screen.</p>
    <p>&copy; 2004/5/6 Stuart Nicholls</p>
    <p class="bold">Works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
    <p>NN7 displays correctly but an absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
    <a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Basics2" title="Your comments">Your comments</a>
    <br />
    <a href="#Top">Top</a><br />

    <a href="#Middle">CSS - the body tag</a>


    <br><br>




    <div class="pad2"></div>
    </div>
    <div id="foot">Footer</div>
    <div id="printfoot">Copyright &copy;2004/5/6 Stu Nicholls</div>

    </body>
    </html>
    And the code for the menu is located here:

    http://css.maxdesign.com.au/listamatic/horizontal13.htm


    Basically I wanna add the menu from above into the "Header" section of the website. I can't seem t fit it into there.

    Thanks for any help guys.

    pitfall

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    http://jlhaslip.trap17.com/samples/t...s/pitfall.html

    This template is a bit touchy. I don't know if it is exactly what you want, IE has issues with the centring and height of the buttons, but at least you have a base to work from. Play with the IE Conditional Comment styling to affect IE only. It isn't bad right now, but might need a tweaking.
    Last edited by jlhaslip; 03-21-2007 at 04:19 AM.

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks so much man!!

    thats awesome! perfecto!

    One thing, would it be possible to tell me how it renders in IE6?

    I cannot check it because IE7 won't let me use IE6 lol.

    Thanks for your help thus far, in debt to you!

  • #4
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This has proved to be helpful to me from time to time:
    http://ipinfo.info/netrenderer/

    Also had good results using this:
    http://tredosoft.com/Multiple_IE

    With the latter I have seen a few bugs -- for example if you're using scripts to get around the ActiveX/Flash activation stuff for IE, I haven't had very good luck

    - Silo

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    ie6 and 7 both look similar to each other.


  •  

    Posting Permissions

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