I'm wondering if this is possible:
A container has a line of text in it, it can wrap to a new line if it's too long
The line of text has padding around it and also has a background color
The padding is consistent until the text wraps, the first line will not have padding on the right side of the first line
How can you keep the padding on the right side of the first line? Please note I do not want a large block of black that runs straight down from the widest line.
Here is a jsfiddle in case you need to see an example: http://jsfiddle.net/x6Rxw/
Thanks!
Sorry for bringing this topic back up- however this post may be helpful to future people looking.
This is a jQuery + CSS fix for this issue in a plugin form.
http://jsfiddle.net/OwenMelbz/rd8Qc/
Related
snippet of exact problem Problem -
[screenshot of website][1]I am creating my personal website. I need my skills text shown next to one of the images using the Float left. it doesn't work as expected.
used float left to align text next to the image-
below is the link to code-
codepen.io/gk65408/post/why-does-css-float-doesnt-move-my-text-to-right-side-of-my-image
It's not working because there are no spaces in the text of that paragraph, so the line-box is staying as long as possible, which pushes it below the image.
Either add normal spaces or add zero-width space characters.
When I float images on my WordPress site, the text is not aligned vertically with the image, but appears a bit lower on the page. I suspect this is to do with line-height of the text, but I'm not sure how to fix it.
Here's the example. Scroll to the bottom of the page under Recommended by:
http://www.myfiveacres.com/hidden-gems/saison-market-vineyard-duncan-bc-canada/
You should post your code, but one thing you could try is adding a negative top margin to your text.
margin-top:-*px;
And of course, replace the * with however many pixels are needed.
I'm sorry, I have no other way to describe this and I've frustrated myself to tears trying to figure out how to get it to stop.
I'm trying to make it so that the black div in my image http://i.imgur.com/nyLeL.png increases its width WITH the grey div instead of the grey one overlapping. The red one is just a placeholder for an image, ignore that.
The black and grey divs do not have a height attribute, because I don't want to make them into scrolly boxes, I want their height to increase with the amount of text. The white and red ones do, and I swear I have checked fifty times to make SURE there is no height attribute present in either the black OR grey divs. When I increase the height of the red/white divs the black one also gets bigger.
Ok I think I've provided enough detail, is there a way to fix this?? I've googled for hours and I just can't figure this out, I never post questions on places because I always figure it out before I even get an answer but I'm desperate.
Make sure you had cleared floats after your grey div. You can do something like below:
<div style="clear:both"></div>
Your code is needed to give you the exact solution but I hope this jsfiddle will give you a way to understand how this effect can be achieved and what you might be missing.
If you could provide your code then maybe it is possible to provide an exact solution.
I'll try to simplify my problem to make it easier to understand.
I want to be able to add lines of text (using javascript) to the document at the bottom of the page.
When a new line is pushed, it's added at the bottom, pushing all the previous lines up.
The document should be padded and when the content overflows the older lines (top ones) should be hidden or using scroll in which case it should be scrolled to the bottom.
I've been trying to accomplish this for a while now but I can't any elegant solutions.
Any ideas? css3 is more than welcomed.
Thanks.
There is an HTML element do this by default it is UL just include it inside an fixed height div with overflow and some focus on the last LI!
Kind of hard to put into words, so here's the jsFiddle showing it.
When hovering over one of the green blocks, I wanted its background to expand enough that it "touches" the contiguous rectangles (it overlaps their margins). However, when hovering over the last block of each line, the layout goes wild: the line below only shows one element, etc.
The cause seems to stem from the negative margin; since, if the margin for the "expanded" class is set to plain 0 instead of -5, this problem doesn't happen. But of course this would leave a space between blocks.
The size of the parent container doesn't seem to alter this. Note that for now I'm not particularly concerned about the fact that the expanded block isn't well centered and makes the others in its line wobble a bit, although it may be linked to the problem.
Change de padding of the extended into 10px
http://jsfiddle.net/TMXLz/4/
The only way I can see to do what you want is to position each of those blocks absolutely (position:absolute) into the place you want them. You're main issue here is that the changes you want to make to the box are going to cause them to encroach on each others space. So you either need to adjust all their spacing (using js) on each mouseover (which sucks). Or absolutely position the items into place (specific positioning style for each box) then you won't have an issue with them overlapping partially. Just be sure to increase the active ones z-index so its always 'over' the others.
This may be the output you are looking for
http://jsfiddle.net/TMXLz/5/