flex align working on local host but not on github - css

https://github.com/ivi989/ivi989.github.io
So, when I open this on local host everything is centered. However if I open the same files on gitub it is not. Button goes left. If I center the button the hr is no longer centered. If using flex for hr it disappears and when I get it back its all the way to the right and I cant get it back to center.
Can someone help pls?
Thank you.

This
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
What actually happening is that when you open your index.html the above mentioned css is not downloaded from internet instead it search for a file with the same name in your local system.When you open your index.html through git, https:// is appended with that link and thus your css is downloaded and your button is aligned left.
Solution
Add this style="text-align:center" to your div with this id="mc_embed_signup_scroll"
<div id="mc_embed_signup_scroll" style="text-align:center">

Related

Add iframe content to parent documet using local files

I have some code to take content out of a page within an iframe and adding it to the parent page. The parent and iframe source page are in the same directory so no cross domain issues.
This will work on a server but apparently not if all the files are running local on your computer. I was tearing my hair out before I figured that out. Running the files locally just gives cont2 an undefined value.
I need to run this locally without a server because of the sensitivity of the files I'm dealing with. I don't know how to do that though.
I tried setting document.domain="local.com" in both files but that didn't work.
Any way to do this?
Thanks
Parent Page:
<html><head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script></head><body>
<iframe id="frame1" src="page1.html"></iframe><br>
<button id="button2">Something</button>
<script>$("#button2").click(function(){
cont2 = $("#frame1").contents().find("div").html();
console.log(cont2);
$("#div2").html(cont2);
});</script>
<div id="div2">TBD</div>
</body></html>
iFrame Source:
<html>
<head></head>
<body>
<div id="div1">TODO write content</div>
</body>
</html>
Some versions of IE will allow this to work out of the box. Seems like it treats local files as on the same server.
For Chrome, you need to temporarily disable a couple things. See:
Disable same origin policy in Chrome

Wordpress div class container, is it special in wordpress?

Hiall,
could someone please tell me, is the
<div class="container">
class/element some kind of special class for wordpress???
This div is currently wrapping all the content on my site and I am trying to put html code outside of this div, but no matter what I do it won’t let me and it automatically puts everything inside this div.
I’m looking at the file that contains the ending
</body>
</html>
tags for the document and when I try to put code right before the end like
<div class=“myotherrclass”></div>
</body>
</html>
When I load the page in the browser the last tag before , it automatically always puts the closing tag for the container div! eg.
<div class=“myotherrclass”></div>
</div> <!— container class closing div, automatically appears from no where! —>
</body>
</html>
Any help trying to understand what is happening would be great
I started with the Underscores.me starter theme and just deleted the "container" div from both header.php (the opening) and footer.php (the closing). And...nothing bad happened! Will report back if something does, but right now I'm deleting div tags not being used in order to make sense of what's going on. This one's gone!

Social Slider not working. CSS Transition

Im new here have seen a lot of this site and videos around the internet and now i have a problem with my CSS fort i would say hello and see if there is any one out there that can help me out.
Im righting a website and have a sliding bar on my nav.
but the text witch is hiden then shows on hover will not stay on the same line intel it is open full, As im making this site on a local host cant show you sorry but here is the code…
<p data-height="257" data-theme-id="9309" data-slug-hash="icrwC" data-default-tab="result" data-user="jandrew" class='codepen'>See the Pen <a href='http://codepen.io/jandrew/pen/icrwC/'>Social Slider</a> by jerome Andrew (<a href='http://codepen.io/jandrew'>#jandrew</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
would like it to work
Thanks to any one that can help :)
My site as it is at the moo.. lots of work needs doing
my site
You could put:
white-space: nowrap;
in the css in ".socialSlider li"
It will prevent the line from wrapping.

Why is my footer not aligned at center on pages without a sidebar?

My footer isn't aligned at the center on pages without a sidebar. On pages with a sidebar, the alignment is perfectly fine. Why is this happening? Can anyone help please?
Here's a link to the site I'm working on: http://www.thesuperwomanlifestyle.com/
The home page has no sidebar so the footer isn't aligned at the center. If you check other pages that have a sidebar, the alignment is alright.
Please help!
Fix your code errors, like the missing closing </p> and </div> tags. Those errors will throw the footer out of alignment. See [Invalid] Markup Validation of thesuperwomanlifestyle.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Find the source in index.php and footer.php, but that depends on your theme. Start fixing the code errors and revalidate.
And fix the BOM file type of your header.php and index.php files, as per the warning in the validation report. Change them to unicode no BOM.
I have checked your code by using view source page for both home page and inner pages. I found that in home page the is inside and in inner pages the is outside .
So check your PHP template file for inner pages and close the div of "insidewrap" after footer's div.
Hope it solves your problem.
There are several reasons, in your footer you have diferent code in the diferent sections, and there are a image than not loads. Due to you use IDs for the DIVs, should be a good solution make the DIVs floating in the CSS code.
<div id='footer_left'>
<img src='http://www.christiflynn.com/wp-content/uploads/2014/03/Take-the-Lead3.jpg' />
</div>
<div id='footer_optin'>
<script type="text/javascript" src="//www1.moon-ray.com/v2.4/include/formEditor/genbootstrap.php?method=iframe&uid=p2c9303f30&version=1"></script>
</div>
#footer_left, footer_optin {
float:left;
width: 10em;
}
You might need to create another footer-page.php template. Then, rearrange another footer. Call the footer template by using get_footer('page');
Of course, when creating this, you will need to create a new template for footer so you can move it to the left.
If it's possible, we'd like to see your code for footer and the page code, please, so we can solve the problem.

Open all links within a div in a lightbox

I'm trying to figure out how to open all of the images within a div in a lightbox. The div is pulling images from a picasa album, so I can't edit each link individually.
What would also work for me is the ability to open all links of a certain filetype in a lightbox.
Thanks!
Try the pretty gallery which meets your requirement.Demo for photo gallery.
I have create a enlarge button on the photo gallery of the pikaChoose by clicking the button i display the gallery in light box. The code for display from pikaChoose is
jQuery(".pika-stage #enlarge a").live('click',function(){
jQuery.fn.prettyPhoto();
jQuery.prettyPhoto.open(api_gallery,api_titles,api_descriptions);
return false;
});
I hope this may be useful to you
You can use lightbox: http://lokeshdhakar.com/projects/lightbox2/
For example (first three lines in head - be sure to have the images like close button in imgs folder):
<script src="jquery-1.11.0.min.js"></script>
<script src="lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Image #2
Image #3
Image #4
Since you're using picasa, change the href to the appropriate link to the image. If you're using php, then use for loops with echo, etc...

Resources