Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}
Related
I don't know if it is possible, but is it possible for a <span> of variable text length to be horizontally aligned over an image? The one catch with this, is I'd like the <span> to have a background color and the background color block should overlap the image.
I've tried setting the <span> to display:inline-block but it doesn't seem to end up horizontally aligned. Here is the code if you don't want to look in the fiddle (the HTML here should remain the same if-at-all-possible)
The Code (https://jsfiddle.net/6c9gmvom/1/):
#wrapper {
width:100%;
}
.txt {
text-align:center;
margin:0 auto;
width:40px; /* ideally I would not want to use a fixed width here */
background-color:#ffffff;
}
img {
height:30px;
width:100%;
}
<div id="wrapper">
<img src="http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg">
<div id="modulewrapper">
<span class="txt">hey</span>
<div id="module"></div>
</div>
</div>
You can align it with css. I've updated your fiddle, check it out to see the result https://jsfiddle.net/6c9gmvom/8/
The css I've added is:
#wrapper {
width:100%;
position: relative;
}
#modulewrapper {
text-align:center;
position: absolute;
top:0;
left:0;
right:0;
}
You can set the image as a background image... then set the span to display block.....
#wrapper {
width:100%;
}
.txt {
text-align:center;
margin: 10px auto;
background-color:#ffffff;
display: block;
text-align: center;
} /* ideally I would not want to use a fixed width here */
img {
height:30px;
width:100%;
}
#modulewrapper {
padding: 200px 0;
background: url(http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg) no-repeat center center; }
<div id="wrapper">
<div id="modulewrapper">
<span class="txt">hey</span>
<div id="module"></div>
</div>
</div>
I'm not too sure I understand what it is you are asking.
If im not mistaken what you want is for the text to be on top of the image.
This can be done as seen https://jsfiddle.net/6c9gmvom/9/
#wrapper {width:100%;position:relative}
.txt {
position:absolute;
text-align:center;
margin:0 auto;
width:40px;
background-color:#ffffff;
z-index: 100;
width:100%;
}
img {
height:30px;width:100%;
}
.imageClass{
position:absolute;
left: 0;
top: 0;
}
.txt {
text-align:center;
margin:0 auto;
width:100%;
background-color:#ffffff;
position: fixed;
left: 0;
top: 15px;
}
img {
height:30px;
width:100%;
position: relatable;
}
I am trying to position text using div, but its not working well!
.background
{
background-image:url(bg.png);
width:600px;
height:500px;
margin-top:0px;
margin-left:0px;
}
.head1{
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
.background is the background image of the div whereas .head1 is a text within .background div.
You can see it in the html part!
<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>
The text of class head1 are displayed at positions as they are defined! but it also bring the the background image with it!
It seems quiet confusing so I took a screenshot! please check it out!
Maybe my css is poorly coded. please help me out.
Add overflow: auto to parent div.
.background {
background: red;
width:600px;
height:500px;
overflow: auto;
}
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
http://jsfiddle.net/L7q5g6yu/2/
Zero margins on .background can be removed, zero margin is default value for divs.
OR
you can remove the inner div, see this code, it makes the same if you need the inner div just to align the text.
<div class="background">
There are 3 CRUCIAL things that you need to remember...
</div>
<style>
.background {
background: green;
width:500px;
height:400px;
overflow: auto;
padding: 100px 0 0 100px;
color:#d45151;
font-style: italic;
}
</style>
http://jsfiddle.net/L7q5g6yu/3/
Use the following style
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}
I'm having some trouble styling my news articles. This is preview of what I'd like to have:
On the left you always have an image (width is always the same, height isn't). On the right you have some information and a button on bottom aligned with the image.
<div id="newsItemImage">
<img src="" alt="" />
</div>
<div id="newsItemOther">
<p></p>
<button></button>
</div>
Float left on both of the divs. But the height of the two div's isn't the same. How can I make them equal?
This is what I have now:
.newsItemPic
{
width:333px;
border:1px solid black;
float:left;
height:100%;
}
.newsItemOther{
width:860px;
border:1px solid red;
float:left;
height:100%;
}
They are next to each other but the right content is not the same height as the image. So the image that's supposed to be under comes up under the content.
JSFIDDLE: http://jsfiddle.net/ZhD9Z/
Fiddle
as image is not responsive and it has 200px absolute width, i created one container width:500px;
then righttext must contain button itself but button must be aligned width image bottom, so righttext height equals with image height and button positioned at bottom:0
.eachNewsBox
{
padding:10px;
width:500px;
background-color:gray;
display:block;
float:left;
margin-top:20px;
}
.imgbox
{
display:block;
float:left;
height:100%;
position: relative;
}
.imgbox img
{
max-width:200px;
border:1px solid #000;
float: left;
}
.button
{
width:100px;
height:20px;
line-height:20px;
background-color:#FFF;
text-align:center;
margin-bottom:0px;
color:#000;
position:absolute;
bottom:0;
}
.rightText
{
float:right;
font-size:10px;
max-width:242px;
padding-left:10px;
color:#FFF;
height: 100%;
left:210px;
}
On our website, we have a container, with a DIV box inside which leaves a space along the right hand side so we can add some more boxes with images / text.
I got as close as the boxes to the right hand side but underneath the "main" div.
http://jsfiddle.net/Ug5pz/2/
Thanks!
CSS:
#container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto 0;
background: #FFF;
border-style:solid;
border-width:2px;
}
#main {
position:relative;
width: 450px;
height: 300px;
border-style:solid;
border-width:2px;
}
#sidebox {
position:relative;
width:120px;
height:50px;
float:right;
border-style:solid;
border-width:2px;
}
HTML:
<div id="container">
<div id="main">Welcome to our website!</div>
<div id="sidebox">Sidebox</div>
</div>
Try adding float:Left to the #main CSS
Alternatively you could modify the #sidebox CSS as follows:
position:absolute;
right:0px;
top:0px;
I'm attempting to create thumbnails out of some images, each of which isn't necessarily the same size at the others.
Here is a Fiddle with my current code. I've read on some other sites, and even on here that I just need to set the width and height of the image class, then apply the overflow:hidden property, but that doesn't seem to be working. It's still changing the aspect ratio of the image. I know I could just simply remove either the height or width property, but I really just want to make a 100x100 crop of the image. I tried clip:rect() but couldn't figure out how to make it work. Ideally, I'd want to crop 100x100 from the center of the full-size image, but using clip, I don't think I can do this if the dimensions of my images aren't all the same.
.thumbnail {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
}
using css and html:
First solution:
html:
<div class="imageFrame">
<img src="your_path" alt="thumb" />
</div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
}
.imageFrame img{
position: absolute;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;
display: block;
}
Second solution:
here you will have to use some JS to add dynamically the image url path to the <div class="imageFrame".
html:
<div class="imageFrame" style="background-image: url('your_path');"></div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
background-repeat: no-repeat;
background-position: center center;
}