Using an html table I create a header for my document, I would like to know how I can put the page number when printing the web page, I know with #page selector of css i can configure the content of the margins and others, but I don't know how it does what I want.
enter image description here
this is the html code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DocManual.aspx.cs" Inherits="Presentacion.GestionDocumental.DocManual" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/print.css" rel="stylesheet" />
<link href="css/confAPA.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title></title>
</head>
<body style="font-family: 'Times New Roman'">
<form id="form1" runat="server">
<div class="hoja" style="text-align:center">
<h1 style="margin-top: 150px;">Centro médico crecer.</h1>
<h1 style="margin-top: 120px;">Manual de xxxxxx</h1>
<h3 style="margin-top: 120px">Versión 1</h3>
<h1 style="margin-top: 120px">01-01-1990</h1>
</div>
<div class="hoja" id="tbContenido">
<h3 style="text-align: center">Tabla de contenido</h3>
<div>
<div><span>Introdución</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Objetivos</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Alcance</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Marco Legal</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Desarrollo</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Contenido</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Gosario de terminos</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Anexos</span></div>
<div></div>
<div><span>1</span></div>
</div>
</div>
<table>
<thead>
<tr id="header">
<td>
<table>
<tr>
<td colspan="5" rowspan="4">
<img src="../Images/logocrecer.png" width="100" />
</td>
<td colspan="10" rowspan="3"><strong><span id="lbProceso" runat="server"></span></strong></td>
<td colspan="5"><strong>Código:</strong><span id="lbCodigo1" runat="server"></span></td>
</tr>
<tr>
<td colspan="5"><strong>Fecha:</strong><span id="lbFecha1" runat="server"></span></td>
</tr>
<tr>
<td colspan="5"><strong>Version:</strong><span id="lbVersion1" runat="server"></span></td>
</tr>
<tr>
<td colspan="10"><strong><span id="lbProcedimiento" runat="server"></span></strong></td>
<td colspan="5"><strong>Páginas:</strong><span id="lbPAginas1" runat="server"></span></td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3>Introducción</h3>
<div id="txtIntroducion" runat="server"></div>
<h3>Objetivos</h3>
<div id="txtOjetivos" runat="server"></div>
<h3>Alcance</h3>
<div id="txtAlcance" runat="server"></div>
<h3>Marco Legal</h3>
<div id="txtMarcoLegal" runat="server"></div>
<h3>Desarrollo</h3>
<div id="txtDesarrollo" runat="server"></div>
<h3>Contenido</h3>
<div id="txtContenido" runat="server"></div>
<h3>Gosario de terminos</h3>
<div></div>
<h3>Anexos</h3>
<div id="anexos" runat="server"></div>
<br />
<table id="control-cambios">
<thead>
<tr>
<td colspan="5" class="text-center" style="font-weight:900">CONTROL DE CAMBIOS</td>
</tr>
<tr>
<td><strong>Vesion:</strong></td>
<td><strong>Fecha:</strong></td>
<td><strong>Justificación</strong></td>
<td><strong>Descripción</strong></td>
<td><strong>Responsable</strong></td>
</tr>
</thead>
<tbody id="tbControlCambios" runat="server">
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr id="footer">
<td>
<table>
<thead>
<tr>
<td>Eleborado por</td>
<td>Revisado por</td>
<td>Aprobado por</td>
</tr>
</thead>
<tbody runat="server" id="Participantes" style="text-align:Center">
</tbody>
</table>
</td>
</tr>
</tfoot>
</table>
</form>
<script>
print();
</script>
</body>
</html>
the print.css archive
#media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
header, nav, footer {
overflow: visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after
{
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after
{
content: attr();
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img, table {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 2.54cm;
margin-top: 0;
margin-bottom:0;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: "Pagina " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
}
Related
So I'm making a website as a test. The code can be seen below.
* {
background: #000000;
color: #dddddd;
margin: 0;
padding: 0;
}
body {
font-family: Consolas;
}
button.header {
border-width: 0;
}
table { width: 100%; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>test title</title>
<link rel="stylesheet" href="start.css">
</head>
<body>
<table style="padding-top: 0.8rem;">
<tr> <!-- Title, Buttons -->
<th style="text-align: left; padding-left: 0.8rem;">
<h1>test site title</h1>
</th>
<th style="text-align: right; padding-right: 0.8rem;">
<button class="header"> ABOUT </button>
<button class="header"> PROJECTS </button>
<button class="header"> CONTACT </button>
</th>
</tr>
<tr>
Test
</tr>
</table>
</body>
</html>
The output is seen below:
The error here is that the second <tr> tag with the text "Test" is displayed before the first, which contains the buttons and title.
Why is that happening? How can I affect the order of my table rows?
You must put either a td or a th inside a tr.
<tr>
<td>Test</td>
</tr>
then they will be displayed in the same order you write them.
Specs: https://html.spec.whatwg.org/multipage/tables.html#the-tr-element
You need to wrap "test" inside a Data Cell (<td>) element.
* {
background: #000000;
color: #dddddd;
margin: 0;
padding: 0;
}
body {
font-family: Consolas;
}
button.header {
border-width: 0;
}
table {
width: 100%;
}
<table style="padding-top: 0.8rem;">
<tr>
<th style="text-align: left; padding-left: 0.8rem;">
<h1>test site title</h1>
</th>
<th style="text-align: right; padding-right: 0.8rem;">
<button class="header"> ABOUT </button>
<button class="header"> PROJECTS </button>
<button class="header"> CONTACT </button>
</th>
</tr>
<tr><td>Test</td></tr>
</table>
I've create this email by using html:
<html>
<head>
<style>
.button {
background-color: #8d312f;
}
div.title {
text-align: center;
}
div.title2 {
text-align: center;
}
div.buttonDiv {
text-align: center;
}
div.bottomBanner {
font-family: "Accuratist";
font-size: 14px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
bottom: 30px;
}
img.logoImg {
width: 50px;
height: 58px;
content: url("finixLogo.png");
}
</style>
<div class="title">
<h1>Welcom to WOW!</h1>
</div>
</head>
<body style="font-family:Accuratist">
<div class="title2">
<h4>To confirm your account click on the following link.</h4>
</div>
<div class="buttonDiv">
Confirm account
</div>
<div class="bottomBanner">
If you have any questions, contact us: email#example.com <br><br>
</div>
</body>
</html>
But when I try to open a link of the button in gmail app on iphone, it doesn't work instead in apple mail, on ios, it works.
How can I solve the problem?
here's a screenshot of gmail.
enter image description here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align: center;">
<tbody>
<tr>
<td><h1>Welcom to WOW!</h1></td>
</tr>
<tr>
<td><p><strong>To confirm your account click on the following link.</strong></p></td>
</tr>
<tr>
<td style="padding:10px 0 10px;">Confirm account</td>
</tr>
<tr>
<td>Confirm account:</td>
</tr>
<tr>
<td>email#example.com </td>
</tr>
</tbody>
</table>
</body>
</html>
Here is my current code :
img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}
#g1{ width:20%;}
#g2{ width:80%;}
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div style="width:75%;" align="left">
<div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
<div style="display:table-row;width:100%;">
<div style="width:60%; display:table-cell; background-color:#996;">
<table>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
<td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
</table>
</div>
<div style="width:40%; display:table-cell; background-color:#F96;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
hv anyway to set the text of the the top of the div ? not on half or bottom .
have any suggestion code for this type of design ?
that so ..........................................................................................................................................................
To answer your question, you can change vertical alignement of text inside table with the vertical-align property. In your code, just add vertical-align: top; to the style of your div like so:
<div style="width:40%; display:table-cell; background-color:#F96; vertical-align: top;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
With that being said, there is a proper way to achieve what you want to do (I'll assume you can build your code from scratch):
First, if you can, put all your styles in your stylesheet to separate your structure and your styles.
Then, if browser support allows you, the simplest way is to use flexbox.
Here is your code cleaned, I let you play with it to understand how everything work:
.wrapper {
width: 75%;
/* This will align your content to the center of the page */
margin-left: auto;
margin-right: auto;
}
.container {
background-color: #996;
display: flex;
align-items: center;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 12%; /* in your code it was 20% of 60% */
flex: 1 1 auto;
}
li + li {
/* if you want spacing between image you can define it here */
margin-top: 10px;
}
img {
display: block;
width: 100%;
height: auto;
}
.featured {
padding-left: 10px;
padding-right: 10px;
width: 48%; /* in your code it was 80% of 60% */
flex: 1 1 auto;
}
.featured img {
margin-top: auto;
margin-bottom: auto;
}
.text {
background-color: #f96;
padding-left: 10px;
padding-right: 10px;
width: 40%;
width: 48%; /* in your code it was 80% of 60% */
flex: 1 1 auto;
align-self: stretch;
}
<div class="wrapper">
<h1> Title</h1>
<div class="container">
<ul>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
</ul>
<div class="featured">
<img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif">
</div>
<div class="text">
<p>Some text here...</p>
<p>
Choose : <input name="" type="text" />
</p>
</div>
</div>
</div>
I would use flex instead of table for display. Change these:
<div style="display:flex;width:100%;">
...
<div style="width:40%; background-color:#F96;">
img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}
#g1{ width:20%;}
#g2{ width:80%;}
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div style="width:75%;" align="left">
<div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
<div style="display:flex;width:100%;">
<div style="width:60%; background-color:#996;">
<table>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
<td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
</table>
</div>
<div style="width:40%; background-color:#F96;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Do this
<p id="p1">text Here</p>
<div style="width:100%;">
#p1{margin-top:0em;}
I know that many people ask this question, but I can't make my website work. When I zoom every div go one under the other. I post only a little part of my html css cause the problem comes also with two div.
body {
margin: 0;
font-family: Sans-Serif;
background-image: url("pictures/backgroundbody.png");
background-repeat: repeat-x;
}
p {
display: inline;
}
a {
text-decoration: none;
}
#page {
margin: 0 auto;
}
#header{
height: 11.937em;
width: 100%;
margin-top: 0.812em;
}
#titlebar {
height: 6.25em;
}
#giga_weather_and_search{
float: right;
margin-right: 15em;
font-size: 0.875em;
color: #5278ae;
text-align: right;
width: 27.875em;
height: 6em;
}
#weather_bar{
font-size: 0.857em;
float: right;
}
#weather_bar td{
padding-left: 0.357em;
padding-right: 0.357em;
}
.weather_table{
padding: 0.428em;
border-spacing: 0px;
border-collapse: separate;
}
#upper_search_bar{
float: right;
font-size: 0.857em;
}
.upper_search_table{
padding: 0.214em;
}
#upper_search_bar td{
padding-left: 0.143em;
padding-right: 0.143em;
}
#bottom_search_bar{
float: right;
font-size: 0.857em;
}
#bottom_search_bar td{
padding-left: 0.143em;
padding-right: 0.143em;
}
#logo_bar{
margin-left: 12em;
margin-top: 4.312em;
float: left;
width: 23.125em;
height: 2.375em;
}
#logo_bar img{
width: 23.125em;
height: 2.375em;
}
<head>
<title>
Colorado Breaking News, Sports, Wheather, Traffic - The Denver Post
</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<style type="text/css">
A:link, A:visited {text-decoration: none}
A:hover {text-decoration: underline}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="titlebar">
<div id="giga_weather_and_search">
<div id="weather_bar">
<table class="weather_table">
<td style="white-space:nowrap">
<div class="weather">
Weather:
<img src="pictures/weather.png" alt="weather logo">
<p>Denver, CO</p>
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="now">
Now: 39°
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="high">
High: 49°
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="low">
Low: 49°
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="forecast">
5-Day Forecast
</div>
</td>
</table>
</div> <!--weather_bar-->
<div id="upper_search_bar">
<table class="upper_search_table">
<td style="white-space:nowrap">
<div class="newsletters">
Newsletter
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="subscribe">
Subscribe
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="member_services">
Member Services
</div>
</td>
</table>
</div> <!--upper_search_bar-->
<div id="search_bar">
<img src="pictures/search_bar.png" alt="search bar"/>
</div>
<div id="bottom_search_bar">
<table class="bottom_search_table">
<td style="white-space:nowrap">
<div class="autos">
Autos
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_bottom_search_bar2.png" alt="barretta bottom search bar">
</td>
<td style="white-space:nowrap">
<div class="real_estate">
Real Estate
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_bottom_search_bar2.png" alt="barretta bottom search bar">
</td>
<td style="white-space:nowrap">
<div class="jobs">
Jobs
</div>
</td>
</table>
</div> <!--bottom_search_bar-->
</div> <!--giga_weather_and_search-->
<div id="logo_bar">
<img src="pictures/logo_bar.png"/>
</div>
</div> <!--titlebar-->
</div> <!--header-->
</div> <!--page-->
</body>
I am currently learning HTML and CSS. My problem is: I have a button and a search bar with the search bar currently below the button. I have tried different solutions but to no avail. What should I do so that the button and the search bar are beside each other
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
#mine{
display: inline;
}
</style>
</head>
<body>
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
</body>
</html>
use .mine not #mine (which is for ID.)
give display:inline-block for childer of mine
.mine>button,.mine>table{
display: inline-block;float:left;
}
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
.mine>button,.mine>table{
display: inline-block;float:left;
}
refer below code snippet.
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
One of many ways to achieve this would be to put the button in its own
<td>
tag inside the row of the table. I.e.
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
</td>
...
See https://jsfiddle.net/orndorffgrant/189judf0/
.
The reason that there was a line break is that there is an implicit line break before and after every table.