I've got a div called titlebar. This titlebar has a width of 100%. Inside my titlebar I want to center a title and next to my title I want to display an icon. So the title + icon combo should lay next to each other AND be centered.
This should not be that difficult, but the problem is that I'm using image-sprites, so I can't use the <img>-tag (I need the icon to be the background of some element).
Anyone got an idea of how to solve this?
This is about as far as I've come (no real success):
http://jsfiddle.net/Tw33Y/2/
This is fairly easy to achieve in modern browsers. If this is your HTML:
<div class="titlebar">
<div class="title-sprite"></div>
Title Text
</div>
Then use this CSS to style it:
.titlebar {
text-align: center;
}
.title-sprite {
display: inline-block;
width: 16px;
height: 16px;
background: url(http://www.alistapart.com/d/sprites/sprites.gif) -36px -24px no-repeat;
}
This will not work in IE7 or earlier, you will need to add some hacks if you need them to work.
Related
I have Flipclock working fine on my website, but I need to change the "days: Hourrs: Minutes:" text to white, but can't find what css to add/amend
also (I'm using bootstrap3) I can;t get the Flipclock to center in a div. I currently have the following code:
<div class="col-md-12 text-center">
<div class="clock center-block" style="margin:2em;" align="center"></div>
But the clock stubbornly stays to the left.
Thanks for any advice
Change header text to white (edited):
.flip-clock-wrapper .flip-clock-divider .flip-clock-label {
color: #FFF;
}
Class .center-block from Bootstrap applies margin: 0 auto; and you're overwriting that with style="margin:2em;". Remove that style and the clock should center appropriately. You may need to set an explicit width on the clock. FlipClock's website uses a default of 460px:
.flip-clock-wrapper .clock {
width: 460px;
height: 116px;
margin: 0 auto;
}
There is a pretty advanced solution here! It will allow you to change the all colours and shadows in addition to the size.
resizing flipclock.js not resizing as expected
Here's the HTML I'm trying to use:
<h1>Order Not Paid<span class="not-paid"></span></h1>
Of course if there is a better way please say so.
Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.
When I place text in the span, the icon shows correctly.
What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):
h1 {
font-size: 24px;
span.not-paid {
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
}
I'd like the icon to appear where the span is.
Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.
<h1>Order Not Paid <img src="#Url.Content("~/Public/images/remove.png")" alt="" /></h1>
If the icon is small and not reused anywhere else just set it as part of the h1.
HTML:
<h1 class="not-paid">Order Not Paid</h1>
CSS:
h1.not-paid {
font-size: 24px;
padding:0 16px 0 0; /* whatever the dimensions the image needs */
background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}
A little cleaner this way.
the background image is not showing up because the span has no width, and therefore is not showing any of the background.
also, the snippet you gave is not valid css.
try something like this, assuming the image is 16px by 16px:
h1 {
font-size: 24px;
}
span.not-paid {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
The display: inline-block; is to make it so the width will apply. The vertical-align is to center the image on the middle of the line.
All of that said, the <img> tag solution would work too, but it doesn't scale well to a lot of similar images. The css-based solution makes it easier to switch to something like css spriting later.
In either case, you'll probably want to change your direct image urls to relative urls before expecting this page to work in a production environment.
I'm pretty sure that you need to give the span some width. By default it has none, so of course no background image will be seen.
First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.
h1 {
font- size: 24px;
}
h1 span.not-paid {
width: 50px;
height: 50px;
display: inline-block;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
I'm finishing my web site http://centrosokoladine.lt/ And how you can see there is in middle left some picture covered with text, and I need to wrap that text. Image is set like those box'es bakground image, no repeat left middle...
Here that exact part of html:
<div class="turinio"><?php the_content(); ?></div>
And css:
.vidinis
{
background-color:#a68e84;
layer-background-color:#a68e84;
width: 709px;
/* height: 306px; */
align: center;
padding-top: 17px;
visibility: visible;
**background-image: url('http://centrosokoladine.lt/wp-content/themes/sokoladine/grafika/info.gif');
background-repeat: no-repeat;
word-wrap: break-word;
background-position: bottom left;**
overflow:hidden;
}
I know that it's not posible wrap text arround background images so I'm looking for other solution here, maybe I already tried to create seperate div for that image, but I failed..
You cannot do this with a background-image unless (1) You give a padding-bottom to your div and don't show text next to the image, or (2) you give a padding-left to your div and don't show text under the image.
An img element is the normal (html) way to do this. You can then add the align attribute to that image.
float: left;
Float will do the trick.
What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right?
Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment.
I am using background-position css property to get the icons from a larger image.
Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom.
Text
This is what I get after I try your suggestions.
Though the text is now aligned with the icon, it is superimposed over the icon to the right of the icon that I want. Please note that i am using the background position to show the icon from a larger set of images.
Basically I am getting
<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>
group3_drops_icon {
background-position:-50px -111px;
}
.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}
I usually use background:
<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
}
</style>
<span class="icon">Some text here</span>
You can do it on the same line using vertical-align and line-height
<p style='line-height: 30px'>
<img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>
Alternatively, you can go the background approach with no-repeat and positioning:
span.icontext {
background: transparent url(icon.gif) no-repeat inherit left center;
padding-left: 10px /* at least the width of the icon */
}
<span class="icontext">
Icon Text
</span>
Sadly, neither of these answers are bullet proof and each have one big flaw.
#rossipedia
I used to implement all my icons this way and it works quite well. But, and this is a big but, it does not work with sprites, since you're using the background-position property to position the icon inside the container that includes your text.
And not using sprites where you can is bad for performance and SEO, making them imperative for any good modern website.
#Jamie Wong
The first solution has two markup flaws. Using elements semantically correctly is sadly underrated by some, but you'll see the benefits in prioritizing form in your search engine ranking. So first of all, you shouldn't use a p-tag when the content is not a paragraph. Use span instead. Secondly, the img-tag is meant for content only. In very specific cases, you might have to ignore this rule, but this isn't one of them.
My Solution:
I won't lie to you, I've checked in a lot of places in my time and IMHO there is no optimal solution. These two solutions are the ones that come closest to that, though:
Inline-Block Solution
HTML:
<div class="container">
<div class="icon"></div>
<span class="content">Hello</span>
</div>
CSS:
.container {
margin-top: 50px;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
display: inline-block;
vertical-align: middle;
}
.container .content {
display: inline-block;
vertical-align: middle;
}
"display:inline-block;" is a beautiful thing. You can do so much with it and it plays very nicely with responsive design.
But it depends on your client. Inline-Block does not work well with IE6, IE7 and still causes problems with IE8. I personally no longer support IE6 and 7, but IE8 is still out there. If your client really needs his website to be usable in IE8, inline-block is sadly no option. Assess this first. Replace the black background of the icon-element with your sprite, position it, throw no-repeat in there and voilà, there you have it.
Oh yeah, and as a plus, you can align the text any way you want with vertical-align.
P.S.: I am aware that there's an empty HTML-tag in there, if anyone has a suggestion as to how to fill it, I'd be thankful.
Fixed Height Solution
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.container {
margin-top: 50px;
border: 1px solid #000;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
float:left;
}
.container .content {
line-height: 30px;
float: left;
display: block;
}
I hate this one. It uses a fixed line height for the text, and if you choose the same height as the Icon's box, the text is centered to that height. To align the text to the top, cut the line height, and as to the bottom, you'll have to fix that with position: absolute and a fixed width and height for the container. I'm not going to get into that unless someone requests it, because it's a whole issue for itself, and brings with it a lot of disadvantages.
The main disadvantage of this path is the fixed height. Fixed heights are always unflexible and especially with text, it can cause a bunch of problems (You can no longer scale the text as a user without it being cut off, plus different browsers render text differently). So be sure that in no browser the text is cut off and that it has some wiggle room inside its line height.
P.S.: Don't forget the clearfix for the container. And, of course, replace the black background with your sprite and according position + no-repeat.
Conclusion
Use inline-block if at all possible. ;) If it's not, breath deeply and try the second solution.
I am using the text-indent technique to replace my <h1/> tag with my website's image as so:
<h1 title="Homepage">My logo</h1>
CSS:
#header h1 {
float: left;
background: transparent url('../images/logo.png');
width: 214px;
height: 64px;
text-indent: -9999px;
}
The only problem is that I want to still have the new image act as a hyperlink. I tried doing:
<h1 title="Homepage">My logo</h1>
But since it is being indented, the link is too. I wanted to know if anyone had any suggestions on how to do this and still be valid XHTML.
EDIT I'd rather do it in a way that is accessible to users with screen readers, from what I read, doing a display:none will not work with some readers.
There are many ways to do this, this is the way that I prefer, it works well, and is easy to implement.
<div id="header">
<h1>Homepage</h1>
</div>
Then i do this css, this is also know as the "Leafy/Langridge image replacement" method
#header h1 a {
display: block;
padding: 22px 0 0 0;
overflow: hidden;
background-image: url(../images/sidebar/heading.png);
background-repeat: no-repeat;
height: 0px !important;
height /**/:22px;
}
The only thing you should have to edit is the height, and the padding-top. In this example it is 22px, this should be equal to your image-height.
Why are you mucking about with negative indents - just use the alt attribute of the img tag?
<h1 title="Homepage><img src="images/logo.png" alt="My logo"/></h1>
#Partrik Hägne: You should't use display:none, because some screen readers will ignore that...
You can see a list of Nine Techniques for CSS Image Replacement on http://css-tricks.com, which describes the cons and pros for each solution.
What you can do is remove the indent. And use a span to hide instead:
<h1 title="Homepage"><span>My logo</span></h1>
#header h1 span
{
display: none;
}
You might have to set the width and height of the A-tag also since nothing fills using this trick.