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;
}
Related
Okay I have a small problem,who I cant solve.
I hope experts will help :)
As you can see I have 3 divs on my index site.
No in the middle is one input who is across header and main div.
And the yellow circles are divs with but images*
About the div images...their code is
The positions are random,not equal as I have done.
HTML and CSS
#container{position:relative;}
.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>
So my problem is when re sizing the windows it will go as the div1,they will go across each other. I need too to make it responsible,but when using mobile,i need them to disapear, and when on smaller displays I need them to adjust their size to display.
Is the positioning okay or should I use float?
Your question is very confusing but I guess that you want is something like this:
In can resize without problems using media queries.
Here is the link of mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
You can also use float:left and position:relative for your divs and position:absolute for your input.
Here is my HTML and CSS code:
.circle {
}
#apple_img {
background:green;
width:100%;
height:100px;
float:left;
position:relative;
}
#weight_img {
background:red;
width:100%;
height:100px;
float:left;
position:relative;
}
#bike_img {
background:blue;
width:100%;
height:100px;
float:left;
position:relative;
}
/* use media query here to other resolutions >768px and <=768px for example */
div > input{
width:200px;
height:200px;
position:absolute;
left:50%;
margin-left:-100px;
top:50px
}
input{
width:200px;
height:200px;
position:relative;
float:left;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
<div><input type="text" value="Type here"></div>
</div>
I guess that your class "circle" is not doing what you want, then I commented it (try used it to check).
For the tags div > input and input you can use the media query to resize correctly your input.
Here is my jsfiddle: http://jsfiddle.net/dhvuakjr/
Ps.: It's position and not positionate like you wrote your class circle
Hope this help you.
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'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?
(I want #two to align itself to the middle position of #one.)
Right now my jsFiddle does this: http://jsfiddle.net/sE8Sc/4/
HTML :
<div id="one">
</div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
CSS :
#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }
I've tried margin:0 auto;, text-align:center; but still no dice. I'm not looking at declaring a defined margin like margin:0 41%; because if I wanted to add another <a class="stuff"> to the list it would get out of position...
Anyone? This is probably some simple positioning error that I can't figure out.
EDIT : I was looking around, and I saw this demo by Nivo Slider -- http://demo.dev7studios.com/nivo-slider/ -- how is it defining itself with a 960px width?
You'll need to wrap both #one and #two in a containing element. That should set the width. Then all you need to do is remove all the floats (on #one, #two and #two's children). JSFiddle
#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }
New markup.
<div id="wrapper">
<div id="one"></div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
</div>
Without the wrapper two would just be aligned to the center of your window (or a parent with a width).
You center a dynamic div by cimply giving it a display: table value
DEMO http://jsfiddle.net/kevinPHPkevin/sE8Sc/20/
#two {
text-align:center;
display: table;
margin: 0 auto;
}
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.
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}