I have the following
.toggle_container .block ul {
margin: 0 0 7px 0;
}
.toggle_container .block li {
list-style-type:none;
color: #232120;
font-size: 1.2em;
line-height:1.2em;
padding: 4px 0px 2px 23px;
background: url(images/red-bullet.gif)no-repeat;
background-position: 3% 45%;
}
The trouble is the image moves downwards if I have more than one line of text in the tag
Thanks<
Where you have:
background-position: 3% 45%;
Try using px values instead of percentages. So change the 3% and 45% to the offset of the image you want, something like 3px 45px.
You could also replace 3% and 45% with 'top left' to fix the position to the top left..
Well Isnt that typical. Done a bit more searching and found the answer, so thought I would answer my own question.
I mixed position percentages and pixels as follows:
background-position: 3% 9px;
Related
Is there a way to set a background css sprites image width?
shop
a{
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: block;
background-position: -5px -5px;
padding: 0 0 0 30px;
}
https://jsfiddle.net/jb1prcro/
right now the above a tag is 60px width, 30px for the word 'shop', 30px padding left for the cart icon,
because I am using css sprites for the background icons, right now it is showing 60px of that background image instead of just the 30px I want to show.
I also tried background-size: 30px 30px for this A tag, but it doesn't work.
You can use the pseudo-element before:
a{
display: inline-block;
background-position: -5px -5px;
padding: 0 0 0 30px;
height:30px;
vertical-align:middle;
}
a:before {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
width:30px;
height:30px;
display:inline-block;
content:'';
vertical-align:middle;
}
Working example: https://jsfiddle.net/mspinks/jb1prcro/2/
I am not sure what exactly you are trying to achieve, but here's a practical example:
https://jsfiddle.net/ozL0yzuy/
a {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: inline-block;
width: 40px;
background-position: -10px -20px;
}
You have to set a width (and actually also a height, which I didn't do in the example) for the element itself (in this case the a tag, which can only be done if its a block or inline-block element). Then you can adjust the background position accordingly.
I need to insert text in the upper and lower of an inner border (both centred) which will have a background image behind it. This will be the same on each page. Can I achieve this using CSS?
Please see screenshot of what I mean:
The border needs to be 3px in width and white in colour and the font is Basis Grotesque Medium.
I'm hoping to start out with a WordPress theme and edit it.
Hopefully this question hasn't been answered before anywhere. I tried running a search but couldn't find what I needed.
Before I go ahead and start building this website could you tell me if this is possible and how I may go about achieving it?
You can use the approach I described here Line separator under text and transparent background for the lines on the left/right of the titles.
You can then use negative top/bottom margin to position them on the bottom and top borders :
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
#content{
border:3px solid #fff;
border-width:0 3px;
display:inline-block;
margin:50px 0;
width:100%;
}
.divider {
font-size:30px;
margin: -0.65em auto -0.45em;
overflow: hidden;
text-align: center;
line-height: 1.2em;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 3px solid #fff;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
p{margin: 150px 0;}
<div id="content">
<h1 class="divider">Top title</h1>
<p>...Content here...</p>
<h2 class="divider">Bottom title</h2>
</div>
Note that top/bottom negative margins will need tweaking according to the font-family you are using
The site I'm working on has headings that look like this:
http://i.imgur.com/ssvj8J1.png
They need to...
a) be centered on the page
b) be flexible width, to fit the contained text with a few em of padding either side.
c) work on IE9+, and of course all the other modern browsers
d) work on any background (so the images used can't contain white bits to help with overlaying)
I started off chopping it into 3 bits, and using ::before and ::after. This had problems with the backgrounds overlapping.
I then tried a sliding-doors approach, with just 2 images, but obviously had similar problems.
Now I'm on multiple BG images, which I've not used before. Same problem as above, they overlap. The solution seems to be to "clip" the middle one to content-box, but then that limits the padding I can use to strictly 53px, the "width" of each end bit of the banner, making them look too cramped?
Also, what's the best way of centering these? They're h1 tags. Do I need to use positioning/translation/inline-block? Or can I somehow keep them as 100% width block elements (which would be easier/better) and just centralise the backgrounds?
This is what I had before I tried to make them fluid:
h1{
background:url(banner.png) 50% 0 no-repeat;
line-height:52px;
color:#fff;
padding:0 0 6px}
And this is where I'm at now:
h1{
background-image:url(banner-left.png), url(banner-mid.png), url(banner-right.png);
background-position:0%, 50%, 100%;
background-repeat:no-repeat, repeat-x, no-repeat;
background-clip:border-box, content-box, border-box;
line-height:52px;
color:#fff;
display:inline-block;
padding:0 53px 6px}
I'm not happy with this for the reasons mentioned above. I feel I'm missing some obvious/easy tricks?!
Thanks - CSS seems to have moved on a lot since I last did anything significant!
You can use a pseudo elements and avoid the images completely.
Codepen Demo
HTML
<div><h1><span>Short Text</span></h1></div>
<div><h1><span>Much Longer Text</span></h1></div>
CSS
body {
text-align: center;
}
div {
margin: 25px;
}
h1 {
position: relative;
line-height: 1em;
max-width:50%;
display: inline-block;
}
h1 span {
color:gold;
padding: .5em;
background: black;
box-shadow:
0 0 0px 1px gold,
0 0 0px 3px black;
}
h1::before, h1::after {
position: absolute;
content:"";
top:35%;
z-index:-1;
border: solid black;
border-width:25px;
}
h1::before { /* left */
border-left-color:transparent;
left:0;
transform:translateX(-75%)
}
h1::after { /* right */
border-right-color:transparent;
right:0;
transform:translateX(75%)
}
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
my page has one big div with fixed width, like this:
#index_body{
width: 1010px;
background-image: url('images/main_bg_dark.png');
margin: auto;
overflow: hidden;
min-height: 50px;
padding-bottom: 10px;
border-radius: 7px;
-moz-box-shadow: 0 5px 15px #000000;
-webkit-box-shadow: 0 5px 15px #000000;
box-shadow: 0 5px 15px #000000;
}
I want to add button (20x20px) on the right side of page (vertically in the middle) - still next to index_body.
So the button has code, like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
left:WHAT SHOULD BE HERE??
}
Because it depends on actual resolution. My index_body is always centered. if I change resolution my button is moved to the left-right...
Instead of setting the left or right position, make sure the button element is inside the index element and then use a margin.
margin: 0px 0px 0px 1010px;
Here is a tested and working version with your code - http://lukewakeford.co.uk/testsite/blackbutton/
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
right: 10%;
}
The 10% is an example, change to a percentage that looks good, and it should be responsive to screen resolution.
On the other hand, why would you want a fixed element INSIDE a fixed container? just make it absolute and float it to the right with a margin.
ok, it should be just like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
margin-left: 1010px;
}