Images are overlapping the header in AMP (CSS problem) - wordpress

I want to ask you for help with adapting AMP version of website: https://imperiumromanum.pl/en/roman-society/amp/
I am able to make fixed HEADER bar by adding css code
nav.amphtml-title {
position: fixed;
width: 100%;
}
but once I am scrolling down I can see images are overlapping the header. Below screen:
I see that guilty is position: absolute; in below code
.i-amphtml-layout-size-defined .i-amphtml-fill-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
But do not know what to change to appear the image + have it under the header bar.
Do you know what change I need to do in CSS for elements to be able to correct it?
Below if part of code from AMP version where is located headr
<div class="wrapper">
<nav class="amphtml-title" style="position: fixed;width: 100%;">
<div class="header">
<div class="logo">
<a href="https://imperiumromanum.pl/en/amp/">
<amp-img src="https://imperiumromanum.pl/wp-content/uploads/2015/01/logo-2.png" width="32" height="32" alt="logo" class="amphtml-site-icon i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" style="width: 32px; height: 32px; --loader-delay-offset: 47ms !important;" i-amphtml-layout="fixed"><img decoding="async" alt="logo" src="https://imperiumromanum.pl/wp-content/uploads/2015/01/logo-2.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
IMPERIUM ROMANUM </a>
</div>
<div class="sidebar-header">
<section class="icon-button-section">
<button id="menu-search" class="amp-menu-sidebar hamburger icon-button" on="tap:search-lightbox"><amp-img src="https://imperiumromanum.pl/wp-content/themes/romanum/wp-amp/icons/amp-search.png" width="68" height="68" alt="Search" class="amphtml-site-icon i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" style="width: 68px; height: 68px; --loader-delay-offset: 47ms !important;" i-amphtml-layout="fixed"><img decoding="async" alt="Search" src="https://imperiumromanum.pl/wp-content/themes/romanum/wp-amp/icons/amp-search.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
</button>
<button class="amp-menu-sidebar hamburger icon-button" on="tap:amp-sidebar.toggle"> <amp-img src="https://imperiumromanum.pl/wp-content/themes/romanum/wp-amp/icons/amp-menu.png" width="68" height="68" alt="Menu" class="amphtml-site-icon i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" style="width: 68px; height: 68px; --loader-delay-offset: 47ms !important;" i-amphtml-layout="fixed"><img decoding="async" alt="Menu" src="https://imperiumromanum.pl/wp-content/themes/romanum/wp-amp/icons/amp-menu.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
</button>
</section>
</div>
</div>
<div>
<amp-lightbox id="search-lightbox" layout="nodisplay" class="i-amphtml-element i-amphtml-layout-nodisplay i-amphtml-overlay i-amphtml-built" i-amphtml-layout="nodisplay" hidden="">
<div class="lightbox-menu" tabindex="0">
<button class="lightbox-close" on="tap:search-lightbox.close">
<amp-img src="https://imperiumromanum.pl/wp-content/themes/romanum/wp-amp/icons/amp-close.png" width="68" height="68" alt="Close" class="amphtml-site-icon i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built" style="width: 68px; height: 68px;" i-amphtml-layout="fixed"></amp-img>
</button>
</div>
<div class="lightbox-search" tabindex="0">
<form role="search" method="get" class="search-form i-amphtml-form" action="https://imperiumromanum.pl/en/amp/" target="_top" novalidate="">
<label>
<input type="search" class="search-field" placeholder="Search …" value="" name="s">
<input type="hidden" name="is_amp" value="1">
</label>
<input type="submit" class="search-submit" value="Search">
</form> </div>
</amp-lightbox>
<amp-lightbox id="n-lightbox" layout="nodisplay" class="i-amphtml-element i-amphtml-layout-nodisplay i-amphtml-overlay i-amphtml-built" i-amphtml-layout="nodisplay" hidden="">
<div class="lightbox-menu" tabindex="0">
<button class="lightbox-close" on="tap:n-lightbox.close">
<amp-img src="https://imperiumromanum.pl/wp-content/themes/romanum/wp-amp/icons/amp-close.png" width="68" height="68" alt="Close" class="amphtml-site-icon i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built" style="width: 68px; height: 68px;" i-amphtml-layout="fixed"></amp-img>
</button>
</div>
<div class="lightbox-search" tabindex="0">
<div class="newsletter-wrapper">
<form id="pop_newsletter" name="submit" method="post" action-xhr="//imperiumromanum.pl/wp-content/themes/romanum/wp-amp/includes/mailchimp-pop.php" target="_top" novalidate="" class="i-amphtml-form amp-form-dirty">
<h2>Subscribe to the newsletter!</h2>
<p>Do you want to be up to date with news, curiosities and discoveries from the world of ancient Romans? Subscribe to the newsletter! The newsletter will be sent every Saturday.</p>
<input type="email" name="pop_email" placeholder="Enter your email address" required="">
<label for="pop_lang"><span>Language</span>
<select name="pop_lang" required="">
<option value="2">English</option>
<option value="1">Polish</option>
</select></label>
<input type="submit" value="Subscribe">
<div submit-success="">
<template type="amp-mustache">
Thank you! Check {{email_address}} to confirm your subscription. </template>
</div>
<div submit-error="">
<template type="amp-mustache">
Ooops... Something went wrong. Please try again later. </template>
</div>
</form>
</div> </div>
</amp-lightbox> </div></nav>
<div id="main">
<div class="target">
<a class="target-anchor" id="top"></a>
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay" class="i-amphtml-element i-amphtml-layout-nodisplay i-amphtml-built" i-amphtml-layout="nodisplay" hidden=""></amp-position-observer>
</div>
<amp-animation id="showAnim" layout="nodisplay" class="i-amphtml-element i-amphtml-layout-nodisplay i-amphtml-built" i-amphtml-layout="nodisplay" hidden="">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0.9",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay" class="i-amphtml-element i-amphtml-layout-nodisplay i-amphtml-built" i-amphtml-layout="nodisplay" hidden="">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<div class="inner">
<div class="amp-ad"><amp-ad width="0" height="320" type="adsense" data-ad-client="ca-pub-1752121314293437" data-ad-slot="5827352308" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built" style="width: 100%; height: 320px;" i-amphtml-layout="fixed" data-amp-slot-index="0" data-a4a-upgrade-type="amp-ad-network-adsense-impl">
<div overflow=""></div>
<div fallback=""><div class="i-amphtml-ad-default-holder" data-ad-holder-text="Ad"></div></div><amp-analytics sandbox="true" trigger="immediate" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built" style="width: 1px; height: 1px;" i-amphtml-layout="fixed" aria-hidden="true" hidden=""><script type="application/json">{"requests":{"csi":"https://csi.gstatic.com/csi?"},"transport":{"xhrpost":false},"triggers":{"adRequestStart":{"on":"ad-request-start","request":"csi","sampleSpec":{"sampleOn":"a4a-csi-${pageViewId}","threshold":1},"selector":"amp-ad","selectionMethod":"closest","extraUrlParams":{"met.a4a":"afs_lvt.${viewerLastVisibleTime}~afs.${time}"}},"adResponseEnd":{"on":"ad-response-end","request":"csi","sampleSpec":{"sampleOn":"a4a-csi-${pageViewId}","threshold":1},"selector":"amp-ad","selectionMethod":"closest","extraUrlParams":{"met.a4a":"afe.${time}"}},"adRenderStart":{"on":"ad-render-start","request":"csi","sampleSpec":{"sampleOn":"a4a-csi-${pageViewId}","threshold":1},"selector":"amp-ad","selectionMethod":"closest","extraUrlParams":{"met.a4a":"ast.${scheduleTime}~ars_lvt.${viewerLastVisibleTime}~ars.${time}","qqid":"${qqid}"}},"adIframeLoaded":{"on":"ad-iframe-loaded","request":"csi","sampleSpec":{"sampleOn":"a4a-csi-${pageViewId}","threshold":1},"selector":"amp-ad","selectionMethod":"closest","extraUrlParams":{"met.a4a":"ail.${time}"}}},"extraUrlParams":{"s":"ampad","ctx":"2","c":"${correlator}","slotId":"${slotId}","puid":"${requestCount}~${timestamp}"}}</script></amp-analytics></amp-ad></div>
<div class="amphtml-content amphtml-single-page single-content">
<div class="okruszki">
<!-- Breadcrumb NavXT 7.2.0 -->
<span><a rel="v:url" property="v:title" title="Go to IMPERIUM ROMANUM." href="https://imperiumromanum.pl/en/" class="home">Home</a></span> » <span><a rel="v:url" property="v:title" title="Idź do Roman society." href="https://imperiumromanum.pl/en/roman-society/" class="post post-page current-item">Roman society</a></span></div> <div class="titlediv">
<h1 class="amphtml-title">Roman society</h1>
<p class="lang_sel">This post is also available in: <strong>Polish</strong> (polski)</p></div> <amp-img lightbox="" src="https://imperiumromanum.pl/wp-content/uploads/2014/10/Pompeii-couple-e1664121350864-600x582.jpg" layout="responsive" width="600" height="582" alt="Fresco showing a Roman couple" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" i-amphtml-layout="responsive" on="tap:amp-lightbox-gallery.activate" style="--loader-delay-offset: 47ms !important;"><i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 97%;"></i-amphtml-sizer>
<img decoding="async" alt="Fresco showing a Roman couple" src="https://imperiumromanum.pl/wp-content/uploads/2014/10/Pompeii-couple-e1664121350864-600x582.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
<div class="chmurka_feat"><p class="opis_feat">Fresco showing a Roman couple</p></div>
Thank you.
Regards,
Jakub

Related

Css Border are collapse to each other

I created a caurosal of 8 products when i apply a border than border are joint to each other. i did not create class because all are created dynamically. if i decrease the width the another product that are hide on another caurosal are shown. how i fix it
<div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(0%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-girl">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-01.jpg?v=1520416066">
<h4>Personalised Goodnight Storybook - Girl</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81743151117" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(100%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-boy">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-04.jpg?v=1520416051">
<h4>Personalised Goodnight Storybook - Boy</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81757011981" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(200%);">
<a href="/collections/activities-storybooks-kids/products/stories-for-1-year-olds">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/stories_for_1_yr_old_6e9cdfeb-6ba4-4b57-893d-f0165014e016.jpg?v=1495545024">
<h4>Stories for 1 year olds</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="1824342913" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 250</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(300%);">
<a href="/collections/activities-storybooks-kids/products/my-learning-library-first-words">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/Learning_Library_-_Words.jpg?v=1537694862">
<h4>My Learning Library - First Words</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="695380246574" id="add-to-cart-form">
<div class="prices">
<span class="compare-price">Rs. 799</span>
<span class="price on-sale" itemprop="price">Rs. 599</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div>
I tried width property. Select first child and nth of type but that product are hide are shown and first product left side of boundary are hide.
you can use this code by adding CSS
.main_div{
display: flex;
column-gap: 10px;
}
/* or */
.card{
margin: 0 10px;
}

How Can I Align These TextBoxes For My Website?

Recently, I've been trying to align my two text boxes for my website, but I couldn't figure it out. Do understand that I'm not knowledgeable in CSS like you are, but I need to know what to change so that they won't show up on the far left and unaligned. This is what it looks like on my website for some reason:
http://i.imgur.com/zkxPBEl.png
As you can see, it doesn't align properly, even when I try to center it using an online editor. Please help! Thanks!
<!-- AWeber Web Form Generator 3.0.1 --><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
}
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
var IE = /*#cc_on!#*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-604218668")) {
document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-604218668")) {
document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-604218668")) {
document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-604218668")) {
document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
}
}
})();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->
Your input Tags have different width settings.
style="width: 200px;" and style="width: 460px;"
Make these the same value.
I believe this is the solution your looking for? Your looking to have the name input field centre aligned with the next field. If you set the position to relative and set the left position to ((email width - name width) / 2) You'll end up with an equal distance on the left and right making it centred
So your layout becomes this
130px <--- 200px ---> 130px
<------------ 460px ------------>
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px; position:relative;left:130px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
By adding style="margin: 0 0 0 13%;" to your form tag it will be centered properly. or if you want then you can change the amount if it is not centering then too.. I hope this will help you :)
<!-- AWeber Web Form Generator 3.0.1 --><form style="margin: 0 0 0 13%;" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
}
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
var IE = /*#cc_on!#*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-604218668")) {
document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-604218668")) {
document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-604218668")) {
document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-604218668")) {
document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
}
}
})();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->
Make the container holding the div inline-block. And use "text-align:center" on the container holding that div. See code below. Hope it helps.
.af-form {
text-align: center;
}
.af-body {
margin: 0 auto;
display: inline-block;
}
.af-clear {
text-align: center;
}
<!-- AWeber Web Form Generator 3.0.1 --><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
}
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
var IE = /*#cc_on!#*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-604218668")) {
document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-604218668")) {
document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-604218668")) {
document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-604218668")) {
document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
}
}
})();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->

Extra bottom space outside of body

body{
border: 3px red solid;
background-color: green !important;
}
For the convinence of debug,I set body as above.
And the result is shown in the screenshot as below:
See that extra green space at the very bottom? I just can't seem to get rid of it.
The margin of the body of course is all 0 and overflow: hidden is not helping either.
Besides, all of the elements inside the body share the same height.
Alright ,so the html for this page is as below:
<link href="http://news.12reads.cn/style.css" rel="stylesheet"/>
<body class="page page-id-2109 page-template page-template-start page-template-start-php logged-in d2 g2 p2 c2 elegant">
<div id="global" class="global">
<div class="pusher">
<!-- <section id="title"></section> 隐藏课程学习页的page title -->
<!-- 内容区开始 -->
<section id="content" style="background-color: rgb(240, 240, 244); height: 100%; padding-bottom: 698px;">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="unit_wrap ">
<div id="unit_content" class="unit_content">
<div id="unit" class="unit_title" data-unit="2618">
<div class="instructor">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span><strong>讲师</strong><br>12reads</span>
</div><i class="icon-printer-1"></i><span><i class="icon-clock"></i> 49 分钟</span> <br><h1 class="well well-sm" style="font-size: 18px;">管理思维的演变</h1>
</div>
<div class="main_unit_content unit_class"><div id="a1"><object pluginspage="http://www.macromedia.com/go/getflashplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" id="ckplayer_a1" name="ckplayer_a1" align="middle" height="400" width="100%"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#FFF"><param name="wmode" value="transparent"><param name="movie" value="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf"><param name="flashvars" value="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&c=0"><embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf" flashvars="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&c=0" name="ckplayer_a1" id="ckplayer_a1" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="400" width="100%"></object></div>
<script type="text/javascript" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:"http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4",
c:0
};
var params={bgcolor:"#FFF",allowFullScreen:true,allowScriptAccess:"always",wmode:"transparent"};
var video=["http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4->video/mp4"];
CKobject.embed("http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf","a1","ckplayer_a1","100%","400",false,flashvars,video,params);
</script>
</div> <div class="unit_prevnext"><div class="col-md-3">上一课时</div><div class="col-md-6"></div><div class="col-md-3"></div></div> </div>
<input id="hash" name="hash" value="bf905d9c31" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"><input id="course_id" name="course" value="2605" type="hidden"> <div id="ajaxloader" class="disabled"></div>
<div class="side_comments"><a id="all_comments_link" data-href="">查看全部</a>
<ul class="main_comments">
<li class="hide">
<div class="note">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> 12reads <div class="unit_comment_content"></div>
<ul class="actions">
<li><a class="tip edit_unit_comment" title="" data-original-title="Edit"><i class="icon-pen-alt2"></i></a></li>
<li><a class="tip public_unit_comment" title="" data-original-title="Make Public"><i class="icon-fontawesome-webfont-3"></i></a></li>
<li><a class="tip private_unit_comment" title="" data-original-title="Make Private"><i class="icon-fontawesome-webfont-4"></i></a></li>
<li><a class="tip reply_unit_comment" title="" data-original-title="Reply"><i class="icon-curved-arrow"></i></a></li>
<li><a class="tip instructor_reply_unit_comment" title="" data-original-title="Request Instructor reply"><i class="icon-forward-2"></i></a></li>
<li><a data-href="#" class="popup_unit_comment" title="Open in Popup" target="_blank"><i class="icon-windows-2"></i></a></li>
<li><a class="tip remove_unit_comment" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
</ul>
</div>
</li>
</ul>
<a class="add-comment">Add a Note</a>
<div class="comment-form">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span>YOU</span> <article class="live-edit" data-model="article" data-id="1" data-url="/articles">
<div class="new_side_comment" data-editable="true" data-name="content" data-text-options="true" contenteditable="true">
添加评论 </div>
</article>
<ul class="actions">
<li><a class="post_unit_comment tip" title="" data-original-title="发布"><i class="icon-fontawesome-webfont-4"></i></a></li>
<li><a class="remove_side_comment tip" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="course_time">
<strong>剩余时间 : <span>0 Days</span></strong> </div>
<div class="progress course_progressbar" data-increase-unit="50" data-value="50.00">
<div class="bar animate cssanim stretchRight load" style="width: 50.00%;"><span>50.00%</span></div>
</div><div class="course_timeline ">
<ul><li id="unit2609" class="unit_line done"><span></span> <a class="unit" data-unit="2609">管理思维导论</a></li><li id="unit2618" class="unit_line active done"><span></span> <a class="unit" data-unit="2618">管理思维的演变</a></li></ul></div> <div class="more_course">
返回课程
<form action="http://peixun:8888/course/%e7%ae%a1%e7%90%86%e6%80%9d%e7%bb%b4/" method="post">
<input name="review_course" class="review_course unit_button full button" value="评价课程" type="submit"><input name="submit_course" class="review_course unit_button full button" value="完成课程" type="submit">
<input id="review" name="review" value="e9c8949274" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"> </form>
</div>
</div>
</div>
</div>
</section>
</div><!-- END PUSHER -->
</div><!-- END MAIN -->
<span class="text-options" style="top: -999px; left: -999px;"><button class="url-button">U</button><span class="input-text"><input name="liveedit-url" type="text"></span><button class="bold-button">B</button><button class="italic-button">I</button><button class="strikethrough-button">ABC</button><button class="unorderedlist-button">L</button></span></body>
This is a simple common mistake. the body element has a default value of 8px on margin property. What you gotta do is
html, body {
height: 100%;
width: 100%;
margin: 0;
}
The 100% width and height are optional, I just always use that snippet to fill up the whole screen with body.
I am having that problem with Bootstrap. Looks like the culprit is the ROW class. I solved it by setting the with of the row to 100%:
<div class="row" style="width:100%">
I tested with your code, not in a jsfiddle and I added this:
.page {
height: 100%;
margin: 0;
}
html {
position: relative;
height: 100%;
}
If you can't set html properties, on .page add min-height: 100vh. vh is viewport units, this case horizontal.
.page {
height: 100%;
margin: 0;
min-height: 100vh;
}

Aligning buttons and datetimepicker in one row/line

I want to have two datetime pickers and some buttons align in one row. I want the date time pickers on the row to be on the left and the buttons aligned on the right.
All of this I want in one row.
I have been messing around with this for some days now and cannot get them to be in one single row, they are all over the place.
The code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="height: 75px;">
<div class="col-md-5">
<div class="form-control">
<div class='input-group date' id='datetimepickerFrom' style="cursor: pointer; width: 200px;">
<input type="text" id="DateFrom" runat="server" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepickerTo' style="cursor: pointer; width: 200px;">
<input type="text" id="DateTo" runat="server" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<asp:Button ID="btnYesterday" runat="server" Text="Yesterday" class="btn btn-primary"
OnClick="btnYesterday_Click" Style="margin-top: 50px; width: 100px;" />
<asp:Button ID="btnWeek" runat="server" Text="Week" class="btn btn-primary"
OnClick="btnWeek_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
<asp:Button ID="btnMonth" runat="server" Text="Month" class="btn btn-primary"
OnClick="btnMonth_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
</div>
</div>
</div>
</div>
</div>
As usual, thanks in advance.
Normally in bootstrap you would just put the class form-inline on your form element (or whatever container that contains your form elements). Your other inline styles may be hosing some of that up. See this example:
See the fiddle here https://jsbin.com/juqereyazu/edit?html,output

select box in not displaying properly

Select list is not displaying properly.
Please see the images..
some height is conflicting, I am using angular ui-select for select list.
<ui-select id="viewSelector" class="viewSelector input-small" ng-model="dashboard.refresh" theme="selectize" style="width: 120px;" ng-change="autoRefreshUpdated()">
<ui-select-match placeholder="Select Interval">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="interval in autoRefreshIntervals">
<div ng-bind-html="interval"></div>
</ui-select-choices>
</ui-select>
Code rendered as :
<div class="viewSelector input-small ui-select-container selectize-control single ng-valid ng-touched ng-dirty ng-valid-parse" ng-class="{'open': $select.open}" id="viewSelector" ng-model="dashboard.refresh" theme="selectize" style="width: 120px;/* height: 10px !important; */" ng-change="autoRefreshUpdated()">
<div class="selectize-input" ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}" ng-click="$select.activate()">
<div ng-hide="($select.open || $select.isEmpty())" class="ui-select-match" ng-transclude="" placeholder="Select Interval"><span class="ng-binding ng-scope">5s</span>
</div>
<input type="text" autocomplete="off" tabindex="-1" class="ui-select-search ui-select-toggle ng-pristine ng-valid ng-touched ng-hide" ng-click="$select.toggle($event)" placeholder="Select Interval" ng-model="$select.search" ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)" ng-disabled="$select.disabled" aria-label="Select box">
</div>
<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single ng-scope ng-hide" repeat="interval in autoRefreshIntervals" style="opacity: 1;">
<div class="ui-select-choices-content selectize-dropdown-content">
<div class="ui-select-choices-group optgroup" role="listbox">
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header ng-binding ng-hide" ng-bind="$group.name"></div>
</div>
</div>
</div>
<ui-select-single></ui-select-single>
<input ng-disabled="$select.disabled" class="ui-select-focusser ui-select-offscreen ng-scope" type="text" id="focusser-1" aria-label="Select box focus" aria-haspopup="true" role="button">
</div>

Resources