I got a layout that has to be converted into HTML and CSS. A part of the layout requires a text block in a two column layout that leaves its section and not only overlaps into the next section but may also pass through it if the text size reuqires it.
See the layout example:
Layout example
Sections: red, green
Text blocks: blue
Other blocks: yellow
Footer: black
As the text may vary in the overlapping text block, the footer should either be directly below that text block or - in case it does not pass entirely through the second section - directly below the second section. I hope this is understandable.
The challenge is to do this with backwards compatible CSS und HTML so even older browsers may display it correctly. This way I can only think of a fixed height for the first section and a visible overflow but then the footer's position would not grow with the text block.
Does anybody have another idea?
Thank you in advance!
Related
This is a mockup for a blog post where some featured text is located in a container that has the text floating around it and it also appears to overflow outside of the regular container into the parent container.
This is being built in ReactJS as a template with content being populated from Sanity (a JS CMS). So I'm wondering how you'd structure your markup and then your styling?
A few notes worth sharing:
We're calling this "pull text", not sure if there are other common names for it.
The yellow bar at the top is the hero image and indicates the full width of the content
On mobile, the featured text stops floating and acts as a regular block element similarly extending to the far right of the parent container
Blog content varies in length, some might be very short, others might be very long.
My initial ideas are:
Use CSS grid and allow the featured text to flow out of the center column into the far-right column.
Float might work with a negative margin-right
The body increases width if i have enough text on the page to fill the screen
Why does this happen?
See example here:
https://jsfiddle.net/dktzLqfm/2/
uncomment text and see the nav bar move slightly
Inline elements fill the block elements that contain them. When you insert a you are forcing a line break between inline elements. You only want to do this when you have some text needs to be forced to split on two lines. For example:
Burger
King
In general you should only use for this purpose. Instead, if you have blocks of text wrap them in the (when they are paragraphs) or other appropriate block level tags. In this way they will always fill their container and the text will wrap naturally.
Use CSS styles to set the width of the container.
Forcing
overflow-y: scroll;
on Body causes scrollbar to always show, which means the width is consistant across pages
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I've just started playing with html and css and basically I've been learning everything from all the posts here but right now I'm stuck with something I cant seem to figure out how to do through research and decided to post a question for help.
I'm customising a simple portfolio style theme on tumblr, my question is regarding the text caption on the right of the picture
http://www.alvaserigrafia.pt/post/34608701054
I can only get the 3 text lines to display on a single block and I want each one of the lines to have its own block with proportional width. Can this be done with just html and css?
Thanks in advance!
This is where Firebug (Firefox extension), or the developer tools of your favorite browser, will come in handy. If you inspect the text element in question, you'll see that they're each wrapped within <p> tags.
The <p> tag is a block level element, which means it will automatically take up the full width of its parent. It's also what's recommended for...well...paragraphs of text.
Each line is wrapped in a p element. Block level elements usually fill the whole width of the parent container; that's why they are "block" elements.
To get something that shrinks with the content, wrap the text in a span:
<p><span>text</span></p>
The span will only be as large as the text inside.
Alright, so this is basically the usual "how to vertically center with CSS" question, but with some catches.
No Javascript. HTML and CSS only. CSS3 is fine as long as it's reasonably well supported by today's browsers.
The element's content, and therefore height, is not known. It may be anywhere from a few dozen to a few hundred pixels. In the future I might even have a script adding and removing elements inside, so it may change height as the user is interacting with it.
There is other content on the page - a navigation bar at the left and a menu at the top. These need to be accessible.
The approach I've used is the three-container-div method using display: table-cell, as documented at: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html this solves issues 1 and 2, but not 3.
http://imgh.us/vcenter.jpg shows the design and the problem. The yellow box is the innermost container. The red and green dotted boxes around the entire page (which have become somewhat blurred together due to JPEG encoding) are the outermost and middle containers respectively. (The out-of-place footer is a separate issue...)
The problem with this layout is the outer containers cover the entire page, and this makes it impossible to click on the navbar, because it's now "under" those containers. Z-index can move them to the bottom, but then it becomes impossible to click on anything inside the red box, because it's now "under" the page's main content box. (XHTML only allows a single element inside the <body>, so I've just wrapped it all in a <div>.) Even if the outer two containers have z-index: -100 and the inner container has z-index: 200, it still ends up under the main content box for some reason. (I did try various position attributes.)
The only solution I've seen is a new CSS3 property, pointer-events, that would in theory allow me to make events pass through the transparent containers as I'd expect; however this seems to be quite new and not yet supported by most browsers outside of SVG, and I imagine I'd have the same trouble as with Z-index.
I do want the element at the center of the page, not the center of the content area (i.e. ignoring navbars in the calculation of position), so placing the container inside the content area isn't an ideal solution. (I'm using this style on the login page as well, which has no navbars, and it'd look a bit strange if the "centered" elements were centered relative to a navbar that isn't always visible.)
In summary what I need is to center, without using Javascript, an element of unknown height on a page with other content at its edges, without covering any of the content with an invisible layer (and thus making it unclickable).
While this is obviously an old question and the OP has undoubtedly solved this problem, I figured I'd add a link to Chris Coyier's marvelous write-up on how to deal with this issue for future wayfarers in need of a similar solution.
http://css-tricks.com/centering-in-the-unknown/