Dears,
I am making a name card and the codes are below:
I want to align the last two spans "STUDIO ICONIC" and "info#studioiconic.net" on the same line, however it is always appeared that the email span comes after like the picture show. Is possible to basically adjusted something to achieve that? or is there something i do it wrong? If possible i don't want to use grip or flexbox...Thanks.
<!DOCTYPE html>
<html lang="en">
<body style="border: 2px solid green; width: 500px; height: 270px;">
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style="margin-left: 65px; display: inline;">STUDIO ICONIC</span>
<span style="margin-left: 300px; display: inline;">info#studioiconic.net</span>
</div>
</body>
</html>
The best way for layout is flex. About the inline style, it is highly recommended that don't use it. instead, use classes for your styling.
.wrapper{
display:flex;
}
.image-container{
margin-left: 50px;
margin-top: 50px;
width: 150px;
height: 150px;
border:2px solid gainsboro;
}
.image{
width:100%;
}
.right-side{
display:flex;
flex-direction:column;
margin-left:100px;
}
.info{
display:flex;
}
.s1{
padding-left: 65px;
}
.s2{
margin-left:120px;
}
<div class="wrapper">
<div class="image-container">
<img class="image" src = "../smile1.jpg" alt="smile face">
</div>
<section class="right-side">
<p>
<b>ODEN QUEST</b>
<br>
<span><em>Creative Director</em></span>
</p>
<p>
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p>
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
</section>
</div>
<div class="info">
<span class="s1">STUDIO ICONIC</span>
<span class="s2">info#studioiconic.net</span>
</div>
For detection only, in the code that you wrote, you should change display and margin-left of your span.(span by default is display:inline)
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style=" margin-left:65px;">STUDIO ICONIC</span>
<span style="margin-left:110px;">info#studioiconic.net</span>
</div>
Related
I am writing a chat room message template. I used a text-truncate class for long message ellipse. But It is not working in my code.
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
<div class="text-truncate">
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
</div>
Above code is my sample code. I want to write a working at small browser size with truncate class. But my code is not working text truncate.
I don't want to set width. I want to make flexible template, If I set width, then it does not use in small size browser
I don't want to overflow contents.
You need to set the width of the div that's containing the overflowing content. Else truncate class will not produce ellipses.
Try this code:
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
<div class="text-truncate" style="width: 300px;">
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
</div>
Note: I've added inline-styles for now.
I'm solved this problem myself as follows:
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div class="text-truncate" style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
I just remove the text-truncate div tag and then put parent div tag.
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>
I've got a bunch of nested divs (I know, probably not ideal for this use, but it's just a temporary solution). I'm trying to make the child divs different heights by percentage, but it's not working; the divs are just expanded to the minimum height needed to fit the text.
<div class="funnel" style="width:100%; height:600px">
<div class="container-header">
<p class="header"> Funnel Times </p>
</div>
<div class="outer" style="width: 100%; height:600px">
<div class="innercontainer" style="width: 50%; height:600px; float: left">
<center>
<div class="signups-indie inner" style="width: 80%; height: 10%; background-color: #BFCCD5">
<p class="funnelTimesText"> Sign-ups: 8 hours / 2.1% </p>
</div>
<div class="installs-indie inner" style="width: 80%; height: 10%; background-color: #9EB2BE">
<p class="funnelTimesText"> Installs: 2 days / 12.9% </p>
</div>
<div class="action1-indie inner" style="width: 80%; height: 10%; background-color: #4A5A66">
<p class="funnelTimesText"> Action 1: 2.5 days / 16.1% </p>
</div>
<div class="action2-indie inner" style="width: 80%; height: 10%; background-color: #333F47">
<p class="funnelTimesText"> Action 2: 5.2 days / 17.4% </p>
</div>
<div class="conversions-indie inner" style="width: 80%; height: 10%; background-color: #AF212F">
<p class="funnelTimesText"> Conversions: 8 days / 51.5% </p>
</div>
</center>
</div>
<div class="innercontainer" style="width: 50%; height:600px; float: left">
<center>
<div class="signups-team inner" style="width: 80%; height: 1.8%; background-color: #BFCCD5">
<p class="funnelTimesText"> Sign-ups: 10 hours / 1.8% </p>
</div>
<div class="installs-team inner" style="width: 80%; height: 10.9%; background-color: #9EB2BE">
<p class="funnelTimesText"> Installs: 2.5 days / 10.9% </p>
</div>
<div class="action1-team inner" style="width: 80%; height: 8.7%; background-color: #4A5A66">
<p class="funnelTimesText"> Action 1: 2 days / 8.7% </p>
</div>
<div class="action2-team inner" style="width: 80%; height: 13.1%; background-color: #333F47">
<p class="funnelTimesText"> Action 2: 5.2 days / 17.4% </p>
</div>
<div class="conversions-team inner" style="width: 80%; height: 65%; background-color: #AF212F">
<p class="funnelTimesText"> Conversions: 8 days / 51.5% </p>
</div>
</center>
</div>
</div>
</div>
Here's a fiddle as well, where you can see it's not working:
http://jsfiddle.net/3w08gdmf/
For you to use % height, each nested element must explicitly specify its height. It takes its height from its immediate parent. If the parent does not have a height specified (either absolute or relative), it will not work.
The center element in your code does not have a height specified.
http://jsfiddle.net/3w08gdmf/2/
.innercontainer center{
height: 100%;
}
Out of curiosity, why are using strictly HTML and not CSS to style the markup? If you do it this way, whenever you adjust anything you will have to manually change EVERYTHING in HTML. Secondly, percentage is the percent of the parent <div> basically this means that if you have <div id="A"> and <div id="B">, which is nested in <div id="A"> then <div id="B"> will be a % of <div id="A">.
In short:
HTML
<div id="A">
<div id="B"></div> <!-- See how B is nested WITHIN A -->
</div>
CSS
#A {
height: 100px; // Set Height
}
#B {
height: 80%;
// This is 80% of the parent DIV "A" which is = to 80px because 80% of 100 is 80
}
Hope this clears things up.
Edited the HTML for clarification and some punctuation editing.
I have this code which causes an styling error on the mobile version:
CSS:
.medarbetare-img {
width: 180px;
height: 100px;
margin-bottom: 5px;
margin-top: 16px;
HTML:
<div class="left">
<div class="medarbetare-img" style="background:
url(http://byggprojektoren.se/wp-content/uploads/2014/09/Rinor2.jpg)
center top no-repeat;">
</div>
<p style="font-size:13px;">Name Name<br>
Konstruktör, VD,delägare<br>
<a style="font-size:13px;"href="mailto:#byggprojektoren.se">#byggprojektoren.se</a>
<br>0762 - 92 23 51
</p>
</div>
<div class="right">
<p style="text-align:justify; font-size:13px; padding:10px 0;">
Text that collides with the picture
</p>
</div>
The following picture being created is:
how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/