I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.
Related
I have a site where the client wants to be able to put a stylized graphic at the end of some link text. Conceptually, it'd be like this:
This is My Fancy Title<img src="fancypic.png"/>
Except at some widths, word-wrapping causes the image to wrap as a widow on it's own line.
I've tried quite a few different approaches to this, including the widows CSS property, but nothing seems to work 100%.
Any suggestions?
You can use white-space: nowrap.
That will cause the text and image to not wrap to the next line.
Add a span and put one or 2 words and the image in it, make it inline-block
span {
display: inline-block;
}
This is My Fancy <span>Title<img src="fancypic.png"/></span>
What is the logic of the selection highlighting overflowing beyond the parent element?
In the attached screenshot, the top one is what I have currently, and the bottom one is a Photoshopped mockup of what I want to achieve.
To me it seems that the selection highlighting is almost largely random; I have not been able to find any definitive resources that explain what makes selection highlighting behave in which ways.
What should I keep in mind in terms of CSS and DOM when wanting to keep the selection highlighting reasonable?
Interestingly, I've wondered why SO doesn't have something like this so it's easier to copy code off an question/answer.
Actually, SO does have contained highlighting in the <code> blocks relying on overflow: auto;. <blockquotes> do not have contained highlighting.
Anyway, it appears there are a few ways to solve this problem (though, I'm sure there might be more). Use one of the following CSS rules to limit the highlighting of text to a specific element.
overflow: hidden; or overflow:auto;
position: relative;
float:left; or float:right;
The working example below shows all four methods at work. Some are easier to work with depending on your needs.
Working Example: http://jsfiddle.net/TFvYu/4/
Sources
CSS text selection color overflows outside box
HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome
I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <img class="icon" ...> where
.icon {
display: block;
float: right;
padding-left: 4px;
}
The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.
So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.
Any help would be greatly appreciated!
Adding the following rule to the css of the element you have your text in might help:
white-space: nowrap;
I think I got it working.
Basically, I had the title text within a div (also tried span). But if I didn't put it within anything (ie, it's part of the main title div), everything seems to work.
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>