SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems with lower navigation bar

    im currently having problems coding a layout for a job that i have been given
    the lower navigation bar is out of site in both ie and firefox i would greatly appreciate it if someone helped

    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">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
        <meta name="description" content="Einformer.net Your #1 D'awa center!" />
        <meta name="keywords" content="einformer.net, internet informer, islam informer, islam, islamic information, islam help, what is islam?, islam, muslims, muslim community, muslim help, muslim knowledge, muslim info, quran, ahadith, zikr, prophet mohammed, prophet muhammed, muslim forum, about islam" />
        <meta name="Designer" content="Khaled Ramadan" />
        <link rel="stylesheet" type="text/css" href="" />
        <title>Einformer.net | Home</title>
        <meta name="author" content="Alaa Last name" />
        <style type="text/css">
        /*<![CDATA[*/
        body{
        	background: url(images/bg.gif) repeat-x;
    		margin: 60px 250px 0;
    		font-size: 62.5%;
    	  	font-family: Verdana,Tahoma,Arial,sans-serif;
    
        }
        #wrapper_top{
    		position: fixed;
        	background: url(images/wrap_top.png) no-repeat;
        	width: 695px;
        	height: 9px;
    		margin: 0px 40px -1px;
        	padding: 0 15px 0;
        	overflow: hidden;
    	}
        #wrapper{
        	position: fixed;
        	background: url(images/bg2.png) repeat-y;
        	width: 695px;
    		margin: 9.5px 40px 0px ; margin: 9px 40px 0px !important;
        	padding: 0 15px 0;
        	overflow: hidden;
    
        }
        #header{
    
    		width: 664px;
    		height: 130px;
    		background: url(images/header.gif) no-repeat;
    		margin: 0px;
    	}
    	#nav{
    
    		width:664px ;
    		height: 30px;
    	}
    	#content{
    	
    		width: 664px;
    		padding: 5px;
    	}
    	#sidebar{
    		width: 190px;
    		float: left;
    		background: url(images/sidebar.gif) no-repeat;
    	}
    	#nav_box_s{
    		width: 186px;
    		height: 30px;
    		background: url(images/news_top.gif) no-repeat;
    		padding: 12px 5px 0px 50px;
    		color: white;
    		font-weight: bold;
    	}
    	#nav_box_c{
    		width: 186px;
    		background: url(images/nav_cont.png) repeat-y;
    		margin-top: -12px;
    		padding: 5px 5px 5px 10px
    	}
    	#nav_box_e{
    		width: 186px;
    		height: 30px;
    		background: url(images/nav_bot.gif) no-repeat;
    		margin-left: -1px;
    	}
    	#content_box{
    		margin-left: 190px;
    		color: white;
    		
    	}
    	#login{
    		width: 440px;
    		height: 189px;
    		background: url(images/news_bg.png) no-repeat;
    		padding: 20px 10px 20px 15px;
    	}
    	#lower_nav{
    		width:664px ;
    		height: 30px;
    
    	}
    	input:active{
    		background: #4a6b48;
    	}
    	#login .theInput {
         font-family: Verdana;
         font-size: 11px;
         width: 110px;
         margin-right: 5px;
        }
    
        #login .theSubmit {
         font-family: Verdana;
          font-size: 10px;
          background-color: #333333;
         color: #FFFFFF;
         margin-right: 5px;
        }
    	
        /*]]>*/
        </style></head><body>
    <!-- Body Wrapper/container -->
    <div id="wrapper_top">
    </div>
    <div id="wrapper">
    <!-- Body Wrapper/container -->
    <div id="header"></div>
    <!-- Nav -->
    <div id="nav"><img src="images/nav.gif" alt="" usemap="#navigation_Map" border="0" height="29" width="664"></div>
    <!-- Content -->
    <div id="content">
    <div id="sidebar"><div id="nav_box_s">Navigation</div><div id="nav_box_c"><ul><li>Home</li><li>Forum</li><li>Blog</li><li>Register</li><li>Members Login</li><li>Downloads</li><li>Gallery</li><li>About</li><li>Contact</li></ul></div><div id="nav_box_e"></div></div>
    <div id="content_box"><div id="login"><form method="POST" target="login.php" enctype="text/plain">
    Quick Login:<br />
    Username: <input type="text" name="username" align="right" style="width: 124px; height: 10px;" /><br />
    Password: &nbsp; <input type="password" name="password" align="right" style="width: 124px; height: 10px;"/><br />
    <br /><input type="image" src="images/login.png" style="border: 0;" align="center" /><br />
    <a href="register.php">Not a member? Register Now!</a>
    </form></div></div>
    </div>
    <div id="lower_nav">
    <img src="images/bottom_nav.gif" width="664" height="27" border="0" alt="" usemap="#navigation_Map1">
    </div>
    </div>
    
    
    <map name="navigation_Map"><area shape="rect" alt="Contact Us Today!" coords="524,0,608,27" href="contact.php"><area shape="rect" alt="about us" coords="460,0,524,28" href="about.php"><area shape="rect" alt="Einformer's Blog" coords="405,0,460,28" href="blog"><area shape="rect" alt="Einformer's Islamic Gallery!" coords="328,0,405,28" href="gallery"><area shape="rect" alt="Members Login" coords="269,0,328,29" href="login.php"><area shape="rect" alt="Register Today!" coords="185,0,269,28" href="register.php"><area shape="rect" alt="Einformer Forum Home" coords="116,0,185,29" href="forum"><area shape="rect" alt="Homepage" coords="53,0,116,28" href="index.php">
    </map>
    
    <map name="navigation_Map1">
    <area shape="rect" alt="Coming Soon!" coords="393,0,550,26" href="#">
    <area shape="rect" alt="Einformer.net" coords="266,0,393,26" href="http://www.einformer.net">
    </map>
    </body>
    </html>

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

    I'm not sure what you are trying to do here and what problems you see with the lower navigation bar but the rest of the layout is completely broken as far as I can see .

    For a start the left sidebar is specified at 190px wide but you have squashed elements inside it that are about 240px wide due to the extra padding on the inner elements (e.g. #nav_box_s and #nav_box_c are both too big to fit inside the sidebar). This means that the center content won't fit and will be pushed down in IE. Firefox will ignore the extra width as it realizes that you don't know what you are doing.

    You have also used position:fixed on a couple of elements including your wrapper which makes no sense (and which IE6 and under don't understand so they will ignore it anyway). Other browsers will understand it but leave you with a fixed layout that will be virtually unusable. You will very rarely use position:fixed unless you are into very advanced layouts and know the consequences.

    It might be better if you explain in detail what you are trying to do or have a live link so we can see the whole thing.

    Sorry I can't offer more specific help at this time but I'm not sure where you are going with this.

    BTW there's no such thing as half a pixel

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok
    thanx for that nice flame lol
    im still a n00b at coding layouts
    the online version is located here: outlaw-web.net/einformer
    this is what im trying to code: the only thing i changed was the whole page had a top margin

    and the problem is that the navigation bar doesnt show up on the bottom of the wrapper

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm still a little confused as to what you mean.

    You have this image in the bottom of the layout:

    http://outlaw-web.net/einformer/images/bottom_nav.gif

    But its not a navigation image but a copyright image and it seems to be at the bottom ok. Were you expecting it to be somewhere else?

    Sorry the last posted sounded like a flame - it wasn't meant to

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in my view of it i dont see it at all lol
    its ok no harm done

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The image I linked to is showing in both firefox and IE for me although Ie's display is broken as mentioned in my first post.

    To fix it for IE you need to change the css to something like this:

    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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    <meta name="description" content="Einformer.net Your #1 D'awa center!" />
    <meta name="keywords" content="einformer.net, internet informer, islam informer, islam, islamic information, islam help, what is islam?, islam, muslims, muslim community, muslim help, muslim knowledge, muslim info, quran, ahadith, zikr, prophet mohammed, prophet muhammed, muslim forum, about islam" />
    <meta name="Designer" content="Khaled Ramadan" />
    <link rel="stylesheet" type="text/css" href="" />
    <title>Einformer.net | Home</title>
    <meta name="author" content="Alaa Last name" />
    <style type="text/css">
        /*<![CDATA[*/
        body{
            background: url(images/bg.gif) repeat-x;
                margin: 60px 40px 0;
                font-size: 62.5&#37;;
              font-family: Verdana,Tahoma,Arial,sans-serif;
                text-align:center;
        }
        #wrapper_top{
            background: url(images/wrap_top.png) no-repeat;
            width: 695px;
            height: 9px;
               margin: 0px auto -1px;
            padding: 0 15px 0;
            overflow: hidden;
        
        }
        #wrapper{
            background: url(images/bg2.png) repeat-y;
            width: 695px;
                 margin: 0 auto ;
            padding: 0 15px 0;
            overflow: hidden;
            text-align:left;
                }
        #header{
            width: 664px;
            height: 130px;
            background: url(images/header.gif) no-repeat;
            margin: 0px;
        }
        #nav{
    
            width:664px ;
            height: 30px;
        }
        #content{
        
            width: 664px;
            padding: 5px;
        }
        #sidebar{
            width: 190px;
            float: left;
            background: url(images/sidebar.gif) no-repeat;
        }
        #nav_box_s{
            width: 180px;
            height: 30px;
            background: url(images/news_top.gif) no-repeat;
            padding: 12px 5px 0px 5px;
            color: white;
            font-weight: bold;
        }
        #nav_box_c{
            width: 175px;
            background: url(images/nav_cont.png) repeat-y;
            margin-top: -12px;
            padding: 5px 5px 5px 10px
        }
        #nav_box_e{
            width: 186px;
            height: 30px;
            background: url(images/nav_bot.gif) no-repeat;
            margin-left: -1px;
        }
        #content_box{
            margin-left: 190px;
            color: white;
            
        }
        #login{
            width: 440px;
            height: 189px;
            background: url(images/news_bg.png) no-repeat;
            padding: 20px 10px 20px 15px;
        }
        #lower_nav{
         height:30px; 
         clear:both;
     } 
        input:active{
            background: #4a6b48;
        }
        #login .theInput {
         font-family: Verdana;
         font-size: 11px;
         width: 110px;
         margin-right: 5px;
        }
    
        #login .theSubmit {
         font-family: Verdana;
          font-size: 10px;
          background-color: #333333;
         color: #FFFFFF;
         margin-right: 5px;
        }
        a{
            color: #006691;
            border-bottom: 1px dotted #006691;
        }
        a:hover{
            border-bottom: 1px solid #ffffff;
            color: #ffffff;
        }
        img{border:none}
        /*]]>*/
        </style>
    </head>
    <body>
    <!-- Body Wrapper/container -->
    <div id="wrapper_top"> </div>
    <div id="wrapper">
        <!-- Body Wrapper/container -->
        <div id="header"></div>
        <!-- Nav -->
        <div id="nav"><img src="images/nav.gif" alt="" usemap="#navigation_Map" border="0" height="29" width="664" /></div>
        <!-- Content -->
        <div id="content">
            <div id="sidebar">
                <div id="nav_box_s">Navigation</div>
                <div id="nav_box_c">
                    <ul>
                        <li>Home</li>
                        <li>Forum</li>
                        <li>Blog</li>
                        <li>Register</li>
                        <li>Members Login</li>
                        <li>Downloads</li>
                        <li>Gallery</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </div>
                <div id="nav_box_e"></div>
            </div>
            <div id="content_box">
                <div id="login">
                    <form method="POST" target="login.php" enctype="text/plain">
                        <div>Quick Login:<br />
                        <br />
                        Username: <br />
                        <input type="text" name="username" align="right" style="width: 124px; height: 10px;" />
                        <br />
                        Password: <br />
                        <input type="password" name="password" align="right" style="width: 124px; height: 10px;"/>
                        <br />
                        <br />
                        <input type="image" src="images/login.png" style="border: 0;" align="center" />
                        <br />
                        <a href="register.php">Not a member? Register Now!</a>
                </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="lower_nav"> <img src="images/bottom_nav.gif" width="664" height="27" alt="" usemap="#navigation_Map1" /> </div>
    </div>
    <map name="navigation_Map">
        <area shape="rect" alt="Contact Us Today!" coords="524,0,608,27" href="contact.php">
        <area shape="rect" alt="about us" coords="460,0,524,28" href="about.php">
        <area shape="rect" alt="Einformer's Blog" coords="405,0,460,28" href="blog">
        <area shape="rect" alt="Einformer's Islamic Gallery!" coords="328,0,405,28" href="gallery">
        <area shape="rect" alt="Members Login" coords="269,0,328,29" href="login.php">
        <area shape="rect" alt="Register Today!" coords="185,0,269,28" href="register.php">
        <area shape="rect" alt="Einformer Forum Home" coords="116,0,185,29" href="forum">
        <area shape="rect" alt="Homepage" coords="53,0,116,28" href="index.php">
    </map>
    <map name="navigation_Map1">
        <area shape="rect" alt="Coming Soon!" coords="393,0,550,26" href="#">
        <area shape="rect" alt="Einformer.net" coords="266,0,393,26" href="http://www.einformer.net">
    </map>
    </body>
    </html>
    The above will also make it usable and centred in mozilla and allow scrollbars to appear for smaller screens unlike your method which won't allow any scrollbars at all!

    However IE6 doesn't understand transparent pngs and you will need to either offer ie different images or use the "alpha image loader" method.

    There are also quite a number of simple validation errors that need to be addressed

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much
    i just need one more thing, to know what i did wrong

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Things that I addressed were as follows.

    Position:fixed is not required and has no bearing on this layout so it was removed.

    Auto margins were used to center the layout (see faq on centering) and the margins removed from the body.

    The padding and the widths were amended on your inner elements so that the content could actually fit.

    That was the main changes although there were probably a couple of other little tweaks.

    Make sure that what you are telling the browser to do is possible. You can't put something inside a container that is itself bigger than the container. It can't be done in real life and it can't be done with css either

    Keep things simple and use static positioning most of the time (not absolute or fixed) as this will control the flow of the page and allow other elements to react and work with the content unlike absolute or fixed elements.


    Hope that helps


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
  •