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;
}
Related
When I click outside the menu the drop-down menu is not closing. I have tried with functions but I was not able to solve it.
<div onclick="document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden')"; class="custom-menubutton">
<i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
</div>
</div>
<div class="custom-menu-cont hidden">
<div class="custom-menu">
<div class="arrow-up"></div>
<div>
<div class="custom-menu-item">
<a href="http://blog.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
<p class="custom-title">Blogs</p></a>
</div>
<hr style="margin-bottom: 10px; margin-top: 10px;">
<div class="custom-menu-item">
<a href="https://susper.com/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
<p class="custom-title">Susper</p></a>
</div>
<div class="custom-menu-item">
<a href="https://chat.susi.ai/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
<p class="custom-title">Susi</p></a>
</div>
<div class="custom-menu-item">
<a href="https://loklak.org/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
<p class="custom-title">loklak</p></a>
</div>
<div class="custom-menu-item">
<a href="https://phimp.me/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
<p class="custom-title">Phimp.me</p></a>
</div>
<div class="custom-menu-item">
<a href="https://pslab.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
<p class="custom-title">PS Lab</p></a>
</div>
<hr style="margin: 10px">
<div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
More on labs.fossasia.org
</div>
</div>
</div>
</div>
What changes I have to do to close the menu?
help me to close the dropdown menu.
Thanks in advance
You can use javascript to achieve that.
function hideDiv(){
document.getElementsByClassName('custom-menu-cont')[0].classList.remove('hidden');
}
document.addEventListener("click", hideDiv, false);
You can also remove onclick from <div class="custom-menubutton"> and write in javascript as it is a better convention.
function hideDivStopPropagation(e) {
document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden');
e.stopPropagation();
}
document.getElementsByClassName('custom-menubutton')[0].addEventListener("click", hideDivStopPropagation, false);
The easier way is to use JQuery.
$(document).on('click', function() {
$('.custom-menu-cont').toggleClass('hidden');
});
$('.custom-menubutton').on('click', function(e) {
e.stopPropagation();
$('.custom-menu-cont').toggleClass('hidden');
});
Note: I used e.stopPropagation() because, when you click on the div.custom-menubutton, It means I clicked on document too. So it runs hideDiv function and hides the menu always(Even if you click div to open dropdown). So e.stopPropagation() prevents your click propagating all the way to the document.
I have problem to match the buttons to iphone 4 and iphone 5 only.
all the other platform design phones looks good and responsive but only iphone 4 & 5 little strange.
as you can see in nexus, galaxy and iphone 6 it looks good
but in iphone 4 i need to scroll down and the forgot password and create account is one on the other.
<div class="popup popup-login modal-{{popupLogin}}" style="display: block;background:transparent">
<div class="content-block" >
<div class="login-view-box page page-login-wrapper" style="background:transparent;background:#009688">
<div class="text-center" >
<div class="logo sd" ></div>
<div class="company-text">company name</div>
</div>
<div class="list login-form-box">
<form name="loginForm"
novalidate ="novalidate"
ng-submit="loginForm.$valid && performLogin()" style="margin:20px auto;">
<label class="item item-input" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
fill="#000000"></path>
</svg>
<input type="email" placeholder="Email" name="email" ng-model="email" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
<div ng-message="email">{{ClientMessages.InvalidEmailInput}}</div>
</div>
<br />
<label class="item item-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"
fill="#000000"></path>
</svg>
<input type="password" placeholder="Password" name="password" ng-model="password" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
</div>
<button type="submit"
class="button button-block button-positive"
id="login-button"
ng-click="loginSubmit()"
<i class="icon ion-loading-c"></i>
<span>Sign In</span>
</button>
<div class="item item-input list-block" style="background-color:transparent;border:0;margin-top:8px;" ng-click="toggleStayLoggedCheck();" >
<label class="label-checkbox">
<input type="checkbox" name="stayLoggedCheckbox" ng-model="stayLoggedCheckbox" value="StayLogged" >
<div class="item-media" style="padding-left:20%">
<i class="icon icon-form-checkbox" style="border-radius:0"></i>
<span style="padding-left:10px;color:white">Stay Logged In</span>
</div>
</label>
</div>
</form>
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
</div>
</div>
</div>
the problem area
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o SAMGray-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
Has your class .footer-link a position: absolute and bottom: 0 properties or something ?
I'd suggest to create a media query like below, to target iphones 4 & 5.
#media only screen and (max-width: 320px) {
/* your iphone 4 & 5 styles */
}
Then, switch your .footer-link class to position: relative (and maybe float: left, depending on your other blocks' float).
The final code should looks like this:
#media only screen and (max-width: 320px) {
.footer-link {
position: relative;
/* float: left; if needed */
}
}
This should position the "forgot password" and fab below the "create account" button and in the meantime apply that margin-top: 20px which is useless in absolute positionning.
Your view will have to be scrolled to see the "forgot password" link though. So you might want to add more styles to the media query in order to reduce some margins, paddings or font-sizes and get the desired view as a result.
However, in this layout your fab link will be messed up. As its absolute positionning would be relative to the .footer-link. I suggest you move it outside of the footer (right before the </body> tag, for example).
Hope this helps!
I'd try switching the position properties. When positioning something absolute, the parent should be "position:relative". When you were resizing in Chrome's mobile spoofer, it was pushing that absolute positioned item up and into the other content. It isn't mimicking any other specs when you're spoofing the view, just the view dimensions. Hope this helps!
<div class="text-center crt" style="position: relative;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position: absolute;"></span>
</div>
I have list of data which i am binding using Knockoutjs,Now comes for CSS part, i need to align it horizontal.I am not much good in CSS.I have three images and username so i want to align it in Horizontal for my Mobile app below is my code kindly suggest me.
<ul style="list-style: none;" data-role="listview" id="hierarchical-listview" data-bind="foreach:UserProfile">
<li style="background-color:#FFF">
<div style="width:100%;">
<div style="width:50%">
<div style="padding-left:20px;padding-top:10px">
<span data-bind="text:UserId" style="display:none;"></span>
<span data-bind="text:Username"></span>
<img class="profileimage" data-bind="attr: { src: UserImage }" style="width:60px;height:60px;float:left!important;" />
<img data-bind="attr: { src: UserProfileImage }" style="width:30px;height:30px;float:left!important;" />
</div>
</div>
<div style="width:50%;float:left;margin: 0px -20px;">
<img data-bind="attr: { src: UserPostedImage }" style="width:30px;height:30px;float:left!important;" />
<input type="checkbox" class="listcheckbox km-widget km-icon km-check" data-bind="checked:UserSelected" />
</div>
</div>
</div>
</li>
</ul>
Remove all the float from your img containers and the parent div containers.
Provide display: inline-block to all and then vertical-align: middle.
So your img elements should look something like:
<img class="profileimage" data-bind="attr: { src: UserImage }" style = "width:60px; height:60px; display: inline-block; vertical-align: middle;" />
I set :before property on my footer but I'm facing a repeating issue. I mean my image from :before property is repeated a lot of and I don't know why :/
See on my website it will be easier to understand :)
http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php
Here is my code
/*Insertion image TDB footer*/
div.footer-container ::before{
ontent:url("../img/Tonnerre/img_tdb_footer.png");
}
/*Fin insertion image*/
<div class="footer-container">
<footer id="footer" class="container" data-nb-cols="6">
<div class="container">
<!-- Block Newsletter module-->
<section id="newsletter_block_left">
<h4>Lettre d'informations</h4>
<div class="block_content">
<form action="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php" method="post">
<div class="form-group">
<input class="inputNew form-control newsletter-input placeholder" placeholder="Saisissez votre adresse e-mail" id="newsletter-input" type="text" name="email" size="18" value="">
<button type="submit" name="submitNewsletter" class="btn btn-default button button-small">
<span>ok</span>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</section>
<!-- /Block Newsletter module-->
<section id="social_block" class="footer-block">
<h4 class="title_block">Nous suivre</h4>
<ul class="toggle-footer" style="">
<li class="facebook"><a class="_blank" href="https://www.facebook.com/tonnerredebelt/?fref=ts" target="_blank">Facebook</a></li>
</ul>
</section>
<!-- Block categories module -->
<section class="blockcategories_footer footer-block col-xs-12 col-sm-2">
<h4>Catégories</h4>
<div class="category_footer toggle-footer" style="">
<div class="list">
<ul class="tree dynamized" style="display: block;">
<li class="last">
<span class="grower CLOSE"> </span><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=8&controller=category&id_lang=1" title="">
Produits
</a>
<ul style="display: none;">
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=10&controller=category&id_lang=1" title="Ceintures en cuir, noires, Bicolores, fantaisistes… Retrouvez tout l'univers de la marque celio* à travers sa E-boutique.">
Boucles
</a>
</li>
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=9&controller=category&id_lang=1" title="LIVRAISON & RETOUR GRATUITS◅ Retrouvez les ceintures homme en ligne | Grand choix parmi plus de 1 500 marques sur...">
Bracelets
</a>
</li>
<li class="last">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=7&controller=category&id_lang=1" title="Ceintures : profitez de toutes nos offres du catalogue ceintures sur Galerieslafayette.com. N'hésitez pas vos achats sont satisfaits ou remboursés pendant 30 ...">
Ceintures
</a>
</li>
</ul>
</li>
</ul>
</div>
</div> <!-- .category_footer -->
</section>
<!-- /Block categories module -->
<!-- MODULE Block footer -->
<section class="footer-block col-xs-12 col-sm-2" id="block_various_links_footer">
<h4>Informations</h4>
<ul class="toggle-footer" style="">
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=prices-drop" title="Promotions">
Promotions
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=new-products" title="Nouveaux produits">
Nouveaux produits
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=best-sales" title="Meilleures ventes">
Meilleures ventes
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=contact" title="Contactez-nous">
Contactez-nous
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_cms=3&controller=cms&id_lang=1" title="Conditions d'utilisation">
Conditions d'utilisation
</a>
</li>
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=sitemap" title="sitemap">
sitemap
</a>
</li>
<li>
© 2014 <a class="_blank" href="http://www.prestashop.com" target="_blank">Logiciel e-commerce par PrestaShop™</a>
</li>
</ul>
</section>
<!-- /MODULE Block footer -->
<!-- Block myaccount module -->
<section class="footer-block col-xs-12 col-sm-4">
<h4>Mon compte</h4>
<div class="block_content toggle-footer" style="">
<ul class="bullet">
<li>Mes commandes</li>
<li>Mes avoirs</li>
<li>Mes adresses</li>
<li>Mes informations personnelles</li>
</ul>
</div>
</section>
<!-- /Block myaccount module -->
<!-- MODULE Block contact infos -->
<section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4">
<div>
<h4>Informations sur votre boutique</h4>
<ul class="toggle-footer" style="">
<li>My Company, 42 avenue des Champs Elysées
75000 Paris
France </li>
<li>
<span>0123-456-789</span>
</li>
<li>
<span>sales#yourcompany.com</span>
</li>
</ul>
</div>
</section>
<!-- /MODULE Block contact infos -->
<div id="block_facebook_like" class="block jq_slide_toggle">
<h4>Facebook</h4>
<div class="facebook-fanbox">
<div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/tonnerredebelt/?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" data-width="292" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=334341610034299&color_scheme=light&container_width=288&header=false&href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&locale=en_US&sdk=joey&show_border=false&show_faces=true&stream=false&width=292"><span style="vertical-align: bottom; width: 292px; height: 214px;"><iframe name="f1cfcf364c" width="292px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=334341610034299&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df251877a6%26domain%3Diutdoua-webetu.univ-lyon1.fr%26origin%3Dhttp%253A%252F%252Fiutdoua-webetu.univ-lyon1.fr%252Ff3e4cbbb3%26relation%3Dparent.parent&color_scheme=light&container_width=288&header=false&href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&locale=en_US&sdk=joey&show_border=false&show_faces=true&stream=false&width=292" class="" style="border: none; visibility: visible; width: 292px; height: 214px;"></iframe></span></div>
</div>
</div>
<!-- MODULE Block reinsurance -->
<div id="reinsurance_block" class="clearfix">
<ul class="width5">
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-2-1.jpg" alt="Échange en magasin"> <span>Échange en magasin</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-3-1.jpg" alt="Paiement à l'expédition."> <span>Paiement à l'expédition.</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-4-1.jpg" alt="Livraison gratuite"> <span>Livraison gratuite</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-5-1.jpg" alt="Paiement 100% sécurisé"> <span>Paiement 100% sécurisé</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/" alt="Satisfait ou remboursé"> <span>Satisfait ou remboursé</span></li>
</ul>
</div>
<!-- /MODULE Block reinsurance -->
<a id="logo_footer" href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/" title="Tonnerre De Belt">
<img class="logo" src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/img/tonnerre-de-belt-logo-1447323498.jpg" alt="Tonnerre De Belt" width="1681">
</a>
</div>
</footer>
</div>
Thanks for helping :)
Alexis
The problem may be in your selector. You are doing this way in your site:
.footer-container *::before
{
content:url("../img/Tonnerre/img_tdb_footer.png");
}
See that * in your selector? It means that you want all child elements of .footer-container to have that css applied. You probably don't want it to work like this, I think.
Maybe you can try .footer-container::before to apply just before the elements that contains the .footer-container class, which is just one element.
You should do a background-image and background-repeat properties in your footer
.footer-container ::before {
content: " ";
background-image: url("../../img/Tonnerre/img_tdb_footer.png");
background-repeat: no-repeat;
}
Do not forget to add height and width to your element in before:
.footer-container ::before {
content: " ";
background: url("../../img/Tonnerre/img_tdb_footer.png") no-repeat;
height:100px;
width:100px;
background-size:100%;
}
I am working on a website and am having problems with the CSS on the IPAD (and possibly the iPhone).
Basically on the Sponsors page: http://www.tcsdesignreno.com/fsw/?page_id=1149. I am getting a red background behind the different sections. I think it has to do with the H3 tags that have a red background.
The same thing happens here: http://www.tcsdesignreno.com/fsw/?page_id=1165. They both are using the Easy Columns plugin in Wordpress.
Here is some sample HTML
<h3 class="sponsor-hdr" style="text-align: center;">Advertising and Media Partners</h3>
<div class="ezcol ezcol-one-third">
<p><a title="Fire Rescue 1" href="http://www.firerescue1.com/" target="_blank"><img class=" size-full wp-image-1238 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/161_FR1_FC_Logo_Stacked.jpg" alt="FireRescue1.com, Fire Chief" width="161" height="93" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>FireRescue1 / Fire Chief</strong><br />
200 Green St.<br />
2nd Floor<br />
San Francisco, CA 94111<br />
Phone: 415-962-5912</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third">
<p><a title="CSFA" href="http://www.csfa.net/" target="_blank"><img class=" size-full wp-image-1233 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_LatestCSFA-3_5_x_2_75_Logo.jpg" alt="California State Firefighters' Assn " width="116" height="91" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>California State Firefighters’ Assn </strong><br />
2701 K Street, Suite 201<br />
Sacramento, CA 95816<br />
Phone: 800-451-2732<br />
Fax: 916-446-9889</p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Program Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="FPAN" href="http://www.fpanevada.org/" target="_blank"><img class="aligncenter size-full wp-image-1232" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_FPAN_Logo_Color.jpg" alt="FPAN" width="116" height="116" /></a></div>
<div class="ezcol ezcol-two-third ezcol-last">
<p>In appreciation to:<br />
<strong>Fire Prevention Association of Nevada</strong><br />
<strong>National Code Services Association</strong></p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Tote Bag Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="Burton's Fire" href="http://www.burtonsfire.com/" target="_blank"><img class="aligncenter size-full wp-image-1236" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_BURTONS_FIRE_INC_LOGO.jpg" alt="BURTONS FIRE" width="158" height="54" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>Burton’s Fire</strong><br />
1301 Doker Avenue<br />
Modesto, CA 95351<br />
209-544-3161</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third"><a title="Waterous" href="http://www.waterousco.com/" target="_blank"><img class="aligncenter size-full wp-image-1237" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_WaterousLogoSm.jpg" alt="Waterous" width="155" height="29" /></a></p>
</div>
CSS:
h3 {
background-color: #990000;
color: #ffffff;
padding: 10px 0;
text-align: center;
width: 100%;
max-height:92px;
}
Here is an image:
Can anyone see why these sections are showing up in red? For the life of me I can't seem to figure it out.
Looks like your floats aren't clearing. You can add this to your current styles:
.singlepost .content-entry h3 {
clear: both;
}