can you please give me the right CSS snippet to move these price tags from left to right? I am very insecure with this positioning and don’t want to produce crippled code so it would be great to get some help here.
https://prnt.sc/1x10vpj
I suppose it is thie, but not 100% sure:
position: absolute;
bottom: 12px;
left: 12px;
padding: 3px 11px;
margin: 0;
min-width: 0;
min-height: 0;
line-height: 20px;
border-radius: 50px;
background-color: #fff;
color: #111;
font-weight: 700;
font-size: 13px;
}```
Thanks and regards!
Seems a bit of an incomplete question. Would be good to see where the element s sit in relation to other elelements and also associated CSS.
But looks like it is as simple as changing left, to right in your CSS.
Related
I'm designing a responsive site which means the layout changes. When viewed as wide as possible, my blockquote wraps to the next line. I would like for it to be on the same line.
I have managed to fix the open quote by adding some text-indent however I'm unable to move the close quote.
My HTML:
<blockquote><p class="blockQuote">In recent years we have noticed a growth in demand for audit services, by enterprises with foreign investment, partly because of the demands on the part of organizations such as the CPI and the central bank.</p></blockquote>
CSS:
blockquote {
font-family: serif;
font-style: italic;
color: #000;
margin: 0px 0px 10px 0px;
}
blockquote:before {
content: "\201C";
}
blockquote:after {
content: "\201D";
blockquote:before {
position: absolute;
width: 60px;
height: 60px;
line-height: 1;
font-size: 120px;
}
blockquote:after {
position: absolute;
width: 60px;
height: 60px;
line-height: 1;
font-size: 120px;
}
When I use a span element, the close quote fixes but the open quote looks like it should move further up.
Add <span> tag instead of <p> tag. Working JSFiddle here https://jsfiddle.net/jfmf4ujc/
This one is messing with my head. The following HTML/CSS looks fine on every browser, expect when I read it on an iPhone. The text in the a tag(SITE DESIGN SOME COMPANY) is noticeably smaller by about 25%. I have gone up through the DOM and made sure no other styles are computing on my desktop.
<footer>
COPYRIGHT 2012 / <a href="http://somesite.com">
SITE DESIGN SOME COMPANY</a> / ALL RIGHTS RESERVED
</footer>
footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 75%;
}
I've experienced this, too. iPhone renders % font sizes differently than other browsers. Especially if nested inside multiple elements with multiple % changes (if your <footer> for example is inside another element with another 75% font size declaration).
If you change 75% to 0.75em (or use something other than a percentage), you should be back in business.
footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 0.75em; /* or 10pt, or... */
}
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.
Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.
Here is my css code for message div:
#modal1
{
margin-left: auto;
margin-right: auto;
display: none;
width: 620px;
height: 150px;
position: relative;
background-color: #FFF;
border: 12px solid #FF771C;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
text-align: center;
}
And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..
EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850
this seems to be the border of another div or element behind your rounded bordered div
I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102
.backButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 13px;
left: 6px;
font-size: 14px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
-webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}
.toolbar{
background-color: #e1f7ff;
-webkit-box-sizing:border-box;
border-bottom:1px solid #559D75;
padding:10px;
height:53px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed));
position:relative;
z-index: 70; }
Applied here:
<div class='toolbar'>
<div class='backButton'>Back</div>
</div>
Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).
Thanks in advance.
Try adding:
-webkit-user-select: none;
This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.
I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.
I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.
Lesson learned... thoroughly.