i have this div used as an information container on my page, i want to make a read more button on the bottom of the first div but cant do it, i tried position:relative and every other method i know to accomplish this but couldn't make it. any suggestion
<div class="main_banner" style="margin-left:46px;">
<center><b><h3 style="color:purple;padding-top:2px;margin-bottom:0">header1</h3></b></center>
<center><img src="images/pic1.png" width="275px" height="103px" /></center>
<p class="index_services_p">some text</p>
<br>
<a style="padding-top:2px;float:left;padding-left:10px;" href="#" style="float:left">
<img src="images/read-more.png" width="172px" height="32px" />
</a>
<div>
any suggestions will be appritiated.
the goal here is to make the always appear on the bottom of the main_banner DIV
The code doesn't make sense to the question you're asking.
However you can align an element to the bottom of another element by placing the parent relative and the child absolute:
HTML
<div>
Lorem ipsum
read more
</div>
CSS
div {
background: lightgreen;
width: 200px;
height: 200px;
position: relative;
}
div a {
display: block;
background: lightblue;
position: absolute;
bottom: 0;
right: 0;
}
DEMO.
The HTML..
<div class="main-banner">
BLAH..
<a class="read-more" href="#"></a>
</div>
The CSS...
.main-banner{
position: relative;
//other styles.
}
.read-more{
position: absolute;
top: 0px;
right: 0px;
left: 10px;
bottom: 10px;
}
Related
<ion-view view-title="个人信息">
<ion-content>
<style>
.user-detail-item {
position: relative;
height: 80px;
}
.user-detail-left {
position: absolute;
border: 1px dashed red;
top: 0;
bottom: 0;
height: 80px;
margin: auto;
}
.user-detail-avatar {
position: absolute;
height: 64px;
width: 64px;
right: 16px;
top: 0px;
bottom: 0px;
margin: auto;
}
</style>
<div class="list">
<a class="item user-detail-item" href="#">
<span class="user-detail-left">头像</span>
<img class="user-detail-avatar" src="img/wechat.png"></img>
</a>
<a class="item" href="#">
<span>昵称</span>
<span>xxx</span>
</a>
<a class="item" href="#">
<span>帐号</span>
<span>xxx</span>
</a>
</div>
</ion-content>
my code like this, whatever how I try, it still align the top, my question is how to make the text align middle.
so, I want the text and image align mid, and the text left, image right.
Use line-height trick. If you are sure, the text will fit on just one line.
There are generally two possibilities - line-height and padding-top. The padding can affect the dimensions of the bar, but line-height should not, but it works, when you have single-line text / title.
I am not sure if vertical align will work for inline element of text.
I suggest you this code
style="vertical-align:middle"
Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}
In action:
http://jsfiddle.net/paulius_m/1xq2gn9s/4/
In details:
I have a big container for group of pictures.
In that container, I have 100x100 px containers floating to the left one beside another.
In each of those containers I have two images surrounded by anchor tags (both looks close to like that: <img src="/thumbnail.jpg" /><img src="download_button.jpg" />).
The first image/link is the thumbnail. The size of the thumbnail could vary, but will never exceed 100px in height and 100px in width. This is know from the server side. Basically, link of the thumbnail is for invoking a lightbox feature (I am skipping describing lightbox feature here, just know it is).
The second image/link is kind of download button. The button is always 20x20px. This is for downloading the biggest version of the same picture.
The thumbnail must be in the middle/center of floating 100x100 px div.
The download button (a/img tags) must be in the left bottom corner of the thumbnail.
The problem:
The problem is that I cannot figure out how to align the main image inside of middle/center of the 100x100 container and place the 20x20 download button on the left bottom corner of the image. The best version of what I have achieved so far could be seen in the jsfiddle link mentioned above.
Edit:
- The download button must always be on top of the image.
Markup (same as in jsfiddle link):
(HTML)
<div class="images">
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/60/100/" class="uploaded_image">
<img src="http://lorempixel.com/60/100/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<span class="clear_left"></span>
</div>
(CSS)
.image_container_outer {
display: block;
float: left;
height: 105px;
padding-top: 5px;
text-align: center;
vertical-align: middle;
width: 110px;
background-color: #000;
border: 1px solid #ffff00;
}
.image_container_inner {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
background-color: #999;
}
a.uploaded_image {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.uploaded_image {
border: 0 none;
border-radius: 2px 0;
bottom: 0;
box-shadow: 5px 5px 50px -6px rgba(50, 50, 50, 0.3);
display: inline-block;
left: 0;
position: absolute;
}
a.download_button {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.download_button {
background-color: #fff;
border-radius: 2px;
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
width: 20px;
}
Here's a JSFIDDLE to explain how this works.
And here is a JSFIDDLE from your code
To place something to absolute center use css like so:
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
and to place in the bottom left corner use css like:
position:absolute;
bottom:0;
left:0;
And to make the button on top of the image you can use:
z-index: 9999;
In your div create figure element, and then figcaption, this figcaption always on the bottom left side. in this figcaption create your button. may be its helpful.
<figure>
<img src="abcsd" alt="dsaer" width="304" height="228">
<figcaption>Your Button</figcaption>
</figure>
Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?
<img src=".\pncwelcome.png"
style="float:right; clear:right; margin-top:-40px;"
alt="PNC Welcome Logo"/>
<hr color="black"
style="margin-top:30px;" />
Use position: absolute;.
Check the fiddle.
Something like this should work.
The CSS:
.parent {
position: relative;
}
img {
width: 200px;
}
hr {
position: absolute;
z-index: 50;
top: 30px;
right: 0;
left: 0;
}
HTML:
<div class="parent">
<hr>
<img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>
Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index
on it so that it will still overlap the image.
If you float the <hr> you will have to set a width on the parent element.
Use:
<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/>
<hr color="black" style="z-index: 2; margin-top:30px;" />
If that doesnt' solve it use this instead:
<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/>
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />
Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...
Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:
#example {
display: block;
position: relative;
width: 100%;
height: 92px;
}
#example hr {
position: absolute;
z-index: 0;
top: 46px;
bottom: 46px;
margin: 0px;
width: 100%;
border: 5px solid #8fcbf1;
}
#example img {
position: absolute;
width: 272px;
height: 92px;
z-index: 5;
left: calc(50% - 136px);
}
<div id="example">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
<hr />
</div>
Here is the Fiddle: https://jsfiddle.net/z517fkjx/
Also, this uses calc() for centering, which is CSS3-only.
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>