How can I keep a label and it's text starting on the same place?
For example, what I want to achieve:
☑️ Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
And here is my attempt:
div {
width:300px;
}
label:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 15px;
width: 15px;
border: 2px solid #666;
border-radius: 3px;
background-color: #fff;
transition: background-color 0.2s;
}
<div>
<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at molestie mi.</label>
</div>
You could use flexbox from CSS like so:
div {
width:300px;
}
/* lines I added */
label{
display: flex;
align-items:flex-start;
}
label:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 15px;
width: 15px;
/* line I added */
flex:none;
border: 2px solid #666;
border-radius: 3px;
background-color: #fff;
transition: background-color 0.2s;
}
<div>
<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at molestie mi.</label>
</div>
Related
I have this image I am trying to replicate:
Basically, I want the border to go around the image and cut off within a certain distance.
I cannot seem to get the border to cut off.
This is the HTML for this quote and image
<div class="quote-container">
<img class="testimonial-img" src="./Photos/StethoscopeVector.png" alt="">
<div class="quote-container-text">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
CSS for Quote and Image
.quote-container {
padding: 5em 0;
height: 100%
}
.testimonial-img {
position: absolute;
margin-left: 11.5em;
margin-top: -3em;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border: 2px solid white;
width: 65%;
padding: 2em;
margin: auto;
}
Which currently looks like this image:
I have tried using shape-outside but it doesn't work and I believe it's because the image is being set to absolute.
This is the stethoscope image. White image, no background.
first of all move your image inside of your container-text and then give border to the right and bottom of it and use pseudo selectors :after and :before for the left border and top border.
for more explanation please refer this snippet.
.quote-container {
padding: 5em 0;
height: 100%;
}
.testimonial-img {
position: absolute;
top: -50px;
left: -13px;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border-right: 2px solid white;
border-bottom: 2px solid #fff;
width: 65%;
padding: 2em;
margin: auto;
position: relative;
}
.quote-container-text:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: calc(100% - 60px);
background-color: #fff;
}
.quote-container-text:after {
position: absolute;
height: 2px;
width: calc(100% - 100px);
right: 0;
top: 0;
content: "";
background-color: #fff;
}
<body style="background-color: #2196F3">
<div class="quote-container">
<div class="quote-container-text">
<img class="testimonial-img" src="https://i.stack.imgur.com/nj8on.png" alt="">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
</body>
for background-image instead of bg-color.
.quote-container {
padding: 5em 0;
height: 100%;
background-image: url('https://media.istockphoto.com/photos/vintage-retro-grungy-background-design-and-pattern-texture-picture-id656453072?k=6&m=656453072&s=612x612&w=0&h=4TW6UwMWJrHwF4SiNBwCZfZNJ1jVvkwgz3agbGBihyE=');
background-repeat: no-repeat;
background-size: cover;
}
.testimonial-img {
position: absolute;
top: -50px;
left: -13px;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border-right: 2px solid white;
border-bottom: 2px solid #fff;
width: 65%;
padding: 2em;
margin: auto;
position: relative;
}
.quote-container-text:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: calc(100% - 60px);
background-color: #fff;
}
.quote-container-text:after {
position: absolute;
height: 2px;
width: calc(100% - 100px);
right: 0;
top: 0;
content: "";
background-color: #fff;
}
<body>
<div class="quote-container">
<div class="quote-container-text">
<img class="testimonial-img" src="https://i.stack.imgur.com/nj8on.png" alt="">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
</body>
Thank You...
Your image has a transparent background, and it appears above the border. To fix that, you can set the border on an absolutely positioned pseudo-element (::before), and use clip-path to remove the top left corner:
.quote-container {
padding: 5em;
background: steelblue;
}
.quote-container-text {
position: relative;
width: 65%;
padding: 2em;
margin: auto;
text-align: center;
color: white;
}
.quote-container-text::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid white;
clip-path: polygon(55px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 55px, 55px 55px);
content: '';
}
.testimonial-img {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
body {
margin: 0;
}
<div class="quote-container">
<div class="quote-container-text">
<img class="testimonial-img" src="https://i.stack.imgur.com/nj8on.png" alt="">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/> adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
An easy way to do this would be to use an image with a background color the same as the background color of the outermost container. Also, it's important to realize that setting something to absolute will make it absolute to the innermost container that has a relative positioning. Note that I used some random image from the web for the example, but you can conform it to your image. If you want your transparent image to have a background, wrap it in a div and set the background of the div.
First move the image inside the quote container text.
<div class="quote-container">
<div class="quote-container-text">
<div id="test-img-container">
<img class="testimonial-img" src="https://cdn3.iconfinder.com/data/icons/medical-174/100/healthy-06-512.png" alt="">
</div>
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
Next set the image to absolute with top and left stylings and make the quote-container-text element to be relatively positioned:
.quote-container {
padding: 5em 0;
height: 100%;
background:steelblue;
}
#test-img-container{
position: absolute;
left:-25px;
top:-25px;
background:steelblue;
}
.testimonial-img {
width:50px;
height:auto;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border: 2px solid white;
width: 65%;
padding: 2em;
position:relative;
margin: auto;
}
Also note that this works best if you specify a hard width to the image so that you can evenly use the margin stylings on the image.
https://jsfiddle.net/dgf1ms8r/7/
I wanted to have multiple tooltips within a text on my website. I have tried to use both span and div tags to make a tooltip with CSS only and it worked for the most purt, however I have trouble positioning the tooltiptext correctly. It is supposed to show up above the hoverable word, but currently it just shows up in the line below on the left. My code:
.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}
.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
}
.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}
<p>Lorem ipsum dolor sit amet,
<span class="tooltip"> consectetuer<span class="tooltiptext"> Some Text</span></span>
adipiscing elit. Aenean commodo ligula eget dolor.</p>
Are there any solutions to this problem?
I suppose you wanted something like this.
p {
padding:10px;
}
.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}
.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
left:50%;
top:-19px;
transform:translateX(-50%);
width:100%;
text-align:center;
}
.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}
<p>Lorem ipsum dolor sit amet,
<span class="tooltip"> consectetuer<span class="tooltiptext"> Some Text</span></span>
adipiscing elit. Aenean commodo ligula eget dolor.</p>
I have 2 floating divs, inner-left and inner-right inside parent container inner-container.
inner-container is set to display: inline-block; to have it's width to be equal of width of it's children.
The problem is, when I resize the window, inner-right div goes down and only then starts to resize itself.
How do I inner-right make it stay on the same line with inner-left, and, in the event of window resize, to resize instead of going down?
HTML:
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="inner-container">
<div class="inner-left"><img src="http://placehold.it/100x100" alt=""></div>
<div class="inner-right"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo orci, rutrum nec feugiat sed, ultrices non dolor. Aliquam laoreet.</strong><br>
Vivamus purus metus.
</div>
</div>
</div>
CSS:
.container {
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
display: inline-block;
}
.inner-left {
float:left;
width: 60px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
float:right;
text-align: left;
padding-left: 10px;
}
JSFIDDLE:
https://jsfiddle.net/acidonyx/naw6ojwe/4/
well just remove float: right from .inner-right and your problem will be solved.
.inner-right {
text-align: left;
padding-left: 10px;
}
to solve your other problem you can do
.inner-right {
overflow: hidden;
text-align: left;
padding-left: 10px;
}
For this you should use flexbox, here with inline-flex to fit your requirement
.container {
display: inline-block;
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
display: inline-flex;
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
padding-left: 10px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="wrap-container">
<div class="inner-container">
<div class="inner-left">
<img src="http://placehold.it/100x100" alt="">
</div>
<div class="inner-right"><strong>Lorem ipsum dolor sit</strong>
<br>Vivamus purus metus.
</div>
</div>
</div>
</div>
You could try floating .inner-right to the left instead, and giving it a width set in a percentage value, like this:
.inner-right {
float:left;
width: 85%;
}
JSFIDDLE
You can use media queries to update the percentage as you need.
Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?
Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle
Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
I'm trying to determine if there is a way to style inline headers that span multiple lines using a background color.
The issue I'm having is with the padding is broken on any lines that wrap.
Example
CSS and HTML
h1 {
display: inline;
padding: 20px;
background: purple;
font-family: sans-serif;
color: #fff;
line-height: 60px;
}
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>
Here is the link to my fiddle
Any help would be appreciated
After looking at the image you posted this is the solution I came up with:
CSS and HTML
.header-container{
position: relative;
background: purple;
overflow: hidden;
padding: 20px;
}
h1 {
display: inline;
font-family: sans-serif;
color: #fff;
line-height: 60px;
}
h1:after{
content: '';
width: 100%;
background-color: #fff; /*your page bg color*/
height: 50px;
position: absolute;
bottom: 0;
margin-left: 20px;
}
<div class="header-container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>
</div>
Here's the updated JSFiddle
try
http://jsfiddle.net/hMMxM/10/
$("h1").each(function()
{
var headerContent = $(this).text().split(' ');
for (var i = 1; i < headerContent.length; i++)
{
headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
}
$(this).html(headerContent.join(' '));
}
);
Why not wrap it in a container with padding? And then remove padding and line height from the h1.
CSS and HTML
div {
padding:20px;
}
h1 {
display: inline;
background: purple;
font-family: sans-serif;
color: #fff;
}
<div>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque</h1>
</div>
Here is a working example: http://jsfiddle.net/hMMxM/5/