I am working on a blog and wanted to add a next post button somewhere between every post like this website. http://www.damnlol.com/
In the website, you can see a blue button through which you can go to next or previous post. I tried creating something similar to my blog # http://viralonlineimages.blogspot.com/2011/11/invisible-man.html but nothing worked. Is there any way to add the button there?
This is the code which can place an image at the position:
Add position: relative; to your #main-wrapper div.
Add position: absolute; top: 45px; z-index:999 to #blog-pager span (You'll need to create this)
Add left: 0; to #blog-pager-newer-link
Add right: 0 to #blog-pager-older-link
#main-wrapper {
width: 580px;
margin: 20px 0px 20px 5px;
float: left;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
#blogger-pager span {
position: absolute;
top: 45px;
z-index: 999;
}
#blog-pager-newer-link {
left: 0;
}
#blog-pager-older-link {
right: 0;
}
You can use negative values for left ad=nd right properties too.
Related
I've got an HTML-File.
As you can see, if you click on an image it opens a box below with some text. That works with jQuery. Is there a way to push the images under the box down?
So that the box never covers an image. Please note that it should be responsive.
Here's the fiddle:
That's the css:
#projekte {
list-style: none;
text-align: center;
width: 100%;
}
#projekte li {
display: inline-block;
margin: 10px 5px 10px 5px;
width: 300px;
}
#projekte img {cursor: pointer; width: 300px;}
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: absolute;
}
don't make the .beschreibung elements absolutely positioned, as this will take them out of the flow of the document. Change your css to:
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
}
Updated fiddle (with vertical-align:top as stated in comments)
You have to change position parameter to relative
.beschreibung {
background-color: #bec3c8;
display: none;
left: 0;
position: relative;
}
And using jQuery, you can set it's width, like:
jQuery(".beschreibung").width("desired width");
EXAMPLE FIDDLE
Also, you need to hide previous image description, like:-
$("div[id^='projekt']").hide();
You can change your CSS Class position: relative
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: relative;
}
So I just found an easy solution. I just put the .beschreibung in a wrap div and set the .beschreibung to 100% width. You can find the updatet fiddle here: https://jsfiddle.net/znt3npqa/9/
I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?
Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;
This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}
Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}
First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;
First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.
try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}
As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.
You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}
See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/
Basically, I want many(>25) divs to be displayed one on top of the other so that only one can be seen at a time. I have the jQuery UI draggable implemented, so once a div is dragged away, the next div is shown. What CSS do I need to make such a stack of divs? jQuery is also available if required.
Thanks!
Try this:
CSS
div.square {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px dashed purple;
position: absolute;
top: 30px;
left: 30px;
font-size: 50px;
line-height: 100px;
text-align: center;
color: white;
}
jQuery + jQueryUI
var count = 25;
var colors = ['red','green','blue','orange','yellow'];
while(count--) {
$('<div/>',{className:'square', text:count}).draggable().css({position:'absolute','z-index':count, text:count, backgroundColor:colors[count % 5]})
.appendTo('body');
}
EDIT:
I just noticed that for some reason in IE and Safari .draggable() overrides the absolute positioning with relative, so you need to set it back to absolute after you made it draggable.
Updated the example above.
http://jsfiddle.net/p9wWA/
You mean something like this?
#relative_container { position: relative; }
#relative_container div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#relative_container div.item_1 { z-index: 100; } /* Higher index means its more on top */