I know there is a way to keep indent for second line of text in list items. I'm trying to apply the similar effect for a text paragraph with custom list image.
HTML
<p>
<a class="bullet">
Lorem ipsum dolorsit & consectetur adipisicing
</a>
</p>
CSS
.bullet:before {
background-image:url("../bullet-image.png");
display: inline-block;
vertical-align: middle;
background-position: 10px 5px;
content:"";
}
This does the trick :
FIDDLE
CSS :
.bullet{
position:relative;
padding-left:20px;
display:block;
}
.bullet:before {
background-image:url("../bullet-image.png");
background-position: 10px 5px;
content:"";
height:15px;
width:15px;
position:absolute;
top:0;
left:0;
}
Use indent with padding for your .bullet class
padding-left: 2em;
text-indent: -2em;
Sounds like you're looking for list-style-position:
http://reference.sitepoint.com/css/list-style-position
To quote:
outside The value outside causes the list marker to be rendered
outside the principal block box. Its precise location isn’t defined by
the CSS2.1 specification. Contemporary browsers seem to render it
approximately 1.5em to the left of the principal block box in a
left-to-right environment, or 1.5em to the right of the principal
block box in a right-to-left environment. Some browsers use padding on
the list to make room for the marker box, while others use a margin.
inside The value inside makes the list marker the first inline box in
the principal block box. Its exact location is not defined by the
CSS2.1 specification. Note that when using the value inside should
text wrap to another line then a situation could occur on short lines
where the list marker becomes detached from the text (as of course
would any other inline element).
Related
I have to work with HTML files where the following tooltip is extensively used:
<div class="tooltip">
Text
<span class="popup">
Tooltip
</span>
</div>
And the CSS:
.tooltip span[class="popup"] {
z-index:10;display:none; padding:7px 10px;
}
.tooltip:hover span[class="popup"]{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;
}
https://jsfiddle.net/f1tztx15/2/
My problem is that the tooltip not only appears when I hover over "Text" but also when I hover over the blank space at the right of "Text" (see below).
Tooltip appearing when blank space is hovered
Is there a way to limit the "hoverable" region to the text without changing the whole tooltip? (I don't really have the freedom to do that)
Thanks!
Try using CSS to limit the width or padding of the element.
Eg.
.tooltip:
width: 100%;
padding: 0px;
This could limit the width of your tooltip element.
You could also just use a <span> element. Which would also contain the element within its own bounds.
I need an expand icon to go alongside a piece of dynamic text within a tab to show more info. The expand icon has a background image - so needs to be displayed as block - when clicked a class is applied which alters the background image to a minus and the text beneath the link is revealed.
Is there a way to display the icon 5px to the left of the dynamic text and for it still to be a block (so you can see the background images)?
My HTML is below - note that the tab also contains a tick box which has a seperate function.
<div class="expandLinkWO">Cardio & Arms<span class="plusCircle btn"><span></span> </span> <span class="tickBox"></span>
You could use inline-block, which does what you want. Or you could make your button floating. Both should work.
Inline-version
.plusCircle {
display:inline-block;
vertical-align: top;
margin-right: 5px;
}
Float-version:
.plusCircle {
display:block;
float:left;
margin-right: 5px;
}
I believe the inline-block way is nicer, but IE and inline-block ain't the best of friends..
You probably need inline-block :
.plusCircle {
background: url(your/img/url.jpg);
height: 20px;
width: 20px;
display: inline-block;
margin-left: 5px;
}
I'm trying to create an effect where h# elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.
Take this example HTML5 and CSS3:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="content-container">
<h1>Short title</h1>
<h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
</div>
</body>
</html>
h1 {
font-weight: bold;
text-align: center;
}
h1:before {
content: '— ';
}
h1:after {
content: ' —';
}
This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.
How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This jsFiddle depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.
I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.
I can't see a way of doing this with text bullet points, but it can be done with background images. CSS3 supports multiple background images and multiple image positions, so we can position an image bullet point at either end of the h1 like so:
Replace your CSS with this:
body {text-align:center}
h1 {
font-weight: bold;
padding: 0 16px;
background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
background-position: left center, right center;
background-repeat: no-repeat;
display: inline-block;
}
The padding is required to make room for the bullet points. I have used some random bullet point image, but note that I have specified it twice. I can then specify different positions for these two images; one left and one right of the h1. Finally display:inline-block prevents the h1 filling the entire width, which would cause the bullet points to constantly sit at the edges of the parent element instead of at the edges of the heading text.
Hope this works for you.
I managed to get quite close with creative use of table display styling:
h1 {
font-weight: bold;
text-align: center;
display: table;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
h1:before {
vertical-align: middle;
content: '—';
display: table-cell;
padding-right: '1em';
}
h1:after {
vertical-align: middle;
content: '—';
display: table-cell;
padding-left: '1em';
}
Why just "quite close"? Well, firstly I haven't verified that this is standard-mandated behaviour and not just some quirk of rendering. Secondly, it works in Chrome 18 and Firefox 12, but I haven't bothered to check in Internet Explorer or Safari — and I know it doesn't work quite right in the Android browser engine.
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.
I have the following that I would like wrapped as units.
<div class='tag-box'>
<a href=#>Axe Committee</a>
<div class='circle'><a href=#>x</a></div>
</div>
The CSS for these classes are:
.tag-box {
display:inline;
}
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24); /*dark red*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.
alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png
How do I prevent this kind of wrapping from occurring?
You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!
Here is a complete HTML code: http://pastebin.com/24tG7tCz
I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))
I also added titles: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.
With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.
0: Use white-space: nowrap;.
1: You could have the circle as background of your .tag-box (or your .circle a). eg:
.tag-box {
display: inline;
background-image: url('circe.png');
background-position: 100%; /* Display to the right */
background-repeat: no-repeat;
padding-right: 10px /* To leave space for the image */
}
2: You could use fixed-size floating .tag-box-es ( :/ )
3: You could have a (ready made) script put a circle on the right of every ".circle a"
You could try:
.tag-box {
display: inline-block;
}
Although you may experience some issues with firefox 2 and older versions of IE