I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.
Related
I am trying to have a number of circles that have background images and texts side by side. And I want when hovering over the circles the opacity of the image to change and also the text to disappear. Also, I don't want the underline sign for links to be shown. But I have a number of problems.
Here is my CSS code:
.ccont {
display: inline-block;
margin: 10px;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
justify-content: center;
align-items: center;
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(http://deepchains.com/images/team.png);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.2;
}
.circle__text {
padding: 1px;
background-color: none;
}
.circle:hover:after {
opacity: 1;
}
.ccont:hover {
font-size: 0;
}
and here is the HTML code:
<center>
<div class="circle">This is <br>Text1</div></div>
<div class="ccont" style="font-weight: bold"><div class="circle">Text2</div></div>
</center>
Here are the issues:
At the beginning when the page loads I see that because of a I get underline links under the images as is shown here:
When I hover over the left image, the text disappears but also the circle gets deformed as is shown here:
Finally when I hover over the right image its text correctly disappears as is shown here:
So here are my questions:
I have been trying to use text-decoration: none; in different places but I always see the underline marks under the images as they have links. How can I remove them?
Why when hovering over the left image, the image gets deformed, but the right image does not get deformed? The only difference is that the left image text has a <br> in it.
How can I have different background images for the left and right circles?
UPDATE:
I applied #chriskirknielsen solution and I get this:
The two images are not aligned correctly. It seems that the underlines are aligned and as two image texts have different heights it pushes two images to different vertical locations. If we can remove the underlines maybe this can be resolved?
It seems your sizing issue occurs because of box-sizing. Adding * { box-sizing: border-box; } at the start of your CSS fixes this issue because the padding from the text is taken into account when calculating the layout.
EDIT: OP's issue seems to be triggered by the font-size, so maybe just make the font transparent is the best idea?
.center {
text-align: center;
}
.ccont {
display: inline-block;
margin: 10px;
}
.cclink {
text-decoration: none;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
background-size: 0 0;
background-position: -9999px -9999px;
justify-content: center;
align-items: center;
overflow: hidden;
display: inline-flex;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.2;
}
.circle__text {
padding: 1px;
background-color: none;
}
.circle:hover:after {
opacity: 1;
}
.ccont:hover {
color: transparent;
}
<div class="center">
<a href="http://www.url1.html" class="cclink">
<div class="ccont" style="font-weight: bold">
<div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">This is
<br>Text1</div>
</div>
</a>
<a href="http://www.url2.html" class="cclink">
<div class="ccont" style="font-weight: bold">
<div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">Text2</div>
</div>
</a>
</div>
PS: Your HTML code is not very compliant to today's standards. The <center> tag is deprecated, and tags should be lowercase.
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
This is piece of bigger project but what happens is that use of negative margin on one element (.pag) takes the other element (#ar_wr_in) out from floated box (#ar_wr)?
It works fine in Firefox but does not in Chrome or IE.
HTML:
<body>
<div id="ar_wr">
<div class="pag">pagination</div>
<div id="ar_wr_in">
<section class="ar">isdjs fjs odifj</section>
</div>
</div>
</body>
CSS:
body {
color: #f00;
background: #191919;
font-family: LucidaGrande, Helvetica, Arial, sans;
}
section {
display: block;
float: left;
}
section {
margin: 0px;
}
#ar_wr {
width: 59%;
padding: 1%;
background: #ffddff;
border-radius: 5px;
margin-right: 1.5%;
}
#ar_wr {
float: left;
margin-top: 80px;
}
#ar_wr_in {
width 100%;
float: left;
margin-top: 17px;
}
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: relative;
}
.ar {
width: 100%;
margin-bottom: 40px;
position: relative;
background: #ddffff;
}
Here is JSFiddle
Is there some fix or hack for this to make it look as in Firefox?
Thank you
If you make your pagination element have absolute positioning then it can happily sit outside it's parent without affecting other non-absolute elements that come after it:
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: absolute;
}
Strange that Firefox treats it differently, but I would actually expect the result that you see in Chrome from using relative positioning like that.
I am trying to add text to center of the page. Even if a user try to resize the page, text in the page should be aligned to center. I am close to the solution but missing some position in the code. Here is my code. Any help would be highly appreciated.
html code
<div class="errorMessageContainer">
<div class="errorMessageIcon">
:(
</div>
<div class="errorMessageHeaderContainer">
<div class="errorMessageHeader">
I am trying to center me in a page.
</div>
<div class="errorMessageText">
<span class="errorMessageSubHeader">I want to float.</span>Even if page is restored or forced minimized. <span class="errorContact">Please </span> help me on this.
</div>
</div>
</div>
css code
body {
background-color: #666666;
}
.errorMessageContainer {
width: 620px;
margin: 200px 0 0 300px;
}
.errorMessageIcon {
font-family: Segoe UI Semibold;
font-size: 72px;
color: #29abe0;
display: inline-block;
vertical-align: top;
}
.errorMessageHeaderContainer {
display: inline-block;
width: 500px;
padding: 20px 0 0 30px;
}
.errorMessageHeader {
font-family: Segoe UI Light;
font-size: 28px;
color: #ffffff;
}
.errorMessageSubHeader {
font-weight: bold;
}
.errorMessageText {
font-family: Segoe UI;
font-size: 13px;
color: #ffffff;
width: 450px;
}
.errorContact a {
color: #ffffff;
text-decoration: underline;
}
this will put your message container in center of the page :
.errorMessageContainer {
width: 620px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -310px;
margin-top: -50px;
}
see the fiddle
Try this:
.errorMessageContainer {
width: 620px;
margin: 200px auto 0;
}
You can use margin: 200px auto 0 auto; for the .errorMessageContainer see fiddle here: http://jsfiddle.net/DSATE/
.errorMessageContainer{
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The best approach is to set up your display and margins correctly. Do not set values for this otherwise it will fail if the div changes in size. heres an example I made up using a div wrapper and the value display:table-cell
DEMO http://jsfiddle.net/kevinPHPkevin/DSATE/1/
I am working on WP using a template and I'm trying to get a button to float outside the main container. I went through some already posted questions here, but no luck.
I have tried with padding, margin, overflow, etc. The one thing that seems to work is by setting negative margin, but in that case the div is hidden by the main container.
Here's the HTML:
<div class="purchase_options_meta clearfix">
<div class="purchase_options">
<div id="deal_attributes_wrap" class="section ">
</div>
<div class="buy_button gb_ff font_x_large">
</div>
</div>
</div>
And here's the CSS I'm using:
.container.main {
width: 980px;
padding: 20px;
overflow: visible;
}
.purchase_options {
position: relative;
}
.buy_button {
position: absolute;
background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button12.png) no-repeat center;
color: white;
height: 100px;
width: 375px;
left: -54px;
top: -16px;
}
.button {
background-color: transparent;
color: #ffffff;
}
.button:hover {
background-color: transparent;
color: #cccccc;
}
.buy_button a {
font-weight: bold;
font-size: 29px;
font-family: arial;
padding: 12px;
display: block;
white-space: nowrap;
position: relative;
margin: 15px 0 0 50px;
}
.buy_button a span {
position: absolute;
right: 33px;
padding: 0 5px;
}
And here's a link to the page. My problem is with the top red button at the left.
I would greatly appreciate any help!
Just in case that helps someone in the future:
I had to add this part of CSS in my code:
#deal_single.clearfix:after {
clear: both !important;
}
Just to be more specific '#deal_single' is the page id.