I am trying to align my 40px40px image to bottom right. I've tried this, worked fine, but if I use another back image, it doesn't fit to bottom right. How can I avoid this problem ?
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
UPDATE:
That said, you should use a mix of CSS and HTML instead:
HTML:
<div class="container">
<div class="picture-container">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" class="background-picture" \>
<div class="avatar">
<img src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
</div>
<div class="container-text">
<div>Fragments by textile artist Lorenzo Nanni (2001)<br />More text</br />Goes here</div>
</div>
</div>
CSS:
.container {
width: 179px;
margin-right: 9px;
padding-bottom: 10px;
background-color: white;
border: 1px solid #c9d2d6;
padding: 4px;
padding-bottom: 7px;
border-radius: 4px;
position: relative;
}
.container .picture-container {
position: relative;
min-height: 60px;
}
.container .background-picture {
width: 179px;
}
.container .avatar {
position: absolute;
z-index: 5;
bottom: 10px;
right: 5px;
width: 40px;
height: 40px;
border: 1px solid #333333;
}
.container .avatar img {
width: 40px;
}
.container .container-text {
border-radius: 6px;
width: 179px;
border-top: 0px;
position: relative;
background-color: white;
}
.container .container-text div {
text-align: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 3px;
}
This also fixed the problem in the comment below.
DEMO
Old post, that explains why you have a problem in the first place and doesn't account for taller text:
In
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
instead of
top:73%;left:75%; then use bottom and right like so: bottom: 60px;right: 10px;
Full example:
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;bottom: 60px;right: 10px;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
DEMO
You have to put it inside a container, then make the image a block to avoid the space under it. Note that using properties right & bottom are a better solution than left and top.
http://jsfiddle.net/Ka4r4/
Related
My main goal is to have a simple frame (as you can see) with few text lines and images. The thing I want to do, is make this frame flexible. By that I mean - if I change picture inside of it (bigger -> smaller) the frame should change. It should stay fixed.
Online editor: https://www.bootply.com/Y09Zn1wir3#
HTML:
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
I tried to add height property to such as:
.single-image{
...
height: 405px;
}
Result: https://www.codeply.com/go/2s2hH3nbju
But it doesn't look correct, as bottom text floats somewhere up.
I need a solution for different type of image sizes. Any ideas?
You need to set the height of .img-wrap, too.
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
height: 405px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
height:250px;
overflow:hidden;
}
Try to add this new line in your css code.
.img-wrap{
min-height: 275px;
}
it will looks like this
Output
Try using flex
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
align-self: bottom;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
.images-wrap{
display: flex;
}
.single-image-wrap {
height: 100%;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row images-wrap">
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</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've tried margin-bottom and min-height on my body tag with the same height as the footer. The footer container called .contact is not respecting the div .store-items above it. I'm looking for a clean fix, eventually I will learn about flex boxes but I am suspicious there is a simple error in my strategy. Thanks, here is the code:
/*=================
Start of Rules after reset
===================*/
body{
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
/*
================================
Body
================================
*/
.store-items {
margin-left: 20px;
margin-right: 20px;
width:900px;
max-height: 900px;
border: solid 1px;
position: absolute;
padding: 30px;
padding-left: 65px;
display: block;
}
.store-items .item-1-3 {
display: inline-block;
width:30%;
margin-right: 20px;
margin-bottom: 20px;
height:300px;
border: solid 1px;
background-color:#333333;
position: relative;
}
.store-items .item-1-3 img{
height: 190px;
width: 150px;
position: relative;
width:100%;
}
.store-items .item-1-3 h3{
text-align: center;
color:white;
position: relative;
top: 7px;
}
.store-items .item-1-3 p{
position: relative;
left:170px;
top:15px;
border:solid 1px black;
width:40px;
background-color: white;
z-index: 1;
}
/*
================================
Footer
================================
*/
.contact {
position: relative;
width:100%;
left:0;
bottom:0;
height:70px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>The Viking Store</title>
<link rel="stylesheet" type="text/css" href="vkhmp.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body>
<header>
<div class="navbar">
Viking Store
<div class="cart">
<img src="resources/noun_355_cc.svg" alt="shopping cart" style="width:32px; height:32px;">
Your Cart
</div>
</div>
<div class="header-image">
<img src="resources/viking_ship_background_medium.jpg" alt="viking ship background">
<h1>The Viking Store</h1>
</div>
<div>
<div class="tagline1">
<p>The Best Viking Gear on the Whole Web</p>
</div>
<div class="tagline2">
<p>Choose from among our lineup of fine axes below</p>
</div>
</div>
</header>
<div class="store-items">
<div class="item-1-3">
<h3>The Silent Night</h3>
<p>$200</p>
<img src="resources/axe_silent_night_small.jpg" alt="The Silent Night">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Dainty Daisy</h3>
<p>$100</p>
<img src="resources/axe_dainty_daisy_small.jpg" alt="The Dainty Daisy">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Double Trouble</h3>
<p>$340</p>
<img src="resources/axe_double_trouble_small.jpg" alt="Double trouble">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Whispering Wind</h3>
<p>$225</p>
<img src="resources/axe_whispering_wind_small.jpg" alt="Whispering Wind">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Cunning Cutter</h3>
<p>$200</p>
<img src="resources/axe_cunning_cutter_small.jpg" alt="The Cunning Cutter">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Kingmaker</h3>
<p>$400</p>
<img src="resources/axe_kingmaker_small.jpg" alt="The Kingmaker">
<div>
<input type="submit" value="Add to Cart">
</div>
</div>
</div>
<div class="pagination"></div>
</body>
<footer>
<div class="contact">
<h2>Contact</h2>
<img src="resources/noun_14614_cc.svg" alt="horn call" style="height:32px; width:32px;">
1-000-000-000
<img src="resources/noun_631009_cc.svg" alt="scroll email" style="height:32px; width:32px;">
<h2>contact#vikingstore.com</h2>
</div>
</footer>
</html>
As K. Daniek wrote, you closed the bodytag before the footer, Apart from that, there is a lot of unnecessary code - no need for all this absolute and relative positioning - use margins for creating distances and leave the position settings at the default.
Here's a codepen: http://codepen.io/anon/pen/BLJxyk
Here's the changed CSS:
body {
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
.store-items {
margin-left: 20px;
margin-right: 20px;
width: 900px;
max-height: 900px;
border: solid 1px;
padding: 30px;
padding-left: 65px;
}
.store-items .item-1-3 {
display: inline-block;
width: 30%;
margin-right: 20px;
margin-bottom: 20px;
height: 300px;
border: solid 1px;
background-color: #333333;
position: relative;
}
.store-items .item-1-3 img {
height: 190px;
}
.store-items .item-1-3 h3 {
text-align: center;
color: white;
margin-top: 7px;
}
.store-items .item-1-3 p {
left: 170px;
margin-top: 15px;
border: solid 1px black;
width: 40px;
background-color: white;
}
.contact {
height: 70px;
display: block;
}
I am trying to align multiple divs (buttonNav) to the bottom of a container div (lowerNav). I have read every question on here regarding this and tried the CSS and it does not seem to work. I tried this one: Stacking Divs from Bottom to Top amoung others, hoping someone can help.
Here is my html, I have 5 of the lowerNav containers each with multiple buttonNavs that I want to align to the bottom of the lowerNav here is the code from one, they are all set up the same way:
<div class="lowerNav">
<img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
<div class="buttonNav">
<p>Order Literature</p>
</div>
<div class="buttonNav">
<p>Downloads</p>
</div>
<div class="buttonNav">
<p>Email Sign-Up</p>
</div>
<div class="buttonNav">
<p>Meet Your Rep</p>
</div>
<div class="buttonNav">
<p>Ask a Question</p>
</div>
</div>
Here is my CSS:
.lowerNav {
width: 160px;
height: 325px;
background-color: #e3dfd7;
border: 3px solid #383431;
float: left;
margin: 15px 8px 0px 8px;
text-align: left;
display: table-cell;
vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
}
.lowerNav img {
padding-top: 12px;
}
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
}
.buttonNav p {
text-align:center;
padding-top: 14px;
}
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
}
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
}
Since the container (.lowerNav) has a fixed height and you know the size of its content this is quite easy to do with absolute positioning.
HTML:
<div class="outer">
Hello up here!
<ul class="inner">
<li>Hello</li>
<li>down</li>
<li>there!</li>
</ul>
</div>
CSS:
.outer {
position: relative;
height: 200px;
}
.inner {
position: absolute;
bottom: 0;
}
Check this CodePen for a live example of this code: http://codepen.io/EvilOatmeal/pen/fCzIv
I have 6 icon, I want to display them as vertically, and before icon there is one red bar, will show the user mouse over effect, something like this :
how can I show this effect in CSS ?
what i try is this :
<div style="width: 20%; float: right";>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Diploma_24.png" title="Education" /></div>
</div>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Medal_24.png" title="Membership" /></div>
</div>
</div>
but by default i dont want to show red bar,
///*/// when mouse over : show red bar icon
when click on icon, :- i also want to remain show red bar , until user don't click on other icons
DEMO: http://jsfiddle.net/gvee/PcgaA/2/
HTML
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
CSS
img {
border-left: 2px solid transparent;
padding-left: 2px;
margin: 5px;
}
img:hover {
border-left-color: red;
}
Here is an example using ::after to create a psuedo element. The div elements will need replaced with img tags.
CSS
.selection{
width: 30px;
height: 30px;
border: 3px solid black;
margin: 4px;
}
.selection:hover::before{
content: ' ';
width: 5px;
background: red;
height: 30px;
display: block;
position: relative;
left: -10px;
}
HTML
<div id="container">
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
</div>
JS Fiddle: http://jsfiddle.net/3RJJe/1/
try this in ur CSS file
CSS styling:
img {margin-left:5px;}
img:hover {border-left:5px solid #f00}
Note: this is just generalized CSS, u will need to have specific CSS syntax.
<div>
<div>
<img src="../../../Images/red_rectangle.png" />
</div>
<div>
<img src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>
But this would be a better idea:
<ul class="my-menu">
<br>
<li>
<img src="../../../Images/red_rectangle.png" />
</li><br>
<li>
<img src="../../../Images/Diploma_24.png" title="Education" />
</li><br>
</ul>
CSS styling:
.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}