Thread: Hidden Content

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    21
    Rep Power
    0

    Hidden Content


    Why does my main content getting hidden behind my left menu, I have a margin to protect that space.

    Code:
    <body>
    
    <div class="main-menu" id="main-menu">
        <div class="main-image">
        </div>
        <div class="forth-container">
            <div class="one-forth">
        		<p id="news-btn">News</p>
            </div>	
            <div class="one-forth">
            	<p>Item</p>
            </div>	
            <div class="one-forth">
            	<p>Item</p>
            </div>	
            <div class="one-forth">
            	<p>Item</p>
            </div>	
    	</div>
    </div>
    
    <div class="sidenav">
        <img src="img/bk3.jpg" id="side-img">
        <h2>Site Name</h2>
        <ul id="side-ul">
            <li id="load-news">Load News</li>
            <li>-</li>
        </ul>      
    </div>
    
    
    
    <div id="page-content">
    	Place Holder
        
         <p>Scroll down the page to see the result.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    
    </div>
    
    
    </body>
    </html>
    Code:
    /*
    http://bfintal.github.io/Counter-Up/demo/demo.html
    
    */
    @import 'https://fonts.googleapis.com/css?family=Montserrat:500|Open+Sans:300';
    @import 'https://fonts.googleapis.com/css?family=Maven+Pro:900';
    *{
    	margin:0;
    	padding:0;
    	border:0;
    }
    
    body{
    	color:#67727A;
    	font-family: 'Open Sans', sans-serif;
    	margin:0;
    	background-color:#CCC;
    		
    }
    
    
    h2{
    	font-size:250%;
    	font-weight:700;
    	text-align:center;
    	padding:-top:2%;
    	color:#D5E6FF;
    }
    h3{
    	font-size:175%;
    	line-height:155%;
    	padding:5% 0%;
    	font-weight:400;
    	color:#D5E6FF;	
    }
    
    h4{
    	font-size:125%;
    	line-height:100%;
    	padding:3% 0%;
    	font-weight:400;
    	color:#000;	
    }
    p{
    	font-size:120%;
    	line-height:110%;
    	padding:1%;
    	text-indent:2%;
    	text-align:justify;	
    	font-family: 'Open Sans', sans-serif;
    	color:#D5E6FF;
    }
    
    .bar-btn{
    	width:100%;
    	font-size:125%;
    	background-color:#000059;
    	color:#FFF;
    	padding:3% 0%;
    	text-align:center;
    	border-radius:3px;
    	cursor:pointer;
    }
    
    .sidenav {
    	height: 100%;
    	width: 0px;
    	position: fixed;
    	z-index: 1;
    	top: 0;
    	left: 0;
    	background-color: #111;
    	overflow-x: hidden;
    	padding-top: 0px;
    }
    .sidenav img{
    	width:300px;
    	padding:0px;
    	margin:0px;
    	cursor:pointer;
    }
    	
    .main-image {
    	width: 100%;
    	height: 60vh;
    	background-image:url(../img/bk3.jpg);
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-position: 50% 50%;
    }
    	.forth-container{
    		margin-top:20px;
    		margin:0px auto;
    		max-width:1200px;	
    	}
    	.one-forth{
    		width:23%;
    		float:left;
    		text-align:center;
    		cursor:pointer;
    		color:#FFF;
    		margin:1%;
    	}
    	.one-fourth, p{
    		color: #F0F0F0;
    		font-size:180%;
    		padding:10% 0 10% 0;
    		text-align:center;
    	}
    	.one-forth:nth-child(1){
    		background-color:#000059;
    	}
    	.one-forth:nth-child(2){
    		background-color:#000;
    	}
    	.one-forth:nth-child(3){
    		background-color:#000059;
    	}
    	.one-forth:nth-child(4){
    		background-color:#000;
    	}
    
    #side-ul{
    	padding-left:10px;
    }
    
    #page-content{
    	margin-left:300px;
    	max-width:768px;
    	margin:0px auto;
    }
    
    
    
    @media screen and (max-width: 768px){
    	h2{
    		font-size:150%;
    	}
    	h3{
    		font-size:125%
    	}
    	p{
    		font-size:120%;
    	}
    
    	.forth-container{
    		width:100%;	
    	}
    	.one-forth{
    		width:100%;
    		margin:0%;
    	}	
    	
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4308
    A left margin is set on "#page-content", but it's immediately overridden with the "auto" value to center it. In many cases, and probably this one, you can use left padding instead of the margin to do the same thing. (I don't see a border or background that would not allow that to look as desired.)

    Remember that the "C" in "CSS" stands for "cascading," which effectively means that just because a property was set somewhere does not mean that its used-value wasn't changed one way or another somewhere else.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo