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!
Related
I have two questions:
1) I have a div with an image that I use for my footer, but I when I resize the page the footer text gets all "mushed" together. Is there any way I can get the text to stay in a certain position and resize with the page?
2) I use a div for the body of the page, but when I try to add text and align it in position it moves the entire div. How can I get the div (which is just background color) to stay in place while I move the text around?
Here is the site and code on jsfiddle: http://jsfiddle.net/HzwV9/embedded/result/
Thanks.
Had a fiddle with your fiddle, here's a result that may help you: http://jsfiddle.net/HzwV9/4/
Some things I noticed:
A few of your HTML tags aren't closed (that's asking for trouble).
No need to use <h1> for your lower links; it's a block element, not an inline element, and also you'll need <a> to make a link later anyway
You can simplify the big list of tags at the beginning by just using * - all!
Hope this helps. Also, footers are notoriously difficult, since CSS doesn't do vertical sizing very well...there's a few solutions out there but they all have something wrong, up to you what you want to be wrong :)
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)
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/
I have this code: http://jsfiddle.net/5RbrL/
As you can see, the text doesn't go over the .box div. I would like to achieve the same, but the .box div should be attached to the bottom of the container.
First thing I tried was setting the container's positioning context to relative and making .box absolute, but this takes it out of the document's flow and text is placed underneath .box, which is exactly what I don't want to happen.
I do not know the height of the container, as it will depend on the amount of text inside it.
Is there any way to make the text fill the entire container, but leave the bottom right square empty (for a background graphic)?
[EDIT]
I apologise for not phrasing my question clearly: I would like the text to wrap around the .box.
Unfortunately what you ask can't be done with pure CSS.
You need a specific height to be able to float/position elements in this manner.
You could get around it be adding more elements, but this isn't preferable as then you'd have to invent some way to spread the last parts of text over to the empty element.
Well you could fake it by adding another element and somehow injecting the last lines of text into it.
Other than that, without a specific height I am not sure there is a real way to do it. HTML should come up with some kind of pathing system :D
__
After some thinking and experimentation I have an easier solution, just include the element within the text (inside the <p>.)
Have you tried moving the image div to the bottom of the container (underneath your text) and then clearing the container with either a clear div or overflow:hidden? http://jsfiddle.net/5RbrL/14/
What exactly do you want to do?
if do you want the box in the bottom, you can put an overflow hidden in the container, and then move the .box to the bottom > something like this >
http://jsfiddle.net/3v2mr/
or the structure can't changes?
i am trying to create a sub navigation which is followed by seperator line (div with a bottom border) which acts as a visual cue.
but the line is appearing below the menu items. not sure how to get it right
http://jsbin.com/ijewi4
not sure about what you want to achieve but if you want to make the div "sit exactly at the bottom of the button tabs":
http://jsbin.com/ijewi4/3
I don't really like the hr element, i always use a div with a border-bottom.
That may work for you too.