As the title says I am hoping to have fixed bar, off centre, with a background that scrolls. I have included my code so far, as of now i can either have the bar on the surface but fixed to the background, or the bar beneath the image, but fixed to the window as I would like. I can't figure out how to keep the "contentBox" on the surface of the window. Thank you for your help (and sorry for the messy code, this is my first go at CSS)
<html>
<head>
<style type="text/css">
body{ height:100%}
#bg {
position:absolute;
background-color:grey;
top:0;
left:0;
width:100%;
height:100%;
}
#bg img {
position:absolute;
top:0;
bottom:0;
margin-left:10%;
min-width:80%;
height:100%;
}
#contentBox
{
position:top;
left:0;
margin-top:25%;
height:30%;
max-width:90%;
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
#contentBox:hover
{
position:top;
left:0;
margin-top:25%;
height:30%;
max-width:90%;
background-color:#ffffff;
opacity:0.9;
filter:alpha(opacity=90);
}
#linkCloud
{
float:left;
min-width:11%;
min-height:100%;
background-color:blue;
opacity:0.9;
filter:alpha(opacity=90);
}
#feed
{
float:right;
top:0;
right:0;
min-height:100%;
min-width:10%;
background-color:red;
opacity:0.9;
filter:alpha(opacity=90);
}
</style>
</head>
<body>
<div id="bg">
<img src="/home/samzors/Desktop/Gimp/skull.jpg" alt="">
<div id="feed">
<p>hello world</p>
</div>
<div id="contentBox">
<div id="linkCloud">
<p>hello world</p>
</div>
</div>
</div>
</body>
</html>
If I'm following you right, I believe what you want is a bar with a fixed position at the top of the viewport. This is done with position: fixed, like so:
<style>
#contentBox {
position: fixed;
left: ; /* some distance from left side of screen */
top: ; /* some distance from top of screen */
}
...
</style>
...
<body>
<div id="contentBox">content</div>
<div id="bg"> rest of your content </div>
</body>
You will probably also want to add a margin-top property for #bg that offsets it from the top of screen at least as much as #contentBox is tall.
One additional note -- if you want to use a psuedo-class like :hover, you do not need to set each of the properties again, only the ones that are being changed. So for instance in #contentBox:hover you would only need:
#contentBox:hover {
opacity: 0.9;
filter = alpha(opacity = 90);
}
I have found a solution, it is a bit of a hack however.
First in the html code I separated the bg (background) class from the contentBox class, as suggested by cmw. since fixing the content box hid the box from view here is where the hack came in: making a second div class, "content", that was a subset of contentBox, I was then able to display this box fixed to the screen with the bg class remaining scrollable.
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
i have a fixed div position which has a margin from top of page,when i scroll my page the content of my relative position div (which has page content) is visible under a fixed div ( i can see the scrolling content because my fixed div has margin from top of page). i have searched a lot in stack overflow and try every solutions like give padding to body and Html or give margin or padding to my relative positioned div but none of them work for me.and still the content is visible.I don't want to use java scripts and also don't want to use padding for body or Html.
i see these questions for example but don't work for me:
link1,link2 ,link3 and link4. my html code is look like:
<section class="all-result">
<div class="nav">
...
</div>
<div class="results">
.....
</div>
</section>
and css look like :
.all-result{
position:absolute;
background: #fff;
overflow-y: scroll;
overflow-x: hidden;
z-index: 4;
right: 0;
}
.nav{
position:fixed;
margin-top:40px;
z-index:1000;
}
.results{
width:100%;
height:100%;
position:relative;
}
Here i added an example,somewhat i think you looking for.
body{ overflow-y: scroll;}
.all-result
{
position:absolute;
width:100%;
height:3000px;
overflow: hidden;
z-index: 4;
background:#759A97;
}
.nav{
width:100%;
height:40px;
position:fixed;
margin-top:40px;
z-index:1000;
background:#B9B9B9;
}
.results
{
top:100px;
height:300px;
position:relative;
background:#9A8975;
}
<!DOCTYPE html>
<html>
<body>
<section class="all-result">
<div class="nav">
</div>
<div class="results">
Page Content
</div>
</section>
</body>
</html>
I have a big div wrapper called <div class="pageWrapper"> for which its size is set to be 1000px.
Inside it I have a header that I want to be 100% of the screen and fixed.
How can I do it ?
I know that I could take off the header div outside the pagewrapper but I'm customizing a volusion template so to take it off would delete all the CSS that was originally set up.
Try the following and see if it works.
Here is Fiddle as created by François Wahl
width:100%;
position:fixed;
And it is always good if you post the code you have tried first.
Do you want something like Demo ?
HTML
<div class="pageWrapper">
<div class="header">Header</div>
</div>
CSS
body {
margin: 0;
}
.pageWrapper {
width:500px;
background:green;
height:500px;
margin:0 auto;
}
.header {
position:fixed;
width:100%;
top:0;
left:0;
right:0;
height:50px;
background: red;
}
I am trying to produce a progress bar with a divider bar that separates sections. This divider bar (child <div/>) hangs below the progress bar (parent <div/>). Thus, I want the progress bar to cover all of the divider bar except for the part that hangs below.
Here is a very simplified representation:
<html>
<head>
<style>
body {
width:500px;
margin:0 auto;
}
#parent {
width:50%;
height:30px;
background-color: yellow;
}
#child {
width:1px;
height:50px;
background-color:black;
float:right;
margin-right:100px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
How can I get the yellow part of the progress bar to cover up the intersecting portion of the divider bar?
Here is an image representing what I'm looking for:
Thanks in advance!
dunno if i get this right, but why dont you just give the child element a margin-top? (and reduce the height of the child div)
http://jsfiddle.net/7SMuJ/
if that is not an option you'd need to rearrange the elements so you could use z-index
Setting a parent to position: relative will allow you to absolutely position the marker. Since they'd both then be appropriate types for z-index, I would take that route. Here's a jsfiddle:
http://jsfiddle.net/WXDZF/
Seems to be the cleanest solution. In this case you really are trying to position something, not push something up or down, so I would recommend staying away from using a margin in an inorganic way.
You could just set your overlay on another container
#parent {
width:50%;
height:30px;
}
.innerParent{
background-color: yellow;
width:100%;
position:absolute;
top:0;
left:0;
display:block;
height:30px;
}
#child {
width:1px;
height:50px;
background-color:black;
float:right;
margin-right:100px;
z-index:1;
}
markup
<div id="parent">
<div class="innerParent">
</div>
<div id="child"></div>
</div>
You have to switch the paramaters from child to parent and visa versa, see below.
#parent {
width:100px;
height:30px;
background-color: yellow;
}
#child {
width:50%;
height:30px;
background-color:black;
float:right;
}
Please see the following: http://jsfiddle.net/GWJMf/
What I'm trying to do is have the TITLE fixed, not scroll. But the content scrollable.
Problem is, having a fixed title, makes it very hard to deal with the dynamic range of a title, which can have anywhere from 5 - 250 characters.
Is there a way to have the TITLE be fixed, not scroll, but have the height set based on the title length?
Is this possible w CSS? Ideas? Thanks
Not sure why you have all that extra styling. You don't need to style the h2 or any wrapping elements to have it expand based on the length of the text.
http://jsfiddle.net/xd7a4/
I'm not sure of the height you're desiring for the scrolling container however here I set it to 200px.
<h2>title</h2>
<div class="scroll">content</div>
H2 {
background-color: #FF0000;
}
.scroll {
height: 200px;
overflow: scroll;
overflow-x: hidden;
}
I think this will help :
<style>
.content {
position:absolute;
top:100px;
left:100px;
width:300px;
height:auto;
}
.title {
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
background:red;
color:#fff;
}
.text {
position:relative;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
overflow:auto;
}
</style>
<div class="content">
<div class="title">title<br/>title...</div>
<div class="text">text text <br/> text text...</div>
</div>