css help please

8 posts Page 1 of 1
Contributors
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

css help please
Mark
Hello i'm wanting to keep my right column position fixed and only the left column will scroll up and down using my cs can anyone help me please i have attached my website code below.?
You do not have the required permissions to view the files attached to this post.
http://www.mbappz.com
User avatar
Shim
VIP - Donator
VIP - Donator
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am

Re: css help please
Shim
Here is an example : http://jsfiddle.net/NGLN/bePrn/
Find my programs on Softpedia
User avatar
AnoPem
VIP - Donator
VIP - Donator
Posts: 441
Joined: Sat Jul 24, 2010 10:55 pm

Re: css help please
AnoPem
Hello #Mark
first thing you should do is to put your text in <div id="right"> into
Code: Select all
<p>Your text here</p>

to symbolize its text.

then you would add this code to your css
Code: Select all
#wrapper #content #right p{
	position:fixed;
	width:300px;
}
And then you should be able to scroll only your left div down
https://t.me/pump_upp
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: css help please
mikethedj4
You can view my tutorial here called Social Sidebar which does exactly what you're asking. Hope it helps.
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Re: css help please
Mark
ive tried everything you guys have said but still cant get it to work for some unknown reason as i followed the tutorials.

if you look here http://www.mbappz.co.uk its the red one on the right that i want to stay still this is my code.

Can anyone help please.
Code: Select all
*{
  font-family: Comic Sans MS;
}

#background {
    width: 100%;
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

#wrapper{
 width: 920px;
 background-color: #FFFFFF;
 padding: 10px;
 margin-left: auto;
 margin-right: auto;
}

#wrapper #header{
 height: 135px;
 background-image: url(./images/bg.jpg);
 background-color: #ccc;
 padding-top: 15px;
 padding-bottom: 15px;
 padding-left: 20px;
 padding-right: 20px;
}

#wrapper #nav ul{
    background: Red;
    padding: 0 5px;
    list-style: none;
    position: relative;
}

#wrapper #nav ul:after{
      content: "";
      clear: both;
      display: block;
}

#wrapper #nav ul li{
 float: left;
}

#wrapper #nav ul li a{
 display: block;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
}

#wrapper ul li:hover{
 background: #C80000;
}

#wrapper #nav ul li:hover a{
 color: #fff;
}

#wrapper #nav ul ul{
 display: none;
 background: #C80000;
 width: 200px;
 position: absolute;
 top: 100%;
}

#wrapper #nav ul li:hover > ul{
 display: block;
}

#wrapper #nav ul ul li{
 float: none;
 border-bottom: 1px solid #fff;
 position: relative;
}

#wrpper #nav ul ul li a{
 padding: 15px 40px;
 color: #fff;
}

#wrpper #nav ul ul li hover{
  background: #4b5445f;
}

#wrapper #content{
 min-height: 200px;
 margin-top: 5px;
 margin-bottom: 5px;
}

#wrapper #footer{
 border-top: 1px solid #000;
 padding-top: 10px;

}


/* PRIMARY COLUMNS */
#wrapper #content #left{
  width: 600px;
  float: left;;
  }

#wrapper #content #right{
   width: 300px;
   float: right;
   background-color: red;
}

a{
 color: red;
 text-decoration: none;
}

a:hover{
 color: #F80;
 text-decoration: underline;
}

.clear{
 clear: both;
}
html code
Code: Select all
<!DOCTYPE html>
<html>
<head>
       <title>Test Website</title>

       <link href='./main.css' rel='stylesheet' type='text/css'></link>
</head>
<body>

<div id="background">
    <img src="/images/bg.jpg" class="stretch" alt="" />
</div>

      <div id='wrapper'>

            <div id='header'>
                 <img src='./images/banner.png' alt='mbappz.co.uk logo'></img>
            </div>

            <div id='nav'>
                <ul>
                     <li><a href='./'>Home</a></li>
                     <li><a href='#'>Tutorils</a>
                            <ul>
                                <li><a href="#">VB.NET</a></li>
                                <li><a href="#">PHP</a></li>
                                <li><a href="#">MYSQL</a></li>
                                <li><a href="#">OTHERS</a></li>
                            </ul>
                     </li>
                     <li><a href='#'>Contact Us</a></li>
                </ul>
            </div>

            <div id='content'>
                  
                  <div id='left'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

 
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
                  </div>
                  
                  <div id='right'>
                      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
                  </div>

                  <div class='clear'></div>
            </div>
            
            <div id='footer'>
                 Copyright 2014 <a href='./'>mbappz.co.uk</a>
            </div>
      </div>
</body>
</html>
http://www.mbappz.com
User avatar
AnoPem
VIP - Donator
VIP - Donator
Posts: 441
Joined: Sat Jul 24, 2010 10:55 pm

Re: css help please
AnoPem
If you add me on skype i might be able to assit you futher with better examples per-pem is my skype or my steam pemozone its up to you
https://t.me/pump_upp
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Re: css help please
Mark
i dont use skype m8
http://www.mbappz.com
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: css help please
mikethedj4
You can try working with this...
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<style type='text/css'>
  .left {
    position: absolute;
    top:0; left:0; right:50%;
  }
  
  .right {
    position:fixed;
    top:0; left:50%; right:0;
    background:red;
  }
</style>
</head>
<body>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.

Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.
  </div>
  
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.

Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.
  </div>
</body>
</html>
8 posts Page 1 of 1
Return to “Help & Support”