SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling in middle panel

    Hi,

    I'd like to have a vertical scrollbar in the middle, however my CSS doesn't do this. Instead, the text disappears underneath if there is no more space.

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 100%; 
    	color: #000000;
    	background-image: url('bg.jpg');
    	background-position: center top;
    	background-repeat: no-repeat;
    	text-align:center;
    }
     
    .content {
    	min-height: 100%;
    	position: relative;
    	overflow-x: hidden;
    	/*overflow-y: hidden;*/
    	z-index: 0; 
    	background: rgb(0, 0, 0); 
    	background: rgba(255, 255, 255, .6);
    	font-family: Century Gothic, sans-serif;
    	line-height:20px;
    	letter-spacing: 3px;
    	width: 1200px;
    	display:  inline-block; 
    }
    
    .background {
    	position: absolute;
    	z-index: -1;
    	top: 0;
    	bottom: 0;
    	margin: 0;
    	padding: 0;
    	
    }
    
    .top_block {
    	width: 100%;
    	display: block; 
    	background-color: #FFFFFF;
    }
    
    .bottom_block {
    	position: absolute;
    	width: 100%;
    	display: block;
    	bottom: 0; 
    	
    }
    
    .left_block {
    	display: block;
    	float: left; 
    	
    	
    }
    
    .right_block {
    	display: block;
    	float: right; 
    	
    }
    
    .center_block {
    	display: block;
    	width: auto; 
    	
    }
    
    .block_1 {
    	width: 100%;
    	height: 200px;
    }
    
    .block_2 {
    	width: 100%;
    	height: 30px;
    		
    }
    
    .block_3 {
    	width: 100%;
    	height: 80px;
    	
    }
    Another question is with the transparent background colour, I only want the middle block 2/content block to have transparent background colour. How would I go about this? I've noticed if I change the colour, the header and footer also gets changed.

    Thank you.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    .classname {overflow-y:scroll}

    http://reference.sitepoint.com/css/overflow

    Your code looks like it has several opportunities for improvement. If you would like to post a working page (starts with <doctype>, ends with </html>) showing the HTML and CSS together, or a link to your page if it's on a server, we might be able to help. Click the link at the bottom of my post for more information about posting code.

    I would rather see your HTML and CSS together before trying to address the background color question.


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
  •