Here's the code. I can't figure out how to make the image be horizontally centered inside the div. Thanks in advance!
.first {
height: 100%;
}
.first img{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
}
.first {
height: 100%;
text-align: center;
}
.first img{
width: 100px;
height: 100px;
position: relative;
display: inline-block; // this line is only required if your img is not already using display: inline-block
}
Related
I am building a modal popup window for mobile.
I noticed that when I try to scroll below the limit of the modal (see "B" part, on "A" part I reached the bottom),
The fixed section I have on the bottom becomes covered with gray, the more I try to force scroll.
It's happening both on Safari and Chrome, See this photo:
This is the order and CSS of the elements:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.popup-r {
overflow-x: hidden;
width: 100%;
min-height: 100vh;
height: auto;
position: absolute;
z-index: 999;
top: 0px;
left: 0;
display: none;
padding-bottom: 100px;
}
.fix-section {
width: 100%;
z-index: 999;
position: fixed;
bottom: 0;
white-space: nowrap;
}
I wark on my Mobile project and I use jquery mobile library version 1.4.5.
I have this png image:
Here is the CSS:
.ui-icon-measure {
background-image: url(img/length_measure.png);
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
}
#measureButton .ui-icon {
width: 30px;
height: 30px;
top: 13px;
right: 13px;
background-color: transparent;
background-position: center;
}
Here is HTML code:
<div id="measureControl" data-role="controlgroup" data-type="vertical">
</div>
Here how it looks in the view:
But I want it to be like that:
Any idea what do I have to change in the code above to get desired view?
The code below will produce this:
.ui-icon-measure:after {
background: url(img/length_measure.png) no-repeat !important;
}
#measureControl a {
padding: 20px;
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
border-radius: 13px;
}
I can't seem to get the header and footer to span across a mobile device such as iPhone, and the footer won't stick to the bottom. I've tried a meta code such as this:
My CSS mobile:
#charset "utf-8";
#logo {
left: 5%;
}
#navMenu {
position: relative;
left: 5%;
}
#content {
position: relative;
width: 95%;
height: 600px;
left: 2px;
right: 2px;
}
#footer {
position: fixed;
bottom: 0;
z-index: 5;
}
I've added this to the HTML meta:
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 maximum-scale=1.0,
Here is my desktop CSS incase something may override my mobile:
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 1;
box-shadow: 0px 0px 0px 1px rgba(82, 82, 82, 0.2);
background-color: rgba(234,234,234,1);
}
#navMenu {
position: absolute;
left: 55%;
top: 55px;
width: 325px;
height: 39px;
z-index: 3;
}
#logo {
position: absolute;
left: 20%;
top: 95px;
width: 300px;
height: 85px;
z-index: 1;
}
#pageLocation {
position: absolute;
right: 20%;
top: 240px;
width: 69px;
height: 25px;
z-index: 5;
color: rgba(50,153,204,0.1);
}
#content {
position: absolute;
right: 20%;
top: 270px;
height: 600px;
width: 60%;
padding: 10px;
margin-bottom: 50px;
z-index: 2;
border-bottom-color: rgba(50,153,204,0.2);
border-bottom-width: thin;
border-bottom-style: solid;
border-radius: 5px;
background-color: rgba(204,204,204,.1);
border-right-width: thin;
border-right-style: solid;
border-right-color: rgba(204,204,204,0.2);
border-left-width: thin;
border-left-style: solid;
border-left-color: rgba(50,153,204,0.2);
box-shadow: 0px .5px .5px .5px #333;
}
#footer {
position: absolute;
alignment: center;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 2px;
box-shadow: 0px 0px 3px 0px #333;
background-color: rgba(204,204,204,.7);
}
I've tried sticky footer techniques with no luck. I've gotten the footer with this method to stick to the bottom, but it just overlaps content when I scroll back up. Please help, this is very frustrating to get a simple iPhone/android capable footer that sits at the bottom of the page.
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
When I load my web page, I am getting above error along with
Started GET "/assets/application.css" for 127.0.0.1 at 2012-03-05 10:07:42 +0530
Error compiling asset application.css:
NoMethodError: undefined method `[]' for nil:NilClass
(in /Users/ritvvijparrikh/Projects/tr/app/assets/stylesheets/tr/sprites.css.scss)
Served asset /application.css - 500 Internal Server Error
My file sprites.css.scss was not changed for long time. But then I recently upgraded to Rails 3.2.2
My sprites.css.scss file is
/* Public Area Sprites */
.public_sprites {
background: asset-url('public_area.jpg', image) no-repeat top left;
}
.sprite-aws{ background-position: 0 0; width: 159px; height: 58px; display: inline-block }
.sprite-gr{ background-position: 0 -108px; width: 111px; height: 91px; display: inline-block }
.sprite-hn{ background-position: 0 -249px; width: 111px; height: 91px; display: inline-block }
.sprite-i1{ background-position: 0 -390px; width: 28px; height: 30px; display: inline-block }
.sprite-i2{ background-position: 0 -470px; width: 28px; height: 30px; display: inline-block }
.sprite-i3{ background-position: 0 -550px; width: 28px; height: 28px; display: inline-block }
.sprite-i4{ background-position: 0 -628px; width: 28px; height: 28px; display: inline-block }
.sprite-kb{ background-position: 0 -706px; width: 112px; height: 92px; display: inline-block }
.sprite-nb{ background-position: 0 -848px; width: 111px; height: 91px; display: inline-block }
.sprite-pk{ background-position: 0 -989px; width: 111px; height: 91px; display: inline-block }
.sprite-postmark{ background-position: 0 -1130px; width: 171px; height: 35px; display: inline-block }
.sprite-rd{ background-position: 0 -1215px; width: 111px; height: 91px; display: inline-block }
.sprite-rp{ background-position: 0 -1356px; width: 111px; height: 91px; display: inline-block }
.sprite-sb{ background-position: 0 -1497px; width: 111px; height: 91px; display: inline-block }
.sprite-seal{ background-position: 0 -1638px; width: 119px; height: 45px; display: inline-block }
.sprite-slider1{ background-position: 0 -1733px; width: 500px; height: 320px; display: inline-block }
.sprite-slider2{ background-position: -550px 0; width: 500px; height: 320px; display: inline-block }
.sprite-slider3{ background-position: -550px -370px; width: 500px; height: 320px; display: inline-block }
.sprite-sr{ background-position: -550px -740px; width: 112px; height: 92px; display: inline-block }
.sprite-track_big{ background-position: -550px -882px; width: 415px; height: 304px; display: inline-block }
.sprite-trustlaw{ background-position: -550px -1236px; width: 216px; height: 72px; display: inline-block }
.sprite-unknown{ background-position: -550px -1358px; width: 74px; height: 74px; display: inline-block }
.sprite-vm{ background-position: -550px -1482px; width: 111px; height: 91px; display: inline-block }
/* Contact Sprites */
.contact_sprites {
background: asset-url('contact.png', image) no-repeat top left;
}
.sprite-email{ background-position: 0 0; width: 17px; height: 17px; display: inline-block }
.sprite-facebook{ background-position: 0 -67px; width: 17px; height: 17px; display: inline-block }
.sprite-linkedin{ background-position: 0 -134px; width: 17px; height: 17px; display: inline-block }
.sprite-mobile{ background-position: 0 -201px; width: 17px; height: 17px; display: inline-block }
.sprite-phone1{ background-position: 0 -268px; width: 17px; height: 17px; display: inline-block }
.sprite-phone2{ background-position: 0 -335px; width: 16px; height: 13px; display: inline-block }
.sprite-skype{ background-position: 0 -398px; width: 17px; height: 17px; display: inline-block }
.sprite-twitter{ background-position: 0 -465px; width: 17px; height: 17px; display: inline-block }
.sprite-website{ background-position: 0 -532px; width: 17px; height: 17px; display: inline-block }
.sprite-youtube{ background-position: 0 -599px; width: 17px; height: 17px; display: inline-block }
/* Login Area Sprites */
.login_sprites {
background: asset-url('login_area.png', image) no-repeat top left;
}
.sprite-calendar_39x39{ background-position: 0 0; width: 39px; height: 39px; display: inline-block }
.sprite-deletex{ background-position: 0 -89px; width: 17px; height: 17px; display: inline-block }
.sprite-off{ background-position: 0 -156px; width: 95px; height: 27px; display: inline-block }
.sprite-on{ background-position: 0 -233px; width: 94px; height: 27px; display: inline-block }
.sprite-status_gray{ background-position: 0 -310px; width: 12px; height: 13px; display: inline-block }
.sprite-status_green{ background-position: 0 -373px; width: 12px; height: 13px; display: inline-block }
.sprite-status_red{ background-position: 0 -436px; width: 12px; height: 12px; display: inline-block }
.sprite-status_yellow{ background-position: 0 -498px; width: 12px; height: 13px; display: inline-block }
I was having the same problem. I solved the problem following the configurations described on this post:
http://blog.55minutes.com/2012/01/getting-compass-to-work-with-rails-31-and-32/
In my case, the problem was I didn't rename application.css to application.scss.