So Ive created a table to divide the html text into 2 languages English/Spanish, but for some reason which I can not understand, the text is starting just below for the second column... Like this:
Maybe I am missing an atribute? Or some justification?
<table width="863">
<tr>
<td width="428">
<p>
<strong>AVISO DE PRIVACIDAD</strong>
</p>
<p>
<strong>ESTUDIANES Y PADRES DE FAMILIA</strong>
</p>
<p> <strong>Identidad y domicilio del Responsable:</strong>
</p>
<p>TEXT TEXT TEXT.</p>
<p> <strong>TEXT TEXT:</strong>
</p>
<p>TEXT TEXT TEXT</p>
<p>....</p>
</td>
<td width="435">
<p>
<strong>PRIVACY NOTICE</strong>
</p>
<p>
<strong>STUDENTS AND PARENTS</strong>
</p>
<p> <strong>Identity and address of the Responsible Party:</strong>
</p>
<p>TEXT TEXT TEXT TEXT</p>
<p> <strong>Categories of the data treated by the School:</strong>
</p>
<p>TEXT TEXT TEXT</p>
<p> a) <u>TEXT TEXT
</td>
</tr>
</table>
Your code is absolutely fine as there is no margin or padding. It could be because of
the editor you are using
some css file which is messing with body/table/p/... tags
Thanks for your answers! I just found a "forced" solution. Just added valign="top" into the td as an atribute.
Related
How browser shows "my" code
<html>
<head>
<title> chatter|app </title>
<style>
.styled_dates {
font-size: 11px;
}
</style>
</head>>
<body>
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p> <strong>Neversea</strong> <p class="styled_dates"> 11/07/2022 </p>
<p> <strong>Deutschland</strong> <p class="styled_dates"> 23/05/2019 </p>
<p> <strong>Erasmus</strong> <p class="styled_dates"> 23/06/1999 </p>
<p> <strong>Work</strong> <p class="styled_dates"> 04/07/2003 </p>
<h2> Regular </h2>>
</body>
</html>
Hello. Noobie here.
What I want to do: see the dates next to "Neversea, Deutschland, Erasmus, Work", not underneath them.
Neversea 11 07/2022
not...
Neversea
11/07/2022
How can I do that?
Thank you
The issue is that <p> tags by default follow onto the next line. Also you have unclosed tags (each line you open 2 and only close 1)
In my code I use <span> elements, they are made for in-line styling/changes which seems appropriate for your use case.
.styled_dates {
font-size: 11px;
}
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p>
<strong>Neversea</strong>
<span class="styled_dates">11/07/2022</span>
</p>
<p>
<strong>Deutschland</strong>
<span class="styled_dates">23/05/2019</span>
</p>
<p>
<strong>Erasmus</strong>
<span class="styled_dates">23/06/1999</span>
</p>
<p>
<strong>Work</strong>
<span class="styled_dates">04/07/2003</span>
</p>
<h2> Regular </h2>
How can I have a table with 1 row and 2 cells, and have 'links' in the first cell which can be clicked to display different information (text or links) in the second cell.
<!doctype html>
<head>
<title>
Our first document: Hello World!
</title>
<h1>
About Myself
</h1>
<p align = "left">
blah blah blah
</p>
</head>
<body>
<table border="1">
<tr>
<td style="height: 100%; width: 50%">
<h1>
<a href = "http://webprojects.eecs.qmul.ac.uk/ag316/my_homepage.html">
About myself
</a>
<br>
<a href = "http://webprojects.eecs.qmul.ac.uk/ag316/my_CV.html">
My CV
</a>
<br>
<a href = "">
My Hobby
</a>
<br>
<a href = "">
Links
</a>
</h1>
</td>
<td style="height: 100%; width: 20%">
//code
</td>
</tr>
</table>
<h1>
My Hobby
</h1>
<p align = "left">
blah blah blah
</p>
<h1>
My CV
</h1>
<p align = "left">
You can download my CV
<a href = "http://webprojects.eecs.qmul.ac.uk/ag316/my_CV.html">
here
</a>
</p>
<h1>
Links
</h1>
<p align = "left">
I like to visit the following websites :
<br>
YouTube
<br>
Google
<br>
Inbox
<br>
</p>
</body>
Here's what I have, its just empty code taking place of actual useful information. So when I click the 'links' link the in the left cell I want to see the links paragraph in the right. So far the links paragraph is below the table as I don't know how to use the same table cell for displaying different paragraphs of text depending on which link is pressed.
If i truly understand you, you need an iframe in cell 2 and change its src with click on links:
$(document).ready(function() {
$('td a').click(function() {
$('#frame1').attr('src', $(this).attr('href'));
return false;
});
});
I assume that your iframe has id="frame1".
I want to show the below html content centered on the page:
Date : xxxx/xx/xx
Time : 12:22
xx : xxxxx
xxxxx : xxxxx
x : xxxxxxx
code:
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<br>
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
<p style="text-align:right">Head of the Department</p>
</body>
The result of my code:
Day:Friday
Date:December 5,1997
Time:3.00pm
Lr:Dr.Nicolas Lam
Venue:WC 311
use table tag to do proper alignment
Here's the core for what you want to do
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<b>Community College(Autonomous)</b>
<br>
<span>HKUSPACE</span>
<br>
<b>Department of Computer Science</b>
<br>
<b>Seminar on HTML Programming</b>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<p style="text-align:center">
<table align="center">
<tr>
<td>Date</td>
<td> : </td>
<td>xxxx/xx/xx</td>
</tr>
<tr>
<td>Time</td>
<td> : </td>
<td>12:22</td>
</tr>
<tr>
<td>xx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>x</td>
<td> : </td>
<td>xxxxxxx</td>
</tr>
</table>
</p>
<p style="text-align:right">Head of the Department</p>
</body>
<html>
First a couple of small notes:
Don't use inline styling. Put your styles into a <style> block or into a separate CSS file loaded with a <link> tag.
The <b> tag is deprecated in HTML 5. You should use another tag, such as <em> or <strong>. I have used <strong> in my example below.
To align things the way you want, you need to use a table. Here is a working example with the above items incorporated, and using a table to format the 3-column block you are trying to achieve.
I also made a fiddle.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
border: 1px solid black;
}
.table-div {
display: table;
margin: 0 auto;
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
</style>
</head>
<body>
<strong>Community College(Autonomous)</strong>
<br>
<span>HKUSPACE</span>
<br>
<strong>Department of Computer Science</strong>
<br>
<strong>Seminar on HTML Programming</strong>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<div class="table-div">
<table class="left-align">
<tr>
<td>Day</td><td>:</td><td>Friday</td>
</tr>
<tr>
<td>Date</td><td>:</td><td>December 5, 1997</td>
</tr>
<tr>
<td>Time</td><td>:</td><td>3.00pm</td>
</tr>
<tr>
<td>Speaker</td><td>:</td><td>Dr. Nicolas Lam</td>
</tr>
<tr>
<td>Venue</td><td>:</td><td>WC 311</td>
</tr>
</table>
</div>
<p class="right-align">Head of the Department</p>
</body>
</html>
Easier way to do this is put the data you want to center in some block element and center that block instead.
I changed from text-align: center; to text-align: left; and added margin: auto; and display: table; to div element.
(and also moved text-align to div too)
So you must change from:
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
to:
<div style="margin: auto; display: table; text-align: left;">
<p>
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</div>
and you will get the result as you want :)
Note: you can change the width to any value that you want.
result (image)
edited: some typo and change from setting width to use table instead.
Put all of the text inside a div and center the div
Put all of the text inside an additional <p> and center the new <p>
<p style="text-align:center">
<p style="text-align:left">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</p>
PS: don't use inline styles
I have one problem, in my div tag i have some text in class "Linkovi" ,but i want to change color of first letter respectively " » " .
How to call class "Linkovi" with first-letter option!
Thanks!
<div id="banner5Linkovi">
<p id="QuickLinks"> QUICK LINKS</p>
</br>
<p class="Linkovi"> »   This is text!</p> <br/>
<p class="Linkovi"> »   This is text!</p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p> <br/>
<p class="Linkovi"> »   This is text! </p>
</div>
You could remove the » from the content and do this:
.Linkovi:before {
content: '»';
color: #00f;
}
I'd also suggest using <ul> and <li> if the data will represent a list.
You can't use first-letter with a ». It must be a letter or number, the solution would have to be that you have two different span tags inside your element, then target the » accordingly:
<p class="Linkovi"><span class="red"> » </span><span>  This is text!</span></p> <br/>
.red {
color: red;
}
Use:
.Linkovi:first-letter{
color: red;
}
But while ::first-letter won't work because you're you using non-word character, so you may alternatively use pseudo class:
.Linkovi:before{
color: red;
content: "»"
}
demo
<p class="Linkovi"> »   This is text!</p> <br/>
You should not be using that anyway …
Use
<p class="Linkovi">This is text!</p>
instead – and use margin to give those paragraphs some space in between them, and use a CSS pseudo element with generated content to create the » and give it a different color and space from the elements “real” text content.
p.Linkovi {
margin-bottom: 1em;
}
p.Linkovi:before {
content: "»";
color: red;
padding: 0 20px 0 5px;
}
<p class="Linkovi">This is text!</p>
<p class="Linkovi">This is text!</p>
<p class="Linkovi">This is text!</p>
I am printing a panel with this information primefaces button.
But I need to send this impression with a smaller font, how do I do that in this code?
<p:commandButton value="Imprimir" styleClass="btn btn-primary" >
<p:printer target="information" />
</p:commandButton>
This is my component information I want to print:
In printing occupies an entire sheet and I want to reduce the font when printing call
<p:panel id="information">
<h3 class="text-warning">#{msg['text-warning']}</h3>
<p>#{msg['text-valueReference']}</p>
<p class="lead text-primary">#{msg['text-time']}*</p>
<p>
<strong>#{msg['lbl-band1']}:</strong>#{' '}#{msg['text-band1']}
</p>
<p>
<strong>#{msg['lbl-band2']}:</strong>#{' '}#{msg['text-band2']}
</p>
<p>
<small> #{msg['text-leiBand']} </small>
</p>
<p class="lead text-primary">#{msg['text-Baggage']}</p>
<p>
<strong>De mão:</strong>#{' '}#{msg['text-HandLuggage']}
</p>
<p>
<strong>Normal:</strong>#{' '}#{msg['text-NormalBaggage']}
</p>
<blockquote>
<p>#{msg['text-noCharge']}</p>
<small> #{msg['text-noChargeVolumes']} </small>
</blockquote>
<blockquote>
<p>#{msg['text-Charge']}:</p>
<small> #{msg['text-ChargeVolumes']} </small>
</blockquote>
<p>
<small> #{msg['text-leiVolumes']} </small>
</p>
<p class="lead text-primary">#{msg['text-optionalTransport']}</p>
<p>
<strong></strong>#{msg['text-optionalTransportValue']}
</p>
<p>
<strong> </strong>
</p>
<blockquote>
<p>#{msg['text-animals']}:</p>
<small> #{msg['text-animalsValues']} </small>
</blockquote>
<blockquote>
<p>#{msg['text-large-bags']}:</p>
<small> #{msg['text-largeBagsValue']} </small>
</blockquote>
<p>
<small> #{msg['text-obs']} </small>
</p>
</p:panel>