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
Related
I'm not sure what in the CSS is causing the * to display below the textbox when I add the class tiny to the div
<div class="editor-field tiny required-indicator">
Check out the jsfiddle: https://jsfiddle.net/pfqqmmfn/
If the class tiny is removed then the * display after the textbox like expected. I'm still learning CSS so any help would be great. I know it has to be something simple but I can't find the issue.
Thanks for any help.
I updated your JSFiddle: https://jsfiddle.net/pfqqmmfn/2/
I changed .required-indicator:after (the little asterisk) to this:
.required-indicator:after
{
content: "*";
display:block;
font-weight: bold;
color: Red;
width:20px;
height:20px;
position:absolute;
left:calc(100% + 10px);
top:0;
}
And added position:relative; to your .tiny class.
Relative position to the parent (.tiny) lets me use position:absolute on its :after pseudo-element (which behaves as its child).
You had your asterisk pseudo-element on position:relative; so by giving that item the .tiny class, you set its width to 135px (with !important, too) thus stopping the little asterisk from fitting in there.
If you add this
form div.tiny {
width: 120px !important;
}
it overwrites the built-in rule that causes your problem (making the input field containers too narrow to allow the asteriks next to it). You can try and use different width settings.
https://jsfiddle.net/zLoqy3py/
I'm coding a site which has a big company logo at the top left.
So I code it with the logo as the background image, the company name in an H1, and hide the H1 using image-replacement techniques.
But there's no "home" link in the rest of the site's navigation. The logo is probably intended to be the "home" link. But because of the semantic/image-replacement technique, there's nothing to click.
What would you do in this situation? Position something transparent over the logo is my first thought, but I'd like to hear other suggestions.
Very simple - put an Company name inside your H1 element, and apply your image replacement styles to h1#logo a (or whatever selector you use). You'll need to add display:block; to the styles, to have the anchor behave correctly.
Let me know if you need more detail than this!
Extra detail:
OK - I usually use the following HTML and CSS for image replacement:
HTML:
<h1 id="logo">
[Company name]
</h1>
CSS
#logo a {
display:block;
width: 200px; /* Or whatever you like */
height: 0;
padding-top: 100px; /* The required height */
text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
overflow: hidden;
background: /*whatever you like */;
}
This is a kind of 'double-strength' - the height:0/padding-top technique creates a box the size you need, but without any room for text to display (the background image will appear in the top padding, but the text won't). The big negative-text-indent is just a safety for browsers that get things wrong occasionally (old webkit used to have problems - not much of an issue nowadays).
Let me know how you go!
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)
I have an interesting goal that hopefully, with your help, will be achieved.
I have this HTML structure:
<li>
<span class="buttonHighlight"></span>
BUY NOW
</li>
That HTML + a few CSS lines gives me this:
IMG 1 (see below)
As you can see, the span.buttonHighlight is overlapping the button itself. Now, here comes the interesting part: The button is a simple anchor tag with cufonized text, that has a few CSS styles which give it that rounded-button background. Hence, what I want to achieve, is putting the 3 elements (CSS background, cufonized text and Highlight) in this order:
IMG 2 (see below)
What I've tried so far was to aim at each element separately: The <span class="buttonHighlight"></span> as span.buttonHighlight, the CSS-driven background/box as a.button and the cufonized text as a.button .cufon . And luckily, the a.button .cufon is properly displaying; you can see it in FireBug:
IMG 3 (see below)
However, adding a z-index (of 101) that is superior to the z-index of span.buttonHighlight (100) did not help, i.e. the Highlight still overlapped the text.
You can find all the CSS styles relevant to this case here: pastie [dot] org/1478291
I really, really appreciate any help provided and your time.
Thank you so much!
Chris
**PS. Since I am not allowed to post images and only 1 hyperlink, i've stacked the 3 images below:
http://i.stack.imgur.com/Upe63.jpg:
z-index only works on positioned elements, you must specify postion:relative even if that is the default. Try this:
span.buttonHighlight {
background: url(assets/images/button_highlight.png) no-repeat top center;
z-index: 100;
position: relative;
}
and
a.button .cufon {
z-index: 101;
position: relative;
}
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.