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 6 of 6
Like Tree2Likes
  • 1 Post By sunfighter
  • 1 Post By VIPStephan

Thread: Avoid DIV overlapping

  1. #1
    New Coder
    Join Date
    May 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Avoid DIV overlapping

    Dear friends,
    I cannot understand why reducing the width of the browser the body of the text (DIV "content") is superimposed on the vertical menu (DIV "menu").
    Please any suggestion?
    Thank you very much

    HTML:
    Code:
    <body>
    <div class="container">
        <div id="menu">
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="ChiSiamo.htm">About</a></li>
                <li><a href="Archivio.htm">Archivio</a></li>
                <li><a href="Contatti.htm">Contatti</a></li>
            </ul>
        </div>
    
        
        <div class="content" align="justify">
            <p>testo della pagina....</p>
        </div>
    
    <div id="background">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><img src="images/sfondo1.jpg" id="bgk" alt="" /> </td>
            </tr>
        </table>
    </div>
    </body>
    CSS:
    Code:
    * {
        margin:0;
        border:0;
        padding:0;
    }
    
    body {text-align: center;}
    
    #menu ul{
        width:100px;
        background:rgba(255,255,255,0.25);
        float:left;
        display:inline;
        position:fixed;
        top:0;
        left:0;
        font-family: Verdana, Arial;
        font-size: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
     
    #menu li a {
      color: rgb(255,255,255);
      display:block;
      line-height: 40px;
      height: 40px;
      width: 100px;
      text-align: center;
      text-decoration: none;
    }
     
    #menu li a:hover, #menu li a.active {font-weight: bold;}
    
    html, body,#backgound,#background table,#background td{
        width:100%;
        height: 100%;
        background-color:transparent;
        color:rgb(0,0,0);
        overflow:hidden;
    }
    
    .container{
        width:100%;
        height: 100%;
        position:relative;
        top:0;
        left:0;
        z-index:1;
        overflow:auto;
    }
    
    .content{
        margin:0 auto; 
        width: 964px ;
        overflow:auto;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 100px;
        border-left: 0;
        border-right: 0;
        font: 10px Verdana, Arial;
        background: rgba(255,255,255,0.25) ;
        text-aling: left;
    }
    
    #background {position: fixed;}
    
    #background td{
        vertical-align:middle;
        text-align:center
    }
    
    
    #background img{
        min-height:50%;
        min-width:50%;
        margin:0 auto
    }
    
    #background, #bgk{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:0;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    Some reasons why this is happening. You do not have any rules for the menu div. You put them in the menu ul selector.
    position:fixed;
    top:0;
    left:0;
    width:100px;
    S/B in selector #menu.
    That wont fix things because you have removed the menu div from the flow of things with position:fixed; and selector .content acts like it's not there.
    Take a look at this page Responsive Two Column Layout (Right Column Fluid) and view the page source and read the article that comes with it Building a Responsive Two Column Layout | Johnstonian Era

    Hope this gets you on the right track.
    mlolcu likes this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    May 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Some reasons why this is happening. You do not have any rules for the menu div. You put them in the menu ul selector.
    position:fixed;
    top:0;
    left:0;
    width:100px;
    S/B in selector #menu.
    That wont fix things because you have removed the menu div from the flow of things with position:fixed; and selector .content acts like it's not there.
    Take a look at this page Responsive Two Column Layout (Right Column Fluid) and view the page source and read the article that comes with it Building a Responsive Two Column Layout | Johnstonian Era

    Hope this gets you on the right track.
    Dear friend,
    I thank you very very much! Your support was very precious and the article you suggested was much educative for me
    I solved the most of my problems, however still I do not understand why IE6 does not render backgrounds with opacity.
    Please, could you give any great help again?
    Sincerely

    Following my new code:

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Chi siamo</title>
    <base target="_self">
    <link href="css/stili.css" rel="stylesheet" type="text/css">
    
    <!--[if lt IE 7]>
    
    	<style type="text/css">
    		div.content {
    			background: rgb(255,255,255); 
    			filter:alpha(opacity=50); 
    		}
    	</style>
    <![endif]-->
    </head>
    
    <body>
    
    <div class="container">
    	<div id="menu">
    		<ul>
    			<li><a class="active" href="#">Home</a></li>
    			<li><a href="ChiSiamo.htm">About</a></li>
    			<li><a href="Archivio.htm">Archivio</a></li>
    			<li><a href="Contatti.htm">Contatti</a></li>
    		</ul>
    	</div>
    
        <div class="content" align="justify">
    		<p>Text.......</p>
    	</div>
    </div>
    
    <div id="background">
    	<table cellpadding="0" cellspacing="0">
    		<tr>
    			<td><img src="images/sfondo1.jpg" id="bgk" alt="" /> </td>
    		</tr>
    	</table>
    </div>
    
    
    </body>
    </html>
    Code:
    * {
    	margin:0;
    	border:0;
    	padding:0;
    }
    
    html, body,#backgound,#background table,#background td{
    	width:100%;
    	height: 100%;
    	background-color:transparent;
    	color:rgb(0,0,0);
    	overflow:hidden;
    }
    
    body {text-align: center;}
    
    #menu {
    	width:100px;
    	background:rgba(255,255,255,0.25);
    	float:left;
    	display:inline;
        position:fixed ;
    	top:0;
    	left:0;
    	font-family: Verdana, Arial;
        font-size: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
     
    #menu li a {
      color: rgb(255,255,255);
      display:block;
      line-height: 40px;
      height: 40px;
      width: 100px;
      text-align: center;
      text-decoration: none;
    }
     
    #menu li a:hover, #menu li a.active {font-weight: bold;}
    
    .container{
    	width:100%;
    	height: 100%;
    	position:relative;
    	top:0;
    	left:0;
    	z-index:1;
    	overflow:auto;
    }
    
    .content{
        overflow:auto;
    	padding-left: 130px;
    	padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 100px;
    	border-left: 0;
    	border-right: 0;
        font: 10px Verdana, Arial;
    	background: rgba(255,255,255,0.25) ;
    	text-aling: left;
    }
    
    #background, #bgk{
    	position:absolute;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	z-index:0;
    }

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by mlolcu View Post
    I solved the most of my problems, however still I do not understand why IE6 does not render backgrounds with opacity.
    I would say because in IE 6 the element needs “layout”. Try applying zoom: 1 and see if that helps.
    mlolcu likes this.

  • #5
    New Coder
    Join Date
    May 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fantastic, it works!
    However the menu has not yet background color (in IE6), please how to refer to it?
    Thank you very much again for kind support


    Code:
    <!--[if IE]>
    	<style type="text/css">
    		div.content {
    		background: rgb(255,255,255); 
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    		filter:alpha(opacity=50); 
            zoom:1;
    
    		#menu {
    		background: rgb(255,255,255); 
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    		filter:alpha(opacity=50); 
            zoom:1;
    	}
    	</style>
    <![endif]-->

  • #6
    New Coder
    Join Date
    May 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Was I wrong in referencing the menu?
    Many thanks


  •  

    LinkBacks (?)


    Posting Permissions

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