CSS - How can I center a <script>'s output? - html

I've been having a lot of trouble trying to center an external script and I was hoping SO could help me out. I'm designing a page to use a Google widget that uses Google Maps to give directions to an office. Here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="page_content" runat="server">
<div class="centered">
<span class="header_large_bold">Directions to our office:</span><br /><br />
<span class="header_bold">Please type your address in the top bar and click "Go".</span><br />
<script src="[link to the widget here]"</script>
</div>
</asp:Content>
And here is the CSS for it:
.centered {
width: 100%;
margin: 0 auto;
text-align: center;
}
As it is, the text is centered perfectly fine, but the widget from the is left aligned. I can fix this using a tag, but I'm trying to avoid using it as best I can. Any idea what I'm doing wrong?

You can insert the tag in a div
<div id="parent">
<script src='...'></script>
</div>
and then center the div..
#parent {
width: 30%;
margin: 0 auto;
}
But it might depend on the script content

Easily put your code between
<div align=center>
and
</div>
:)

User fa7d0 has the exact solution, but maybe a little unclear for the beginner:
Step 1 - Use a div with a "parent" ID to encapsulate your script as follows:
<div id="parent">
<script src='...'></script>
</div>
Step 2 - Go up to the top of your code, probably inside the area where you are defining the header information, and in the style section place the definitions:
<style>
#parent {
width: 30%;
margin: 0 auto;
}
</style>
I find it helpful to put all the div styling stuff in one area, all the p styling stuff in one area, etc.

Related

Footer Blocking Website Content

Description:
I'm having an issue with my website's footer blocking content on mobile browsers (and on longer pages on desktops).
I've seen threads about this before, but these focus on hiding the footer until the user scrolls all the way down. I want to have the footer "float" below the content, but have it go below the content when the user scrolls all the way down the page. I also need this to allow clicking on items right above the footer. On my site, you can't click on a button, even if it's a few lines above the footer - which needs to also be fixed.
Examples:
You can view an example of this issue at my own site: http://mbt.aeio.io/twitter.php
Note that when you scroll all the way down, it is impossible to click "Load More Tweets", even on desktops, where the button is clearly visible.
I cannot find an example of what I'm trying to accomplish; that's why I'm posting about this -- and not just copying someone else's code.
Code:
This is my code for ARRANGING the footer:
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
This is my ACTUAL code for the footer:
<div class="footer">
<div class="content">
<div class="container" style="
/* display: inline-block; */
">
<div class="well animated slideInUp" style="
display: inline-block;
">
<center>Developed with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> by mario_bros_tech, Arkagaen, and Others | Copyright © 2015-2017 | All Rights Reserved</center>
</div>
</div>
</div>
</div>
I know this is super-janky and that I shouldn't be using containers to make a footer, so if you have any suggestions for improving/cleaning up the code too, that would also be appreciated.
And if you need to look at the CSS for whatever reason, it is using Bootstrap and can be found here: http://mbt.aeio.io/assets/css/
Thanks for all the help!
The best thing (and the right thing) to do is to give some bottom padding to body. Giving the following code:
body {
background: #eee;
padding-bottom: 75px;
}
We get this:

Making iframe fit into an element that has left-margin set

Hi all I think this should be a relatively quick question but since I am a beginner to HTML and CSS I can't seem to figure this out.
I have the following CSS code:
<style>
div.specialspecial {
width: 100%;
height: 0;
padding-bottom: 56%;
position: relative;
margin-left: 160px;
}
iframe {
width: 90%;
height: 100%;
position: absolute;
display: block;
}
</style>
And this html code:
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
It seems that the margin-left set in the div class (which I need as I am using a sidebar on this website) makes it so the content inside the iframe is off center (presumably by 160px). Is there a way for me to use CSS to easily fix this? Or will I need to resort to JavaScript to resize the frame? I am comfortable with learning either approach.
Edit:
Apologies for not providing enough information. Hopefully adding this will help:
This is the body of my html:
<body>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card-2">
Link
Link
</div>
</div>
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</body>
This code is mainly taken from the example of: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion
As I am trying to get a similar style for my webpage
I think the best fix is to simply create a container for the iframe that isolates it from the element with the large margin:
<div class="specialspecial">
<div class="pageContent">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</div>
Even with no additional CSS, this should restrain the size of the iframe, which will get its size from the element without the large margin.
It's worth noting that layouts like that, which rely on large margins for side content, are somewhat archaic. Each part of the document should be contained in an element that doesn't care what's happening around it.
<style>
.page-container > * {
display: inline-block;
}
.page-sidebar {
width: 160px;
}
<div class="page-container">
<nav class="page-sidebar"></nav>
<main class="page-content"></main>
<div>
See also: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

Need to make images responsive in CSS/HTML for custom plugin

I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>

Yotpo <div> widget center

Im using a widget by Yotpo on my website and would like to center it.
Its located in a product-list.tpl so i thought that product-list.css should be the css to speak with the div.
<div class="yotpo bottomLine"
data-appkey="{$yotpoAppkey}"
data-domain="{$yotpoDomain}"
data-product-id="{$product.id_product}"
data-product-models=""
data-name="{$product.name|escape:'htmlall':'UTF-8'}"
data-url="{$product.link|escape:'htmlall':'UTF-8'}"
data-image-url="{$link->getImageLink($product.link_rewrite, $product.id_image, '')}"
data-description="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}"
data-lang="{$yotpoLanguage|escape:'htmlall':'UTF-8'}"
data-bread-crumbs="">
</div>
I did try this one:
.yotpo_bottomline .{
text-align: center!important;
}
But that didnt realy worked.
I have used in-line styling to solve the issue in our collection pages on Shopify.
Use the following code in the <div> preceeding the main data calls from Yopto.
The padding is optional but adds a small gap from the element above.
<div style="margin: auto; width: 50%; padding: 5px;" class="yotpo bottomLine"

Align social buttons correctly

I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look
Yahoo Link
I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.
Thanks.
Update
This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is
<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Please let me know, can we have exactly they have. I liked the look and feel of that. :)
Thank You.
I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.
I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn't work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn't look the same across browsers.
What's needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.
Following the tips from Neil's site got me to here - but with clear problems.
(I'd post an image, but don't have enough reputation points yet).
The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it's DIV as seen in the first image. There are a couple of issues to note:
a: the FB share button width is minimum 90px per //developers.facebook.co.... All well and good, however, the width is dynamic based on the number of shares one has.
b: there is no margin between the FB share and LI share button -
c: the LI share button needs more width, and dynamic width as it will get it's own count as time goes on.
c: 20 px height is not enough for FB - even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
d: and most obvious of all, the vertical positioning with LI riding high.
I solved the problem by floating a container holding the buttons with a line-height if 1 and using some CSS to float the buttons displayed inline with a min width, min height, and left padding.
The results are what was live as of the date of this posting (again, need reputation points to post images and more than two links)
Here is my HTML and CSS:
<div class="social-button-container" style="position: relative; z-index: 999;">
<!-- Facebook -->
<div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<!-- LinkedIn -->
<div class="social-button">
<script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
<!-- Twitter -->
<div class="social-button">
</div>
<div style="clear: both;"></div>
</div>
.social-button-container {
/*background-color: red;*/
/**
* This is a nice CSS trick that allows you to clear an element
* without having to add extra elements to your HTML. This helps
* separate content from design, which should always be an architectural
* goal.
*/
float: left;
line-height: 1;
}
.social-button {
float: left;
min-width: 100px;
display: inline;
min-height: 22px;
padding-right: 5px;
}
They are using an unordered list at the elements to show the buttons.
A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.
<ul>
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
I think the above would work ok.
All you need to do then is right align it.
<div style="width:400px">
<ul style="float:right">
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
</div>
Don't forget to use classes instead of inline styles like I have here.
Well, you basically just have to deal with the fact that one is an inline (a) element, the other a block (iframe) element, after that it becomes quite easy, just test that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
display: block;
float: left;
line-height: 2em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>
</body>
</html>
Put your social media buttons into parent divs and give those divs an id each.
Target the inner iframe elements, e.g:
#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}
where fblikeblock and gplusblock are the parent divs.
and use this on your parent divs:
#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}