I'm using twitter bootstrap 2.1.1 with a responsive layout and I'd like to float a label in the bottom right hand corner of the image. One of the problems i'm having is because it's responsive when the thumbnail is wider then the image it floats too far. The other issue is I can't seem to get it to float to the right. I should also add that although I want it in the right hand bottom corner I do want it offset by a few pixels to it isn't right on the edge of the image. Also the text might always be photo missing, that is just when a default image is shown.
Here is my html so far
<li class="span4">
<div class="photo-group thumbnail">
<a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper">
<img alt="300x200&text=photo" src="http://www.placehold.it/300x200&text=Photo">
<span class="label label-inverse photo-label">Photo Missing</span>
</a>
<div class="caption">
<div class="pull-right">
by <a href="/users/50494983aa113ebd5c000001">
hadees
</a>
</div>
Chocolate Crackle Cookies
</div>
</div>
</li>
and here is my css
.content-header {
padding-bottom: 10px;
}
.thumbnail > a > img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.photo-group .photo-wrapper {
position: relative;
}
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 0;
}
.photo-group .photo-wrapper .photo-label {
float: right;
}
I've also got a jsfiddle for a better example.
Maybe the right way to handle this is to just make the photogroup's max width 300 but I think that kind of looks funny on a desktop full screen.
Here's my version of the fiddle: http://jsfiddle.net/AdVCT/9/
Essentially, you need to put a wrapper around both the image and the label, so that you can absolutely position the label within this wrapper:
<div class="photo">
<img alt="..." src="..." />
<span class="label label-inverse photo-label">Photo Missing</span>
</div>
And then with some CSS, you can alter the .photo to be centered but also only as large as the image inside it (the caption is absolutely positioned, so it is effectively taken out of the page flow and doesn't affect width of parents etc.):
.photo-group .photo-wrapper .photo {
position: relative;
margin: 0 auto;
display: table;
}
And remove margin-left: auto/margin-right: auto from the .thumbnail > a > img rule. Finally, to offset the label slightly from the sides of the image, use:
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 5px;
right: 5px;
}
And set 5px to whatever you want the offsets to be.
Related
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
I am making a header on a HTML page in which I have an image aligned to the left of the page and an image aligned to the right. I want there to be a center background color that is white when I enlarge the page horizontally, and that center white section to minimize to nothing when I shrink the page horizontally. Then the image on the right should be cut of from the right as the page shrinks.
The main problem I'm having is the image on the right goes down below the left image when I shrink the page. How can I fix this? The center section isn't white as well.
HTML:
<div class="navlogo">
<div class="left">
<img src="Weir-Logo.jpg">
</div>
<div class="right">
<img src="compass.jpg" />
</div>
</div>
CSS:
.navlogo {
width:100%;
background-color: white;
}
.navlogo .left {
float:left;
}
.navlogo .right {
float:right;
}
I would go with Turnip's answer, but here's another option for you for variety, if you like tables:
<table style="width:100%;background-color:white">
<tr>
<td align="left">
<img src="Weir-Logo.jpg">
</td>
<td></td>
<td align="right">
<img src="compass.jpg" />
</td>
</tr>
</table>
position: relative for the left image and position: absolute for the right image along with a z-index value on both should get you there:
.navlogo {
width: 100%;
background-color: white;
}
.navlogo .left {
float: left;
}
.navlogo .left img {
position: relative;
z-index: 1;
}
.navlogo .right {
position: relative;
}
.navlogo .right img {
position: absolute;
right: 0;
z-index: 0;
}
<div class="navlogo">
<div class="left">
<img src="http://placehold.it/400x200/f2f2f2/000000">
</div>
<div class="right">
<img src="http://placehold.it/400x200/000000/ffffff" />
</div>
</div>
With the "max-width" style the image will be resize.
<div class="left">
<img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
<img style="max-width:30%;" src="compass.jpg" />
</div>
So far you've got the old-school strategies covered: tables and position:absolute. Neither meets your requirement for "the image on the right should be cut off from the right as the page shrinks" and both can be problematic for a variety of reasons -- tables are, well, tables; and absolute-positioning, while sometimes necessary, tends to lead to fragile layouts; I try to avoid reaching for that part of the toolbox unless absolutely necessary.
In this situation I would depend on CSS background images, with an #media breakpoint to cover the two different layouts.
With this HTML:
<div class="navlogo"><div></div></div>
This covers the "the screen is wider than both images; put whitespace in between them" case:
.navlogo {
background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
background: url('//placehold.it/250x100') top right no-repeat;
min-height: 100px;
}
Then, for the "the screen is smaller than the two images, so cut the right-hand one off from the right":
#media screen and (max-width: 500px) {
.navlogo div {
background-position: 250px 0;
}
}
(The #media breakpoint here should be the width of both images added together. The right-hand image's background-position should be the width of the left-hand image. Adjust for body margins/padding as needed.)
If I understood you correctly, you were looking for something like this?
Fiddle: https://jsfiddle.net/7twgsx23/1/
You need to give the navlogo a height value in order to get the white background.
CSS:
.navlogo{
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
min-width:600px;
}
I also suggest using a middle div to get the desired layout.
HTML:
<div class="middle">
</div>
You can use non-breaking space to fill the middle div if you don't want any content there.
In the following HTML, I want the small delete icon to appear in the upper left corner of its container (the div). The larger image (a cat) needs to be inside of the div and scale so that it does not exceed the height of the div. I need the div to float left because of how its used elsewhere. The delete icon is suppose to overlay on top of the larger image (if the larger image fills the width of the div). Please note, that the larger image may actually have a width that is much less than the div and it gets centered in the div. In this case, the delete icon, still is in the upper left corner but is not really overlaying on top of the larger image since the larger image would be too small. The width of the div always remains the same regardless of the width of the larger image.
Here is my html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
And in fiddler:
http://jsfiddle.net/AndroidDev/eJZ7X/
Do you need something like this?
Demo
div {
position: relative;
}
div img {
max-width: 100%;
max-height: 100%;
}
div img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
Here, am positioning the delete img to absolute with top and right properties, if you want left than you can do that too, and make sure you wrap them inside a position: relative; container.
Note: Am using first-of-type pseudo so you do not have to alter your
DOM, but if you think that the order of the img might change than
better assign a class to the delete img instead.
As you feel my selectors are too generic, assume that you have a parent with a class called .img_holder and this will have div nested further and than you nest both the img inside that so your selector will be
.img_holder > div {
position: relative;
}
.img_holder > div > img {
max-width: 100%;
max-height: 100%;
}
.img_holder > div > img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
And the DOM would look like
<div class="img_holder">
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
</div>
I've updated your fiddle here
The icon img now has an icon class and is absolute positioned in the div.
html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
css:
.icon {
position: absolute;
}
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}
I've got 2 divs on top of another div, but when I resize the window they stay put, instead of moving with the div behind them. I thought that if there position is relative they move along with the previous div, but it doesn't seem to work like this. What am I missing?
CSS and HTML below, simplified.
<div class="wrapper" style="margin: 0 auto; text-align: center;">
<div id="0">
<img src="0.gif" width="960px" alt="" />
<div class="top">
<div id="tag" ><img src="tag.png" alt="" /></div>
<div id="tag2"><img src="5500.png" alt="" /></div>
</div>
</div>
</div>
And CSS like this:
#0 {
clear: right;
z-index: 0;
}
.top {
float: left;
z-index: 1;
clear: left;
position: relative;
}
#tag {
margin-top: -500px;
margin-left: -600px;
}
#tag2{
margin-left: 750px;
}
It seems like you're expecting the top div, with its associated tag divs, to move with the 0.gif image when you resize the page. Instead, it's moving relative to the left edge of the wrapper div, which is pegged to the left-hand side of the screen. You will probably get the result you want by adding width: 960px to the style of your .wrapper div.
For further enlightenment, check the bounding boxes on each of your divs. You may find that a temporary border: 2px solid green style helps clear things up.