CSS positioning and scrolling

StackOverflow https://stackoverflow.com/questions/22816962

  •  26-06-2023
  •  | 
  •  

Question

I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme

I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen

JS Fiddle

<head>
<style>
#container {
    width:90%;
    height 100%;
    background-color:Black;
    margin: 0 auto;
    text- align: left;
}
#banner {
    float: right;
    background-color:black;
    width:40%;
    top:1;
    right:1;
    position:fixed
}
#sidebarmenu {
    float: left;
    width: 10%;
    background-color:Black;
    padding: 15px 10px 15px 20px;
    top:1;
    left:1;
    position:fixed
}
#mainContent {
    background-color: Black;
    color:White;
    position: absolute;
    left: 120px;
    width: 50%;
    top:220;
    margin: 0 0 0 15%;
}
body {
    color: white;
    background-color: black;
}
.sidebarmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 180px;
    border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
    display: block;
    overflow: auto;
    color: black;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
    background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
    color: white;
}
.sidebarmenu ul li a:hover {
    background-color: black;
    color:red;
}

</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="index.html">Home</a></li>
<li><a href="1.html">Info</a></li>
<li><a href="11.php">Contact Us</a></li>
<li><a href="2.php">Page 2</a></li>
<li><a href="3.php">Page 3</a></li>
<li><a href="4.php">Page 4</a></li>
<li><a href="5.php">Page 5</a></li>
<li><a href="6.php">Page 6</a></li>
</ul>
</div>
</div>
</body>

any help /comments / guidance on what I should be learning /looking at is appreciated

Was it helpful?

Solution

Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.

See DEMO

OTHER TIPS

First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.

Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;

If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:

html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;} 
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }

Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/

NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.

NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top