Why does my .container main_container div hang on the header? (Its not because the 2 php error message, i tried)
If i give the div about 100px margin-top, it will be okay, but that isn't a good method.
After the header, I added a clearfix div, but it did nothing.
Fiddle
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo $host; ?>"><?php echo $siteName; ?></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<?php
$top_menuDown = mysqli_query($kapcs, "SELECT * FROM top_menu WHERE top_menu_id IN (1,3,4,5,6,7) ORDER BY top_menu_sorrend ASC");
if(mysqli_num_rows($top_menuDown) > 0 )
{
while($top_nav = mysqli_fetch_assoc($top_menuDown))
{
echo '<li><a class="top_menu_to_link" href="'.$host.'/'.$top_nav['top_menu_seo'].'" title="'.$top_nav['top_menu_nev'].'">'.$top_nav['top_menu_nev'].'</a></li>';
}
}
?>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
This is because you use navbar-fixed-top class in your navbar. That's a Bootstrap class which makes your navbar position: fixed in CSS. Therefore you have to add margin-top or padding-top to your main_container. Clearfix has nothing to do with your issue in this case. When you use position: fixed browser get this element out of the normal document flow.
position: absolute/fixed:
The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
You have to use padding-top/margin-top to the body element. The reason is explained by #makshh. So just try to customize it based on screen size using Javascript.
Updated Fiddle
Here is an example--
$(window).resize(function() {
if ($(".navbar.navbar-default.navbar-fixed-top.mainHeader").height() > 100) {
$("html, body").css("padding-top", "150px");
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Főoldal</title>
<body style="padding-top:100px;">
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://kemenyem.hu">Nemzeti Reptéri Parkoló</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="top_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/erdekessegek" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a></li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
<div class="container main_container">
<div class="homepage_slideshow hidden-xs">
<div class="home-slider-wrapper hidden-xs">
<ul class="bxslider">
<li><img src="https://kemenyem.hu/images/homepage_slideshow/93-3.jpg" title="Teszt kép 1" alt="Teszt kép 1" /></li>
<li><img src="https://kemenyem.hu/images/homepage_slideshow/393-1.jpg" title="Teszt kép 2" alt="Teszt kép 2" /></li>
</ul>
</div>
</div>
<!--Slider end-->
<div class="col-md-9 left_side">
<div class="left_title_div">
<h3 class="left_title">Parkolóhely foglalás online</h3>
</div>
<div class="content">
<h3><strong>A megrendelés, árajánlatkérés menete</strong></h3>
<p>Amennyiben árajánlatot szeretne kérni, azt a termékeknél a "Még jobb árat szeretnék" gombra, vagy a menüben az "Ajánlatkérés" menüpontra
való kattintással teheti meg.</p>
<p>A megjelenő ajánlatkérő ablakban / oldalon kérjük töltse ki az összes mezőt, és küldje el részünkre.</p>
<p>Munkatársaink 2 munkanapon belül felveszik Önnel a kapcsolatot az Ön által megadott elérhetőségek valamelyikén.</p>
<h3><strong>Fizetés</strong></h3>
<p>Megrendelését előre utalással, vagy személyesen valamelyik telephelyünkön készpénzzel tudja fizetni. A budapesti telephelyünkön lehetőség van bankkártyás fizetésre
is.</p>
<h3><strong>Szállítás</strong></h3>
<p>A részletes szállítási információkat megtekintheti a "Szállítás" menüpontban.</p>
<h3><strong>Árak</strong></h3>
<p>A weboldalon feltüntetett árak gyári árak, tartalmazzák a 27% ÁFÁ-t, de nem tartalmazzák a raklapok díját, a szállítást, és a lerakást.</p>
</div>
<div class="left_title_div">
<h3 class="left_title">Legfrissebb hírek</h3>
</div>
<div class="news_box news_list">
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_remy-metailler-hafjell_147-82712.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Jobb lett az instant futtatás az új Android Studio 2.3-ban">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Jobb lett az instant futtatás az új Android Studio 2.3-ban</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
<p class="main_hir_box_desc">A Google a napokban új kiadást jelentett be integrált mobilos fejlesztőkörnyezetéből. Az új Android Studio 2.3 sok stabilitási fejlesztés mellett néhány érdekes funkcionális fejlesztést is hoz, amik az app-ok tervezését, tesztelését és a bennük
történő hibakeresést egyaránt segítik majd.</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/thumb_ne-style-001-2532861600.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
<p class="main_hir_box_desc">A bemutató feltételezi, hogy a gépeden már fel van telepítve a PHP, az SQL Server Express kiadása, valamint a Microsoft SQL Server meghajtói a PHP-hez és a Git verziókezelő is. A cikk során a következőket fogjuk megtanulni:</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_s1600_0815_km_01-12894.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:25</span>
<p class="main_hir_box_desc">A Microsoft a hét elején Visual Studio blogjában egy olyan, általa poszternek hívott dokumentumot tett közzé, amelyben múlt héten bemutatott új integrált fejlesztői környezete legfontosabb újdonságait mutatja be. A máshol csak infografikának
hívott összeállításban az általános, produktivitást javító fejlesztések mellett unit-tesztelést segítő újdonságok, sőt, a C++, a C# és az ASP.NET újdonságai is említésre kerülnek.</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_p-dsc04186-81966.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Új korszakot nyit a most elkészült LLVM és a Clang 4.0">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Új korszakot nyit a most elkészült LLVM és a Clang 4.0</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:24</span>
<p class="main_hir_box_desc">Az LLVM fejlesztői a napokban "final" jelöléssel látták el az LLVM és a Clang következő, 4-es verzióját. Bár a hivatalos bejelentés és a csomagok közzétételére vélhetően csak ezen a héten kerül majd sor, a fordító-infrastruktúra
és a hozzá kapcsolódó C/C++ fordító legújabb kiadása ezzel elkészültnek tekinthető.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 right_side">
<div class="left_title_div">
<h3 class="left_title">Hírlevél</h3>
</div>
<div class="sidebar_data_div">
<div class="sidebar_data">
<p class="sidebar_text">Iratkozzon fel hírlevelünkre, hogy mindíg értesüljön az újdonsgokról, friss hírekről.</p>
<form action="files/newsletter.php" method="post" id="SidebarNewsletterForm">
<input type="text" id="newsletterName" name="NewsletterName" placeholder="Az Ön neve" class="form-control sidebar_input">
<input type="text" id="NewsletterEmail" name="NewsletterEmail" placeholder="E-mail címe" class="form-control sidebar_input">
<button type="button" id="NewsletterButton" name="NewsletterButton" class="sidebar_button"><i class="fa fa-envelope-o" aria-hidden="true"></i> Feliratkozás</button>
</form>
</div>
</div>
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-links">
<a class="footer_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a><a class="footer_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a><a class="footer_menu_to_link" href="https://kemenyem.hu/erdekessegek"
title="Hírek, érdekességek">Hírek, érdekességek</a><a class="footer_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a><a class="footer_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a>
<a
class="footer_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a>
</p>
<p class="footer-company-name">2017 <br />
<b>Notice</b>: Undefined index: k_nev in <b>/home/grashu/public_html/kemenyem.hu/files/footer.php</b> on line <b>15</b><br /> © - Minden jog fentartva!</p>
</footer>
<div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Bezárás</span></button>
<h4 class="modal-title" id="myModalLabel">Értesítés</h4>
</div>
<div class="modal-body">
<p id="newsletterResult"></p>
</div>
</div>
</div>
</div>
<i class="fa fa-chevron-up scrollToTopIcon" aria-hidden="true"></i></body>
Hope this helps!
Related
I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>
I want to extract amazon reviews and all its related data like: Name of reviewer, rating, content, and (if possible) comments in response to that review.
I am using python 3.7.
You can achieve that by two methods:
API (reliable fast)
Ask for API from Amazon
Tools like Headless chrome or Selenium
check this post
Find DOM element in the page like
<div id="R1IZDPP09RA69A" data-hook="review" class="a-section review">
<div id="customer_review-R1IZDPP09RA69A" class="a-section celwidget" data-cel-widget="customer_review-R1IZDPP09RA69A">
<div class="a-row a-spacing-mini">
<a href="/gp/profile/amzn1.account.AGFB356ZQJQAHWZZABTTNIFGYMDA/ref=cm_cr_dp_d_gw_tr?ie=UTF8" class="a-profile" data-a-size="small">
<div aria-hidden="true" class="a-profile-avatar-wrapper">
<div class="a-profile-avatar">
<img src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg" class="" data-src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg">
<noscript><img src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg"></noscript>
</div>
</div>
<div class="a-profile-content"><span class="a-profile-name">Sana Khanam</span></div>
</a>
</div>
<div class="a-row"><a class="a-link-normal" title="4.0 out of 5 stars" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=B079Q9VNWQ"><i data-hook="review-star-rating" class="a-icon a-icon-star a-star-4 review-rating"><span class="a-icon-alt">4.0 out of 5 stars</span></i></a><span class="a-letter-space"></span><a data-hook="review-title" class="a-size-base a-link-normal review-title a-color-base a-text-bold" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=B079Q9VNWQ">Amazing service by VOLTAS !!Appreciated 🖒</a></div>
<span data-hook="review-date" class="a-size-base a-color-secondary review-date">17 May 2018</span>
<div class="a-row a-spacing-mini review-data review-format-strip"><span data-hook="avp-badge-linkless" class="a-size-mini a-color-state a-text-bold">Verified Purchase</span></div>
<div class="a-row a-spacing-small review-data">
<span data-hook="review-body" class="a-size-base review-text">
<div aria-live="polite" data-a-expander-name="review_text_read_more" data-a-expander-collapsed-height="300" class="a-expander-collapsed-height a-row a-expander-container a-expander-partial-collapse-container" style="max-height: none; height: 300px;">
<div data-hook="review-collapsed" aria-expanded="false" class="a-expander-content a-expander-partial-collapse-content" style="padding-bottom: 19px;">5 th day after having AC installed.<br>PROS:<br><br>-Cooling nice<br>-Looks good<br>-Good one in this price range<br>-Fast Installation within 24h<br>- Customer support response appriciated<br><br>CONS<br>-Started making weird little noises while decreasing temperature.<br><br>-I don't understand but some unpleasant smell being diffused after starting it at the 5th day of installation.<br><br>-Contacted seller, issue resolved!<br><br>Overall would RECOMMEND!! Go for it.</div>
<div class="a-expander-header a-expander-partial-collapse-header" style="opacity: 1; display: block;">
<div class="a-expander-content-fade"></div>
<i class="a-icon a-icon-extender-expand"></i><span class="a-expander-prompt">Read more</span>
</div>
</div>
</span>
</div>
<div data-hook="review-comments" class="a-row review-comments">
<span class="cr-vote" data-hook="review-voting-widget">
<div class="a-row a-spacing-small"><span data-hook="helpful-vote-statement" class="a-size-base a-color-tertiary cr-vote-text">5 people found this helpful</span></div>
<div class="cr-helpful-button aok-float-left">
<span class="a-button a-button-base" id="a-autoid-14">
<span class="a-button-inner">
<a href="https://www.amazon.in/ap/signin?openid.return_to=https%3A%2F%2Fwww.amazon.in%2Fdp%2FB079Q9VNWQ%2Fref%3Dcm_cr_dp_d_vote_lft%3Fie%3DUTF8%26voteInstanceId%3DR1IZDPP09RA69A%26voteValue%3D1%26csrfT%3DgiYnW3e%252Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%252F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%252F%252F%252F%252F%23R1IZDPP09RA69A&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=inflex&openid.mode=checkid_setup&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0" data-hook="vote-helpful-button" class="a-button-text" role="button" id="a-autoid-14-announce">
<div class="cr-helpful-text">
Helpful
</div>
</a>
</span>
</span>
</div>
</span>
<i class="a-icon a-icon-text-separator" role="img" aria-label="|"></i><a data-hook="review-comment" class="a-size-base a-link-normal a-color-secondary a-text-normal" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_btm?ie=UTF8&ASIN=B079Q9VNWQ#wasThisHelpful">Comment</a><span class="cr-footer-line-height">
<span><i class="a-icon a-icon-text-separator" role="img" aria-label="|"></i><span class="a-declarative" data-action="cr-popup" data-cr-popup="{"width":"580","title":"ReportAbuse","url":"/hz/reviews-render/report-abuse?ie=UTF8&voteDomain=Reviews&ref=cm_cr_dp_d_rvw_hlp&csrfT=giYnW3e%2Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%2F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%2F%2F%2F%2F&entityId=R1IZDPP09RA69A&sessionId=257-1905223-9805712","height":"380"}"><a class="a-size-base a-link-normal a-color-secondary report-abuse-link a-text-normal" href="/hz/reviews-render/report-abuse?ie=UTF8&voteDomain=Reviews&ref=cm_cr_dp_d_rvw_hlp&csrfT=giYnW3e%2Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%2F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%2F%2F%2F%2F&entityId=R1IZDPP09RA69A&sessionId=257-1905223-9805712">Report abuse</a></span></span></span>
</div>
</div>
</div>
here you can find reviewer name rating and review under each div having attribute data-hook="review".
Name under <span class="a-profile-name">Sana Khanam</span>
Rating <span class="a-icon-alt">4.0 out of 5 stars</span>
Review <div data-hook="review-collapsed" aria-expanded="false" class="a-expander-content a-expander-partial-collapse-content" style="padding-bottom: 19px;">5 th day after...</div>
I am trying to style the post in the loop in alternate styling using Custom Content Short code plugin. Some what like this.
Example image of post styling using bootstrap col-offset
This is what i'm trying
<?php start_short(); ?>
[loop type=service orderby=date order=ASC]
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
[/loop]
<?php end_short(); ?>
What I want to display is:
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
How can I achieve this?
The above code was generating a loop of post in WordPress with single class of col-md-offset-7 to every post.
What I did was use jQuery even function to delete class from alternate post.
$("div.service-post:even").removeClass("col-md-offset-7");
I am writting an article on my Drupal 7 site directly with HTML source code.
When i save my content and want to modify it again, all my HTML source code has changed structure.
The display is what i want but the html source code is more complex then mine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Ligne (collapse) -->
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-19">
<!-- Titre ligne -->
<div class="col-md-5 col-xs-12 titre-ligne">Transport en commun<i class="glyphicon glyphicon-info-sign"></i></div>
<!-- Contenu ligne -->
<div class="col-md-7 col-xs-12">
<div class="vals">
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
</div>
</div>
</a>
<!-- Contenu caché (collapse) -->
<div class="row collapse" id="ligne-collapse-19">
<div class="ligne-detail">
<div class="col-md-8 col-xs-10 col-center">
Profitez d'un mois gratuit* sur votre assurance auto pour toute nouvelle souscription.
</div>
</div>
</div>
<!-- Fin Ligne -->
Becomes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-5 col-xs-12 titre-ligne"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1">Responsabilité civile<i class="glyphicon glyphicon-info-sign"></i></a></div>
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1">
<!-- Contenu ligne -->
</a>
<div class="col-md-7 col-xs-12">
<div class="vals">
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
</div>
</div>
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"> </a>
<!-- Contenu caché (collapse) -->
<div class="row collapse" id="ligne-collapse-1">
<div class="ligne-detail">
<div class="col-md-8 col-xs-10 col-center">Elle couvre les dommages occasionnés par votre véhicule impliqué dans l'accident et constitue le minimum exigible de tout contrat d'assurance auto.</div>
</div>
</div>
<!-- Fin Ligne -->
All my links <a href="..." are splitted... what can i do to avoid this ?
As we can see in comments, there are no simple way to avoid Drupal from modifying custom HTML :
With a module hook into the core (thanks #headmax)
With Text format attribute put on "PHP Code"
I chose Text format because i have no time to spare on a new module.
Thanks for your answers
If you're using the WYSIWYG module, there's a setting called "Apply simple source formatting" (at /admin/config/content/wysiwyg/) that will reformat your code, even if you are editing the source directly.
to all moderates reading this message I had asked it in another thread but was told to post it as a stand alone question. Not my intention to cluter the forum
My twitter bootstrap container is shifted to the left for some reason. Is there any way to make it take up the whole screen despite resolution? When I use .container-fluid, it seems to shrink the overall container (even when I add .row-fluid to all my rows).
My alerts are not increasing in width. That is to say that I would like the alert (background color and all) to be the width of the container. In the link below I would like "If this is your ad login to edit" to span the whole container. However when I try .span12 it just shifts the alert. Also width:100%; does nothing to help. Also when I press login and an a login error occurs the error is shown at the far left instead of right on top of the login form.
** concerning items 2 and 3 refer to this link https://twitter.com/HassanNSaid/status/355797180063301632/photo/1 **
Requested code
<div class="container-fluid">
<div class="row well">
<?php
loginFunc();
miniLogo();
searchFunc();
otherOptions();
?>
</div>
<div class="row">
<center>
<?php
if(isset($_GET['error_with_new_title'])){
echo'<span class="alert-error">'.$_GET['error_with_new_title'].'</span>';
}elseif(isset($_GET['success_with_new_title'])){
echo'<span class="alert-success">'.$_GET['success_with_new_title'].'</span>';
}elseif(isset($_GET['error_with_new_vitals'])){
echo'<span class="alert-error">'.$_GET['error_with_new_vitals'].'</span>';
}elseif(isset($_GET['success_with_new_vitals'])){
echo'<span class="alert-success">'.$_GET['success_with_new_vitals'].'</span>';
}elseif(isset($_GET['error_with_new_description'])){
echo'<span class="alert-error">'.$_GET['error_with_new_description'].'</span>';
}elseif(isset($_GET['success_with_new_description'])){
echo'<span class="alert-success">'.$_GET['success_with_new_description'].'</span>';
}else{
echo'<span class="alert">If this is your ad please log in to edit it!</span>';
}
?>
</center>
</div>
<div class="row page-header text-center">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdTitle($i);
}else{
$i = 0;
printAdTitle($i);
}
?>
</div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<? printAdImages($_GET['id']); ?>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdVitals($i);
}else{
$i = 0;
printAdVitals($i);
}
?>
</div>
<div class="tab-pane" id="contactUserPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdContactForm($i);
}else{
$i = 0;
printAdContactForm($i);
}
?>
</div>
</div>
<div class="ratingForm">
<?php
$adId = $_GET['id'];
printRatingForm($adId);
?>
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdDescription($i);
}else{
$i = 0;
printAdDescription($i);
}
?>
</div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<? printSimilarItems(); ?>
</div>
<div class="tab-pane" id="otherUserItemsPane">
<? printOtherItems(); ?>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Scoopclassifieds.com - Test4 posted under Electronics/Laptop</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="js/bootstrap-popover.js"></script>
<script type="text/javascript" src="js/editFormValidation.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/customStyles.css" type="text/css" />
</head>
<body onLoad="addOption_list();">
<div class="container-fluid">
<div class="row well">
<form class="form-inline pull-right" action="controllers/login.php" method="POST">
<input type="text" name="email" id="email" placeholder="Email" class="span2" />
<input type="password" name="password" id="password" placeholder="●●●●●●●●" class="span2" />
<input type="submit" name="login" id="login" value="Login" class="btn" />
</form>
<img src="/scoopclassifieds/slir/w300-h200-q60/scoopclassifieds/images/scoop3.png" alt="miniLogo" />
<form action="search.php" method="get" name="search_form" id="search_form" class="form-search pagination-centered">
<input type="text" name="searchFor" id="searchFor" class="searchInput span10" />
<input type="text" name="min" id="min" placeholder="Min Price" class="span2 text-center" />
<input type="text" name="max" id="max" placeholder="Max Price" class="span2 text-center" />
<input type="text" name="location" id="location" class="span2 text-center" />
<button type="submit" class="btn">Search</button>
</form>
<ul class="nav nav-pills">
<li>Add</li>
<li>Browse</li>
</ul>
</div>
<div class="row">
<center>
<span class="alert">If this is your ad please log in to edit it!</span> </center>
</div>
<div class="row page-header text-center">
<div id="item_title"><br/><span style="font-size:35px; font-weight:bold;">Test4</span></div> </div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<div id="myCarousel" class="carousel well span8">
<div class="carousel-inner">
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/61Ec8SFYZoL._SS500_.jpg" id="0" alt="image0" class="item active" />
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/0176440763.jpg" id="1" alt="image1" class="item" />
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<span class="well span5" style="font-size:30px; color:white; text-align:center; background:#BC4F0F;">$124</span><br/>
<span style="font-size:16px; font-weight:bold;">Location:</span><span style="font-size:14px;">Ottawa</span><br/>
<span style="font-size:16px; font-weight:bold;">Category:</span><span style="font-size:14px;">Electronics</span><br/>
<span style="font-size:16px; font-weight:bold;">Sub-Category:</span><span style="font-size:14px;">Laptop</span>
</div>
<div class="tab-pane" id="contactUserPane">
<form action="" method="post">
<label>Email:</label> <input type="text" name="email" id="email" value="" class="viewInput" /><br/>
<label>Message:</label><br/>
<textarea rows="4" cols="50" name="message" id="message" class="input"></textarea><br/>
<input type="submit" name="contactUser" id="contactUser" value="Contact User" class="button" />
</form>
</div>
</div>
<div class="ratingForm">
<div class="modal hide fade" id="userFeedback" aria-hidden="true">
<div class="modal-header">
<h4>Give us some feedback about this user</h4>
</div>
<div class="modal-body">
<form>
<h5>The Good</h5>
<input type="radio" name="feedBack" value="Good1">Good1<br/>
<input type="radio" name="feedBack" value="Good2">Good2<br/>
<input type="radio" name="feedBack" value="Good3">Good3<br/><br/>
<input type="submit" name="giveFeedBack" id="giveFeedBack" class="btn btn-success" value="Give Feedback" />
</form>
</div>
<div class="modal-footer">
<input type="button" class="btn" data-dismiss="modal" value="Close" />
</div>
</div>
Give feedback
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<span class="page-header descriptionHeader">Description:</span><br/><div id="item_description">"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who lov</div> </div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<h4>Ads with similar category of: Electronics</h4><ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title="Price: $1234<br/>Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
<li class="span4"><a href="view.php?id=24&title=test21" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or..." data-original-title="Price: $1245<br/>Location: Ottawa<br/>Electronics/Laptop">
<center>Test21</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test21MainImage" />
</a></li>
</ul> </div>
<div class="tab-pane" id="otherUserItemsPane">
<ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title=" Price: $1234<br/> Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
<!--
</div>
<div class="footer">
Home | Contact Us<br/>
Scoop Classifieds ©
2013 </div>
</div> -->
</body>
<script>
$(document).ready(
function(){
$('#myCarousel').carousel();
$('[rel="popover"]').popover();
}
);
</script>
</html>