I'm now working on a website. I tried several times to place the card over the picture. Can you have any suggestions?https://i.stack.imgur.com/goigA.png
one way is set minus margin-top for example: margin-top : -100px
.tag {
position: relative;
left: 0px;
background-color: green;
z-index: 1000;
margin-top: -50px;
width: 100px;
height: 100px;
margin-right: 20px;
}
.d-flex{
display: flex;
}
<div class="container">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png">
<div class="d-flex">
<div class="tag">Featured</div>
<div class="tag">Featured</div>
<div class="tag">Featured</div>
<div class="tag">Featured</div>
</div>
</div>
Related
I want to make this:
stacked cards
the html would look like so:
<div class="container>
<div class="top-card>
<div class="card-content">
...
</div>
</div>
<div class="bottom-card>
</div>
</div>
I am having trouble styling this so that the height of the entire card adjusts automatically according to the content inside the top card. Thank you in advance.
you can use a combination of box-shadow and display: inline-block to accomplish what you are trying to do. I have updated the answer. Here is the code:
.grandparent {
display: inline-block;
position: relative;
}
.parent {
display: inline-block;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.shadow {
margin-left: -7px;
margin-top: -7px;
background: pink;
z-index: -100;
border: 1px solid green;
}
.empty {
opacity: 0;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent shadow">
<div class="child empty"></div>
</div>
</div>
Bit of a beginner's question here - I'm sure it's been asked many times over but not knowing how to phrase the question means I've found it hard to find answers.
I'm trying to create 3 "cards" in a div which are responsive. I would like the margin between the cards to stay at 20px.
This is what I've come up with so far - the contents of the card container should add up to 965, so I'm not sure what's causing it to break and spill out, unless I'm doing something else wrong.
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: block;
float: left;
}
.card {
width: 33%;
min-width: 295px;
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Thanks for any help, or redirecting to a similar topic.
You can use flex like this https://jsfiddle.net/3gg8ngm2/2/:
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: flex;
}
.card {
width: 33%;
/* min-width: 295px; */
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Or you can also use display-inline-block to your .card class.
There is a solution based on display: flex
.container {
width: 600px;
}
.card-container {
display: flex;
background: yellow;
}
.card {
width: calc(33% - 20px);
margin-right: 20px;
}
.card:first-child {margin-left:20px}
.one {
height: 200px;
background-color: #333;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one">1</div>
</div>
<div class="card">
<div class="one">2</div>
</div>
<div class="card">
<div class="one">3</div>
</div>
</div>
</div>
Add this
.card {
width: 30%;
float:left;
min-width: 295px;
}
and will resolve your issue.
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
I'm trying to get the icon in the second wrapper div to cross up and dissect the previous wrapper div but the half that is supposed to appear in the div above will not appear. Even with a higher z-index. If I change the wrapper div overflow or position styles, it throws everything off. What is the correct way to do this? Here is the html and the css:
.wrapper {
position: relative;
width: 100%;
padding-bottom: 40px;
height: auto;
clear: left;
overflow: auto;
z-index: 1;
}
.process {
width: 100%;
height: 100%;
z-index: 1;
}
.process .icon {
position: relative;
height: 123px;
width: 123px;
margin-top: -60px;
border-radius: 50%;
z-index: 3;
}
<div class="wrapper">
<div class="page-heading">
<div class="col-md-6 col-centered">
</div>
</div>
</div>
<div class="wrapper blue">
<div class="process">
<div class="icon blue border-blue col-centered">
</div>
<div class="col-md-4 col-md-offset-1">
<div class="entry-content">
</div>
</div>
<div class="col-md-7 padding-right-100">
</div>
</div>
</div>
There is no table display necessary. What you need are actual heights for all elements - auto height won't work with no content, and 100% height only works if the parent container's height ( in this case body) is also defined. I made the body 100% and the two wrappers 50% .
The circle DIV has been centered horzontally with margin: 0 auto and pushed up using top: -60px while having: position: relative. The z-indexes remained unchanged 1 for the wrappers, 3 for the circle/icon (could also be 2).
There is also a codepen at http://codepen.io/anon/pen/KgNXmj
html, body {
height: 100%;
margin: 0;
}
.wrapper {
width: 100%;
height: 50%;
z-index: 1;
background: green;
}
.process {
width: 100%;
height: 100%;
z-index: 1;
background: blue;
}
.process .icon {
position: relative;
top: -60px;
margin: 0 auto;
height: 123px;
width: 123px;
background: #f00;
border-radius: 50%;
z-index: 3;
}
<div class="wrapper">
<div class="page-heading">
<div class="col-md-6 col-centered">
</div>
</div>
</div>
<div class="wrapper blue">
<div class="process">
<div class="icon blue border-blue col-centered">
</div>
<div class="col-md-4 col-md-offset-1">
<div class="entry-content">
</div>
</div>
<div class="col-md-7 padding-right-100">
</div>
</div>
</div>
After much research and hair-pulling, I found a solution that works. Not sure WHY, but the parent div had to have display:table and the child div display:table-row. If anyone knows why this works, definitely feel free to share.
I have a fixed header and a image below the header.
The image has a property position: fixed.
Now for some devices the image is not in the center as It should be.
Here's the fiddle for it.
The left side has more spaces than the right hand side.
Also above the image, I want to add a p tag which is not showing up for some reason.
Please let me know what's wrong here.
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<P class="step1description" See price</p>
</div>
</div>
</div>
</div>
</div>
Checkout this solution:
body, html {
margin:0;
padding:0;
}
.content-wrapper {
position: relative;
overflow: hidden;
width: 100%;
background-color: #333230;
}
.content-wrapper .center-logo {
position: fixed;
width: 100%;
top: 125px;
left:0;
text-align: center;
margin: 5px 0 15px;
z-index: 1001;
background-color: #333230;
}
.content-wrapper .center-logo img {
margin: 0 auto;
}
.center-logo p.step1description {
position: relative;
top: -30px;
width: 220px;
text-align: center;
color: #fff;
font-size: 12px;
margin: 0 auto;
}
.description {
margin:30px 0 30px 0 !important;
}
.content-wrapper .content {
text-align: center;
width: 100%;
}
.new-class{
padding-bottom: 134px;
top: 134px;
}
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<p class="step1description"> See price</p>
</div>
</div>
</div>
</div>
</div>
You have some typos on html and css! - Here you can find a working fiddle: http://jsfiddle.net/sebastianbrosch/cxumhp9k/1/
Add left:0 on .content-wrapper .center-logo
.content-wrapper .center-logo { left:0;}