I'm having some trouble with getting my app webpage to display correctly on mobile devices. I've added some buttons for social media sharing along with a get it on Google Play button. The Google Play button was quite a bit bigger than the other two so I decided to place the social media buttons next to each other above it. It works fine in both Chrome and Firefox but when I try to access it on my phone the Facebook button appears above the other one. I've tried fiddling around with the CSS but I can't get it to work properly. The hierarchy right now looks like this:
div "media"
div "sharing"
fb button
twitter button
Play store button
And the CSS looks like this:
#media
{
width:130px;
float:right;
}
#fb
{
position:relative;
float:left;
clear:none;
width:48px;
}
#twitter
{
position:relative;
float:right;
clear:none;
width:56px;
}
The two images below shows what it looks like on the two devices.
#fb
{
float:left;
width:48px;
}
#twitter
{
float:right;
width:56px;
}
Proper float's and no clear's.
Edit:
In reference to your website, this is how you should solve it:
#fb
{
display: inline-block;
vertical-align: bottom;
}
No need to float this one. You can go without the vertical-align as well if that suit you better.
There is no need for float on #media (from what I can see in the examples). You can also get rid of position:relative on #fb and #twitter and replace it with display:inline-block.
Finally, apply float:left to #fb instead of float:middle.
Middle is not a valid argument for float.
Related
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
It took some manipulating to get the username and password form boxes next to eachother. I have it looking good on chrome, but then when I went to safari and firefox, the boxes were at drastically different heights.
The site is www.EpicSwap.com I can't seem to get the code formatted properly Thank you for any help.
Try making your form a little bit wider, reducing padding-right (I took it out completely) on the the formleft element, and making formright float left as well. Notice I took out float:left on the form as well because it was unnecessary.
Like this:
form {
padding-top:6em;
width:450px;
}
#formleft {
float:left;
}
#formright {
float:left;
}
I would recommend you remove the float and use positioning as shown here
#formright
{
//float: right;
position: relative;
left: 250px;
top: -58px;
}
When you retweet or favourite on Twitter, a little coloured triangle with an icon appears in the corner of the div containing the tweet. I've copied the CSS and sprite sheet from Twitter and tried to recreate it on my site, but it didn't quite go to plan (the triangle didn't appear at all using the exact same CSS). So, how would I add a triangle 'dog-ear' effect to the corners of divs on my site?
This was the code I copied from Twitter:
.dogear {
position:absolute;
top:0;
right:0;
display:none;
width:24px;
height:24px;
}
.retweeted .dogear {
background-position:0 -450px;
}
.favorited .dogear {
background-position:-30px -450px;
}
.retweeted.favorited .dogear {
background-position:-60px -450px;
}
.retweeted .dogear,.favorited .dogear,.retweeted.favorited .dogear{
display:block;
}
i {
background-image: url("../sprite.png") !important;
display: inline-block;
vertical-align: text-top;
background-image: url("../sprite.png");
background-position: 0px 0px;
background-repeat: no-repeat;
}
And inserted into the HTML using:
<i class="dogear"></i>
I changed the sprite sheet URI and I was going to change the class names, and add some in so it wasn't exactly the same. Is it possible to make this effect work?
Thanks :)
You'll need to add a larger z-index property to the element containing the dog-ear so that it appears on top of the element you wish it to appear to overlap.
z-index is used to control the stack order of elements that are positioned absolutely, relatively or fixed.
You can read more on z-index on the Mozilla Developer Network.
In addition, you're using the dogear class in isolation from what I can tell from the code you've pasted. Which, if you look at the class definition in the stylesheet, is told to not display: display: none;
css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF - in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?
content:"\00a0";";
should be
content:"\00a0";
Can you confirm that this is just a typo, or does it fix it for you too?
I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)
CSS
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
button div.leftImage{
background-position: -96px -112px;
float: left;
}
button div.rightImage{
background-position: -64px -16px;
float: right;
}
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
Firefox
Internet Explorer 8
Here is how to do it
The Theory
Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
CSS
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(images/ui-icons_3d3d3d_256x240.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
Another alternative is to simply add the images in as img tags.
try resetting the button css.
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.