I'm building a menu with 100% width - and I'm trying to position one button on the left side and one on the right side.
This is what I have, however as you can see the button is not placed 8px from the right.
How would I go about it? Thanks!
#options-buttons {
height: 40px;
width: 100%;
}
.okay_button
{
position: relative;
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: left;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
.okay_button:hover
{
background-position: 0 -34px;
}
Use float right and right; jsFiddle
.okay_button
{
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: right;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
Working example (I replaced the background with text for demo purposes):
You are mixing float, display, and position incorrectly.
You simply need to change position: relative; to position: absolute; on your .okay_button, since that will force it to be relative to its container, not its otherwise normal position.
Working example: http://jsfiddle.net/zPkH8/3/
.okay_button
{
position: absolute;
...
}
Related
I'm a beginner in Ionic Framework. Recently I have built a page with a swipe-back-button on the left of the navigation bar. This shifts the title a bit to the right: (I have added a red background to the title to illustrate this)
Not using position: absolute:
To center the title, I added the following css code:
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
}
It works:
Using position: absolute:
The problem is that the title now "covers" the swipe-back button, making it impossible to click on the button.
Any solutions? Thank you in advance.
Try to add position:relative and some z-index value to your back button...
I have created a working snippet to illustrate your problem
div {
position: relative;
}
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
box-sizing: border-box;
}
button {
width: 20px;
height: 20px;
background: green;
position: relative;
z-index: 99;
}
<div>
<button></button>
<ion-title>About</ion-title>
</div>
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
Here is the CSS I pulled from IE:
.hglghts .active.yes-icon, .hglghts .yes-icon {
background: url("../img/yes_sir.png") no-repeat;
width: 27px;
background-position: initial;
display: inline-block;
opacity: 1;
margin-right: -5px;
vertical-align: middle;
height: 17px;
position: relative;
top: 1px;
}
It is not showing. I am using IE11.
Here is what i pulled from Chrome, same thing but this is showing?
.hglghts .yes-icon.active, .hglghts .yes-icon {
background: url("../img/yes_sir.png") no-repeat;
width: 27px;
background-position: initial!important;
display: inline-block;
opacity: 1;
margin-right: -5px;
vertical-align: middle;
height: 17px;
position: relative;
top: 1px;
}
Can anyone please tell me what am I'm doing wrong?
Problem should be in initial background position.
You left top or 0 0 instead.
background-position: left top;
Or better, in one row:
background: url("../img/yes_sir.png") left top no-repeat;
I am trying to create a custom shape in CSS3 but I am having problems with the position of the object at certain screen resolutions.
What I am trying to make:
CSS:
.foobar {
position: relative;
width: 100px;
background-color: #666733;
color: #ffffff;
border: none;
padding: 5px 0;
margin-left: 10px;
margin-bottom: 5px;
}
.foobar:before {
content: "";
position: absolute;
width: 110px;
height: 22px;
background: #666733;
padding-left: 0;
margin-left: -32px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
z-index: -100;
}
The issue I am having is with the foobar:before at different screen resolutions looks off:
iPhone:
iPad:
Desktop:
How can I properly code the shape with CSS so that it will work with all screen sizes? I have attempted to create #media with an adjustment of margin-left but I was curious to know if there is a better way?
When you use position: absolute;, it's better to use top, left, right and bottom position properties. You will have consistency that way irrespective of the device. Look at the DEMO and try for yourself.
HTML
<div class="foobar"></div>
CSS
.foobar {
position: relative;
width: 150px;
height: 50px;
background: #666733;
}
.foobar:before {
content: "";
position: absolute;
top: 13px;
left: -15px;
width: 180px;
height: 24px;
background: #666733;
border-radius: 15px;
}
I have got the following code:
Fiddle
.item {
width: 120px;
padding: 10px;
display: block;
background-color: #CCC;
float: left;
margin: 5px;
position: relative;
}
.item .item-preview {
position: relative;
z-index: 10;
display: block;
}
.item .item-content {
/*display: none;*/
position: absolute;
left: 0px;
top: 37px;
padding: 5%;
z-index: 11;
width: 90%;
background-color: #000;
color: #FFF;
}
I want the div ".item-content", when its displayed, is always on the left side and is as wide as the whole page, how can I do that?
If you remove the position: relative from .item, you will have the desired effect. I also removed the top: 37px; to fix the vertical positioning. If you need to tweak that, use margin-top instead
Fiddle