I have a parent div who have 2 childs, a div#2 and an image, the problem is that when i want the div#2 moves up, it carries the image with it
<section id="ticket">
<div id="wrap_960">
<div id="entry"></div>
<img id="shadow" src="img/shadow.png">
</div>
</section>
and this is the CSS:
#ticket{
height: 300px;
width: 100%;
position: relative;
}
#entry{
float: right;
height: 200px;
width: 100%;
background: white;
border: solid 1px #abcbdb;
border-radius: 15px;
position: relative;
}
#entry:hover{
margin-top: -30px;
}
#shadow{
margin-top: -160px;
}
Thanks!
Thats because your moving it up and what ever is underneath naturally moves with it :)
#entry:hover{
margin-top: -30px;
margin-bottom: 30px; // should counteract the movement up.
}
Fiddle: http://jsfiddle.net/8KtaX/
Related
There is a parent container of relative width (50%) so that it responds to the size of the screen.
Now, I want a button at the bottom right corner of this parent container which stays fixed vertically. It works with position: fixed but then when i view it on different devices, i cannot get it to be positioned horizontally.
This is my html and CSS
<div class="container">
<div class="button"></div>
</div>
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
position: fixed;
bottom: 20px;
right: calc(50% - 190px);
}
Here is the link to codepen http://codepen.io/anon/pen/VmggdO
This looks fine but when you resize the screen horizontally, the button should stay just 30px inside of the yellow container horizontally - How do i achieve that? REMEMBER - THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL!
Using position absolute worked for me
.button {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 20px;
right: 30px;
}
EDIT:
With the new requirements of "THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL", this can be achieved by changing the html to this:
<div class="container">
</div>
<div class="button-container">
<div class="button"></div>
</div>
and the CSS to this:
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
margin-bottom: 20px;
float: right;
margin-right: 30px;
z-index: 100;
}
.button-container{
position: fixed;
bottom: 0px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
See the updated code pen: http://codepen.io/anon/pen/mOvvgJ
i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.
Here is my link http://jsfiddle.net/sanand29/7fh2em4f/
<div class="link1">
<div>
the css part corresponding to it
.link1
{
display: block;
margin-top: 15%;
width: 78%;
margin-left: 26%;
}
a.square1
{
width: 50%;
height: 50%;
border: 1px solid red;
padding: 9%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.5;
}
How will I put any text in the center of the square keeping it responsive.
Try this
<div class="link1">
<div class="square1">Text to be centred</div>
</div>
And the css
div.link1 {position: relative; width: 200px; height: 200px; border: 1px solid red;}
div.square1 {height: 20px; text-align: center; margin: auto; position: absolute; top: 0px; left:0px; bottom:0px; right:0px;}
This will keep the text in the middle of the box. In fact it keeps the div with class square1 centred - the text may overflow this div, depending on the size of font you choose. If you set the height of the div to the height of your font you can't go wrong.
I have found so many topics for this question, but none of those helps for my case.
I have one div with low z-index. There is a button in that div, that should be clickable. But it is not clickable, because of low z-index. I have tried to change z-index for other divs and containers, but I could not find out the right combination.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
<div id="content_img">
<img src="http://tax.allfaces.lv/templates/tax/images/office.png">
</div>
</div>
<div id="docked_div">
<div class="fb"> <img src="http://tax.allfaces.lv/templates/tax/images/f.png" style="width:27px; height: 28px; padding-left: 20px;">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 10px;
width: 1004px;
position: relative;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 249px;
}
#right {
float: left;
width: 750px;
padding-left: 5px;
}
#logo {
background: url(../images/logo.png) no-repeat;
background-position:center;
width: 250px;
height: 135px;
padding: 5px 0 0 5px;
display:block;
}
#content_img {
width: 750px;
height: 300px;
}
#docked_div {
background: url(http://tax.allfaces.lv/templates/tax/images/mazais_fons.png) no-repeat;
width: 52px;
height: 212px;
background-size: 100% auto;
position: absolute;
right: -37px;
top: 105px;
z-index: -1; **//EDIT HERE!!!!!!!**
}
.fb {
/*z-index: 1000;*/
}
I need to be able to click on FB button. Now when #docked_div z-index is set to -1, then .fb is not clickable. If I set z-index = 1 to #docked_div, then .fb is clickable, but then #docked_div is on top of the image, it should be under.
Example is seen here (FB button is not clickable): http://jsfiddle.net/vAkXh/7/ [edit here]
The full example is here: tax.allfaces.lv (you can see that here FB button is clickable, but it is on top of image, it is not correctly).
Just add to the #right div :
position: relative;
z-index: 2;
I tried on http://tax.allfaces.lv/, it should work.
I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}