I am trying to style a block of text so that it is surrounded by a large curly brace on each side (so that each brace takes up the whole height of each side of the element). Here is the HTML:
<blockquote>
<span class="braceleft">{</span>
<p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright">}</span></blockquote>
I should also mention that I am trying to do this in WordPress, which I know can add unwanted tags. If I could get the right CSS for plain HTML, I can hopefully figure out how to strip the unwanted tags.
I can easily change the HTML markup if that would make styling easier.
Remove the <span> and <p> tags. Edit the opening <blockquote> tag to
<blockquote class="addCurlys">. Use this CSS (play with the font-size for the :before and :after pseudoelements):
blockquote {
font-size:1em;
}
blockquote.addCurlys:before {
content: "{";
font-size:10em;
}
blockquote.addCurlys:after {
content: "}";
font-size:10em;
}
Because em is the unit of measurement for the :before and :after pseudoelements, they're linked to the font-size of their parent - the blockquote itself.
I think most browsers now support :: for pseudoelements - I still tend to only use one
Keep in mind that you should restrict content to make it fit inside curly brackets.
You can probably do something like
<blockquote class="clearfix">
<div class="curly-left float-left">
<div class="float-left"> Content here </div>
<div class="curly-right float-left">
</blockquote>
Then in the CSS you set the hight / width and background image for curly left and right.
Float the divs and use clearfix on the blockquote.
I think that should do it.
Here's the code I use for clearfix
/* Clearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
<span class="braceleft" style="float:left; padding: 0 10px">{</span>
<p class="quotation" style="float:left; padding: 0; margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright" style="float:left; padding: 0 10px">}</span>
The way to do it without additional tags would be to use CSS's :before and :after to create the 2 braces and then style them accordingly.
Consider this code (or test the fiddle):
HTML:
<blockquote class="addCurlys">I like curly <br> curls <br/><br/> I really do<br/><br/>I really really do</blockquote>
CSS:
BLOCKQUOTE.addCurlys {background: yellow; position: relative; padding: 0.5ex; 1em}
BLOCKQUOTE.addCurlys:before {
content: ''; border: 1px dotted pink;
position: absolute; right: 100%; top: 0; bottom: 0; width: 30px;
background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100%
}
BLOCKQUOTE.addCurlys:after {
content: ''; border: 1px dotted pink;
position: absolute; left: 100%; top: 0; bottom: 0; width: 30px;
background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100%
}
Here's how it works (for the opening brace): :before creates a pseudo-element. We need to add the content attribute otherwise it won't be rendered 'properly'. The pink border is only there so you can see where it is.
The BLOCKQUOTE is given a position: relative attribute so that the before and after blocks can be positioned relative to it. We give :before a position: absolute and give it a top and bottom value of 0 so that it gets aligned with the blockquote's top and bottom edges. Then we give it a right: 100% so that it gets pushed all the way to the left of the edge (could use left:0 if you want it inside the blockquote, adjust for your tastes). And a width to our liking.
Finally we add a background (since you wanted the curl to stretch vertically) image and specify that we want it to be sized 100% by 100% of the container (:before, i.e. the opening brace). Feel free to change the kitten images to curly braces, I prefer kittens.
Adjust for your needs.
Related
I'm trying to use position: sticky on a rotated element but I get extra space at the top. Also where the sticky element has to stops (at the end of parent) it goes outside.
Notice I need to have control to choose how many pixels put between sticky element and the left window side.
Check the 2 screenshot to understand the 2 problems, and what I want to achieve.
Problem 1: extra space at top
Problem 2: sticky element goes outside at the end of section
I'm using this code:
HTML
<section class="section">
<h1 class="section__title">STICKY</h1>
<div class="container">
<div class="row">
<div class="col [ col-lg-8 offset-lg-2 ]">
<div class="h4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quos illum aperiam officia provident, mollitia at, tempore atque, blanditiis sit optio esse harum officiis voluptas iusto sequi. Magni, reiciendis quidem.
</div>
</div>
</div>
</div>
</section>
CSS
.section__title {
display: inline-block;
transform: rotate(-90deg) translatex(-100%);
transform-origin: 0% 0%;
margin-bottom: 0;
position: sticky;
top: 0;
left: 50px;
}
Here is a Codepen with the entire code: https://codepen.io/anon/pen/KLqJGG
How can I solve this?
Thanks
Problem 1: extra space at top
The stickily positioned element stays in the DOM flow - just like a relative positioned element does. So, hence the space there, which is occupied by the h1.section__title element.
Problem 2: sticky element goes outside at the end of section
It is because, the original height of the h1 element is still considered there, even after rotation.
So, you need to determine the exact width of the sticky header (which then becomes the height of this element after rotation) first and then set this width value for the rotated element's height, as follows:
$section-sticky-header-height: 145px;
.section__title {
display: inline-block;
margin-bottom: 0;
transform-origin: 0% 0%;
position: sticky;
top: 0;
left: 50px;
/* solves problem 1 */
float: left;
/* solves problem 2 */
transform: rotate(-90deg) translatex(-$section-sticky-header-height);
height: $section-sticky-header-height;
}
Codepen: https://codepen.io/anon/pen/arybWZ
Edit:
The problem is that I cannot determine the exact width of the sticky header because the h1 text is variable (the client will insert that text via a CMS). Is there a way to handle this? If possible without Javascript
Got it. You can try this instead, if the height is variable:
<h1 class="h1 mb-0 section__title">
<div class="rotation-outer">
<div class="rotation-inner">
<div class="rotation">
STICKY
</div>
</div>
</div>
</h1>
.section__title {
border: 1px solid; // for demo purpose
position: sticky;
top: 0;
float: left;
.rotation-outer {
display: table;
position: relative;
left: 50px;
.rotation-inner {
padding: 50% 0;
height: 0;
.rotation {
transform-origin: 0 0;
transform: rotate(-90deg) translate(-100%);
margin-top: -50%;
white-space: nowrap;
}
}
}
}
See in action: https://codepen.io/anon/pen/BedREm
There's a very good explanation here for how this works: Rotated elements in CSS that affect their parent's height correctly
Edit 2:
At that link I also discovered the writing-mode: vertical-rl; property (in this answer stackoverflow.com/a/50406895/1252920). Do you think could be a better solution? I applied it in this Codepen: codepen.io/anon/pen/JqyJWK?editors=1100 What do you think?
Yes, another sweet alternative, you can use. :)
Here I changed/optimized it a little bit: https://codepen.io/anon/pen/qGXPPe?editors=1100
However, please note that vertical-lr or vertical-rl is not widely supported. Apparently only on desktop version of Chrome/Firefox/Opera. See here.
So, it's up to you, which one to use. Personally, I wouldn't use writing-mode due to lack of browser support.
Seems to me that your Codepen does not have that padding you mention, therefore I wonder if you removed the default padding and margin of html and body elements.
html, body {
margin: 0;
padding: 0;
}
Let me know if it works or in which browser the padding you mention appears.
I'm working on a little design challenge, and it's getting the better of me right now.
Essentially, it's a material design card, which means when I click it it takes me somewhere else.
The easy route would be (and as it is now) is to surround the content with an anchor. However, in this case I ONLY want the anchor text to be "My keyword".
Here's the simple html output:
<a class="post-card md-card">
<div class="md-card-title aspect-16x9">
<div class="title-large"></div>
</div>
<div class="md-card-content">
<div class="sup-text"></div>
</div>
</a>
So, the 2 things I want to do are:
Only have the keyword inside the anchor
Be able click the whole thing (the link covers the entire outer div)
Here's the stuff that make it more difficult:
The blue box on top has an aspect ratio set, which means its not a
constant height
The text inside the blue box is centered using Flexbox
The white box isn't a fixed height either
Here's how the aspect ratio is calculated:
.AspectRatio(#widthRatio:16; #heightRatio:9; #useableWidth:100%) {
&:extend(.clearfix all);
overflow:hidden;
max-width:#useableWidth;
&::before {
content:"";
float:left;
padding-top:percentage(#heightRatio / #widthRatio);
}
}
So I need to keep the keyword text where it is but make the whole thing clickable.
I've been playing around with the idea an absolutely positioned anchor on top, which I can do but I can't get it to stretch to the bottom without moving the text.
Any CSS gurus got some ideas?
This should give you a good starting place...
.post-card {
background-color: #63d9ff;
box-sizing: border-box;
position: relative;
width: 200px;
}
.post-card * {
box-sizing: inherit;
}
.post-card .md-card-title {
bottom: 0;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.post-card .md-card-title .content-prop,
.post-card .md-card-title .content {
display: inline-block;
vertical-align: middle;
}
.post-card .md-card-title .content-prop {
padding-top: 56%;
width: 0;
}
.post-card .md-card-title .content {
padding: 1rem;
width: 100%;
}
.post-card .space-prop {
display: block;
padding-top: 56%;
}
.md-card-content {
background-color: grey;
padding: 1rem;
}
<div class="post-card md-card">
<a class="md-card-title aspect-16x9" href="#">
<span class="content-prop"></span><!--
--><span class="content">My Keyword</span>
</a>
<span class="space-prop"></span>
<div class="md-card-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris ut eros consectetur efficitur vitae at leo.
</div>
</div>
JSFiddle
So the explaination...
The whole post card is positioned relative, the anchor is then positioned absolute within it. The anchor is given a top, left, bottom, and right value of 0 which makes it cover it's parent container.
The content-prop and space-prop are given no height but have a top padding of 56%. This means that their top-padding value is 56% of their width which works out at a 16:9 ratio. The space banner is used here to add a empty gap at the top of the post card to make room for the anchor.
Both the content-prop and the content elements are set to display inline-block and vertical aligned to middle. Because the prop is taller than the content, the content floats in the centre. The HTML comment between these two elements eliminates white space so that the content div can be set to 100% width even when the prop is on the same horizontal row.
How can I constrain the width of a child within an inline-block element?
Assume that I am targeting newest browsers.
Given an element displayed using inline-block, how can I constrain a child element so that it does not scale beyond the parent's witch.
In practical terms, I am trying to built a system that will take an image of any width and keep the caption constrained to the width of the parent container:
without having to specify width
without using jQuery or other DOM manipulation
CSS
<style>
div {
width:800px;
background-color:silver;
text-align: center;
}
figure {
display:inline-block;
background-color: orange;
padding: 1em;
margin: 0;
}
figcaption {
background-color:pink;
}
</style>
HTML
<div>
<figure>
<img src="http://i.techrepublic.com.com/blogs/11062012figure_a.gif" />
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</figcaption>
</figure>
</div>
In my opinion adding the following code can help you:
figure {width: 100%;}
img {width: 100%;}
In any case if you want to do this only with CSS, then you need play with percentages.
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile.">
<img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" />
</a>
</div>
<span class='print-link'></span>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Is an example of the HTML
With the CSS being:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
http://codepen.io/atomworks/pen/algcz
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)
As mentioned by #Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
To get around this, you can instead use margins:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
<div class="clear"></div>
And CSS:
.clear
{clear:both;}
I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
HTML
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
Here's a trick that might work for some:
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
There is an easy fix to this problem. It's using white-space: nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
Dropdown link here
</li>
<ul>
Image Examples
Without Nowrap enabled
With Nowrap enabled
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.
I have three div tags, a wrapper and two side by side within the wrapper:
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
I want to create the condition where the <div id="left"> tag is variable height, stretching the wrapper.
As a result, the <div id="right"> will expand to whatever height the wrapper has become.
What CSS will accomplish this? Thanks!
Perhaps I'm late to the party, but it really is simple to do what you describe with pure CSS. The trick is to make #right absolutely positioned and give it a top and bottom of 0. This will stretch it to whatever height #left is giving #wrapper. Here's a complete working example — #left is green, #right is blue, and #wrapper is red, but never seen because it's completely covered by #left and #right. Try removing the bottom: 0; line to see what it looks like without it.
<html lang="en">
<head>
<title></title>
<style type="text/css">
#wrapper {
background: #fdd;
position: relative;
width: 300px; /* left width + right width */
}
#left {
background: #dfd;
width: 200px;
}
#right {
background: #ddf;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
<p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
</div>
<div id="right">
<p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
</div>
</div>
</body>
</html>
If you're going to go with Jquery, then you could do this.
$(document).ready(function(){
var leftHt = $('#left').height();
$('#right').css("height",leftHt);
});
It isn't css, but it's pretty simple and should work. CSS just wouldn't be able to easily do this, to my knowledge at least.
If you don't already have the Jquery API, just past this above the Javascript.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>
Working example here:
http://michaelpstone.net/development/dynamic-height.html
There isn't really a good way for #right to match whatever #left has become. The best way to do this is probably:
<div id="wrapper">
<div id="right"></div> <!-- note that right comes before left -->
<div id="left"></div>
</div>
Then have this style:
#left, #right {
width: 50%; /* Adjust as needed */
#right {
float: right;
}
This way, #right won't affect the page length but #left always will. However, #right still won't stretch to the length of #left. I don't know what reason you have for it needed to stretch to #left, but I assume it's something cosmetic. I would either try to apply it from #left or from #wrapper instead if you want it to repeat all the way down.
For example, if you want the #left white and #right red:
#left {
background: #fff;
}
#wrapper {
background: #f00;
}
The best practical solution is a table - see [this SO question] (Make Two Floated CSS Elements the Same Height).
Of course you may have your own reasons for not using tables...
If you are trying to do backgrounds or something and thus need the same height, I'd recommend tables. It's much easier. If you must use divs and floated divs, particularly, this article presents about the only way I've seen that works well. It's for three columns, but you can modify it for two:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm