This is my sample html code:
.questions-table-main {
border-right: 3px solid rgb(242,244,247);
width:189px;
float:left;
padding-right:30px;
padding-top:10px;
display:table;
height: 200px;
}
.questions-table-main-category {
/* padding-top: 20px; */
text-align : center;
}
.questions-table-main-firm {
height:85px;
background-color:rgb(242,244,247);
text-align: center;
display: table-row;
vertical-align: bottom;
}
<div class="questions-table-main">
<div class="questions-table-main-category">
<img src="img/communication.png" alt="communication"/>
</div>
<div class="questions-table-main-firm">
<div class="questions-table-main-firm-image">
<span class="questions-table-firm-helper">
<img src="img/allianz.png" alt="allianz" /></span>
</div>
</div>
</div>
Let me clear this mess. I need to put <div class="questions-table-main-firm"> on the bottom of <div class="questions-table-main">. Next thing I need to do is that <div class="questions-table-main-category"> must be above <div class="questions-table-main-firm"> with 27px space between them. I was trying to do that with padding-top, but it's impossible because i have some different images with different dimensions. Now <div class="questions-table-main-category"> is on the top of parrent div. How to fix that ?
You can do it by using position: absolute; and top. For bottom div use top: 0 so that it says at top and for first div use top: 112px including height(85) and margin 27.
.questions-table-main {
border-right: 3px solid rgb(242,244,247);
width:189px;
padding-right:30px;
padding-top:10px;
display:block;
height: 200px;
position: relative;
}
.questions-table-main-category {
text-align : center;
height:85px;
top: 112px; /* height 85 + 27 margin*/
position: absolute;
}
.questions-table-main-firm {
height:85px;
background-color:rgb(242,244,247);
text-align: center;
top: 0px;
position: absolute;
}
<div class="questions-table-main-category">
<img src="https://placehold.it/189x85" alt="communication"/>
</div>
<div class="questions-table-main-firm">
<div class="questions-table-main-firm-image">
<span class="questions-table-firm-helper">
<img src="https://placehold.it/189x85" alt="allianz" /></span>
</div>
</div>
</div>
You need to remove the display table atributes, do it as follows:
.questions-table-main {
width:189px;
float:left;
padding-right:30px;
padding-top:10px;
height: 200px;
}
.questions-table-main-category {
/* padding-top: 20px; */
text-align : center;
margin-bottom: 27px;
}
.questions-table-main-firm {
background-color:rgb(242,244,247);
text-align: center;
vertical-align: bottom;
}
<div class="questions-table-main">
<div class="questions-table-main-category">
<img src="http://placehold.it/350x150" alt="communication"/>
</div>
<div class="questions-table-main-firm">
<div class="questions-table-main-firm-image">
<span class="questions-table-firm-helper">
<img src="http://placehold.it/350x150" alt="allianz" /></span>
</div>
</div>
</div>
Related
hi will be available in the shape of circle. I got the code for responsive circle with text but the problem is this hat i am not able to inline two circles in one line . I tried float:left; as well as display:inline-block; but both doesn't work for me. Display:inline-block; inline the circles but the text inside it overlaps.
THIS is my HTML:
/*------NAV--BAR--*/
* .fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
/*--copied-code---*/
.circle {
position: relative;
display: block;
margin: 2em 0;
background-color: transparent;
color: #222;
text-align: center;
}
.circle:after {
display: block;
padding-bottom: 30%;
width: 30%;
height: 0;
border-radius: 50%;
background-color: #ddd;
content: "";
}
.circle__inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
height: %;
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
#media (min-width: 480px) {
.circle__content {
font-size: 2em;
}
}
#media (min-width: 768px) {
.circle__content {
font-size: 4em;
}
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Global</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Friends</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Classroom</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Games</div>
</div>
</div>
</div>
</div>
</div>
I want two or three circles on every line depending upon the user screen size.
Sorry if i did something wrong. This is my first quest. in stackoverflow.Thnks in advance.
Check this, adjust the browser size to view the responsiveness. You can also change the circle dimensions and font size depending upon your media-size.
If you need the full site to be responsive, I suggest to implement it with the popular CSS framework "Bootstrap", its pretty easy - Bootstrap-Grid-HowItworks
.fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
.circle-wrapper {
float: left;
margin: 10px;
}
.circle {
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #f2f2f2;
border-spacing: 10px;
}
#media (min-width: 480px) {
.circle{
height: 150px;
width: 150px;
font-size: 30px;
}
}
#media (min-width: 768px) {
.circle {
height: 150px;
width: 150px;
font-size: 30px;
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle-wrapper">
<div class="circle">Global</div>
</div>
<div class="circle-wrapper">
<div class="circle">Friends</div>
</div>
<div class="circle-wrapper">
<div class="circle">Classroom</div>
</div>
<div class="circle-wrapper">
<div class="circle">Games</div>
</div>
<div class="circle-wrapper">
<div class="circle">School</div>
</div>
<div class="circle-wrapper">
<div class="circle">College</div>
</div>
</div>
</div>
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
I am trying to get text to display under my overlapping images. I have two images side by side which are to be voted on so the "VS" image overlaps the other two images in the middle which works perfectly. When I try to get text to display under each image to be voted on, however, it seems to display towards the top behind the images, not underneath as it would normally.
Here's a codepen of what it does at the moment:
http://codepen.io/anon/pen/qdemaz
html:
<div align="center">
<div id="vs">
<img id="png1" src="/puppies/8.jpg" /><p
class="left">username<br>Description<br>Puppies name</p>
<img id="png2" src="/images/vs.png" />
<img id="png3" src="/puppies/8.jpg" /><p
class="right">username<br>Description<br>puppies name</p>
</div>
</div>
css:
#png1 {
position:absolute;
top:30px;
left:0;
z-index:0;
}
#png2 {
position:absolute;
top:100px;
left:260px;
z-index:1;
}
#png3 {
position:absolute;
top:30px;
left:315px;
z-index:0;
}
#vs{
position: relative;
width: 620px;
height: 310px;
}
p.left{
position:absolute;
top:315px;
left:0px;
z-index:4;
text-align:left;
}
p.right{
position:absolute;
top:315px;
left:315px;
z-index:4;
text-align:left;
}
I think I see what you're looking to do. You're setup isn't the best. I reworked the HTML/CSS, is this what you want:
http://codepen.io/anon/pen/pJMeGr
a{
display: inline-block;
vertical-align: top;
position: relatve;
z-index: 9;
}
img{
display: inline-block;
border: 1px solid #333;
}
.left{
margin-right: -15px;
}
.right{
margin-left: -10px;
}
#vs{
text-align: center;
}
.vs{
display: inline-block;
vertical-align: top;
position: relative;
z-index: 10;
border: 1px solid #000;
margin-top: 8px;
}
<div>
<div id="vs">
<a class="left" href="#"><img src="http://placehold.it/120x120" />
<br>puppies name
<br>username
<br>Description
</a>
<img class="vs" src="http://placehold.it/100x100" />
<a class="right" href="#"><img src="http://placehold.it/120x120" />
<br>puppies name
<br>username
<br>Description
</a>
</div>
</div>
So i have an image, I have a text box with a transparent background that is overlaid on the image (FYI it contains the price of the item and if it is onsale).
I would like the text box to "fit" the width of the image it is over.
Currently the text is wider than the image. I've tried adjusting the width but that only seems to shrink it and move the box out from being over the image.
http://jsfiddle.net/Ggqy4/
Here is what I'm aiming to create. Notice the text is only as wide as the image.
http://imgur.com/zKzjIyF
The red box inside the box is on the first item on the left, the girl in the vest.
HTML:
<div class="date-container">
<div class="date-heading" style="display: block;">Friday, Oct 11, 2013</div>
<div class="items-purchased-container">
<DIV style="position: absolute; top:10px; left:355px; width:200px; height:25px">3</span> items purchased</p>
</div>
<div class="total-spend-container">
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
<div class="description">
<p>Sex shirt in sparkly black <span class="price">Price $500</span>
</p>
</div>
</div>
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
<div class="description">
<p>Sex shirt in sparkly black <span class="price sale">Sale Price $500</span>
</p>
</div>
</div>
CSS:
body {
background:#00000;
text-align:center;
}
.product {
display:inline-block;
position:relative;
margin-right:10px;
vertical-align:top;
}
.product img {
display:block;
max-width:100%;
}
.description {
position:absolute;
background:rgba(255, 255, 255, 0.75);
top:60%;
;
text-align:center;
width:100%;
}
.description span {
display:block;
margin-top:10px;
padding:5px;
}
.sale {
background:red;
}
Here is a JSFiddle file for your review: CLICK HERE
As mentioned above by Giovanni Silveira, your images contain a large left/right border. You can either crop in your favorite image editor or you will have to manipulate your code to accommodate the added area to your liking.
I did add some changes to force the appearance you were looking for, however if you want a less intrusive set up then it would be prudent to change you images to fit your needs.
To view how the page was set up, just add
border: 1px solid #ccc;
to your product and description classes to see the flow and gain a better understanding of the images impact on flow of document.
Hope this helps.
Here is the code:
HTML:
<div class="orderinfo">
<div class="date">Friday, Oct 11, 2013</div>
<div class="purchaseitems">3 items purchased</div>
</div>
<div class="total-spend-container">
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
<div class="description">
<p>Sex shirt in
<br>sparkly black</br> <span class="price">Price $500</span>
</p>
</div>
</div>
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
<div class="description">
<p>Sex shirt in
<br>sparkly black</br> <span class="price sale">Sale Price $500</span>
</p>
</div>
</div>
CSS:
body {
background: #00000;
text-align: center;
}
.orderinfo {
position: relative;
width: 100%;
min-width: 650px;
font-family: "Courier", sans-serif;
font-size: 20px;
}
.date, .purchaseitems {
float: left;
width: 49%;
padding-bottom: 10px;
}
.total-spend-container {
min-width: 650px;
}
.product {
position: relative;
display: inline-block;
width: 300px;
height: 250px;
}
.product img {
background-position: center;
background-size: cover;
}
.description {
position: absolute;
background: rgba(255, 255, 255, 0.75);
font-family: "Courier", sans-serif;
font-style: italic;
top: 50%;
text-align: center;
left: 25%;
width: 50%;
}
.description span {
display: inline-block;
margin-top: 10px;
padding: 3px;
}
.sale {
background: red;
color: white;
}
I have two image links that need to be centered with a little shifting.
My problem is that one link cause the other to be unclickable.
DEMO - The right one can't be clicked
HTML:
<div class="my_class" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
css:
#my_id1
{
left: 120px;
}
#my_id2
{
right: 120px;
top: -157px;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img{
border:1px solid red;
}
Here is the modified code:
<div class="my_class" id="my_id1"> <a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2"> <a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
And the CSS:
#my_id1 {
float: left;
left: 150px;
}
#my_id2 {
float:right;
right: 150px;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img {
border:1px solid red;
}
You need to float those containers : http://jsfiddle.net/GbzSQ/5/
Your first div overlaps over the other, so you need to float them and then use margins to position them properly.
.my_class{
float:left;
width:200px;
}
The divs of the links are just on top of each other.
So the mouse does not "see the bottom link".
Try using display inline in the divs with defined width.
I would use some floats or display:inline-block 's.
I made an update of your Fiddle with the Floats.
http://jsfiddle.net/cfknoop/GbzSQ/7/
#my_id1 {
float:left;
}
#my_id2 {
float:right;
}
The wrapper needs to be cleared with an clearfix or something.
Try not to use negative positioning, it's bad practice and will cause issues such as this. Try defining the size of the containing divide, position that, then float the divs within this.
I'll put together a quick fiddle to show you.
http://jsfiddle.net/GbzSQ/23/
And here's the HTML:
<div class="container" id="container">
<div class="my_class1" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" alt="1" />
</a>
</div>
<div class="my_class2" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" alt="2" />
</a>
</div>
</div>
And the CSS:
.my_class2 {
text-align:center;
float: right;
position:relative;
display: block;
margin: 0 auto;
}
.my_class1 {
text-align:center;
float: left;
position:relative;
display: block;
margin: 0 auto;
margin-right: 20px;
}
img{
border:1px solid red;
}
.container {
width: 440px;
height: 200px;
display: block;
margin: 0 auto;
}