I'm trying to make a div correctly appear below another div and not flow into it/overlap it. I tried various ways, can't find a way to make it appear correctly though. Here is the demo: http://s1.mstclan.xyz/mstinfo
And CSS code:
body,
html {
margin: 0;
height: 100%;
width: 100%;
font-family: 'Roboto Slab';
background: #262627;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
.clearfix {
clear:both;
}
.main {
position: relative;
top: 20%;
transform: translateY(-50%);
text-align: center;
#centered {
width: 350px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 2px solid #FFFFFF;
}
#colour {
bottom: 5%;
color: #fff;
font-family: "Roboto", Verdana, Arial, sans-serif;
font-size: 5.4em;
font-weight: 100;
position: absolute;
right: 5%;
}
Thanks in advance.
These two rules are pushing .main down over #centered:
top: 20%;
transform: translateY(-50%);
Removing them corrects the overlap issue.
If you want to maintain some vertical space between .main and the top of the page, add a bit of padding-top.
Related
I have a box that when I choose something , I want to see my choose there (like a shopping cart).
I want the box will be dynamic, which means that there will be no text overflow from the box (No text overflow down)
HTML
<div class="box-s">
<p style="text-align: left; width:49%; display: inline-block;">{{mealService.getName()}}</p>
<p style="text-align: right; width:49%; display: inline-block;">{{mealService.getPrice()}}$</p>
CSS
.box-s{
position: absolute;
top: 10px;
right: 10px;
width: 300px;
height: 350px;
background: #fff;
color: #9e9e9e;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
line-height: 35px;
font-family: "Forte";
font-size: 20px;
}
thanks:)
my solution is in the css file need to change height to min-height
.box-s{
position: absolute;
top: 10px;
right: 10px;
width: 300px;
min-height: 350px;
background: #fff;
color: #9e9e9e;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
line-height: 35px;
font-family: "Forte";
font-size: 20px;
}
Here is the jsfiddle
I want to center content inside div with class main-testimonial-block
I am able to center it using position: absolute;
left: 50%;
transform: translate(-50%);
But when I use this trick, the two boxes inside it, gets a line break. I want the linebreak, only when there is not enough space on the screen, i.e: on mobiles
.main-testimonial-block {}
.snip1359 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 200px;
max-width: 405px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #1e1e1e;
padding-top: 120px;
}
.snip1359 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1359 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1359 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1359 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1359 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1359 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1359 h3 span {
display: block;
font-size: 0.65em;
color: #2980b9;
}
.snip1359 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1359 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}
<div class="main-testimonial-block">
<figure class="snip1359">
<figcaption>
<blockquote>Test message, works!</blockquote>
</figcaption>
<h3>Kamal Chhirang<span>BCA III</span></h3>
</figure>
</style>
<figure class="snip1359">
<figcaption>
<blockquote>asfsfs</blockquote>
</figcaption>
<h3>test test<span>testtttt</span></h3>
</figure>
</div>
You can accomplish this pretty easy using CSS3 Display Flexbox.
For even centering the Figures in Vertical and Horizontal direction.
Here is a pretty good Guide for CSS3 Flexbox
All you need is to modify the main-testimonial-block to act as display: flex and handle its child Elements. You may set a max-height or height for your Figures so they don't overgrow with a black Background, e.g. 110px
I will provide you first with a Answer for your Question:
.main-testimonial-block {
display: flex;
align-items: center; /* centers vertically */
justify-content: center; /* centers horizontally */
/* if you want your Figures to be centered all over the screen
vertically set a height for this class,
your figures can be centered in it.
e.g. height: 100vh for Fullscreen. */
height: 100vh;
}
See below snipped for working copy and alternative centering method.
How to center your content (the modern way using flexbox):
.main-testimonial-block {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.snip1359 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 200px;
max-width: 405px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #1e1e1e;
padding-top: 120px;
}
.snip1359 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1359 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1359 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1359 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1359 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1359 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1359 h3 span {
display: block;
font-size: 0.65em;
color: #2980b9;
}
.snip1359 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1359 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}
<div class="main-testimonial-block">
<figure class="snip1359">
<figcaption>
<blockquote>Test message, works!</blockquote>
</figcaption>
<h3>Kamal Chhirang<span>BCA III</span></h3>
</figure>
</style>
<figure class="snip1359">
<figcaption>
<blockquote>asfsfs</blockquote>
</figcaption>
<h3>test test<span>testtttt</span></h3>
</figure>
</div>
Centering Elements (without css)
First you set text-align: center your .main-testimonial-block to allow the content to be centered. Then you reset the float on the figures with class .snip1359 and set them as display: inline-block. This allows them to behave like block Elements but just take the width as they need.
Downside of this method is, you can only center horizontally. And you may set the text align on the child Elements accordingly. Here is the CSS for this method.
.main-testimonial-block {
display: block;
text-align: center;
}
.snip1359 {
float: none;
display: inline-block;
}
Suggestion
.snip1359 are floated, but are never cleared. You should clear your floating elements to predict Layout issues.
I would change your CSS for handling the content of your figures to handle height, padding, margins properly dynamic, but this is out of topic.
Mobile handling? Take in mind that Users may visit the site in small Devices.
You just need to add margin: 0 auto; to the container as well as the widths.
.main-testimonial-block {
margin: 0 auto;
min-width: 200px;
max-width: 405px;
width: 100%;
}
Also, you have a random </style> in your html that you need to remove.
So i'm trying to have a div with text appear on a parent div when a mouse hovers the parent, all was going well and good until I encountered a problem where the text ("VISIT") was no longer centering when the font size is changed to be larger.
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
As you can see, the text "VISIT" is aligned properly horizontally, but not vertically. Anyone know a solution?
Try using a <span> element instead of a <p> element. So modify your code to this:
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<span class="visit">VISIT</span>
</div>
</div>
</div>
That should help center it or at least get you in the right direction. I tested this on jsfiddle here. You may need to play around with the margin or padding a bit, but the problem you're having is because of the <p> element.
Set a line-height=0 on .visit
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
bottom:0;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height:0;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
Add top:50%; and transform: translateY(-50%); to .slidein-content, erase the bottom:0 from it and add amargin: 0 to .visit (I don't know from where, but it has a 32px top- and bottom-margin, which you have to reset to 0 that way.)
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
top:50%;
transform: translateY(-50%);
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height: 2em;
margin: 0;
}
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
this site has been giving me some issues with the width of some elements with cross-browser compatibility for the tablet and phone styling.
The class is .p_phoneand .p_phone a
.p_phone {
font-size: 20px;
width: 145px;
left: 40%;
margin: 0 !important;
height: 30px;
opacity: 1;
top: -4px;
text-align: center;
color: #fff;
position: relative;
}
.p_phone a {
color: #fff;
background-color: #1968a1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Basically, It needs to match the width of this class, which is a image, which it does on chrome and opera, but on safari, firefox, and edge, it does not match, and breaks to the next line.
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
width: 145px;
margin: 0;
background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png);
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
float: left;
padding: 0;
}
Increasing the width to 150px fixes it, but it is then too wide for the image.
How it needs to be:
Try Changing these class's (have checked them on this link provided by you)
.textwidget {
font-size: 18px;
position: relative;
width: 160px;
margin: auto;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
margin: 0px;
background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
float: left;
padding: 0px;
width: 100%;
background-size: 100%;
}
.p_phone {
font-size: 20px;
margin: 0px !important;
height: 30px;
opacity: 1;
top: 27px;
text-align: center;
color: #FFF;
position: absolute;
width: 100%;
left: 40%;
}
.p_phone a {
color: #FFF;
background-color: #1968A1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
width: 100%;
}
The divs belonging to p_call class and p_phone were not wrapped properly by textwidget class. Hence we have to give two different width's, now since textwidget is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.
Try to add this to your styling block for .p_phone a:
white-space: nowrap;
i have some CSS styling issues. first thing i have a from with 2 inputs and a button. the button is perfect positiond when i resize the window but the inputs dance around, why?
and het h2 this is appended when the button is pushed, the little arrow has to be always in the middle. Also the text needs to be always in the middle of the pop up, horizontal and vertical. Is this posible? and how?
here is the form:
#lname, #fname {
width: 90%;
height: 50px;
margin-top: 6%;
border-radius: 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
text-align: center;
}
#fname {
left: 40px;
top: 18px;
}
#lname {
left: 40px;
top: 84px;
}
#btn {
width: 100%;
height: 50px;
margin-top: 72px;
border-radius: 0 0 5px 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
left: 0px;
top: 128px;
}
here is the pop up window:
h2 {
margin: auto;
margin-top: 100px;
position: relative;
width: 50%;
height: 205px;
padding: 0px;
background: #2F3742;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
font-size: 2em;
color: #8092AA;
margin: 100px auto 0 auto;
padding-top: 6%;
}
h2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 20px 20px;
border-color: #2F3742 transparent;
display: block;
width: 0;
z-index: 1;
top: -20px;
left: 355px;
}
ofcourse you have to see this in action! here you go! http://codepen.io/shiva112/pen/dGMrWB
Why do you use absolute positioning? It's a really mess, but just add for your input elements margin-left:5%. For your heading arrow: h2:after{left:50%; margin-left:-20px; }And if you want to center the text vertical and horizontal, you need to wrap your h2 text content in span or any other element you like. Then set your h2 element style to: { display:table; width:100%; } and his child element to: { displat:table-cell; vertical-align:middle; }