I have 3 divs inside of the body, and I need them to stay centered at all times, without overlapping.
I would post the link to the page but it is currently being hosted locally for testing purposes.
body {
background-color: #c8dbdd;
background-image: url("http://www.splashpage.dev/wpcontent/uploads/2016/01/splashbackground.jpg");
background-position: center center;
display:inline-block;
}
#title {
left: 50%;
top: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-top: 80px;
margin-bottom: 20px;
display:block;
position:absolute;
display:inline-block;
}
.carousel {
left: 50%;
top: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
height: 210px;
width: 950px;
background-color: rgba(255, 255, 255, 0.24);
position:fixed;
padding: 10px;
outline: #fff solid thin;
display:table;
clear:both;
display:inline-block;
}
.text {
font-family:'Ubuntu', sans-serif;
color: #ffffff;
font-size: 12px;
text-align:center;
margin-bottom: 3px;
line-height: 25px;
}
.bottom {
font-family:'Ubuntu', sans-serif;
position:fixed;
bottom:20px;
width:100%;
text-align:center;
color: #fff;
font-size:12px;
letter-spacing: 5px;
}
a {
color: #fff;
text-decoration: none;
}
<body>
<div id="title">
<div style="text-align: center"></div>
</div>
<div class="carousel" id="carousel">
<div class="text" id="text"><font size="4px"></div>
</div>
<div id="bottom">
<div class="bottom" style="text-align: center">
THE DESTINATIONS
THE MISSION
CONTACT
CAREERS
</div>
</div>
</body>
I have tried all kinds of position, float, clear, and margin combinations and I can get them centered but I can not keep them from overlapping.
Try the following CSS code. The display:table; line is commented and the height of the .carousel is also increased to height:442px; and the hyperlink text colour is changed to white as the background is black and it doesn't appear.
#import url(//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
body {
background-color: #000;
background-image: url("http://www.splashpage.dev/wp-content/uploads/2016/01/splashbackground.jpg");
background-position: center center;
}
#title {
//float: center;
margin-top: 80px;
}
.carousel {
margin: 0 auto;
height: 442px;
width: 950px;
background-color: rgba(255, 255, 255, 0.24);
// position:relative;
padding: 10px;
outline: #fff solid thin;
//display: table;
}
.text {
font-family:'Ubuntu', sans-serif;
color: #000;
font-size: 12px;
text-align:center;
margin-bottom: 3px;
line-height: 25px;
}
.bottom {
font-family:'Ubuntu', sans-serif;
// position:fixed;
bottom:20px;
width:100%;
text-align:center;
color: white;
font-size:12px;
letter-spacing: 5px;
}
a {
color: white;
text-decoration: none;
}
Related
I am trying to display a particular div content with particular menu but my code is not showing like that. For the reference attached screenshot.(only with CSS). I don't want to use JS. When I am hovering on particular menu then all div content are displaying. And design is not looking good.
Here is my code:
<style>
.menu {
height: 24%;
width: 600px;
margin: auto;
border: 1px solid RGBA(0, 0, 0, 0.4);
font-family: calibri, monospace;
}
div.menu .button {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #333;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #ff0000;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
.menu .content {
position:absolute;
display:none;
width: 440px;
height: 23%;
margin-left: 155px;
border: 1px solid #e7e7e7;
}
.menu .content:hover {
left:150px;
top:0px;
color:black;
display:block;
}
.menu .button:hover:focus:active ~ div.content {
display: block;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto;
}
</style>
<body>
<div class="menu">
<div tabindex="0" class="button">Home</div>
<div class="content">
“A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
</div>
<div tabindex="0" class="button">Contact</div>
<div class="content">
“Contacts added but not one is worthy enough to remain as their priority.”
</div>
<div tabindex="0" class="button">About</div>
<div class="content">
“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
</div>
</div>
</body>
</html>
This is my image link.
Please try this,
.menu {
height: 24%;
width: 600px;
margin: auto;
border: 1px solid RGBA(0, 0, 0, 0.4);
font-family: calibri, monospace;
position:relative;
}
div.menu .button {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #333;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #ff0000;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
.menu .content {
position:absolute;
display:none;
width: 440px;
opacity:0;
margin-left: 155px;
border: 1px solid #e7e7e7;
}
.menu .button:hover+.content {
display: inline-block;
opacity:1;
transition:display 3s;
top:0;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto;
}
<body>
<div class="menu">
<div tabindex="0" class="button">Home</div>
<div class="content">
“A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
</div>
<div tabindex="0" class="button">Contact</div>
<div class="content">
“Contacts added but not one is worthy enough to remain as their priority.”
</div>
<div tabindex="0" class="button">About</div>
<div class="content">
“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
</div>
</div>
</body>
I have the following code in the body section of my HTML index file.
<div class="titleMessage">
<div class="heading">
<p class="main">NAME HERE</p>
<p class="sub">Software Engineer</p>
</div>
</div>
Below is my CSS code:
.titleMessage {
position: absolute;
width: 100%;
height: 250px;
top: 50%;
z-index: 5;
text-align: center;
margin-top: -125px;
}
.titleMessage .heading p{
color: #080808;
text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
font-weight: 100;
letter-spacing: 7px;
background: #F5F5F5;
background-size: contain;
}
.titleMessage .heading .main{
font-size: 50px;
}
.titleMessage .heading .sub{
font-size: 23px;
}
Webpage:
The resulting webpage looks strange. Specifically, I want the background color on my text which is set to #F5F5F5 to not stretch across the entire screen.
In fact, I only want the size of the background rectangle behind text to be a little bigger than the size of the actual text.
How do I do this?
You can put span tags around those texts and apply the background only to that span (spans are inline elements, which is why they won't stretch across the available width). Additionally (as shown below) you can add some padding to have more control over how much the background will extend:
.titleMessage {
position: absolute;
width: 100%;
height: 250px;
top: 50%;
z-index: 5;
text-align: center;
margin-top: -125px;
}
.titleMessage .heading p{
color: #080808;
text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
font-weight: 100;
letter-spacing: 7px;
}
.titleMessage .heading p span{
background: #F5F5F5;
padding: 6px 12px 0;
}
.titleMessage .heading .main{
font-size: 50px;
}
.titleMessage .heading .sub{
font-size: 23px;
}
<div class="titleMessage">
<div class="heading">
<p class="main"><span>NAME HERE</span></p>
<p class="sub"><span>Software Engineer</span></p>
</div>
</div>
I make some changes to your CSS :
.titleMessage {
margin-top:10rem;
display:flex;
align-items:center;
justify-content:center;
width: 100%;
z-index: 5;
}
.heading p{
color: #080808;
text-align:center;
text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
font-weight: 100;
letter-spacing: 7px;
background: #F5F5F5;
}
.titleMessage .heading .main{
font-size: 50px;
}
.titleMessage .heading .sub{
font-size: 23px;
}
EDITED JSFIDDLE
The goal to display a transition upward height when the button is hovered, but this line of CSS .btn-position:hover ~ .bg-transit { height: 430px !important;} seems it expands downwards instead upward. Is there a way to transition UPWARD?
I dont want to add any JS to it.
HTML
<div class="career-wrapper-positions">
<div class="section-positions">
<div class="position-wrap">
<div class="position-box" id="video_interpreter">
<div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
<div class="position-tited-top-bg"></div>
<div class="position-box-info">
<div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
<div class="position-subheader" id="subheader1">positions</div>
<div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
<div class="btn-position">
<button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
<div class="bg-transit"></div>
</div>
</div>
</div>
</div>
CSS
.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex; margin-top: 175px; }
.position-box { width: 209px !important; height: 330px; display: block; margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important; height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2; }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px; }
.position-box-info { padding-top: 10px; }
/* this is the button to trigger a new height size transition of the background box */
.bg-transit { width: 209px !important; height: 338px; display: block; background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height; transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}
.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}
.position-btn:hover ~ .position-box-info selects all siblings .position-box-info that come after a .position-btn:hover. Since .position-box-info is actually the parent of the .position-btn element, nothing gets selected. In fact, you can't select a parent from a child, so you either have to add a class with javascript or change your HTML.
Also, you seem to miss a </div> closing tag.
I have a div which has an image as the background and some text over it in an other div. Here is the HTML
.profilePic{
width:190px;
height: 190px;
border-radius: 50%;
background: #FFF;
float: left;
margin:12px;
background: #ededed;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:hover{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
color:#FFF;
}
.name{
font-family: Tahoma;
font-size: 1.5em;
color: red;
margin-top: 42%;
display: none;
}
.profilePic:hover .name {
display:block;
}
<div class='profilePic one'>
<center>
<div class='name'>Name</div>
</center>
</div>
With this code, when I hover on the div named profilePic, the div gets a filter applied on top of it. I dont what the filter on the text, i.e, the div named name but only on the profilePic div. How can I do it?
You need to separate the text from the picture.
Use a container div with a div inside that has the image with background-image.
Use another div inside to display the text
Apply all the effect on container hover
DO NOT use margin-top in percentage but instead, if you want to center the text, add position:relative; to the container and this to the text:
position: absolute; to positioned it.
top: 50%; to place it at 50% of the left
left: 50%; to place it at 50% of the top
transform: translate(-50%, -50%); to pull it at 50% of its width and height to the left and top because when you do left: 50%: for example, it will put the left border of the element at 50% and not the middle of it.
So you need to pull it left a 50% of its proper width to have it horizontally centered according to its parent.
.profilePic{
display: inline-block;
width:190px;
height: 190px;
border-radius: 50%;
background: #FFF;
margin:12px;
background: #ededed;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePicContainer {
position: relative;
display: inline-block;
}
.profilePicContainer:hover .profilePic{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
color:#FFF;
}
.profilePicContainer:hover .name {
display: block;
}
.name{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Tahoma;
font-size: 1.5em;
color: red;
display: none;
}
<div class="profilePicContainer one">
<div class="profilePic"></div>
<div class="name">Name</div>
</div>
You can use a pseudo-element as an overlay above the background and below the text and apply CSS on it. Doing this you will only affect the background and not the text.
Here is an example where the overlay will also contain the same background image with the filter applied on it and I simply show it on hover:
.profilePic {
width: 190px;
height: 190px;
border-radius: 50%;
background: #FFF;
float: left;
text-align:center;
margin: 12px;
background: #ededed;
position:relative;
overflow:hidden;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
transition:0.5s;
filter:grayscale(100%);
opacity:0;
}
.profilePic:hover::before {
opacity:1;
}
.profilePic:hover {
color: #fff
}
.name {
font-family: Tahoma;
font-size: 1.5em;
color: red;
margin-top: 42%;
display: none;
position:relative;
z-index:1;
}
.profilePic:hover .name {
display: block;
}
<div class='profilePic one'>
<div class='name'>Name</div>
</div>
You can also simply use a background color with opacity:
.profilePic {
width: 190px;
height: 190px;
border-radius: 50%;
background: #FFF;
float: left;
text-align:center;
margin: 12px;
background: #ededed;
position:relative;
overflow:hidden;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
transition:0.5s;
}
.profilePic:hover::before {
background:rgba(0,0,0,0.7);
}
.profilePic:hover {
color: #fff
}
.name {
font-family: Tahoma;
font-size: 1.5em;
color: red;
margin-top: 42%;
display: none;
position:relative;
z-index:1;
}
.profilePic:hover .name {
display: block;
}
<div class='profilePic one'>
<div class='name'>Name</div>
</div>
I have an image wrapper in which i want to show a button on mouse hover with a black background. I tried to do it but it added a white space to the container at the bottom, i dont know why.
HTML:
<div class="tour-box-wrapper" style="margin-right:45px">
<div class="image-wrapper">
<img src="http://static.teambuy.ca/deal/540x254/other/28165573-2014-03-03-28144457-boxhouse-10b.jpg" />
<a><button type="button" class="view-deal-button" >View Deal</button></a>
</div>
</div>
CSS:
.tour-box-wrapper
{
width:45%;
border: 1px solid #BBB;
padding:2px;
background-color: #E7E7E7;
background-image: -webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#E7E7E7));
background-image: -webkit-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -moz-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -ms-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -o-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: linear-gradient(to bottom,#FFFFFF,#E7E7E7);
float:left;
display:block;
}
.image-wrapper
{
border:1px solid #E0E0E0;
padding:2px;
display: block;
}
.image-wrapper img
{
width:100%;
}
a.grayscale {
display: inline-block;
background: black;
padding: 0;
}
a.grayscale img {
display: block;
}
a.grayscale:hover img
{
opacity: 0.5;
}
.view-deal-button
{
border: none;
text-align: center;
border-radius: 6px;
text-align: center;
z-index: 999;
position: relative;
left: 343px;
bottom: 36px;
background-color: #CD277B;
padding:6px;
}
.view-deal-button a
{
color:white;
font-size:14px;
}
Note ignore the Javascript which i know will be used to display button on mouse enter but i just want to fix this extra space below the image and want to bring the button to the bottom right corner of the image.
JSFiddle
Your button having a position of 'relative' is what's creating the space that the bottom. It's 'mass' is affecting its parent container. If you don't want it having any 'mass', try positioning it 'absolute' relative to the parent.
This happens because of the relative positioning and the bottom property.
.view-deal-button {
background-color: #CD277B;
border: medium none;
border-radius: 6px;
bottom: 36px;
left: 343px;
padding: 6px;
position: relative;
text-align: center;
z-index: 999;
}
Moving the button right and under the image.
.view-deal-button {
border: none;
border-radius: 6px;
text-align: center;
float: right;
margin: 5px 0;
background-color: #CD277B;
padding:6px;
}
http://jsfiddle.net/b4r3p/3/
Try this css for button
.view-deal-button
{
border: none;
text-align: center;
border-radius: 6px;
text-align: center;
z-index: 999;
position: relative;
left: 343px;
bottom: 36px;
background-color: #CD277B;
padding:6px;
margin: 0% 0% 0% -80%;
}
check this fiddle