Floating left 'li' not working in ipod, android devices. But it works perfect in all major broswers in laptop / destops. Code is here:
<ul class="clsvideos clearfix">
<li>
<div class="home-thumb">
<div class="home-play-container">
<div class="play-button-hover">
<div class="movie-entry yt-uix-hovercard">
<div class="tooltip">
<img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/pF6Yq7DrJKA/1.jpg" border="0" width="140" height="83" title="">
<div class="Tooltipwindow clearfix">
<img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
<div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Education & Travel</span></div>
<span class="clsdescription">Description : </span><p>Abdul Basit reciting Surah Infitar - amazing tajweed! mash'Allah!</p><div class="clearfix"> <span class="clstoolleft">Rating : </span> <div class="clstoolright ratingvalue ratethis1 fivepos1"></div>
<div class="clearfix"><span class="clstoolleft"> Views:</span> <span class="clstoolright">58 </span></div>
</div>
</div>
</div>
</div>
</div>
<div class="show-title-container">
Abdul Basit reciting Surah Infitar
</div>
<span class="video-info"> Education & Travel </span>
<div class="video-info clearfix">
<div class="clsratingvalue"><span class="ratethis1 fivepos1 "></span></div>
<div class="clsvideosviews">58 Views</div>
</div>
</div>
</div></li>
<li>
<div class="home-thumb">
<div class="home-play-container">
<div class="play-button-hover">
<div class="movie-entry yt-uix-hovercard">
<div class="tooltip">
<img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/IYMKQKSV0bY/1.jpg" border="0" width="140" height="83" title="">
<div class="Tooltipwindow clearfix">
<img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
<div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Sports & Gaming</span></div>
<span class="clsdescription">Description : </span><p>How the Bible Led Me to Islam: The Story of a Former Christian Youth Minister - Joshua Evans</p><div class="clearfix"> <span class="clstoolleft">Rating : </span> <div class="clstoolright ratingvalue ratethis1 fourpos1"></div>
<div class="clearfix"><span class="clstoolleft"> Views:</span> <span class="clstoolright">41 </span></div>
</div>
</div>
</div>
</div>
</div>
<div class="show-title-container">
How the Bible Led Me to Islam: The ...
</div>
<span class="video-info"> Sports & Gaming </span>
<div class="video-info clearfix">
<div class="clsratingvalue"><span class="ratethis1 fourpos1 "></span></div>
<div class="clsvideosviews">41 Views</div>
</div>
</div>
</div></li>
Corresponding CSS is:
.clsvideos li:first-child {
width: 140px;
float: left;
padding: 14px 10px 0 0;
display: block;
}
.clsvideos li {
height: 155px;
width: 140px;
padding: 14px 10px 0 9px;
border-right: 1px dotted #CFCFCF;
border-bottom: 1px dotted #CFCFCF;
float: left;
}
Live URL: http://video.muslimbackyard.com/
Note: Open the site in a smartphone and destop. Note the disign issues at Popular Videos, Recent Videos section. You will know where the problem exists.
Awaiting for a solution at the earliest
Actually the problem was, the developer hadn't closed the last 'div' inside 'li' which led to this bug...
"So be careful with front-end code while writing core php". This is what the advise I have to my developer.
Related
I am not very expert at all when it comes to html layouts.
I am trying to generate an invoice report which looks exactly like this:
Print dimensions must be 13.9cm x 22.8 cm
but I am finding a very hard time since it's in Arabic, and Arabic is a pure nightmare in web development, and that's my first project in arabic.
I've tried pdfmake's angular library which gives a better way to produce such reports, but it does not support Arabic fonts :(!
So instead, I am trying to replicate the same layout in html/css:
which looks much uglier than the original; and it's hard to get the same page dimension on print here.
My html layout:
<div ng-if="printVar === true " style="width:13.9cm; height:22.8cm; border:1px solid black;">
<style>
.navbar-primary {
display: none !important;
}
.navbar {
display: none !important;
}
</style>
<h3 style="text-align: center"> شركة ففف فف ش.م.ل </h3>
<br>
<br>
<div style= "text-align: center;">
الدورة - شارع الضمان الاجتماعي - لبنان
هاتف: ٠١\فففف- فففف</div>
<hr>
<div style="margin:0px 30px 0px 20px; text-align: right">
<span style="float: right;">:المرجع</span> <span style="padding:20px"> {{reference}} </span> <br>
<span style="float: right;">:التاريخ</span> <span style="padding:20px"> {{datenow |date: "MM/dd/yy" }} </span> <br>
<hr>
<br>
<div style="margin:0px 30px 0px 20px; text-align: right">
<br>
<br> <span style="float: right;">رقم الشاحنة</span> <span style="padding:20px"> {{truckNumber}} </span>
<br>
<br> <span style="float: right;"> الشركة </span> <span style="padding:20px"> {{company}} </span>
<br>
<br> <span style="float: right;"> السائق </span> <span style="padding:20px">{{driverName}} </span>
<br>
<br> <span style="float: right;"> نوع البضاعة </span> <span style="padding:20px"> {{commodity}}</span>
<br>
<br> <span style="float: right;">شركة الشحن </span> <span style="padding:20px">{{freightCompany}}</span>
<br>
<br>
<br>
<div style="border:1px solid black;">
<br> <span style="float: right;"> :(الوزنة الأولى (كلغ</span>    <span style="padding:20px"> {{firstWeight}} </span>
<br> {{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br> <br> <span style="float: right;"> :(الوزنة الثانية (كلغ </span>    <span style="padding:20px"> {{secondWeight}} </span>
<br> {{secondWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br>
<span style="float: right;">:الوزن الصافي </span> <span style="padding:20px"> {{secondWeight- firstWeight}} </span>
</div>
<br> <br> <br>
<div style= "width:150px; height: 110px; border:1px solid black; float:left; text-align:center; margin-right:60px" >
إمضاء المسؤول عن الموقع</div>
<div style= "width:150px; height: 110px ;border:1px solid black; float:left ;text-align:center" >
إمضاء السائق </div>
</div>
</div>
My questions:
What approach should I adopt to improve the layout and make it more similar to the original?
Is there a pdfmake alternative that supports arabic? I have tried pdfkit and jspdf and all are failing to produce arabic letters correctly, is there anyone who could make it with a rtl language with any of these libraries?
So when it comes to structuring something like this, I would recommend using either Flexbox or CSS Grid. It will handle quite a bit of the alignment on its own and, assuming your HTML is structured correctly, make a fairly good looking page.
I threw together a short example to help you get started using Flexbox. I would recommend reading up on it if this seems like the route you want to take.
h2,
h4 {
text-align: center;
}
.bordered {
border: 1px solid black;
}
.centered {
text-align: center;
display: block;
}
.container {
margin-bottom: 1em;
}
.row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.row.right {
justify-content: flex-end;
}
.cell {
margin: 0 0.5em;
}
.expanded {
min-width: 45%;
height: 100px;
}
.sub-header {
border-left: none;
border-right: none;
padding: 0.5em 2em;
}
<div ng-if="printVar === true ">
<style>
.navbar-primary {
display: none !important;
}
.navbar {
display: none !important;
}
</style>
<h2> شركة ففف فف ش.م.ل </h2>
<h4>الدورة - شارع الضمان الاجتماعي - لبنان هاتف: ٠١\فففف- فففف</h4>
<div class="container bordered sub-header">
<div class="row">
<span class="cell"> {{datenow |date: "MM/dd/yy" }}</span>
<span class="cell">التاريخ</span>
<span class="cell">{{reference}}</span>
<span class="cell">المرجع</span>
</div>
</div>
<div class="container text-body">
<div class="row right">
<span class="cell">{{truckNumber}}</span>
<span class="cell">رقم الشاحنة</span>
</div>
<div class="row right">
<span class="cell">{{company}}</span>
<span class="cell">الشركة</span>
</div>
<div class="row right">
<span class="cell">{{driverName}}</span>
<span class="cell">السائق</span>
</div>
<div class="row right">
<span class="cell"> {{commodity}}</span>
<span class="cell">نوع البضاعة</span>
</div>
<div class="row right">
<span class="cell">{{freightCompany}}</span>
<span class="cell">شركة الشحن</span>
</div>
</div>
<div class="container bordered">
<div class="row">
<span>{{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}</span>
<span>{{firstWeight}}</span>
<span>(الوزنة الأولى (كلغ</span>
</div>
<div class="row">
<span>{{secondWeightDate|date: "MM/dd/yy - hh:mm:ss"}}</span>
<span>{{secondWeight- firstWeight}}</span>
<span>الوزن الصافي</span>
</div>
</div>
<div class="row">
<div class="cell bordered expanded">
<span class="centered">إمضاء المسؤول عن الموقع</span>
</div>
<div class="cell bordered expanded">
<span class="centered">إمضاء السائق</span>
</div>
</div>
</div>
For this site, the footer area jumped up the page http://lainjurylaw.wpengine.com/. It's supposed to look like this: https://sandiegolawcenter.net/. All I did was change the hero image and the footer now moved up to right underneath top area.
I tried doing a clear:both, but that didn't help.
HTML:
<div id="full-width-footer">
<div class="container">
<div class="footer">
<div class="footer-left">
<div itemtype="http://schema.org/Attorney" itemscope="">
<span class="ozols" itemprop="name">San Diego Criminal Law Center</span>
<div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
<span itemprop="streetAddress">1230 Columbia Street Suite 565A</span><br/>
<span itemprop="addressLocality">San Diego</span>
,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">92101</span>
</div>
<span itemprop="telephone">(619) 525-7006</span>
</div>
Los Angeles Accident Law Center © 2017. All Rights Reserved.
</div>
<div class="footer-right">
CSS:
#full-width-footer {
border-top: 6px solid #248bbe;
padding-bottom: 120px;
background: #2a2a2a none repeat scroll 0 0;
}
The problem is you've not cleared the columns div, your current code:
<div class="columns">
<div class="content">
... your content ...
</div>
<div class="sidebar">
... your content ...
</div>
</div>
just add <div style="clear:both"></div> after the sidebar div and it works fine:
<div class="columns">
<div class="content">
... your content ...
</div>
<div class="sidebar">
... your content ...
</div>
<div style="clear:both"></div>
</div>
Fix your fotter at the bottom of the page.
#full-width-footer {
border-top: 6px solid #248bbe;
padding-bottom: 120px;
background: #2a2a2a none repeat scroll 0 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<div id="full-width-footer">
<div class="container">
<div class="footer">
<div class="footer-left">
<div itemtype="http://schema.org/Attorney" itemscope="">
<span class="ozols" itemprop="name">San Diego Criminal Law Center</span>
<div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
<span itemprop="streetAddress">1230 Columbia Street Suite 565A</span><br/>
<span itemprop="addressLocality">San Diego</span>
,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">92101</span>
</div>
<span itemprop="telephone">(619) 525-7006</span>
</div>
Los Angeles Accident Law Center © 2017. All Rights Reserved.
</div>
<div class="footer-right">
I'm trying to build a company intranet page, with a "grid" style layout. In the past I've used tables, however I know that these are extremely problematic when used for layouts, hence I am attempting to construct the layout using bootstrap and Divs - however it's proving problematic.
Ultimately what I'm trying to achieve in the top right hand corner of the page is:
However what I'm ACTUALLY rendering is the following:
Ignoring the fact that the weather data is a little more expanded, I'm struggling to get the desired result and am really tempted to revert back to tables to get this thing to line up!
Here is the code that I am using on the main template page:
<div class="row">
<div class="col-sm-3">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-5">
<img src="~/Content/Images/companylogo.png" style="float: right; padding-right: 15px; padding-bottom:25px;"/>
<div style="padding-top:25px; border-bottom: 1px solid black;">
<div id="weatherDiv" style="float:left;"></div>
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;"></div>
</div>
</div>
</div>
And then upon page load, the two DIVs (weatherDiv & dateDiv) are filled in using AJAX:
WeatherDiv:
<div id="weatherDiv" style="float:left;">
<link href="/Content/css/weather-icons.css" rel="stylesheet">
<link href="/Content/css/weather-icons-wind.css" rel="stylesheet">
<div>
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Brisbane - Hot and sunny - 32c <i class="wi wi-day-sunny"></i></li>
<li>Melbourne - Early shower or two - 17c <i class="wi wi-showers"></i></li>
</ul>
</div>
</div>
DateDiv:
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;">
<h4>Friday, 20 November 2015</h4>
</div>
I understand totally that my use of CSS, Bootstrap & Divs are almost laughable, however the above is a result of hours of trying and trying!
Any help is much appreciated.
It's hard to be exactly sure how you want this layout to work on mobile. But here is a jsfiddle I've created that could help.
https://jsfiddle.net/2dqqajs1/
body {
min-width: 320px;
}
.text-right img{
display: inline-block;
}
/*extra small screens only*/
#media (max-width: 767px) {
#weatherDiv{
text-align: right;
}
}
hr {
margin: 0;
border-top: solid 2px #e0e0e0;
}
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12 text-right">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=CompanyLogo&w=400&h=100" class="img-responsive" />
</div>
</div>
<div class="row">
<div id="dateDiv" class="col-xs-12 col-sm-5 col-sm-push-7 text-right">
<h4>Friday</span>, 20 Nov<span class="hidden-xs hidden-sm">ember</span> 2015</h4>
</div>
<div id="weatherDiv" class="col-xs-12 col-sm-7 col-sm-pull-5">
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Bris<span class="hidden-sm">bane</span> <span class="hidden-xs">- Hot and sunny </span>- 32c <i class="fa fa-sun-o"></i></li>
<li>Melb<span class="hidden-sm">ourne</span> <span class="hidden-xs">- Early shower or two </span>- 17c <i class="fa fa-cloud"></i></li>
</ul>
</div>
<div class="col-xs-12"><hr/></div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/acz3hhsL/
Code:HTML
<div id="contact-info">
<div id="adresa">
<div id="addPadding" style="padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="float: right;display: inline;width: 80%;">
<p style="text-align:left;font-size:14px;color:black;">Calea Dorobantilor,nr.74,<br>bl.Y9,SC.2,Ap.25<br>Cluj-Napoca,400609<br>Romania</p>
</div>
</div>
</div>
<div id="telefon">
<div id="addPadding" style="padding: 60px 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/TELEFON.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="float: right;display: inline;width: 80%;">
<p style="font-size:14px;color:black;text-align:left;">Tel./Fax (004) 0264 448 579<br>Tel.(004) 0744 490 776</p>
</div>
</div>
</div>
<div id="mail">
<div id="addPadding" style="padding: 20px 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/E-MAIL.png" style="width:26px;height:19px;float:left;display: inline;">
<div style="float: right;display: inline;width: 80%;">
<p style="font-size:14px;color:black;text-align:left;">office#codoban.com</p>
</div>
</div>
</div>
</div>
</div>
Code CSS:
#contact-info
{
width:268px;
height:270px;
background:url(http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/BODY-CONTACT.png);
position:absolute;
right:0;
}
This is the site:
http://avocat.dac-proiect.ro/wp
I changed the text font size and unfortunately not displayed inline with icon sites.
How can I get him back but font-size:14px;
Can you help me please to solve this problem?
Thanks in advance!
Add
p {margin: 0;}
to your CSS, that removes the gaps/offset of the text. http://jsfiddle.net/acz3hhsL/2/
I am working on a simple homepage for my website but I want to get the well evenly spread out. I can align the left to the left and the right to the right but I cant seem to be able to get that middle well to always stay in the centre of the page. I have tried many things but they all don't work, have a look at my site to see what I want to do, the wells are under the image slider. This is the code I have done but and the CSS is the default bootstrap min css with a few tweaks for the colors.
<div class="container">
<div class="row">
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/ts.png" />
<h3>TeamSpeak 3</h3>
<br />
<p>Chat with us on our TeamSpeak at: <br />
<b>ts.clustermc.net</b>
<br /> So, come have a wonderful conversation with us!</p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/wool.png" />
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success" style="width: 2.0%;">
</div>
<div class="progress-bar progress-bar-danger" style="width: 98.0%;">
</div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online</p>
<br />
<p>Start collecting your ClusterCredits now at:<br />
<b>play.clustermc.net</b></p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/forums.png" />
<h3>Community Forums</h3>
<br />
<p>Come and talk to some of our memers and staff at the forums! <br />
<b>www.clustermc.net/forums
</b>
<br />We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
Sorry for the bad layout, im a beginner to coding and I want to learn :)
This is the Updated code.I have nested a div with class well as it was getting overlapped when used with col-lg-4. Please check the below code:
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/ts.png"/>
<h3>TeamSpeak 3</h3>
<br/>
<p>Chat with us on our TeamSpeak at: <br/>
<b><a href="ts3server://ts.clustermc.net">
ts.clustermc.net</a></b>
<br/>
So, come have a wonderful conversation with us!
</p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/wool.png"/>
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success"
style="width: 2.0%;"></div>
<div class="progress-bar progress-bar-danger"
style="width: 98.0%;"></div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online
</p>
<br/>
<p>Start collecting your ClusterCredits now at:<br/>
<b>play.clustermc.net</b></p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/forums.png"/>
<h3>Community Forums</h3>
<br/>
<p>Come and talk to some of our memers and staff at the forums
<br/>
<b><a href="http://clustermc.net/forums">
www.clustermc.net/forums</a>
</b><br/>
We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
</div>
It looks like your three 'well' divs are sitting in the middle of the page already?
As every thing is sitting in <div class="container"> that is the bootstrap class used to center things on a page. As per http://getbootstrap.com/2.3.2/scaffolding.html#layouts.
Note: It looks like you're missing a final ending </div> for the container class
I'm not 100% sure what issue you are having. Maybe provide a screenshot of what you want to achieve?