link is not working if i give margin-top exceding -16px - javascript

I am using enjoy instagram plugin. I made indicators display none. I have page navigation previous and next which is center aligned.
I wrote link more using a tags below the page navigation not included in plugin. Such that it will redirect to instagram page. Now I would like to make more tag in same line of page nav.
So i gave margin-top -25px such that they are in same line but the link is not working. I created a div for more link and made it to float right,gave width:60px, margin-top:-25px , height:20px, display:inline-block. I have not made any changes in plugin. I wrote more link when plugin code ends. If any one have solution kindly help me.If any errors in grammar and spelling forgive me.If instamor div is moving to plugindiv then more link is not working.
Thanks in advance.
<div class="insta_block">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __( 'Instagram Section', 'aasim' ) ) ) : ?>
<?php endif; ?>
<div class="insta_more_link">
More...
</div>
</div>
css
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
}
.insta_block .widget-container {
margin-top: 30px;
}
.owl-item .box img{
width:98%;
}
.owl-pagination{
display:none;
}
.owl-theme .owl-controls .owl-buttons div{
background:#0c4c8c!important;
opacity:1!important;
font-weight:600;
}
.insta_more_link {
font-weight: 600;
float: right;
width:60px;
display: inline-block;
height:20px;
margin-top:-25px;
}
.insta_more_link a{
color:#0c4c8c;
}

.
insta_more_link {
font-weight: 600;
/* float: right;*/
width:60px;
/* display: inline-block;*/
height:20px;
position:absolute;
right:0;
bottom:0;
}
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
position: relative;
}
By making main div relative and making my morediv positon absolute I got it

Related

Fixed nav bar underneath a fixed header

So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server
here is my code
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
#media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black">Server Index&nbspChat Room</td>
</tr>
</table>
</p><br>
</div>
If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.
This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/
As you scroll up and down you'll notice the header and navigation bar stay in place.
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/
Also see my two answers here:
Position fixed within container element instead of the browser / viewport
Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.
Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.
Hope this helps. Good luck!

Gallery of divs with float-left

In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.

Mobile Navigation Menu not working (HTML, CSS & JQuery)

I am attempting to make a mobile navigation menu based off of this example: Basic Hamburger Menu
However, for what ever reason it does not work. When I click on the button nothing happens except rotating the 3-line graphic. The menu does not expand / appear.
When troubleshooting I have found out that if .mobile is site for display:block; instead of display:none; when the page loads, the javascript works for collapsing / hiding the menu, and making it reappear. Only the rotation of the 3-line graphic is opposite of what it should be. So, I know the javascript is working.
I just can't understand why it doesn't work with the nav hidden by default like in the example. I have played around with it for more then 3 hours so far and have gotten nowhere. There for I"m attempting to post it here to see if anyone might have any idea as to what might be going on as I am at a complete loss and about ready to wave the white flag.
This is the javascript on my page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('button').click(function () {
$(this).toggleClass('expanded').siblings('div').slideToggle();
});
//# sourceURL=pen.js
</script>
And the HTML / CSS is the same as the example except I have modified it so all the links are built into a UL.
HTML Code:
<div id="main_container">
<header>
<img src="<?php echo get_template_directory_uri(); ?>/assets/header3.jpg" alt"logo" width="100%">
</header>
<nav>
<div id="desktop_nav"><?php wp_nav_menu( $args ); ?></div>
</nav>
<nav>
<div id="mobile_nav" class="mobile">
<button>Toggle</button>
<div>
<?php wp_nav_menu( $args ); ?>
</div>
</div>
</nav>
And CSS Code:
#mobile_nav ul {
display: table;
width: 100%;
/*table-layout:fixed;*/
}
.mobile {
display:none;
position:relative;
width:100%;
min-height:50px;
}
.mobile div {
display:none;
}
.mobile button {
position:absolute;
top:10px;
left: 10px;
border:0;
text-indent:200%;
overflow:hidden;
background:#363636 url(assets/menu.png) center no-repeat;
border-radius:3px;
background-size:80%;
width:30px;
height:30px;
outline:none;
transition:all 400ms ease;
-webkit-transition:all 400ms ease;
transition:all 400ms ease;
}
.mobile button.expanded {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
border:0;
}
.mobile ul li a {
display: block;
background: #000;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #363636;
text-decoration: none;
color: white;
width: auto;
}
.mobile ul li:last-child {
border-bottom: none;
display: table-cell;
}
.mobile ul li a:hover,
.mobile ul li a:active,
.mobile ul li a:focus {
background: #363636;
width: 100%;
}
#media (max-width: 800px) {
.mobile {
display:block;
}
.mobile div {display:block}
#desktop_nav {
display:none;
}
}
Thanks
Adding a class to the div called "toggle" and changing the format of the javascript to the following solved the issue.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('button').click(function(){
jQuery(this).toggleClass('expanded');
jQuery(".toggle").slideToggle();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Responsive CSS div positioning priority

first of all I would like to thank the members of this community for the huge amount of help I
found here in last few month. There wasn't a single project of mine which I finalized without your tips and tricks.
Right now I got a problem with a responsive layout where I need your kind help:
I got a layout like this:
http://codepen.io/Buzzjump/pen/tfeys
<div class='outer'>
<div class='sidebar_links'>Div1</div>
<div class='mitte_rechts'>
<div class='d2'>Div2</div>
<div class='d1'>Div3</div>
</div>
</div>
Now the current CSS
div{
display:inline-block;
background-color:#cdcdcd;
margin:0px; 0;padding:0px;width:150px}
.d1{
float:right;
background: blue;
color: white;
}
.d2{
background: orange;
}
.mitte_rechts{
padding:0;
width:70.81%;
float: left;
margin-left:0px;
}
.sidebar_links{
height: 200px;
float: left;
background: red;
}
.outer{
height: 230px;
min-width: 80%;
background-color:yellow;
margin-left: 20px;
overflow: hidden;
}
There is an outer box (outer) and two inner boxes (Div1 and mitte_rechts). In 'mitte_rechts' there are two more boxes(Div 2, Div3) and they are all aligned. What I want is that when the window is scaled down to a breakpoint (768) first Div3 is display under Div2 in mitte_rechts. Maybe I'm just blockheaded but is there a solution for this?
To this point no JS is used.
Thanks in advance.
Try out the following:
.d1 {
float: right;
background: blue;
color: white;
}
.d2 {
background: orange;
float: left;
}
#media screen and (max-width: 768px) {
.d1, .d2 {
float: none;
display: block;
}
}
By the way: You don't need inline-block on your divs. Inline-block is an alternative to floating. So either use floating or inline-block. I'm not a fan of inline-block because IE6 and IE7 don't support it.
try the following:
1) remove width:70.81%;' from '.mitte_rechts
2) add the following styling:
.d1, .d2{
float:left;
}
#media (min-width: 768px){
.mitte_rechts{
width:70.81%;
}
.d1{
float:right;
}
}

Show div only when the mouse hovers over it

My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}

Categories

Resources