I am trying to create a pdf using dompdf v0.6.1-4. However i ran into the following weirdness when creating the pdf. The line height looks to be completely ignored by dompdf on a table. Every row gets like a 100 pixel height. That is not how i want it to be.
Here is the html
<!doctype HTML>
<head>
<title>
voucher pdf
</title>
<style>
#wrapper{
width: 800px;
background-color: white;
}
#vouchercode{
font-weight: bolder;
}
#customerlogo img{
width: 400px;
height: 285px;
}
#topleftimgdescr{
text-align: center;
vertical-align: center;
font-weight: bold;
}
#maxwifihref{
text-align: center;
}
#maxwifiimg img{
width: 170px;
height: 75px;
}
#nl{
height: 130px;
}
.countrytext{
margin-left: 8px;
font-weight: bolder;
color: white;
font-size: 30px;
font-family: "Verdana", Arial, sans-serif;
}
.countrypng{
width: 60px;
}
.partial{
height: 140px;
}
.instruction{
margin-left: 60px;
display: inline-block;
font-size: 14px;
}
ul {
margin-top: 0px;
}
#pagebreak{
page-break-after: always;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td rowspan="5" width="400px" colspan="1" style="text-align: center;">
<img id="customerlogo" src="./assets/images/logo_krieghuus.png" alt="" /><br />
<label style="text-align: center;" id="topleftimgdescr">Vakantiepark de “Krieghuusbelten”</label>
</td>
<td colspan="3" style="text-align: right; vertical-align: top;">
<img id="maxwifilogo" src="./assets/images/maxwifi.png" alt="" /><br />
<label id="maxwifihref" style="margin-right: 50px;"><a>www.maxCoax.nl</a></label>
</td>
</tr>
<tr style="height: 25px;">
<td colspan="3">Wifi activationcode</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Tijdsduur: </td><td colspan="2" id="timelimit">10080 minuten</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Apparaten: </td><td colspan="2">1</td>
</tr>
<tr style="height: 25px; line-heigth: 12px;">
<td colspan="1">Activatiecode: </td><td colspan="2" id="vouchercode">PnBndxTvYhu</td>
</tr>
</table>
<div id="instructionsection">
<div class="partial">
<div class="countrypng"><img id="nllogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">NL</div></div>
<div class="instruction">
<b>Instructies</b>
<ul>
<li>
Start uw notebook, PDA of PC. Wanneer u binnen het bereik van een wifi hotspot bent kunt u verbinding<br />
maken met het Wifi netwerk. Start internet en de activatiepagina opent.
</li>
<li>
Vul de hierboven vermelde toegangscode in.
</li>
<li>
De tijdsduurgebruik gaat in na activatie.
</li>
<li>
U kunt gebruik maken van internet.
</li>
<li>
<b>Let op!</b> Deze toegangscode is te activeren op 1 apparaat.
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="enlogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">EN</div></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Start up your notebook, PDA or PC. Please connect with the Wifi network if you are within range of a Wifi access point.
</li>
<li>
Log on to the internet. You will land on the activation page.
</li>
<li>
Enter the above mentioned access code. The duration of use starts after activation.
</li>
<li>
You are now ready to use internet.
</li>
<li>
<b>Attention!</b> This code is for use on 1 device
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="delogo" src="./assets/images/plate.png" alt="" /><div class="countrytext"> D</div></div>
<div class="instruction">
<b>Hinweise</b>
<ul>
<li>
Starten Sie Ihr Notebook, PDA oder Ihren PC. Wenn Sie sich innerhald der Reichweite eines Accespoints befinden,<br />
dan können Sie mit dem drahlosen Netzwerk verbindung machen.<!--haha, machen! -->
</li>
<li>
Starten Sie internet. Sie bekommen den Aktivierungsseite.
</li>
<li>
Geben Sie den oben erwähnten Aktivierungscode ein. Die Dauerder Anwenung startet nach den Aktivierung.
</li>
<li>
Sie können jetzt das Internet benutzen.
</li>
<li>
<b>Achtung<!-- ik ga helemaal stuk hier!-->!</b> Dieser code können sie gleichzeitig aktiveren für den Einsatz auf 1 Gerät.
</li>
</ul>
</div>
</div>
<div id="pagebreak" class="partial">
<div class="countrypng"><img id="frlogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">FR</div></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Ouvrez Votre portable, PDA ou PC. Lorsque vous êtes dans les environs d’un point d’accès Wifi, vous serez reliés<br />
après quelques secondes automatique au résea Wifi systeme sans fil.
</li>
<li>
Démarrez internet. Alors sur le site du hotel ou camping.
</li>
<li>
Complétez le code d’accès mentionné ci-dessus. La durée d’utilisation commence après l’activation.
</li>
<li>
Vous pourrez maintenant utiliser internet.
</li>
<li>
<b>Attention!</b> Ce code est utilisé sur 1 pèriphèrique
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Table support in dompdf is acceptable but not very advanced and so complex table layouts can render poorly in dompdf. You might try simplifying your document as much as possible (e.g. by removing colspan/rowspan which do not appear to be necessary).
For example, the following renders a bit better.
#wrapper{
width: 800px;
background-color: white;
}
#vouchercode{
font-weight: bolder;
}
#topleftimgdescr{
vertical-align: middle;
font-weight: bold;
}
#maxwifihref{
text-align: center;
}
#nl{
height: 130px;
}
.countrytext{
font-weight: bolder;
font-size: 30px;
font-family: "Verdana", Arial, sans-serif;
}
.partial{
margin-top: 2em;
min-height: 140px;
page-break-inside: avoid;
}
.instruction{
font-size: 14px;
}
<!doctype HTML>
<head>
<title>
voucher pdf
</title>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td width="400px" style="text-align: center;">
<img id="customerlogo" src="http://placehold.it/400x285/cc6666/ffffff&text=dompdf"><br />
<label style="text-align: center;" id="topleftimgdescr">Vakantiepark de “Krieghuusbelten”</label>
</td>
<td style="text-align: right; vertical-align: top;">
<img id="maxwifilogo" src="http://placehold.it/175x75/cc6666/ffffff&text=dompdf" alt="" /><br />
<label id="maxwifihref" style="margin-right: 50px;"><a>www.maxCoax.nl</a></label>
<table>
<tr style="height: 25px;">
<td colspan="3">Wifi activationcode</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Tijdsduur: </td><td colspan="2" id="timelimit">10080 minuten</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Apparaten: </td><td colspan="2">1</td>
</tr>
<tr style="height: 25px; line-height: 12px;">
<td colspan="1">Activatiecode: </td><td colspan="2" id="vouchercode">PnBndxTvYhu</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="instructionsection">
<div class="partial">
<div class="countrypng"><img id="nllogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">NL</span></div>
<div class="instruction">
<b>Instructies</b>
<ul>
<li>
Start uw notebook, PDA of PC. Wanneer u binnen het bereik van een wifi hotspot bent kunt u verbinding<br />
maken met het Wifi netwerk. Start internet en de activatiepagina opent.
</li>
<li>
Vul de hierboven vermelde toegangscode in.
</li>
<li>
De tijdsduurgebruik gaat in na activatie.
</li>
<li>
U kunt gebruik maken van internet.
</li>
<li>
<b>Let op!</b> Deze toegangscode is te activeren op 1 apparaat.
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="enlogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">EN</span></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Start up your notebook, PDA or PC. Please connect with the Wifi network if you are within range of a Wifi access point.
</li>
<li>
Log on to the internet. You will land on the activation page.
</li>
<li>
Enter the above mentioned access code. The duration of use starts after activation.
</li>
<li>
You are now ready to use internet.
</li>
<li>
<b>Attention!</b> This code is for use on 1 device
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="delogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext"> D</span></div>
<div class="instruction">
<b>Hinweise</b>
<ul>
<li>
Starten Sie Ihr Notebook, PDA oder Ihren PC. Wenn Sie sich innerhald der Reichweite eines Accespoints befinden,<br />
dan können Sie mit dem drahlosen Netzwerk verbindung machen.<!--haha, machen! -->
</li>
<li>
Starten Sie internet. Sie bekommen den Aktivierungsseite.
</li>
<li>
Geben Sie den oben erwähnten Aktivierungscode ein. Die Dauerder Anwenung startet nach den Aktivierung.
</li>
<li>
Sie können jetzt das Internet benutzen.
</li>
<li>
<b>Achtung<!-- ik ga helemaal stuk hier!-->!</b> Dieser code können sie gleichzeitig aktiveren für den Einsatz auf 1 Gerät.
</li>
</ul>
</div>
</div>
<div id="pagebreak" class="partial">
<div class="countrypng"><img id="frlogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">FR</span></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Ouvrez Votre portable, PDA ou PC. Lorsque vous êtes dans les environs d’un point d’accès Wifi, vous serez reliés<br />
après quelques secondes automatique au résea Wifi systeme sans fil.
</li>
<li>
Démarrez internet. Alors sur le site du hotel ou camping.
</li>
<li>
Complétez le code d’accès mentionné ci-dessus. La durée d’utilisation commence après l’activation.
</li>
<li>
Vous pourrez maintenant utiliser internet.
</li>
<li>
<b>Attention!</b> Ce code est utilisé sur 1 pèriphèrique
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Notes: There were a few spelling errors and incorrect selectors which I tried to correct. Also, I wasn't sure what you were going for in some of your layout choices, so I just made a decision in those instances.
Related
How can I make the text following the pictures have the same width as the picture in this table? (between the red lines shown in the picture). I tried width property with CSS but it didn't work.
In the same context, how can I enforce the same height for all cells as well?
<table>
<tr>
<td>
<img src="https://picsum.photos/200/300?v=1" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://picsum.photos/200/300?v=2" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://picsum.photos/200/300?v=3" alt="picture not available" height="200" width="300">
</td>
</tr>
<tr>
<td>
<a href="page1.html">
<h3>Vaccin covid-19 en 2021 ?</h3>
</a>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une nouvelle collection des complements alimentaires qui sont benefiques et riches en vitamines !
<a href="page1.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
<td>
<a href="page2.html">
<h3>Nouveaux : complements alimentaires pour vous immuniser !</h3>
</a>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une nouvelle collection des complements alimentaires qui sont benefiques et riches en vitamines !
<a href="page2.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
<td>
<a href="page3.html">
<h3>Marathon sponsorisé par E-Pharma</h3>
</a>
<p>
Venez pour le marathon de 28/12/2020 ou on va faire beaucoup d'activites de sensibilisation contre la maladie de cancer de seins ! Vous etes bienvenues !
<a href="page3.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
</tr>
</table>
Use max-width in a and p tag to set same width as image
td a,
td p{
max-width: 300px;
text-align:center;
margin: 0 auto;
}
td a {
display: block;
}
<table>
<tr>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
</tr>
<tr>
<td>
<h3>Vaccin covid-19 en 2021 ?</h3>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une
nouvelle collection des complements alimentaires qui sont benefiques
et riches en vitamines !
<h2>Read more ...</h2>
</p>
</td>
<td>
<h3>Nouveaux : complements alimentaires pour vous immuniser !</h3>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une
nouvelle collection des complements alimentaires qui sont benefiques
et riches en vitamines !
<h2>Read more ...</h2>
</p>
</td>
<td>
<h3>Marathon sponsorisé par E-Pharma</h3>
<p>
Venez pour le marathon de 28/12/2020 ou on va faire beaucoup d'activites
de sensibilisation contre la maladie de cancer de seins !
Vous etes bienvenues !
<h2>Read more ...</h2>
</p>
</td>
</tr>
</table>
This image shows my problem. There is a perfect space for the aside element to fit next to the article. I want to put it there, but I don't want to use a relative position, I would just like to use the float tag.
My understanding is, that everything should be an inline-block to float, for example: An aside tag next to an article tag, but I'm stuck here.
(Also the commentary /*position:relative .... */ would let the aside tag show next to the article, but this is not the right way for my task.)
CSS:
article {
float: left;
width: 540px;
height: 500px;
margin: 10px;
margin-top: 30px;
/* overflow: scroll; */
padding: 0 5px 0 5px;
border: solid 1px #ddd;
background: -moz-linear-gradient(top, #94bae7 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#94bae7), to(#fff));
display: inline-block;
}
#article-container {
display:inline-block;
}
.rondehoeken {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: inline-block;
}
aside {
/* position: relative;
top: -410px;
left: 230px; */
float: right;
display: inline-block;
width: 150px;
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
}
HTML:
<section id="content">
<header>
<hgroup>
<h1>Antwerpen Marathon</h1>
</hgroup>
<nav>
<ul>
<li>Home</li>
<li>Inschrijven</li>
<li>Nieuwsbrief</li>
<li>Resultaten</li>
</ul>
</nav>
<div id="intro">
<div id="rodelogo" class="logo">
<span id="iam">I An</span>twerpen</div>
<div id="blauwelogo" class="logo">
<span id="iam">I An</span>twerpen</div>
<div id="groenelogo" class="logo">
<span id="iam">I An</span>twerpen</div>
</div>
</header>
<article class="rondehoeken">
<header>
<div class="streep1"></div>
<div class="streep2"></div>
<div class="streep3"></div>
<div class="streep4"></div>
<div class="streep5"></div>
<h1>Titeltje dabei</h1>
</header>
<div id="artikel-container">
<p id="item">
Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te
geven van het grafische effect van tekst op deze plek. Wat u hier leest is een
<em>voorbeeldtekst</em>. Deze wordt later vervangen door de uiteindelijke tekst,
die nu nog niet bekend <abbr title="Islamitische Staat">IS</abbr>. De <strong>faketekst</strong> is dus een tekst die eigenlijk
nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen.
Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door. <br />
Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te
geven van het grafische effect van tekst op deze plek. Wat u hier leest is een
voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst,
die nu nog niet bekend is. De <mark>faketekst</mark> is dus een tekst die eigenlijk
nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen.
Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.
Dit is een <i>faketekst</i>.
</p>
</div>
<aside>
<div id="video-container">
<video controls width="150" height="250" preload id="videos" poster="images/download.png">
<source src="images/dunk.mp4" type="video/mp4">
</video>
</div>
<div id="advert1" class="rondehoeken">
<br /> <br />Recyclen!<br /> <br />
</div>
<div id="advert2" class="rondehoeken">
<img id="snickers" src="images/bar.png" width="150px" alt="muzieklogo">
</div>
<footer>
<ul class="galerij">
<li><img src="images/finish1.jpg"></li>
<li><img src="images/finish2.jpg"></li>
<li><img src="images/finish3.jpg"></li>
<li><img src="images/finish4.jpg"></li>
</ul>
<br /><br /><br /><br />
<small>© Marathon van Antwerpen</small>
</footer>
</aside>
</article>
</section>
This is maybe not exactly what you are looking for but just to show you that
your article has a fixed width, and you are placing the aside within that fixed width. so it would never expand out that width. Place it outside and it would go to the right.
Also i added an div tag around the article and aside tags for styling purposes on the codepen link.
Here is an codepen how it would look : Click ME
article {
float: left;
width: 540px;
height: 500px;
margin: 10px;
margin-top: 30px;
/* overflow: scroll; */
padding: 0 5px 0 5px;
border: solid 1px #ddd;
background: -moz-linear-gradient(top, #94bae7 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#94bae7), to(#fff));
display: inline-block;
}
#article-container {
display:inline-block;
}
.rondehoeken {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: inline-block;
}
aside {
/* position: relative;
top: -410px;
left: 230px; */
float: right;
display: inline-block;
width: 150px;
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
}
<section id="content">
<header>
<hgroup>
<h1>Antwerpen Marathon</h1>
</hgroup>
<nav>
<ul>
<li>Home</li>
<li>Inschrijven</li>
<li>Nieuwsbrief</li>
<li>Resultaten</li>
</ul>
</nav>
<div id="intro">
<div id="rodelogo" class="logo">
<span id="iam">I An</span>twerpen</div>
<div id="blauwelogo" class="logo">
<span id="iam">I An</span>twerpen</div>
<div id="groenelogo" class="logo">
<span id="iam">I An</span>twerpen</div>
</div>
</header>
<article class="rondehoeken">
<header>
<div class="streep1"></div>
<div class="streep2"></div>
<div class="streep3"></div>
<div class="streep4"></div>
<div class="streep5"></div>
<h1>Titeltje dabei</h1>
</header>
<div id="artikel-container">
<p id="item">
Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te
geven van het grafische effect van tekst op deze plek. Wat u hier leest is een
<em>voorbeeldtekst</em>. Deze wordt later vervangen door de uiteindelijke tekst,
die nu nog niet bekend <abbr title="Islamitische Staat">IS</abbr>. De <strong>faketekst</strong> is dus een tekst die eigenlijk
nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen.
Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door. <br />
Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te
geven van het grafische effect van tekst op deze plek. Wat u hier leest is een
voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst,
die nu nog niet bekend is. De <mark>faketekst</mark> is dus een tekst die eigenlijk
nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen.
Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.
Dit is een <i>faketekst</i>.
</p>
</div>
</article>
<aside>
<div id="video-container">
<video controls width="150" height="250" preload id="videos" poster="images/download.png">
<source src="images/dunk.mp4" type="video/mp4">
</video>
</div>
<div id="advert1" class="rondehoeken">
<br /> <br />Recyclen!<br /> <br />
</div>
<div id="advert2" class="rondehoeken">
<img id="snickers" src="images/bar.png" width="150px" alt="muzieklogo">
</div>
<footer>
<ul class="galerij">
<li><img src="images/finish1.jpg"></li>
<li><img src="images/finish2.jpg"></li>
<li><img src="images/finish3.jpg"></li>
<li><img src="images/finish4.jpg"></li>
</ul>
<br /><br /><br /><br />
<small>© Marathon van Antwerpen</small>
</footer>
</aside>
</section>
How to set font family to entire div? The DIV have a lot of children and those children have a lot of sub-children. I want font-family to be applied to all of them. But it does not work for some reasons.
Here is the sample.
<div class="page ng-scope" onmousedown="return false;" onselectstart="return false;" ng-include="" src="fileName"> <li class="x-berschrift-2 ng-scope"><span class="char-style-override-9">2.3 </span>Gestaltung der Arbeitsorganisation und der Arbeitsbedingungen</li>
<p class="Flie-text-normal ng-scope">Die zunehmende Zerlegung der Arbeitsaufgaben im Zuge der Rationalisierung industrieller Produktionsprozesse (Taylorismus) rief in der ersten Hälfte des 20. Jahrhunderts Kritik an der „seelenlosen“ monotonen Fabrikarbeit hervor. Ab Mitte der 1960er Jahre drängte eine massive Gegenbewegungen auf Humanisierung und Demokratisierung in der Arbeitswelt. </p>
<ol class="ng-scope">
<li class="x-berschrift-3"><span class="char-style-override-10">2.3.1 </span>Klassische und neue Formen der Arbeitsorganisation</li>
</ol>
<p class="Flie-text-normal ng-scope">Der Begriff „Arbeitsorganisation“ wurde im Rahmen der Kritik am Taylorismus geprägt und wurde als Programm zur Überwindung stark arbeitsteiliger und hoch hierarchischer Arbeitsstrukturen aufgefasst. Die Arbeitsstrukturierung war von Anfang an auf eine Verringerung von Arbeitsteilung in Organisationen gerichtet.</p>
<p class="Flie-text-normal ng-scope"></p>
<div class="Definition-Box frame-11 ng-scope">
<p class="Definition-Titel">DEFINITION ARbeitsorganisation</p>
<p class="Definition-Flie-text">Unter Arbeitsorganisation/-strukturierung versteht man die organisatorische Gestaltung aller Elemente des Arbeitens nach Art, Umfang und Bedingungen. Sie umfasst alle Maßnahmen zur Veränderung der Arbeitsorganisation und ist damit Teil der Arbeitsgestaltung. </p>
</div>
<p class="Flie-text-normal ng-scope"></p>
<p class="Flie-text-normal ng-scope"></p>
<p class="Flie-text-normal ng-scope"></p>
<div class="Fragebox frame-14 ng-scope">
<div class="Fragezeichenbox frame-13">
<p class="Fragezeichen-f-r-Box">?</p>
</div>
<p class="Fragebox">Welche klassischen und neuen Formen der Arbeitsorganisation werden unterschieden?</p>
</div>
<p class="Flie-text-normal ng-scope"><br></p>
<table id="table-22" class="Tabelle-nur-Titel-links ng-scope">
<colgroup>
<col class="Row-Column-76">
<col class="Row-Column-77">
</colgroup>
<tbody>
<tr class="Row-Column-100">
<td class="Zellen-Titel-nur-links">
<p class="Tabelle-Titel-links">Traditionelle(klassische) Formen der Arbeitsorganisation</p>
</td>
<td class="Zellen-Body-Rows-normal">
<ul>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Jobenlargement, Jobenrichment, Jobrotation</li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Problemlösegruppen </li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Werkstattgruppen</li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Lernstattgruppen</li>
</ul>
</td>
</tr>
<tr class="Row-Column-101">
<td class="Zellen-Titel-nur-links">
<p class="Tabelle-Titel-links">Neuere Formen <br>der Arbeitsorganisation</p>
</td>
<td class="Zellen-Body-Rows-normal">
<p class="Flie-text-klein">Immer schneller wachsende Märkte machten eine dynamische Form der Arbeitsorganisation notwendig, wie</p>
<ul>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Lean Production und Lean Management </li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Teilautonome Arbeitsgruppen (TAG) </li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Teamarbeit</li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Qualitätszirkel </li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Projektgruppen</li>
<li class="Aufz-hlung-in-Tabelle"><span class="Aufz-hlungszeichen-Tabelle char-style-override-12">• </span>Gruppensitzungen </li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
I have tried to set font-family to this like;
.page{
font-family: *font-name*;
}
But it does not apply the font-family to the content. Can anyone here help me please?
You need to specifically target all child elements:
.page * {
font-family: 'Lato', sans-serif;
}
I have a question, I'm working on a site and I want this in my website:
Showing at my page at the moment:
De diensten die wij verlenen op het gebied van beveiligde opbergsystemen zijn:
• Openen
• Reparatie
• 24 op 24 en 7 op 7!
• Service
• Transport
I want to have the • and the text next to each other. Now they are below each other
the code :
<p class="second">De diensten die wij verlenen op het gebied van beveiligde
opbergsystemen zijn:</p>
<p class="second">•</p><p class="first"> Openen</p>
<br>
<p class="second">•</p><p class="first"> Reparatie</p>
<br>
<p class="second">•</p><p class="first"> 24 op 24 en 7 op 7!</p>
<br>
<p class="second">•</p><p class="first"> Service</p>
<br>
<p class="second">•</p><p class="first"> Transport</p>
The text is dutch so don't mind that
Use <ul> tag
<ul>
<li> Openen</li>
<li> Reparatie</li>
<li> 24 op 24 en 7 op 7!</li>
<li> Service</li>
<li> Transport</li>
</ul>
Have you tryed this?
<p class="first"><span class="second">•</span>Openen</p>
<p class="first"><span class="second">•</span>Reparatie</p>
Every time you use "[p]" that creates a new paragraph.
"[br]" makes a new break in the line and moves the next set of text to the next line.
So here
<p class="second">•</p><p class="first"> Openen</p>
you are creating a new paragraph and then • follow by a new paragraph.
That is why your • 's are above eachother.
use this
<div id="container">
<p class="second">De diensten die wij verlenen op het gebied van beveiligde
opbergsystemen zijn:</p>
<ul>
<li>
<p> Openen</p>
</li>
<li>
<p> Reparatie</p>
</li>
<li>
<p> 24 op 24 en 7 op 7!</p>
</li>
<li>
<p> Service</p>
</li>
<li>
<p> transport</p>
</li>
</ul>
</div>
and your css is:
#container li
{
float left;
}
will automatically add your bullet to text.
I'm very new at CSS and i want to put a header on to my new web site.
A simple one, only an image who goes on the top background. I really don't know how to do it with out much coding.
So, this is what i have, and this is what i want. And at the end of this question is the code of the actual page. Any ideas? Thanks so munch!
<!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" dir="ltr" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tablon</title>
<link rel="stylesheet" href="LIB/main.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="LIB/titulos.css">
<!--[if IE]>
<link rel="stylesheet" href="LIB/ie.css" type="text/css" media="screen" />
<![endif]-->
<style type="text/css">
.style1 {
text-align: right;
}
.style2 {
vertical-align: top;
margin-top: 3pt;
margin-bottom: 3pt;
}
#apDiv1 {
position:absolute;
left:116px;
top:398px;
width:800px;
height:37px;
z-index:1;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
}
</style>
</head>
<body>
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<marquee>
</marquee>
<div class="wrapper">
<p> </p>
<p><br />
</p>
<center> </center>
<div class="aux">
<div id="container">
<ul class="menu">
<li id="noticias" class="active">Mensajes</li>
<li id="tutoriales">Profesores</li>
<li id="enlaces">Enlaces</li>
</ul>
<span class="clear"></span>
<div class="content noticias">
<h3>Ultimos mensajes</h3>
<br />
<div class="style1" style="vertical-align: middle; text-align: right; background-color: #1E1E1E; height: 21px;">
<img alt="" height="16" src="IMG/feed16.png" width="16" class="style2" />
Subscribirce al canal RSS
</div>
<ul>
<br>
<div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=44&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: testing
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=43&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=testing">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
nata: grande
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=42&autor=nata&foto=http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80&sms=grande">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br> </ul>
</div>
<div class="content tutoriales">
<h3>Profesores</h3>
<ul>
<br><li><IMG src="IMG/bullet.png" alt="-" />djsoftlayer</li><li><IMG src="IMG/bullet.png" alt="-" />nata</li><body style="background-image: url('IMG/bg.png')">
</ul>
</div>
<div class="content enlaces">
<h3>Deberías Visitar...</h3>
<ul>
<li><IMG src="IMG/bullet.png" alt="-" /> www.plusmusica.com - Online jukebox!</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.cokidoo.com - Nuestra startup! :)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.pixelartgames.com - Te gustan los juegos pixel art? ;)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.dmsconsulting.es - Anterior empresa</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
</html>
Here is the basic html structure you have
<body>
<div id="wrapper">
<div id="container">
<p>content</p>
</div>
</div>
</body>
Here is the basic css you need to place your banner image:
#wrapper {
width: 600px; /* this is the width of your background image */
background: url(/path/to/image.jpg); /* this sets the div background as an image */
margin: 0px auto; /* this centers the div */
padding-top: 20px; /* this "pads" the div 20px on the top */
}
#container {
width: 400px; /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
margin: 0px auto; /* to center the div with the div#wrapper */
}
A bit more information on the CSS would be good. In your "what you want" link there is an specified width -- there needs to be a wrapping element on the page (possibly your #wrapper division), then do something like:
background: url(/link/to/background/image.ext)
And you'll be set.
You're going to like CSS after you get used to it. The section like this:
<p> </p>
<p><br />
</p>
<center> </center>
can be completely replaced with a little padding-top or margin-top setting like this:
.wrapper {
padding-top: 25px;
To address your question, Kerry was on the mark. Set the background property, specifying the url similarly to as he advises to get your desired effect. You probably want to do this on your wrapper class. Algo asi:
background-image: url('relative/path/toImage.png');
background-repeat:no-repeat;
background-position:center top;
}
See this for more. Enjoy!
Others have answered your question, but I'd like to add that there are a couple things I'd do to improve your HTML code.
Move the Javascript tag which loads jQuery to the last line before . The current position will block rendering until the script has loaded.
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
Get rid of the , tags (and center your #wrapper as superUntitled proposes)
Good luck!