I have a button in my HTML, and I want some content to appear just right under that button, and it should be on top of all other content, and shouldn't move any existing content. How can I achieve it?
Not sure exactly what you are trying to achieve, but check out this example for using the CSS property position:
<p>Other content</p>
<button>Button Text</button><br />
<div style="position:absolute; color:red;">Absolute Text</div>
<p>Other content</p>
Try it: http://jsfiddle.net/tczc5/
Put that content into a div and use
position:absolute;
It should look like this:
<div class="wrapper" style="position:relative;">
<button ..... >
<div class="yourContent" style="position:absolute; top:10px; left:0px;">
<!-- put your content here -->
</div>
</div>
If you want to show this content only after pressing the button, then change it to:
<div class="wrapper">
<button class="yourButton" ..... >
<div class="yourContent hidden">
<!-- put your content here -->
</div>
</div>
Define css styles in stylesheet like:
.wrapper {position:relative;}
.wrapper .yourButton {position:absolute; top:0; left:0}
.yourContent {position:absolute; top:20px; left:0}
.hidden {display:none;}
And then javascript (using jQuery):
$('.yourButton').click(function(){
$('.yourContent').removeClass('hidden');
});
Just a simple example, that you will have to tweak.
Here is a good article on css position can be found on alistapart.
Looking at your question a must read if you're not 100% familiar with positioning.
Related
I have a button inside a div which is inside a div and I am trying to have the button in and inner div ignore the parent divs padding here is my code
<div style="padding:10px; background:red;">
<div style="width:100%; margin:-10px;">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
Can be seen in fiddle here https://jsfiddle.net/5sc5y4z3/.
setting the margin:-10px works on the leftside but then, the button is 20px short on the right side.
How can I extend it so it fills the whole width of the parent div?
Thanks
100% width doesn't include the negative margins. You need to add it back:
<div style="width:calc(100%+20px); margin:-10px;">
CSS calc() is supported in all modern browsers since IE9, so it's safe to use in most web development projects.
Use this instead:
HTML:
<div style="padding:10px; background:red;">
<div style="width:100%;background-color:lime">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
It's getting clipped, so you could also use the following to mask the right side:
HTML
<div style="overflow: hidden; margin:-10px;">
My question is pretty simple. I have div1 that has a variable offset().top depending on other elements of the page. I want to insert an absolute div next to it (basically with the same absolute top) either with just css or with javascript too.
HTML looks something like
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
Since in the comments you say you want to place div2 after it has been inserted in the DOM, you can try the following:
$('#div2').css('top', $('#div1').offset().top - $('#div2').offset().top)
#div1, #div2 { display:inline-block; }
and
<div id="div3">
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
</div>
I'm wondering how to achieve this in CSS (and less and jquery is also good :)
I have the slider, but it looks like this:
I want it to look like this:
The fonts is of curse no problem, not making the stuff round and so on, removing border and stuff...
I'm wondering how I can achieve this little pins: in CSS, so it keeps the right dimensions, and squeezes together when the screen-size is different. By the way, thanks a bunch to danielcrisp, for this awesome slider for AngularJS.
Any help is appreciated.
Came up with this solution
http://codepen.io/anon/pen/bkdAs
HTML:
<div class="slider">
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
</div>
CSS:
.slider{
width:500px;
height:20px;
border-bottom:2px solid red;
}
.slider .pin{
height:100%;
width:10%;
float:left;
border-right:2px solid red;
transform: translateY(55%);
box-sizing: border-box;
}
.slider .pin:last-child{
display:none;
}
Might be easier to achieve using some javascript though for appending the divs inside the slider
I think the best solution would be to make 8 elements with position absolute and left 10*n%.
It may be possible to use css pseudo element instead of DOM elements to prevent bloating your HTML.
Edit: it turns out you can't chain css pseudo-elements, you'll have to append real DOM elements to your code.
http://jsfiddle.net/0hea6ody/
<span class="grad grad1"></span>
...
<span class="grad grad9"></span>
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}
I use bootstrap and I would like to display thumbnails of images from various sizes.
I would like the thumbnails to have all the same size (let's say width="col-md-2" wide and height="100px") and be centered and cropped.
The thumbnails have to be clickable in some way (to open the full size image or a gallery view).
The solution can use a mix of bootstrap styling or jquery or jquery components.
Ideally, I would like the code to look like this :
<div class="row">
<div class="..." style="...">
<img src="path/to/img1.png" class="..." style="..."/>
<img src="path/to/img2.png" class="..." style="..."/>
...
</div>
</div>
Or something like this :
<div class="row">
<div class="..." style="...">
<div class="..." style="...">
<img src="path/to/img1.png" class="..." style="..."/>
</div>
<div class="..." style="...">
<img src="path/to/img2.png" class="..." style="..."/>
</div>
</div>
</div>
(With the jquery initialization if necessary)
Try this..
.row {
max-height:100px;
overflow:hidden;
}
img {
width:100%;
min-height:100px;
}
Demo: http://bootply.com/92024
I don't know if you mean these examples below by "cropping."
Original photo
Cropped in fiddle
border-color: white;
border-radius: 63px;
border-style: solid;