I am trying to add a supplementary corner to my design and one should go under the content box regardless the size of the content in that box.
As you can see there the corner fits ok for the 2nd box but not for the first.
Here is a fiddle http://jsfiddle.net/cnmWh/
HTML code here:
<div class="title_container">
<div class="hook_bottom_left"></div>
<div class="title ">
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
</div>
<div class="title_container">
<div class="hook_bottom_left"></div>
<div class="title ">
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
CSS here:
.title_container {position: relative; min-height: 112px; padding-top: 25px; padding-bottom: 5px; display:block;}
.title { position: absolute; background:url("img/hash_light.png"); border: 1px solid #c8c8c8; padding: 15px; z-index: 10;
width: -moz-calc(100% - 16px);
width: -webkit-calc(100% - 16px);
width: -o-calc(100% - 16px);
width: calc(100% - 16px);
margin-top: 8px;
margin-left: 8px;
overflow: hidden; }
.hook_bottom_left{position: absolute; left:0; bottom:17px; border-left: 8px solid #000; border-bottom:8px solid #000; width: 40px;height: 40px;}
Have a look at this JsFiddle
I took away min-height, made the text position:relative; and made it bottom:0.
The min-height was going to not let the hook go to the bottom if it was smaller than 122px, which is why it 'dangled' below it when on bottom:0;.
The text was position:absolute which meant that they weren't taking up any width (causing all sorts of overlapping errors). As soon as they were position:relative, the hook could get their correct height.
JsFiddle with :before element
This one takes away
<div class="hook_bottom_left"></div>
and instead inserts the 'hook' using :before on .title_container.
This means you no longer have to use a div for the hook, and .title_container classes will have it automatically.
Related
I am really going crazy with this problem:
I want to put a circle with a bottom border, in such a way that when having a mobile view (at least a width of 350px or less) it is centered, but it does NOT affect the margin of the view.
The test I am doing it in Angular but to avoid complexity I am testing it with this simple HTML code:
<html>
<head>
<title>Responsive Test</title>
</head>
<body>
<style type="text/css">
.home-circle-gray-bg {
border-radius: 50%;
border: 0.05rem dashed #000000;
width: 530px;
height: 530px;
position: absolute;
margin-top: 250px;
background-color: transparent;
right: 20%;
margin-left: 0px;
margin-right: 0px;
}
#media (max-width: 650px) {
.home-circle-gray-bg {
left: 50% !important;
transform: translate(-50%,-50%) !important;
}
}
.block {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
</style>
<div class="home-circle-gray-bg"></div>
<div class="block">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
What is the problem?
I'm seeing this simple code in Firefox and having a width resolution of 350px, a horizontal scroll appears at the bottom of the screen (actually it appears much earlier, I would say that at 530px, which is the width of the circle), the div that contains the text is adapted according to the resolution, the left part of the circle is perfect, that is, it does not occupy a space but is behind it, as if it were a background and when reducing the width it goes more to the left, I want this same effect on the right side of the circle.
On the right side of the circle is the problem, it seems to always show and not move more to the right (like the left part) until it is hidden or seen less, I think this is caused by the "left: 50%", but then how can I solve the problem?
Testing this same code in Chrome is a totally different result, the circle shrinks according to the width of the screen.
Why is the result different in both browsers?
Is it possible to get what I want in both browsers?
Thanks!
After an exhaust search in Internet, I have found a solution and works in both browsers: Position:absolute causes horizontal scrollbar
The HTML code:
<html>
<head>
<title>Responsive Test</title>
</head>
<body>
<style type="text/css">
.home-circle-gray-bg {
border-radius: 50%;
border: 0.05rem dashed #000000;
width: 530px;
height: 530px;
position: absolute;
margin-top: 250px;
background-color: transparent;
right: 20%;
margin-left: 0px;
margin-right: 0px;
}
#media (max-width: 650px) {
.home-circle-gray-bg {
left: 50% !important;
transform: translate(-50%,-50%) !important;
}
}
.block {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
.wrapper {
width: 100%;
position: relative;
overflow: hidden;
height: 100%;
}
</style>
<div class="wrapper">
<div class="home-circle-gray-bg"></div>
<div class="block">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
The behaviour is the same in Firefox and Chrome.
I'm just starting to learn HTML and CSS and I ran into this mystery.
In my HTML file, the flow indicates that my <img> should be rendered on the webpage BELOW the <p> element of class "lorem".
However, you can see in the screenshot below that it appears somewhere in the middle of the screen.
This is a screenshot of how my problem looks in the browser.
All the code I've written is purely to test out things for myself, so I realize it can look ridiculous for anyone else. :)
Thank you!
.rectangle {
display: inline-block;
width: 200px;
height: 300px;
border: 1px solid seagreen;
padding: 10px;
margin: 20px;
}
img {
width: 300px;
background-color: blueviolet;
padding: 50px;
}
.lorem{
border: 1px solid red;
background-color: aqua;
padding: 40px;
margin: 0;
}
<p>Even though I am writing all of this on a single line, <h1>this bit here should appear on a separate line.</h1>Did it work?</p>
<div class="rectangle">
<p>I’m a rectangle!</p>
</div>
<div class="rectangle">
<p>So am I!</p>
</div>
<div class="rectangle">
<p>Me three!</p>
</div>
<img src="./background.jpg" alt="background">
<p class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
First of all, you shouldn't put a title in a paragraph. If you want it big and bold, you can stlye it with css. I know its just practice, but semantics are quite important.
Is this what you wanted?
body{
font-family:'Work Sans',sans-serif;
line-height:1.5;
text-align:center;
}
.rectangle {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid seagreen;
text-align:center;
padding: 1rem;
margin: 1rem;
}
.rectangle:first-child{
margin-left:0;
}
.wrap {
display: flex;
}
img {
background-color: lightcoral;
padding: 2.5rem;
margin-bottom: 0.5rem;
}
.lorem {
border: 1px solid pink;
background-color: lightgreen;
padding: 40px;
margin: 0;
}
<body>
<p>Even though I am writing all of this on a single line,
<h1>this bit here should appear on a separate line.</h1>Did it work?</p>
<div class="wrap">
<div class="rectangle">
<p>I’m a rectangle!</p>
</div>
<div class="rectangle">
<p>So am I!</p>
</div>
<div class="rectangle">
<p>Me three!</p>
</div>
</div>
<img src="./background.jpg" alt="background">
<p class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
I'm trying to prevent an image and text from overlapping with each other in html. Currently this is what I have:
But when the screen size gets smaller, the text and image intercept. I'm looking to make it so the text conform to the boarders of the image. This is what's happening now:
Lastly, this is my CSS
.image {
width: 500px;
margin-left: auto;
display: block;
padding-top: 10%;
padding-right: 10%;
}
.text {
font-size: 22px;
padding-top: 10%;
max-width: 700px;
position: absolute;
}
Your issue is with absolute positioning. Whenever you use position:absolute you remove that element from the source flow. You can try to remove the absolute positioning and then try something like the following:
Codepen example
<div class="parent">
<div class="text">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
<div class="image">
Place your image here.
</div>
And CSS:
.parent {
display: flex;
max-width: 1000px;
margin: 0 auto;
}
.text, .image {
padding: 15px;
}
.image {
width: 500px;
}
.text {
width: calc(100% - 500px);
}
This question already has answers here:
How to add border to a container with transparent gaps in between
(4 answers)
Closed 7 years ago.
For a client we are building a new website. They want a effect where the title is in the border of a text-area. How can this be done with CSS/HTML.
The effect I want to create looks like this:
In this image the background is green but in some cases this is a image. So a overlay with a background color in the text won't work.
Any ideas?
Here is an example I made for you. You just need to apply position: absolute; to the contact div and then set up where you want it to overlap the next div. http://jsfiddle.net/tzrhcmb4/
<div class="main">
<div class="container">
<div class="text-header">CONTACT</div>
<div class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
css:
.main { background: green; width: 500px; height: 300px;}
.container { width: 100%; height: 100%; padding-top: 20px;}
.text-header { color: white; text-align: center; top: 30px; width: 110px; left: 35%; position: absolute; background: green;}
.text { margin: 10px; text-align: left; padding: 20px 10px 20px 10px; border: 2px dashed lightgreen;}
This question already has an answer here:
How to make gutter between columns in a CSS grid system
(1 answer)
Closed 8 years ago.
I'm creating a webpage that should have 3 columns with whitespace between them.
Here's how it should look:
Here's how it actually looks:
How can I fix my code so that the webpage has the gaps between the columns?
I would like a 3 column design that is responsive (and covers all webpage wide when below than 600px wide screen). I don't want 3 absolute measured columns.
Note that I have 1 pixel at the end of the third div: that's intentional, since that's how it looks when viewed with a browser.
Here's my HTML:
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
And my CSS:
#container {
width: 960px;
}
.squares {
width: 33.33%;
height: 250px;
background: red;
}
What you are trying to achieve is already build with bootstrap, but still here is a working JSFIDDLE.
CSS:
#container{
width: 960px;
}
.squares{
width: calc(98% / 3);
margin-right: 1%;
height: 250px;
float:left;
background: red;
}
.squares:last-child{
margin-right: 0%;
}
Add a margin to your Square.
.squares{
width: 33.33%;
height: 250px;
background: red;
margin: 10px;
}
I'm assuming since your divs are touching that you're using a framework that has border-box. Here's a fiddle:
.squares{
width: 33.33%;
padding: 5px;
float: left;
}
.squares div {
background: red;
padding: 5px;
}
Basically what you did was right. The issue is that the grid needs padding and an interior object. Always use padding for grids, not margins, so the math is much easier. It is much easier to write 33% with whatever padding you want vs. 30% with 3% margin-right. Imagine if you decided to change the margin and you would have to do the math again.
You want to create two new classes called first and last.
Add the class first to the first div and the class last to the last div.
Apply a general left and right padding to the divs and give them a box-sizing of border-box
Then remove the padding using the classes first and last.
Here is the jsfiddle of it all in play: http://jsfiddle.net/b20n6rvt/4/
<div id="container">
<div class="squares first">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="squares">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="squares last">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
CSS:
#container{
width: 960px;
}
.squares{
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
float: left;
}
.squares div {
background: red;
}
.first {
padding-left: 0px;
}
.last {
padding-right: 0px;
}
Two ways to achieve this:
1) Using display: table:
#container {
width: 960px;
display: table;
}
.squares {
width: 33%;
height: 250px;
background: red;
display: table-cell;
border-right: solid 25px #fff;
}
.squares:nth-child(3) {
border: 0;
}
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
2) Using floats:
#container {
width: 960px;
}
.squares {
width: 29%;
height: 250px;
background: red;
margin: 3%;
float: left;
}
.squares:nth-child(3) {
margin-right: 0;
}
.squares:first-child {
margin-left: 0;
}
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
You are well on your way. What you really want is to have these squares being containers as well. Then they can be a third width including padding, which will become your "gap", usually called gutters.
This might be a bit of an overkill, but it's a simple guide to the basics of a grid system. (This technique is used by bootstrap, though that's a tad more advanced.)
There are a couple of steps to make this grid system work.
Use the invaluable * { box-sixing: border-box; } to make a box model where padding and borders are included in your elements width and height.
Make a container/wrapper which will hold your content.
Use .row to hold your .column. The .row should have 100% width + your gutter witdh / 2 as negative margins. (They will be next to eachother.)
Clearfix your floats.
Demo
CSS
.squares {
width: 33.3333%;
display-:inline-block;
float;left
}
.squares + .squares {
padding-left:5px;
}
The create your red color block inside it
That square will act as grid.
Or you can replace padding by margin, but then you will need to have equal width squares where width of all squares + margin = width of parent container.