I have this tricky CSS problem: I have this HTML and CSS:
.mark {
height: 30px;
width: 30px;
background: red;
position: absolute;
left: 30px;
bottom: 30px;
}
http://jsfiddle.net/mr_mohsen_rasouli/4Nb9L/
I want to red box stay in define position but when I scroll, it move!
how can I fix that?
Try this.. this may not be a good approach.
But will give you the desired result.
I place the div mark in another div
and give
.mark {
height: 30px;
width: 30px;
background:red;
position: fixed;
}
Full code is here
http://jsfiddle.net/4Nb9L/7/
you have used absolute,use fixed instead
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}
Use position : fixed and top reference for the .mark element
Example:
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
top:150px;
}
change the value of position property fixed instead of absolute and try.
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}
Link : Updated Fiddle
Related
In order to design with html and css the following way to display numbers ( it's an image counter related to a caroussel )
I'm facing a problem which is putting a sort of line break in "content" so that the .down_numb (36) can be a little bit under the slash like a previous image.
This is my code:
#container{
width: 150px;
height: 150px;
background-color :black;
margin-left: auto;
margin-right: auto;
position: relative;
}
/*Similar parameters between the 2 classes*/
.up_num , .down_num{
position: absolute;
font-size: 25px;
width: 10px;
height: 10px;
color: white;
}
/*Position of up num*/
.up_num{
top:20%;
left: 45%;
}
/*Position of down num*/
.down_num{
top:40%;
left: 45%;
}
/*Pseudo class of down_num with content "/" */
.down_num:before{
content : ' \002F ';
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
Thanks everyone.
I would apply display: inline-block; and position: relative to the inner DIVs (i.e. putting them into one line and using top settings to offset them from that line), apply position: absolute to the before element containing the / and adjust settings approximately as in my snippet:
#container {
width: 150px;
height: 150px;
background-color: black;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
padding-top: 34px;
padding-left: 52px;
}
#container>div {
display: inline-block;
position: relative;
}
.up_num,
.down_num {
font-size: 25px;
color: white;
}
.up_num {
top: 20%;
}
.down_num {
top: 35%;
left: 0.2em;
}
.down_num:before {
content: ' \002F ';
position: absolute;
top: -30%;
left: -0.3em;
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
You can do it using pseudo elements. Simmilar issue is solved in this answer.
Thanks to transform: rotate(angle); you can rotate the line as you want and it doesn't interfere with other elements as it is essentially a part of the element you assign it to. You will still need to play with it for a bit though.
I seem to be having a slight problem here. My divs dont show up in the web page. I tried changing the position of the div to absolute but it still dosen't show up.
Here is my code:
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
in your css add this
html, body { height: 100%; width: 100%; margin: 0; }
I've converted your example code into a code snippet and it seems to work fine. What exactly seems to be wrong? Are you missing the .header <div>? In that case give it some content or give it a fixed width. How should the .header look?
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
Your div is present there. But it doesn't have any contents that's why it is not visible.
Add some content in it like text etc. or add some padding to the 'header' class. Then you will be able to see it.
Working on css trying to get one box under another. I was taught to use the z-index ; However when I give one css code a different z index nothing happens. Everything is correctly positioned however It doesn't position one under the other. What am I doing wrong with my z-index ?
This is my css so far. box1 should be shown above the check list and border
body
{
background: #afc2df;
}
#body
{
bottom: 0px;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
}
#box1
{
border: 250px;
border-style: groove;
border-radius:35px;
margin-left: 85px;
position fixed;
margin-top: 65px;
width: 17%;
z-index: 3;
}
#table1
{
position fixed;
height: 400px;
background: #0ff;
margin-left: 118px;
bottom: 90px;
}
#border
{
position: fixed;
border-style: solid;
width: 200px;
height: 150px;
padding: 2px;
background: #708090;
margin-left: 790px;
margin-top: -560px;
border-radius:35px;
z-index: 2;
}
#checklist{
position: fixed;
border-style: solid;
width: 220px;
height: 155px;
padding: 2px;
background: #708090;
margin-left: 790px;
margin-top: -80px;
z-index: 1;
}
.link {text-decoration: none;
}
Your problem will probably lay in nesting elements.
Parent element z-index is more important than the one of nested element, so if parent is bellow some element it's child can never be in front of that element.
Also the bigger z-index the more in front the element is.
#checklist is z-index 1 this mean it's behind #border and #box1
you have some missing ":" on position fixed on box1 and table1
position fixed;
shuld be?
position: fixed;
If the issue EricGS pointed out is not the problem (the missing :), then I agree with Hurda. Your issue may very well lie with nested elements. In which case, using !important as EricGS suggests will not work.
There is a thing called stack(ing) order for elements.
I have created a jsfiddle here for you to see the issue in action (and !important not working).
I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/
When I change the position of my image to fixed it goes off to the right, I cannot figure out how to get it back to the center of my page and still use the position:fixed attribute. Please help
Thank you ahead of time!
CSS:
header {
height: 60px;
color: #413659;
background-color: #413659;
margin-top: 30px;
}
#logo {
height: 100px;
width: 100px;
margin-left: auto;
margin-right: auto;
position: fixed;
top: 10px;
}
HTML:
<header>
<img src="http://i.imgur.com/IdtgpVa.png" alt="DP" id="logo">
</header>
Try this
#logo {
height: 100px;
width: 100px;
margin-left: -50px;
margin-right: auto;
position: fixed;
top: 10px;
left:50%;
}
updated jsFiddle file
Also you can use calc() from CSS3
left: 45%;
left: calc(50% - 50px);
http://jsfiddle.net/S8utY/
Try to use this for your CSS:
header {
height: 60px;
color: #413659;
background-color: #413659;
margin-top: 30px;
}
#logo {
height: 100px;
width: 100px;
margin-left: 45%;
margin-right: auto;
position: fixed;
top: 10px;
}