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

    Smile DIV tags/layer alignment ?

    Problem Is Fixed.

    i have a div that i want to position above another how do i do this ?

    i also want to make the div align so that it will not move when i change the browser window size how do i do this ?

    it cannot be aligned with align:center; because it needs to lay above the other div in a certain position.

    any ideas ?

    thanks

    James

    Problem Is Fixed.
    Last edited by CSSisthebest; 07-18-2007 at 05:32 PM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    To align the div you could use margin: 0 auto; as long as it has a set width. Could you post some code, or a link to your page to help us out a little? When you say you want a div on top of another, do you mean in front of? Or sat above in the browser window?
    "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 URL to the site

    Yes OK,

    Heres the original html site: http://technolane.sitesled.com/ 'not the site am working on' this is the site i am converting from html to css, the top navigation on the html site there is an image behind and text above using tables.

    The CSS site that i am converting is located at: http://technolanecss.sitesled.com/ 'the site i am working on'
    but i need the text to stay in the right place if i resize the browser window.

    thanking you in advance

    James

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Code:
    <div><img class="normal"   src="header.gif" width="800" height="66" alt="technolane it services banner" /></div>
    This is not really semantic html. You need to be doing something more along the lines of:

    Code:
    <div id="header">
    	<img src="header.gif" alt="Technolane I.T Services Banner" />
    </div>
    You give the width and height portions of that img in the styelsheet, rather than the html therefore separating style from html, the main purpose of a style sheet.

    Next I would look at creating a container div that hold everything in your page so that you can nicely center the entire thing. #container should have a set width, overflow: hidden, and margin: 20px auto;
    "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

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

    Question How?

    how would i contain everything inside one div would i just put a div around all the others ? then set these properties to align it in the center ?

    #everything {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:0%;
    padding:0;

    }

    and should i take the all the other alignment properties out of the others items on my page that i have aligned, because it might conflict with this ?

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by CSSisthebest View Post
    how would i contain everything inside one div would i just put a div around all the others ? then set these properties to align it in the center ?

    #everything {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:0%;
    padding:0;

    }

    and should i take the all the other alignment properties out of the others items on my page that i have aligned, because it might conflict with this ?
    Hmmm... pretty much. The general idea is that you place your whole page between the <body> tags in a div called #wrapper or #container and then use the following to center it:

    Code:
    #wrapper {
    	width: 800px; /* Change to whatever your page width is */
    	height: auto;
    	overflow: hidden; /* Clears any floats */
    	margin: 0 auto; /* The centering code, margin top and bottom 0, left and right auto */
    }
    When you align the other items (which should be done in the CSS and NOT the html) they will be aligned to the containing div
    "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

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

    Unhappy

    i did what you said but i still cant get the div with the id=home to align above the button on the navigation image

    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
                    
    Notes
            
    */
            
            
            
    /* ------------ 1. Defaults ------------ */
            
    * {
              margin: 0;
              padding: 0;
              padding-top:0px;
             
              }
              
    #wrapper {
        width:800px;
        height:auto;
        overflow:hidden;
        margin: 0 auto;
        } 
                    
            
                    
    /* JavaScript Drop Down Menu */                
    #dropmenudiv{
        position:absolute;
        border:0px solid black;
        border-bottom-width: 0;
        font-family:Times New Roman;
        font-size:13px;
        font-style:normal; 
        line-height:18px;
        z-index:100;
        }
        
    /* 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:Times New Roman;
        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:Times New Roman;
        font-size:13px;
        font-style:normal; 
        }
    
     
    body {
              background-color:#c0c0c0
              }
             
               
    /* ------------ 2. Structure ------------ */
    
    
        /* Technolane Logo */
        img {
              display: block;
              margin-left: auto;
                 margin-right: auto; 
              margin-top:4%;
              padding:0;
              }
    
        /* Navigation Bar */        
        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); 
            padding:0;
            padding-bottom:0;
            }
            
        /* 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;
            }
            
        /*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;
            }
            
                /*Bottom Navigation Space */
        #copr {
            display:block;
            margin-left:auto;
            margin-right:auto;
            margin-top:0%;
            width:800px;    
            background-color:#c0c0c0;
            text-align:center;
            }
            
        #toplinks {
            display:block;
            margin-left:auto;
            margin-right:auto;
            margin-top:0%;
            width:800px;    
            background-color:#ffffff;
            text-align:center;
            
            
    /* ------------ 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;
    }
    
    
    /*bottom navigation links*/
    a.selectedbutton:link {
        text-decoration: none;
        color: #000000;
        font-family:"Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal;
        text-align:center;
    }
    a.selectedbutton:visited {
        text-decoration: none;
        color: #000000;
        font-family:"Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal;
        text-align:center;
    }
    a.selectedbutton:hover {
        text-decoration: none;
        color: #000000;
        font-family:"Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal;
        text-align:center;
    }
    a.selectedbutton:active {
        text-decoration: none;
        color: #000000;
        font-family:"Times New Roman", Times, serif;
        font-size:13px;
        font-style:normal;
        text-align:center;
    }
    body {
        
    }
    
    
        
    /* ------------ 3. Fonts ------------ */
    
    .copyright
        {
        font-family:Arial, Helvetica, sans-serif;
        font-size:10px;
        font-style:normal;
        color:#464646;
        text-align:center;
        text-decoration:none;
        }
        
    #content { 
        overflow: auto; 
        width: 800px;
        margin: 0 auto; }
        
    #headnav { 
        overflow: auto; 
        width: 800px;
        margin: 0 auto;
    
            } 
            
    #content div { 
        width: 50%; 
        float: left;
        margin: 0 auto;
        background-color:#FFFFFF;
        }
    
    h1 {
        font-weight:normal;
        margin:0; }
        
    h2 {
        font-family:Georgia;
        font-size:20px;
        font-style:italic;
        color:#fb7116;
        font-weight:normal;
        margin-top:2em;
        margin-left:40px;
        
        }
        
    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;
        }
        
    .m2 {
        margin-bottom: 2em;}
        
    #home
        {
        position:absolute; 
        width:38px; 
        height:24px; 
        z-index:1; 
        left: 233px; 
        top: 87px;
        }
              </style>
            <!-- JavaScript Drop Down Menu -->
            <script type="text/javascript">
    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 language="JavaScript" 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>
            </head>
            <body><div id="wrapper">
        <!--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><img class="normal" alt="homebutton" src="homebuto_02.jpg" width="800" height="34" /></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="home"> home</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>
              
            
                
    
        <script type="text/jscript">
        <![CDATA[ language="JScript"  type="text/jscript" src="http://scripts.ediy.co.nz/scripts/NoIEActivate.js" // ]]></script>
            </div>
            </body>
    
          </html>


  •  

    Posting Permissions

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