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
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Smile Div Navigation text

    Problem Is Fixed.

    i want to create a div layer with my navigation links in, that displays on top of an image in another div i want these links to be in specific places, and to stay where they are when the browser is resized.

    how would i do this

    this is my old html site that i am working on recreating into css
    i want the navigation bar to display like this one does but have no idea how to do it with css: http://technolane.sitesled.com

    the copy of this site that i am trying to recreate in css is located at
    http://technolanecss.sitesled.com

    thanking everyone in advance

    James

    Problem Is Fixed.
    Last edited by CSSisthebest; 07-18-2007 at 11:44 PM. Reason: Problem Is Fixed.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Firstly, you wouldn't want to put your navigation in a div, you'd want it in a ul, as a navigation list is just that, a list.

    So, to do this you would create a div and put a background image in it that you wanted behind the navigation. The you'd create a ul with another id that contained the elements you wanted for your list... the positioning would go in the ul and then you could use an image or text in the li's to create your menu.

    As long as you have that set width in your wrapper the site won't ever shrink below that so you don't need to worry about things moving around
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question Still a Few Issues

    i set the navigation image as the background using divs then applied text above it using a <ul>,
    but i need to be able to change the position of each text link in the <ul>, so it aligns correctly with each of the tab like images.

    this is the site so far:
    http://technolanecss.sitesled.com/

    this is my 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" lang="en" xml:lang="en">
          
    <head>
    <title>technolane - local computer help - technolane it services - 
    technolane web services - website design - computer repair in essex - website design in essex</title>
    <style type="text/css">
              
    /**********************************************
    Created For and By Technolane IT and Web Services (www.technolane.co.uk)
    You may not use or recreate any of the content on this site.
    Technolane 2007 All Rights Reserved James Lane and Robert Lane.
    ***********************************************/
              
    /*ToC
              1. Defaults
              2. Structure
              3. Links and Navigation
              4. Fonts
              5. Images 
              6. Forms
                    
    * ------------ 1. Defaults ------------ *
    
    *Defaults*/
    * { margin: 0;
        padding: 0;
        padding-top:0px;}
    
    /*Content Wrap For Website*/  
    #wrapper {width:804px;
        height:auto;
        overflow:hidden;
        margin: 0 auto;
        padding-top:29px;}         
    
    /*Background Color*/
    body {background-color:#c0c0c0;}
             
    /* ------------ 2. Structure ------------ */
    
    /*Website Border*/
    #border {border:2px;
        border-color:#464646;
        border-style:solid;
        width:800px;
        height:auto;}
        
    /* Space For Text */
    #space {display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:0%;
        width:800px;    
        background-color:#FFFFFF;
        padding:0;
        padding-top:0;}
    
    #backgroundh1
        {background-image:url(homebuto_02.jpg);
         width:800px; 
         height:34;}
    
    /*Bottom Navigation Space */
    #bottomnavigation {display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:0%;
        width:800px;    
        background-color:#c0c0c0;
        text-align:center;
        padding-top:0;}
            
    /*Space For Copyright*/
    #copr {display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:0%;
        width:800px;    
        background-color:#c0c0c0;
        text-align:center;}
    
    /*Paragraph Alignment*/        
    #content {overflow: auto; 
        width: 800px;
        margin: 0 auto;}
    
    /*Text Columns*/
    #content div {width: 50%; 
        float: left;
        margin: 0 auto;
        background-color:#FFFFFF;}
    
    /* JavaScript Drop Down Menu */            
    #dropmenudiv{
        position:absolute;
        border:0px solid black;
        border-bottom-width: 0;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal; 
        line-height:18px;
        z-index:100;}
        
    .m2 {margin-bottom: 2em;}
        
    /* JavaScript Drop Down Menu */    
    #dropmenudiv a{
        width: 100%;
        display: block;
        text-indent: 3px;
        color: #595b5a;
        border-bottom: 0px solid black;
        padding: 1px 0;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal; 
        text-decoration: none;}
        
    /* JavaScript Drop Down Menu */    
    #dropmenudiv a:hover{ /*hover background color*/
        background-color: #595b5a;
        color:#FFFFFF;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal; }
            
    /* ------------ 3. Links And Navigation ------------ */
    
    /*bottom navigation links*/
    
    a.bottomnav:link {text-decoration: none;
        color: #464646;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        font-style:normal;
        text-align:center;}
    
    a.bottomnav:visited {text-decoration: none;
        color: #464646;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        font-style:normal;
        text-align:center;}
    
    a.bottomnav:hover {text-decoration: none;
        color: #464646;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        font-style:normal;
        text-align:center;}
    
    a.bottomnav:active {text-decoration: none;
        color: #464646;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        font-style:normal;
        text-align:center;}
        
    #navlist li
    {
    display: inline;
    list-style-type: none;
    padding-left:-3px;
    margin-left:5px;
    height:36px;
    width:800px;
    }
    
    /* ------------ 4. Fonts ------------ */
    
    /*Font Style For Copyright*/
    .copyright
        {font-family:Arial, Helvetica, sans-serif;
        font-size:10px;
        font-style:normal;
        color:#464646;
        text-align:center;
        text-decoration:none;}
        
    /*Holds Company Logo*/
    h1 {font-weight:normal;
        margin:0; }
    
    /*Font Style For Orange Headers*/
    h2 {font-family:Georgia;
        font-size:20px;
        font-style:italic;
        color:#fb7116;
        font-weight:normal;
        margin-top:2em;
        margin-left:40px;}
    
    /*Font Style For Paragraphs*/
    p { font-family:Georgia, "Times New Roman", Times, serif;
        font-size:12px;
        font-style:normal;
        color:#464646;
        font-weight:normal;
        text-align:justify;
        margin-top:2em;
        margin-left:40px;
        margin-right:100px;
        padding-bottom: 2em;}
        
        
    a.current:link {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#FFFFFF;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    a.current:visited {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#FFFFFF;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    a.current:hover {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#FFFFFF;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    a.current:active {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#FFFFFF;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    
            
    a.links:link {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#000000;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    a.links:visited {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#000000;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    a.links:hover {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#000000;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    a.links:active {font-size:13px;
        font-family:Georgia, "Times New Roman", Times, serif;
        color:#000000;
        font-weight:normal;
        font-style:normal;
        text-decoration: none;}
        
    /* ------------ 5. Images ------------ */
    
    /* Technolane Logo */
    img {display: block;
        margin-left: auto;
        margin-right: auto; 
        margin-top:4%;
        padding:0;}
    
    /* Navigation Bar Image */        
    img {display: block;
        margin-left: auto;
           margin-right: auto; 
        margin-top:0%;
        padding:0;}    
                   
    /* Flash Banner */         
    #flash {display:block;
        margin-left:auto;
        margin-right:auto;
        width:800px;    
        background:url(technolanebanner.swf); }
        
    
    </style>
    
        
    <script type="text/javascript">
    /*Javascript Drop Down Menu*/
    <![CDATA[language="javascript"// ]]>
    
    /***********************************************
    //* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
    //* This notice MUST stay intact for legal use
    //* Visit http://www.dynamicdrive.com/ for full source code
    //***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
        menu1[0]='<a href="maintenance.html">Maintenance</a>'
        menu1[1]='<a href="datarecovery.html">Data Recovery</a>'
        
    //Contents for menu 2,
    var menu2=new Array()
        menu2[0]='<a href="home.html">Home</a>'
        menu2[1]='<a href="business.html">Business</a>'
        menu2[2]='<a href="wireless.html">Wireless</a>'
            
    var menu3=new Array()
        menu3[0]='<a href="webdesign.html">Web Design</a>'
        menu3[1]='<a href="webmaintenance.html">Web Maintenance</a>'
        menu3[2]='<a href="portfoliogallery.html">Portfolio Gallery</a>'
    
    var menuwidth='165px' //default menu width
        var menubgcolor='white'  //menu bgcolor
        var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
        var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
        var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
        document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'; opacity: .95; filter: alpha(opacity=95)" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
        var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
        var parentEl=what.offsetParent;
        while (parentEl!=null){
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
        return totaloffset;
        }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
        if (ie4||ns6)
        dropmenuobj.style.left=dropmenuobj.style.top="-500px"
        if (menuwidth!=""){
        dropmenuobj.widthobj=dropmenuobj.style
        dropmenuobj.widthobj.width=menuwidth
        }    
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
        obj.visibility=visible
        else if (e.type=="click")
        obj.visibility=hidden
        }
    
    function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }
    
    function clearbrowseredge(obj, whichedge){
    
        var edgeoffset=-3
        if (whichedge=="rightedge"){
        var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
        dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
        if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
        edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
        }
    else{
        var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
        var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
        dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
        if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
        edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
        if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
        edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
        }
    }
        return edgeoffset
        }
    
    function populatemenu(what){
        if (ie4||ns6)
        dropmenuobj.innerHTML=what.join("")
        }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
        if (window.event) event.cancelBubble=true
        else if (e.stopPropagation) e.stopPropagation()
        clearhidemenu()
        dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
        populatemenu(menucontents)
    
    if (ie4||ns6){
        showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    
    dropmenuobj.x=getposOffset(obj, "left")
        dropmenuobj.y=getposOffset(obj, "top")
        dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
        dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
        }
    
    return clickreturnvalue()
        }
    
    function clickreturnvalue(){
        if (ie4||ns6) return false
        else return true
        }
    
    function contains_ns6(a, b) {
        while (b.parentNode)
        if ((b = b.parentNode) == a)
        return true;
        return false;
        }
    
    function dynamichide(e){
        if (ie4&&!dropmenuobj.contains(e.toElement))
        delayhidemenu()
        else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
        delayhidemenu()
        }
    
    function hidemenu(e){
        if (typeof dropmenuobj!="undefined"){
        if (ie4||ns6)
        dropmenuobj.style.visibility="hidden"
        }
        }
    
    function delayhidemenu(){
        if (ie4||ns6)
        delayhide=setTimeout("hidemenu()",disappeardelay)
        }
    
    function clearhidemenu(){
        if (typeof delayhide!="undefined")
        clearTimeout(delayhide)
        }
    
    if (hidemenu_onclick=="yes")
        document.onclick=hidemenu
    // ]]>
            </script>
            <script type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
            </script>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
            <body>
            <!--Wrapper to Hold Website -->
            <div id="wrapper">
        <!--Website Border -->
            <div id="border">
        <!--Technolane Logo Image -->
               <div><h1><img class="normal"   src="header.gif" width="800" height="66" alt="technolane it services banner" /></h1></div>
       <!--Navigation Bar Image -->
               <div id="backgroundh1">
            <ul id="navlist">
            <li id="active"><a href="index.html" class="current">Home</a></li>
            <li><a href="default.htm" class="links">IT Services</a></li>
            <li><a href="default.htm" class="links">Networking</a></li>
            <li><a href="servicearea.html" class="links">Service Area</a></li>
            <li><a href="default.htm" class="links">Web Solutions</a></li>
            <li><a href="rates.html" class="links">Rates</a></li>
            </ul> </div>    
       <!--Flash Banner SWF -->
               <div id="flash"><object
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
            width="800" height="180">
            <param name="movie" value="technolanebanner.swf" /> 
            </object></div>
       <!--White Text Space -->
            <div id="content" class="m2"><div><h2>Computer Maintenance.</h2><p>Curabitur facilisis, libero et ultricies auctor, augue metus congue odio, eu rhoncus diam libero et magna. Donec nisi felis, dapibus vel, dignissim et, laoreet tincidunt, lectus. Nam sit amet tortor at orci congue lacinia. Donec in libero vel libero tempor ornare. Sed dapibus ante at enim. Donec fermentum, augue id accumsan mollis, est lectus vestibulum nisl, eget ullamcorper nulla justo ac dolor.</p></div><div><h2>Troubleshooting.</h2><p>Curabitur facilisis, libero et ultricies auctor, augue metus congue odio, eu rhoncus diam libero et magna. Donec nisi felis, dapibus vel, dignissim et, laoreet tincidunt, lectus. Nam sit amet tortor at orci congue lacinia. Donec in libero vel libero tempor ornare. Sed dapibus ante at enim. Donec fermentum, augue id accumsan mollis, est lectus vestibulum nisl, eget ullamcorper nulla justo ac dolor. </p></div></div>
       <!--Top Navigation Links -->
            <div id="navtable"></div>
            </div>
        <!--Bottom Navigation Links -->
            <div id="bottomnavigation"><br />
            <a href="index.html" class="bottomnav">Home&nbsp;|&nbsp;</a><a href="servicearea.html" class="bottomnav">Service Area&nbsp;|</a><a href="rates.html" class="bottomnav">&nbsp;Rates&nbsp;|</a><a href="contactus.html" class="bottomnav">&nbsp;Contact Us&nbsp;|</a><a href="links.html" class="bottomnav">&nbsp;Links</a></div>
       <!--Copyright Message -->
               <div id="copr"><span class="copyright"><br />Created By Technolane Web Designs 2007 Copr &copy; All Rights Reserved.</span></div>
          <!--JavaScript to Disable Flash Dotted Border-->
            <script type="text/jscript">
            <![CDATA[ language="JScript"  type="text/jscript" src="http://scripts.ediy.co.nz/scripts/NoIEActivate.js" // ]]></script>
            </div>
            </body>
          </html>

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question this is the navigation menu in table form

    this is the original navigation menu from my old site that i want to create into css
    how would i do this ?

    here is the code:
    Code:
     <td class="outsidetable6" width="800" title="Technolane Navigation Bar" " height="34" background="homebuto_02.jpg"><table width="800" height="34" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="218">&nbsp;</td>
                              <td width="48"><div align="center"><span class="style9"><a href="index.html" class="home">Home</a></span></div></td>
                              <td width="80"><div align="center" class="style10 style11"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">IT Services </a></div></td>
                              <td width="85"><div align="center" class="style12"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Networking</a></div></td>
                              <td width="90"><div align="center" class="style12"><a href="servicearea.html">Service Area </a></div></td>
                              <td width="98"><div align="center" class="style12"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Web Solutions </a></div></td>
                              <td width="181"><span class="style12"><a href="rates.html">&nbsp;&nbsp;Rates</a></span></td>
                            </tr>
                        </table></td>

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Smile How i Solved it ?

    Solution.

    for a horizontal navigation menu overlaying a image:

    the css i used:

    Code:
    #navoutsidediv
        {display:block;
         background-image:url(homebuto_02.jpg);
         width:800px; 
         height:34;
         background-repeat:no-repeat;
         z-index:21;}
    
    #navigation {width:800px;
            font-family:"Times New Roman", Times, serif
            margin:0 0 1em 0;
            font-weight:normal;
            font-size:16px;}
            
    #navigation li a.unselected {display:block;
            padding:5px 5px 5px 0.5em;
            text-decoration:none;
            color:#FFFFFF;
            font-size:16px;
            font-family:"Times New Roman", Times, serif
            font-weight:normal;
            display:inline;}
            
    #navigation li a.selected {display:block;
            padding:5px 5px 5px 0.5em;
            text-decoration:none;
            color:#000000;
            font-size:16px;
            font-weight:normal;
            display:inline;
            font-family:"Times New Roman", Times, serif}
            
    #topnav {float:left;
            width:800px;
            margin:0;
            padding:0;
            clear:left;
            font-size:16px;
            font-family:"Times New Roman", Times, serif
            }
    
    ul {text-decoration:none;
        font-weight:normal;
        font-style:normal;
        list-style-type:none;
        display:inline;
        font-size:16px;
        font-family:"Times New Roman", Times, serif}
    
    li {text-decoration:none;
        font-weight:normal;
        font-style:normal;
        list-style-type:none;
        display:inline;
        font-size:16px;
        font-family:"Times New Roman", Times, serif}
    this is the HTML i used:

    Code:
    <div id="navoutsidediv">
            <div id="<div id="topnav"><div id="navigation">
            <ul>
            <li>
            <a href="#" class="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a>
            </li>
            <li>
            <a href="#" class="unselected">IT Services</a>
            </li>
            <li>
            <a href="#" class="unselected">Networking</a>
            </li>
            <li>
            <a href="#" class="unselected">Service Area</a>
            </li>
            <li>
            <a href="#" class="unselected">Web Solutions</a>
            </li>
            <li>
            <a href="#" class="unselected">Rates</a>
            </li>
            </ul>
            </div>
            </div>
            </div>
    Solution.


  •  

    Posting Permissions

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