CSS positioning and scrolling

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

  •  26-06-2023
  •  | 
  •  

문제

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

도움이 되었습니까?

해결책

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

다른 팁

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/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top