1
У меня есть следующая структура HTML и CSS.PDF, созданный DomPDF, визуально нарушен
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" media="screen">
/* #Skeleton - Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 0px; margin-right: 0px;}
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 920px; } /* was 940px */
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Site Styles
================================================== */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: Arial, sans-serif;
}
.border-top {
border-top: 1px solid black;
}
.border-right {
border-right: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
.border-left {
border-left: 1px solid black;
}
img {
width: 20%;
}
.blue-background {
background-color: #e1eaf5;
}
#photo-box {
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
right: 40px;
top: 150px
}
#last-element {
margin-bottom: 30px;;
}
/* #Typography
================================================== */
h1 {
font-size: 24px;
}
p {
font-size: 16px;
padding-left: 3px;
}
em {
font-size: 12px;
}
.bold-text {
font-weight: 700;
}
.centered-text {
text-align: center;
}
.yellow-text {
background-color: #faff00;
}
</style>
</head>
<body>
<div class="container">
<div class="sixteen columns centered-text">
<h1>Erasmus/Exchange Öğrenci Başvuru Formu</h1>
</div>
<div class="twelve columns">
<img src="images/yeditepe-logo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
</div>
<div class="four columns">
<p class="bold-text">YEDITEPE UNIVERSITY</p>
<em>OUTGOING PROGRAM</em>
</div>
<div class="sixteen columns">
<div id="photo-box" class="centered-text">
<p>PHOTO</p>
<em>resim ekleyiniz</em>
</div>
</div>
<div class="sixteen columns centered-text bold-text">
<p>OUTGOING</p>
<p>LLP - ERASMUS EXCHANGE/NON-ERASMUS</p>
</div>
<!-- <div class="three columns">
<p> </p>
</div> -->
<div class="sixteen columns bold-text centered-text">
<p>Applying for: Fall Term 20 Spring Term 20</p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>1. PERSONAL INFORMATION</p>
</div>
<div class="eight columns border-top border-right border-bottom border-left">
<p>First Name:</p>
<p>Middle Name:</p>
</div>
<div class="eight columns border-top border-right border-bottom">
<p>Family Name:</p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p>Place of Birth: City or Town/Country</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom">
<p>Do you have a passport? ( ) yes ( ) no</p>
<p>Passport Country:</p>
<p>Passport No:</p>
<p><span class="yellow-text">Passport No:</span></p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p>Female ( ) Male ( )</p>
</div>
<div class="eight columns border-right border-bottom">
<p>Date of Birth<em>(dd/mm/yy)</em>:</p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>T.C. Kimlik Numarası:</p>
</div>
<div class="five columns border-bottom border-left">
<p>Contact Address:</p>
<p>City:</p>
</div>
<div class="eleven columns border-right border-bottom">
<p> </p>
<p>Postal Code:</p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p class="bold-text">Student Contact Tel</p>
<p>GSM:</p>
<p>Home Number:</p>
<p>E-mail:</p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom">
<p class="bold-text">Parent Contact Tel</p>
<p>GSM:</p>
<p>Home Number:</p>
<p>E-mail:</p>
<p>E-mail:</p>
</div>
<div class="sixteen columns blue-background centered-text">
<p>Write year and circle the semester</p>
</div>
<div class="sixteen columns">
<p> </p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>2. ACADEMIC HISTORY AT YEDITEPE UNIVERSITY</p>
</div>
<div class="eight columns border-top border-left">
<p>Your Department:</p>
<p>Current CGPA:</p>
</div>
<div class="eight columns border-top border-right">
<p>* Subject Area Code: </p>
<em>(select from the list on page 3)</em>
</div>
<div class="sixteen columns border-right border-left">
<p><span class="bold-text">Attach one photocopy of your recent transcript with this form:</span> applications submitted without transcripts attached will not be evaluated.</p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>Are you on scholarship at Yeditepe? <em>Burslu öğrenci statüsünde misiniz?</em> ( ) Yes ( ) No</p>
</div>
<div class="sixteen columns">
<p> </p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>3. HOST UNIVERSITY DETAILS</p>
</div>
<div class="sixteen columns">
<em>Please write the name of the university and country of the exchange program to which you are applying for</em>
</div>
<div class="sixteen columns blue-background border-top border-right border-left">
<p>1st Choice</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Official Name of the University: .......................................................................................................... Erasmus ID Code: </p>
</div>
<div class="eight columns border-left">
<p>City:</p>
</div>
<div class="eight columns border-right">
<p>Country:</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Contact e-mail for their international office: </p>
</div>
<div class="sixteen columns border-right border-left">
<p>Program of Study: .................................................................................................................................................................................................</p>
</div>
<div class="sixteen columns blue-background border-right border-left">
<p>2nd Choice</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Official Name of the University: .......................................................................................................... Erasmus ID Code: </p>
</div>
<div class="eight columns border-left">
<p>City:</p>
</div>
<div class="eight columns border-right">
<p>Country:</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Contact e-mail for their international office: </p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>Program of Study: .................................................................................................................................................................................................</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>Erasmus/Exchange Öğrenci Başvuru Formu</p>
</div>
<div class="sixteen columns border-top border-right border-bottom border-left">
<p>Program of Study ..............................................................................................................................................................................................</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>International study programs for a student to study abroad for one semester cost estimate is between 1500€ - 5000€ (euro) for transportation, housing, insurance, books, food, etc.</p>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Will you be able to financially support your semester abroad?</p>
<em>Yurt dışında geçireceğiniz semestre in maliyetini karşılayabilecek misiniz?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Does your family agree with your decision to study abroad?</p>
<em>Aileniz yurt dışında bir semestre eğitim görme kararınız için izin veriyorlar rmı?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Do you agree to provide the necessary documents to the International Office at Yeditepe in good order and on time?</p>
<em>Gereki dokümanları içeren dosyayı tam olarak ve zamanında Uluslararası Ofise teslim etmeyi kabul ediyor musunuz?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Do you agree to go on your own to the appropriate consulate in good time with the required documents in order to obtain a visa?</p>
<em>Vize almak için gereken durumlarda konsolosluğa giderek vize işlemlerini kendiniz yapmayı kabul ediyor musunuz?</em>
</div>
<div class="sixteen columns">
<p class="bold-text">If you have answered ‘yes’ to all the above questions: <em>Yukarıdaki soruların hepsine ‘Evet’ yanıtı verdiniz ise</em></p>
</div>
<div class="sixteen columns">
<p>Do you understand that by agreeing to these commitments, if you are selected into a study abroad program, you agree to assume the responsibility of satisfying all financial requirements, presenting your documents and obtaining a visa, meeting deadlines, and fulfilling in general all obligations set forth by the regulations of the designated by the international study program?</p>
<em>Bu konularda gerekenleri yapmayı taahüt etmiş olarak öğrenci değişim programına kabul edilmeniz halinde bu program çerçevesinde belirtilen şartlara göre; mali gereksinimleri karşılamayı, gerekli dokümanları sunmayı, vizeyi almayı, program takvimine uymayı, genel şartları yerine getirmeyi taahhüt ediyormusunuz?</em>
</div>
<div class="sixteen columns centered-text">
<h1 class=""bold-text>( ) yes ( ) no</h1>
</div>
<div class="sixteen columns">
<p>I certify that the information given in this application is true, complete, and accurate to the best of my knowledge.</p>
<em>Bu başvuruda verdiğim bilgilerin hakikate uygun, tam, ve doğru olduğunu beyan ederim</em>
</div>
<div class="sixteen columns bold-text">
<p>Yeditepe University Student Registration ID Number:</p>
</div>
<div class="ten columns bold-text">
<p>Student’s Signature:</p>
</div>
<div class="six columns">
<p>Date<em>(dd/mm/yy)</em>:</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>TO BE COMPLETED by the Department Coordinator</p>
</div>
<div class="sixteen columns">
<p>_____ I have met with the student</p>
</div>
<div class="sixteen columns">
<p>_____ It has been discussed with the student if English is not the language of instruction; the student satisfies the level of language proficiency required by the host school in order to succeed in his/her courses</p>
</div>
<div class="sixteen columns">
<p>_____ I have informed the student of credits and any subject requirements needed to satisfy a full-load course curriculum during the period of studying abroad.</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>SUBMIT THIS COMPLETED FORM TO YOUR DEPARTMENT ERASMUS COORDINATOR</p>
</div>
<div class="sixteen columns border-top border-right border-left bold-text">
<p>Coordinator’s Name (full name printed):</p>
</div>
<div class="ten columns border-left bold-text">
<p>E-mail:</p>
</div>
<div class="six columns border-right bold-text">
<p>University Tel:</p>
</div>
<div class="ten columns border-bottom border-left bold-text">
<p>Department Coordinator Signature</p>
</div>
<div class="six columns border-right border-bottom bold-text" id="last-element">
<p>Date<em>(dd/mm/yy)</em>:</p>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
Эта структура используется в проекте CodeIgniter с DomPDF для преобразования структуры в PDF.
Процесс происходит успешно с точки зрения создания PDF, но представление PDF полностью отличается от ожидаемого CSS.
Вот пример PDF.
Что является причиной этого? И как я могу это исправить?
Знаете ли вы ширину страницы? Для одного это выглядит так, как ваш CSS шире, чем фактический PDF, это может иметь эффект нажатия на весь PDF. Кроме того, какую версию DOMPDF вы используете? Свойство CSS float поддерживается только с версии 0.6.0 и включено и по умолчанию отключено. используйте 'DOMPDF_ENABLE_CSS_FLOAT' в конфигурации, чтобы включить его. – Jeemusu