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
Related
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!
First off, i'm not really a good coder. I'm an IT but more of an infra guy but i do understand concepts about coding and maybe a bit of a good grasp about it. I am working with my website and it's under construction using wordpress. In my homepage, i plan to do it simple as it is and decided to use the page builder and use text or HTML (or any language) to maximize it. I hope some one can help me. I would really appreciate it.
Here it is:
homepage
Those images have onmouseover style and was able to do it.. the thing is i can't arrange it horizontally. :( and unable include arrow so they can move left or right to see each images :(.
I know i can also do the same on the icon part the moment someone help me about the concept i wanted.
Your question is pretty ambiguous as to the specific context of the solution.
However, in general the reason why things don't align horizontally when rendered on screen in a browser, is that most elements (including the popular <div>) have a default styling of display: block; which makes it take up the full width of its parent item if the parent itself has the same styling (cascading of this is a different discussion).
The general solution to this is to define the widths of the elements. And they will be placed on the same line to the extent that the widths of the elements allow for more than one to appear on the same line.
One way to solve this is to have elements widths defined in some way. This could be by applying a class with a width: 25%; for example. This would allow for 4 elements with the same width to fit on the line.
Alternately you can also set the display property value of the elements you want on the same line to inline-block. This will make those elements take the width of it's content (unless the content has no width specified). This will cause the elements to flow along the horizontal line like text would (it will re-flow on the resizing of it's parent element), until there are no more contiguous items containing the inline-block display property.
Since your description also showed carousel style navigation for these rows of items, it may be that these are not the full solutions you are looking for.
If you are using the Bootstrap framework, there is a built-in carousel feature which you could use to contain these horizontally aligned elements on separate "pages" of the carousel. Making this solution fully responsive is another challenge altogether.
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.
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
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/