That's the code: https://codepen.io/vendettashakur/pen/rmLYBN
I want to know how can I move the image with the case upper.
body {
background: #333;
}
.wrapper {
padding: -10px;
margin: 10px;
margin-right: 900px;
text-align: center;
}
.treasure {
color: #fff;
display: inline-block;
max-width: 400px;
text-align: center;
padding: 70px;
margin: 20px;
font-size: 25px;
font-weight: bold;
}
.block {
padding: 4px;
background: #7c4dff;;
border-radius: 2px;
margin-left: 4px;
}
.subcase {
color: white;
display: inline-block;
max-width: 2000px;
text-align: center;
font-size: 15px;
font-weight: bold;
padding: -20px;
margin: -76px;
vertical-align: text-top;
}
.treasureimage {
display: inline-block;
max-width: 2000px;
padding: 10px;
vertical-align: text-top;
}
<div class="wrapper">
<p class="treasure">
Treasure Chest
<span class="block">
$1
</span></p>
<br>
<p class="subcase">
10% chance of getting a top-grade game</p>
<br>
<img class="treasureimage">
<img src="https://gamedrop.win/img/cases/case_blue.png" alt="case" style="width:200px;height:128px"> </img>
The image has to be perfectly arranged to look nice. That's all. I tried with padding, margin etc and nothing works for me.
If you are expecting the image to be moved after the text "Treasure Chest" then in your html move the <img> tag after first <p> tag
Related
You can check the outcome here in this link. At the bottom of the page, on the extreme right, there is a circle with an image of a tshirt. The image is not vertically centered properly.
The css of the anchor tag is this:-
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
//line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
The HTML is this:-
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>
How can I center it? For the time being, I am using inline css for the img, which I will later remove to css file.
I would recommend to just keep it simple, let flex handle it for you. All your margins and padding will exacerbate things when your image changes sizes or other common situations
.dfa-tshirt {
background: #2c4762;
}
a {
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
width: 44px; height: 44px;
}
a img {
width: 35px; height: 35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
EDIT: Non-flex solution --
I can't really plan for every scenario you may have, but to answer your question and support most browsers, I would also recommend just moving the actual styling to the image only:
a img {
width: 30px; height: 30px;
padding: 5px;
border-radius: 50%;
background: #2c4762;
}
<a href="https://disabilityloverstshirtbuilders.com/">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
Use this:
img { vertical-align: middle; }
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
img {
vertical-align: middle;
width:35px;
height:35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png">
</a>
The images parent needs to be displayed inline-block
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: inline-block;
}
The inline style should just be
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
I have just checked you site url, you can add two lines for the class as bellow.
display: table;
float: right;
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: table;
float: right;
}
Img tag
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
Not sure what's going on here. I re-seized the image to match the width of the div but somehow it still doesn't align with it. I uploaded the issue to codepen here. Tried to play around with the margins but its still doesn't change the behavior.
.propertyOverview.mapView {
height: 430px;
width: 600px;
background-color: white;
display: inline-block;
border: solid 1px #E8E8E8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
margin-left: 50px;
}
.propertyImage.mapViewPic {
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
.quickDetails {
margin-top: 10px;
}
.propertyOverview p {
margin: 0px 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: .7px;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #272635;
}
.propertyOverview .priceDetail {
font-weight: 900;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #272635;
}
.quickFacts {
border-top: solid 1px #E8E8E8;
padding-top: 5px;
margin-top: 12px;
color: #272635;
font-size: 15px;
}
https://codepen.io/insivika/pen/PEzxPK
As I understand it, I guess you are trying to stretch the image to take up whole width of container. Here is the problem:
<div class="propertyImage mapViewPic">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png"
alt="sample_Property_Map1" alt="">
</div>
.propertyImage.mapViewPic {
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
You have given a class to parent container of the image and targeting it in CSS.
Instead do this. Remove the extra container div
<div class="propertyOverview mapView">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png"
alt="sample_Property_Map1" alt="" class="propertyImage">
</div>
Update your CSS like this.
.propertyOverview .mapViewPic {
width: 600px;
border-radius: 5px 5px 0 0;
}
Issue is #
.propertyOverview.mapView {
height: 430px;
width: 600px;
}
Where width is 600px and the image width is 360px. Thats why the extra space.
.propertyOverview.mapView {
height: 430px;
width: 360px;
background-color: white;
display: inline-block;
border: solid 1px #E8E8E8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
margin-left: 50px;
}
.propertyImage.mapViewPic {
height: 260px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.quickDetails {
margin-top: 10px;
}
.propertyOverview p {
margin: 0px 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: .7px;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #272635;
}
.propertyOverview .priceDetail {
font-weight: 900;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #272635;
}
.quickFacts {
border-top: solid 1px #E8E8E8;
padding-top: 5px;
margin-top: 12px;
color: #272635;
font-size: 15px;
}
.quickFact1,
.quickFact2,
.quickFact3,
.like {
display: inline-block;
margin-left: 20px;
font-family: 'Lato', sans-serif;
}
.like {
margin-left: 110px;
font-size: 23px;
color: #cccccc;
}
.like:hover,
.like:active {
color: #FF3366;
}
<div class="propertyOverview mapView">
<div class="propertyImage mapViewPic">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" alt="sample_Property_Map1" alt="">
</div>
<div class="quickDetails">
<p>5689 Main Ave</p>
<p>Los Angeles, CA 90019</p>
<p class="priceDetail">$556,000</p>
</div>
<div class="quickFacts">
<div class="quickFact1">2 br</div>
<div class="quickFact2">2 bth</div>
<div class="quickFact3">4,000 SF</div>
<div class="like"><i class="fa fa-thumbs-up"></i></div>
</div>
</div>
Aligning an image is same as aligning a text....
If you want your image to be centrally aligned with any div tag as you mentioned then their may be two possibilities that either align it relative to the div tag or you align both div and image together
If you want both div and image to be centrally aligned
use
.propertyImage.mapViewPic {
text-align : center;
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
div{
text-align: center;
}
This will align both of your div and image centrally taking into note that the image is not a child element of the div tag you mentioned, otherwise the image will be aligned with relative to the the div tag
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mm {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
width: 100%;
height: 100vh;
text-align: center;
}
</style>
</head>
<body>
<div class="mm"> <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/1250833953592952166.png"/> </div>
</body>
</html>
You can check this link
.propertyImage.mapViewPic {
display: flex;
align-items: center;
justify-content: center;
}
You can also set text-align: center; for img tag
**if you want full image of div **
.propertyImage.mapViewPic {
overflow:hidden;
}
.propertyImage.mapViewPic img {
width:100%;
}
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
When use auto height with float its not work but when remove float its work fine. how can fix it ?
there is DIV with auto height (aboutus) ,inside it is another div (aboutus-title p) with float left but the content is overflow how can all content inside div with auto height ?
http://jsfiddle.net/haeb0q8d/1/
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1{
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p{
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div><h1>about</h1></div>
<hr>
<div class="aboutus-detail">
<p>
We are a tight knit team of digital thinkers, designers and<br>
developers, working together to create fresh, effective projects<br> delivered personally.
</p>
</div>
</div>
</div>
You have to clear float with clear: both.
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p {
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
.clear {
clear: both;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div>
<h1>about</h1>
</div>
<hr>
<div class="aboutus-detail">
<p>We are a tight knit team of digital thinkers, designers and
<br>developers, working together to create fresh, effective projects
<br>delivered personally.</p>
</div>
</div>
<div class="clear"></div>
</div>
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch