I'm trying to overlay a bootstrap label in the corner of a DIV.
I'd like to put the label in the top left of the div, like a overlay so part on the div and part off.
Thanks
<div class="span4" style="border-bottom: none; border-top: 4px solid #28A197;">
<h3>Quick Links</h3>
<div class="row">
<div class="span2">
<div class="quickbtn">
<p><a href="#wirelessnetworkinfo" data-toggle="modal"><img src="images/icons/wirelesssignal.png" /></p>
<p>Wireless Network Information</a></p>
</div>
<br />
<div class="quickbtn">
<p><a href="http://mail.google.com" target="_blank"><img src="images/icons/gmail.png" /></p>
<p>Gmail</a></p>
</div>
</div>
</div>
<span class="label label-important">UPDATED</span>
</div>
Heres the JSFiddle of the coding etc. with example label ready for placement and the CSS for the div in question (button)
Using position: relative on .quickbtn and position: absolute on .quickbtn .label, you can absolutely position the label inside .quickbtn.
Fiddle: http://jsfiddle.net/Pq6JL/1/
As your post is not clear, I am adding the following:
If you wanted the label to overhang outside of .quickbtn, set a negative top and left for the position of .label:
.quickbtn .label {
position:absolute;
left: -4px;
top: -3px
}
Fiddle: http://jsfiddle.net/Pq6JL/3/
Related
I have this code
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
I am not able to vertically align the text2 to the bottom of the parent div.
How to do it?
That's rather strange HTML code, but here's a solution that doesn't change the HTML:
(P.S.: You asked that the span should align with the bottom of the parent DIV, not wth the h1. If you want the latter, you have to give them both the same margin-bottom and padding-bottom.)
div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
Probably you will have to consider changing the elements you are using since h2 and span dont have the same default user agent style. h2 will appear bolder/ bigger than span and span appear lighter. That is why you see it not to be aligned
try this
`<div style="float:left">
<h2>header</h2>
</div>
<div style="float:right; vertical-align: bottom">
<h2> text2</h2>
</div>
<div class="clear:both"></div>`
I am trying to display the background image of the absolutely positioned div. but that div would never show off..
fiddle here
<div class=""> City:
<span class="displaycity" style="display: none;">xxxx
</span>
<span class="contentbox editcitytext" style="display: inline-block;">
<input type="text" value="xxxx" class="citynamebox">
<div style="position: absolute; color: brown; z-index: 3333; top: -101px; left: 90px;" class="validationmessagecomposed">
<div style=" border:1px solid brown; padding:10px;background-color:white;">Please check for invalid characters
</div>
<div style="height:7px; text-align:center;background- image:url(https://upload.wikimedia.org/wikipedia/commons/2/21/Ic_arrow_drop_ down_48px.svg); background-repeat:no-repeat;background-position:60px; position:absolute; top:93px;">
</div>
</div>
</span>
<span class="editcitybutton">Update
</span>
</div>
Difficult to say for sure - but you never set a width, which would be required for an absolutely positioned div. Try adding a border to the div to see if it has a width/height.
I'm wrestling with bootstrap CSS and am having trouble lining up the last couple of pixels.
I'm trying to create a responsive row of round images, followed by a round link/button to add a new image. The markup is like this
<div class="container">
<div class='row'>
<div class="col-xs-2">
<a href="/url/to/object">
<img class="img-circle img-responsive" src="https://pensivepool.files.wordpress.com/2012/01/josef-albers-study-for-homage-to-the-square-silkscreen-print-80774.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="/url/to/object">
<img class="img-circle img-responsive" src="https://pensivepool.files.wordpress.com/2012/01/josef-albers-study-for-homage-to-the-square-silkscreen-print-80774.jpg">
</a>
</div>
<div class="col-xs-2">
<a class="btn btn-default btn-circle btn-responsive" href="#link_to_add_new">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
I've put an example with css on jsfiddle. http://jsfiddle.net/9fgd4972/
As you can see, the button is 1 or 2 pixels too high, and this is due to the extra width of the border. What is the best way to account for this border in the css, so that the circle remains responsive.
Also, what is the best way to vertically align the + text within that height.
Thanks for suggestions.
You could try to change the border with a box-shadow.
About the vertical alignment you could position the icon (+) with position absolute, set all the values to 0 (top, right, bottom, left), margin and height to auto and max-height to the exactly height of the icon.
Like this:
box-shadow: 0 0 0 1px #ccc;
And:
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: auto;
height: auto;
max-height: 12px;
Here's a working fiddle: http://jsfiddle.net/alessiozuccotti/14v1f8rk/4/
This question already has answers here:
Image overlay on responsive sized images bootstrap
(5 answers)
Closed 8 years ago.
I'm trying to have a full width <div> over an image, with text inside it, so that the text goes over the image itself. The grid and the image is responsive, and I can't get the <div> to be 100% of the grid.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
As you can see, I want the portfolio_desciption to be over the image, fill the width of the grid col-md-6 and have a white background.
Any suggestions on how my CSS should be composed?
tl;dr
Use position: absolute; with top: 0; on the <div> and don't forget to add position: relative; to their parent <div>s.
Solution
.portfolio_description {
position: absolute;
top: 0;
width: 100%;
background-color: white;
}
You also need a new class that you need to add to the parent elements of the <div>s that have the .portfolio_description class.
.portfolio-block {
position: relative;
}
Explanation
The MDN docs on position: relative; states:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Also, the MDN docs on top states:
When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.
So you need absolute positioning and because that is positioned relatively to the nearest non static ancestor, you need to make the parent elements relatively positioned, because that positioning is not static and will keep the element flow intact. Then just make sure the top property is set to 0 so there is no distance between the <div> and its containing block.
Demo
In this example I used a semi-transparent background to prove that it is over the image.
.portfolio_description {
position:absolute;
width:100%;
top:0;
background-color:rgba(255, 255, 255, 0.5);
}
.portfolio-block {
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
Got it working with the following CSS:
.portfolio_description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
You'll have to use absolute positioning, something like this
.col-md-6 {
position: relative;
}
. portfolio_description{
position: absolute;
width: 100%;
bottom: 0px;
hieght: 60px;
}
You should use a background image instead of inline images, adjust your code like below then add your image as a background image in your CSS, this gives you a lot more flexibility. this way you can absolutely position everything inside your #portfolio1 div
<div class="col-md-6">
<div id="portfolio1">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p>
<span class="read_more"></span>
</div>
</div>
</div>
add the style=" padding-left: 0px ; padding-right: 0px;" in the col-md-6 or in whichever column div u are adding your image , the padding will fix the image entirely in the column without any before and after gap
I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.
alt text http://tapp-essexvfd.org/images/capture1.jpg
Here is the CSS:
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 10px;
text-align: center;
overflow: auto;
}
.item {
display: block;
margin: 10px;
padding: 20px 5px 5px 5px;
float: left;
background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
}
and the HTML:
<div id="galleryBox" class="ui-corner-all">
<div id="file" class="ui-corner-all">
<form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
<p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
<p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
<p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
</form>
<a name="thumbs"></a>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
<p><span class="label">test1</span></p>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
<p><span class="label">test3</span></p>
</div>
</div>
You can use Inline-Blocks as described in this article:
The Inline-Block Thumbnail Gallery
The article solves the same exact problem you are having with thumbnails.
I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.
UPDATE:
Here is another detailed article that tackles this problem with the inline-block:
Cross-Browser Inline-Block
As you can notice from these articles, it is a bit tricky to make it work cross-browser.
Two options:
Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.
The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.
you could try using css table displays for your divs...
ie.
#galleryBox {
display: table;
...
}
.item {
display: table-cell;
...
}
.row {
display: table-row;
}
so you'd have to add another div to wrap around the items in each row
<div id="galleryBox">
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
</div>