This question already has answers here:
Partially overlap elements using CSS
(3 answers)
Closed 11 months ago.
Currently my site looks like this (making a browser based card game), please ignore the art for now - screenshot - I would like them to overlap slightly rather than wrapping around and creating a new line almost like someone is holding the cards. I have no idea where to even start with this without using js so I was wondering if anyone could help me come up with a solution that just uses pure css solution.
You can use margin-left and margin-right with negative values. Or you can set the card positions by using position: absolute and left and top properties.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS 3 content selector?
I was wondering, is it possible to select an element based on its content with CSS?
I realize I can use something like this:
.this[href="./foo.php"] {
/* And the styles... */
}
But is there a way to select based on inner content?
So if I have this:
<p>[ Continued ]</p>
How can I select it based on it's content, [ Continued ], if I can?
No, not with CSS, and there really should never be a need too. If you're making a "Continued" button, link, or whatever: specify a class, maybe an ID, or even use an attribute, and select it. There really is no need for a content selector with how many options you already have.
Not to mention, not adding a class or some kind of identification to this link makes it look like regular text within the document, possibly removing some of its semantic meaning. Giving it a separate class makes it stand out. If I give a link the class "button," that makes it stand out from the rest of the links on the page, saying "I'm a button, not just an ordinary link." Selecting based on the content does nothing of the sort; it's just another link.
This question already has answers here:
How to word wrap text in HTML?
(20 answers)
Closed 7 years ago.
I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below:
<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>
Is there anyway to disable overflow and put the overflowing text on a new line??? Twitter does something like this but I can't figure it out with CSS it's possible they are using Javascript.
Can anybody help with this??
Just add
white-space: initial;
to the text, a line text will come automatically in the next line.
word-wrap: break-word
But it's CSS3 - http://www.css3.com/css-word-wrap/.
Try the <wbr> tag - not as elegant as the word-wrap property that others suggested, but it's a working solution until all major browsers (read IE) implement CSS3.
Well, you can stick one or more "soft hyphens" () in your long unbroken strings. I doubt that old IE versions deal with that correctly, but what it's supposed to do is tell the browser about allowable word breaks that it can use if it has to.
Now, how exactly would you pick where to stuff those characters? That depends on the actual string and what it means, I guess.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Any ideas on how I could implement a grid-view in CSS? - CSS
I have an example of a dynamic number of divs all floating left:
alt text http://img266.imageshack.us/img266/7717/qaatest1.jpg
...but would like the new row to be tucked up under the previous as in my example desired output:
alt text http://img714.imageshack.us/img714/1527/qaatest2.jpg
I know using columns might be the best way to go but am having trouble with exactly how to go about that. A CSS solution would be great.
I do know how many boxes there will be when i start out. Any thoughts?
Thanks.
This jQuery plugin might be of help:
http://desandro.com/resources/jquery-masonry/
Edit: I don't think a pure CSS solution is sufficient. You may know the number of columns, but you won't know the size of columns without javascript trickery. I recommend the above plugin.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I don't edit CSS very often, and almost every time I need to go and google the CSS box model to check whether padding is inside the border and margin outside, or vice versa. (Just checked again and padding is inside).
Does anyone have a good way of remembering this? A little mnemonic, a good explanation as to why the names are that way round ...
When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.
pin - P is in
You are using a box. If you were putting something in a box you would put some padding inside to make sure it didn't smack against the sides. Margin would then be the other thing.
Print the diagram from the Box Dimensions section of the specification, and put it on the wall.
To me, "padding" just sounds more inner than "margin". Perhaps thinking about the printed page would help? Margins are areas on the far outside - generally, you cannot even print to the edge - they are unmarkable. Within those margins, the content could be padded to provide an extra barrier between the content and the margin?
Once you work in CSS enough, it'll become second nature to remember this.
I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because body doesn't visibly break the model.
Really, if you give body a margin and a background you should see it surrounded by a white strip. However this isn't the case - body's padding is the same as margin. This establishes a few incorrect things about the box model.
I usually think about it like this:
margin = spacing around the box;
border = the edge of the box;
padding = space inside the box.
Padding is usually used inside. Either on the interior of a wall or a delivery box, that's simple. And if padding is inside, then margin is outside. Shouldn't be too hard.
use firebug to help you see.
Tim Saunders gave some excellent advice - when I first got started with CSS, I made a point of building a good, fully commented base stylesheet. That stylesheet has changed many times and remains a terrific resource.
However, when I ran into my own box model problems, I started using 'Mo Pi'. As in, "I'm not fat enough, I need to eat mo pi." Strange, but it worked for me. Of course, I put on twenty pounds while learning CSS...;-)
Create yourself a commented base stylesheet which you can use as a template whenever you need to create a new site or edit an existing site.
You can add to it as you grow in knowledge and apply it to various different browsers to see how various things behave.
You'll also be able to add in comments or examples about other hard to remember stuff or stuff that is counter intuitive.
Add border, even just temporarily. As you play with the numbers, you'll see the difference.
In fact, temporary borders around elements is a helpful way to work, such that you can see why floats are dropping, etc.
I know this is an answer to your question, but more of a tip. Whenever I am dealing with margin and padding, I will add a border around the part you are working with, then from there, it shows me the room I have to work with. When I am all set, I remove the border.
PAdding is a PArt of an element's PAinting: it extends the element's background. It makes sense to think of a pair element+padding as sharing a common background. Padding is analogous to the painting's canvas: the bigger the padding, the bigger the canvas and therefore background. Border (the painting's frame) would go around that pair. And margin will separate paintings on the gallery wall. Thinking about the concept of object background helps glue the pair object+padding together. The usual explanations of what is inside vs outside do not stick to memory: after a while everybody gets back to the original confusion. Remember also that margins are vertically collapsible and padding is not.
Instead of ask again and again to google you just use inspector window. In that style tab and scroll down to bottom you can see like this.
Margin:When you want move the block.
Padding: When you want move the items within a block.