I am having a problem with my website. I created a button that will open a chat. But this button don't stay in the right place in all browser and screen monitors. Due to the browser zoom, the button do not stay like I want.
This is my page: http://www.assembleia.org.br/site/webtv/
The CHAT button needs to be right after the box, like this photo: http://imageshack.us/photo/my-images/20/cssfix.jpg/
But in others browsers, the button goes to right and right.
Here's my css:
<style>
* { /* trying to RESET CSS */
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
#tab /* the button CHAT */{
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 27%;
/*float: left;*/
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
#panel /* the panel */ {
min-height: 367px;
position:absolute;
left: 1355px;
top: 171px;
background-color: #D4D4D4;
max-height: 367px;
min-width: 0; /*new line*/
}
#panel .content /* for the chat */ {
min-width: 100px;
text-align: center;
/*margin-right:300px;*/
margin-right: auto;
max-width: 100px;
}
#close /* for the little red X after opening the chat */ {
position: absolute;
left: 1758px;
top: 168px;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
text-decoration: none;
}
#share /* for facebook sharing after opening the chat */ {
position: absolute;
left: 1656px;
top: 540px;
font-size: 10px;
font-family: Verdana,sans-serif;
}
</style>
Thx..
use this
#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
Use position: relative; attribute on your parent wrapper div, then change #tab CSS as follows:
Add position: absolute;
Change top to top: 50%;
Change right to right: 25px;
This was tested using Firebug and should give the desired effect.
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>
The CSS for the popup text (French) is:
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
/* border-radius: 6px; */
padding: .5px 0;
position: absolute;
z-index: 1;
bottom: -67%;
left: -271%;
margin-left: -80px;
}
My task is to shift the popup text little bit towards the bottom which
is little upwards as shown in the image.
I tried changing the position of a popup text by using the text-align property but unfortunately I am unable to move towards the bottom.
text-align: center;
text-align: left;
text-align: right;
The CSS for the image(as shown above) before the popup text is:
.label-mobile-languageselector .popuptext:before {
content:url('img/globe.png');
display:inline-block;
float:left;
width: 30px; /* whatever width you need */
height: 29px; /* whatever height you need */
margin-right: 0.5em; /* whatever margin is needed to separate the image from the text */
}
Here is the fiddle ( At this moment the popup not working not sure why )
Excerpt from my Fiddle:
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
padding: 15px 0 0;
/* Added padding, adjust to your needs */
position: absolute;
z-index: 1;
/*height: 29px !important;*/
/* height removed */
/*bottom: -67%;*/
/* bottom removed */
left: -271%;
top: 48px;
/* top added */
margin-left: -80px;
}
.label-mobile-languageselector .popuptext::after {
content: "";
position: absolute;
top: -16px;
/* top changed to the arrow height */
left: 58.2%;
margin-left: -5px;
border-width: 8px;
border-style: solid;
border-color: #668A04 transparent transparent transparent;
transform: rotateX(180deg);
}
Here's example https://jsbin.com/rekaxa/edit?html,css,output.
I'd like to put that red circle(an icon) over the image, but to keep html straightforward. What's the best way(maybe totally different) to implement it?
You haven't said where you want the icon to be so I picked the dead center of the div.
div {
background-color: green;
width: 280px;
height: 180px;
position: relative;
}
img {
margin: 0 auto;
display: block;
}
div:after {
content: '';
position: absolute;
top: 50%; /* adjust as requiured */
left: 50%; /* adjust as required */
margin-top: -15px;
margin-left: -15px;
width: 30px;
height: 30px;
background: red;
display: block;
border-radius: 15px;
}
<div class="icon">
<img src="http://dummyimage.com/200x150/000/fff" />
</div>
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 cannot figure out why my css is creating this funky bottom margin or border I took a little video so you can see it: http://img.zobgib.com/2011-04-25_1317.swf The margin/border doesn't show except when the page is resized to pretty small. My css is pretty standard, and I have not inline styling or JS styling that would cause it. What would cause this weird margin?
Here is my CSS
html {
}
body {
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#drawn {
background: #fff !important;
}
#content > * {
}
#toolcontainer {
left: 0;
right: 0;
height: 50px;
min-width: 940px;
}
#toolcontainer > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: 10px;
}
#slidescontainer {
position: absolute;
left: 0;
bottom: 0;
top: 52px;
width: 130px;
min-height: 658px;
}
#newslide {
background: url(/static/img/new_slide.png) !important;
border: 1px solid #FFFFFF;
}
#slidescontainer canvas {
position: relative;
}
#slidescontainer > * {
height: 80px;
width: 106px;
margin: 10px;
background: #ffffff;
border: 1px solid #000;
}
#container {
position: absolute;
min-height:608px;
min-width: 810px;
/* height: 608px;
width: 810px;*/
background-color: #fff;
background-image: none;
top: 52px;
bottom: 0;
right: 0px;
left: 132px;
background: #d5d5d5;
border: 10px solid #000;
}
#container canvas {
/* left: 50%;
margin-left: -405px;
top: 50%;
margin-top: -304px;*/
}
#debug {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
overflow: auto;
border: 1px solid black;
background: black;
color: #34e338;
z-index: 50;
}
canvas {
position: absolute;
}
#colorSelector {
position: relative;
width: 46px;
height: 46px;
}
#colorSelector div {
position: absolute;
border: 1px solid #FFFFFF;
background: #000000;
width: 46px;
height: 46px;
}
You are using a lot of browser-specific CSS, and it looks like you were accessing it in an unsupported browser (Firefox doesn't support Microsoft markup, for obvious reasons). I'd recommend trying CSS3 selectors and rules instead of the browser-specific rules.
Try adding style = "overflow:hidden" to your html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml" style = "overflow:hidden">
If it is an issue with page height, that may clear it up
I fixed it by changing the min-height in #container to 638px.