please find my code below: I need to make it responsive to all screen's sizes? how ? Note: I repeated the same text and links to have the same number of info to be shown which I'm looking for. The first code is the html and the second one is the CSS. Really need help on that because it looks not nice to have different format on different screen's sizes. Thanks in advance and lease ask me if the code is not clear to you or need more clarifications:
html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="Header">
<div id="object1"><a href="index.html"><img src="Images/Capture logo.PNG"
width="230" height="100" alt=""/></a></div>
<div id="object2">
<p class="text1">test</p>
</div></div>
<div class="watermarked"> <hr size="20"; color="#140098"</hr>
<table align="center" width="100%" border="0" cellspacing="0"
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td width="50%"> <p class="ltrh" >test</p></td>
<td width="50%"><p class="rtlh">test</p></td>
</tr>
</tbody>
</table >
<table align="center" width="100%" border="0" cellspacing="0"
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >PR Approval:</p>
</a></td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p>
</td>
<td><p class="rtl" >test</p></td>
</tr>
<tr>
<td><p class="ltr" >test</p></td>
<td><p class="rtl" >test</p></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css code:
#charset "utf-8";
/* CSS Document */
#object1{
width:auto;
float: left;
}
#object2{
width:auto;
float: right;
align-content: center
}
p.text1{
color: #464646;
font-size: 25pt;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
p.rtlh {
direction: rtl;
font-size: 22pt;
color: red;
text-align: center;
font-weight:bold;
}
p.ltrh{
font-size: 21pt;
color: red;
text-align: center;
font-weight:bold;
}
p.ltr{
font-size: 18pt;
color: mediumblue;
margin-left:10em;
margin-top: 0em;
margin-bottom: 1.25em;
}
p.rtl{
direction: rtl;
font-size: 18pt;
color: mediumblue;
margin-right:10em;
margin-top: 0em;
margin-bottom: 1.25em;
}
.Header {
height: 100px;
}
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(Images/blue.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
2 methods:
Use % and not px
Use #media rules in your css:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
A simple trick I like to use:
#page{
width: 96%;
max-width: 1200px;
margin: 0 auto;
}
On a desktop, or another large device, it'll be 1200px wide. When you go smaller than that, it'll be 96% of the width of the screen. You can make that 100%, but I personally prefer to have a very small gap between the content and the edge of the screen, especially for phone like the Edge series of Samsung. It also gives a little canvas the user can use to scroll the page.
And in my experience float makes responsive design a lot more difficult. I suggest display: inline-block; and learning how to properly use that in combination with block elements :)
To View a Webpage on different devices, you have to add this code below to your Header. (the code is for HTML5)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport is the user's visible area of a web page it will be smaller on a mobile phone than on a computer screen.
The "width=device-width" sets the width of the webpage to the width of the device.
The initial scale is the zoom level when the webpage first get called.
Related
I am trying to remove the header from only the first page while printing,
or Saving it to PDF
but it's not working
I have tried the below CSS codes but none of theme are working:
I have also visited these link but but none of the answer worked for me
Remove Header from First Page of HTML Generated PDF - CSS
and Delete the footer only on the last page using CSS
#page: first {
#top-left {
content: normal;
}
}
#page :not(:first) {
}
Both of theme didn't worked.
my styles
<style type="text/css">
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black;
/* for demo */
background: white;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black;
/* for demo */
background: white;
/* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm;
}
#media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
#page: first {
#top-left {
content: normal;
}
}
.main_paragraph {
white-space: pre-line;
white-space: pre-wrap;
line-height: 25px;
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
text-indent: 30px;
text-align: justify
}
</style>
my Body
<body>
<div class="page-header" style="text-align: center">
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div>
<img src="{{URL::asset("img/logo.jpg")}}" style="width: 90%;display: block;margin: 0 auto;z-index: 1;">
</div>
<table id="main_table" dir="rtl"
style="width: 95%;text-align:center; margin: 0 auto;border-collapse: collapse;" border="1">
<tbody>
<tr style="font-size: 18px;font-weight:bold;height:40px">
<td style="width: 47.5%">sugestion</td>
<td style="width: 7%">date</td>
<td style="width: 46.5%">order</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">
{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
{{-- <td>{{strlen($result[0]->document_text)}}
</td> --}}
#if(strlen($result[0]->document_text)<=977) <td style="vertical-align: top;border-top:hidden;height:65vh"
dir="rtl">
#else
<td style="vertical-align: top;border-top:hidden;" dir="rtl">
#endif
{{$result[0]->document_text}}
<p class="main_paragraph" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="page-footer" style="text-align: center;width:94.5%;margin-left:2.55%">
</div>
</body>
I'm testing it on chrome.
You can use media query in CSS to fix that
media query is used to hide an element when printing web pages. Use #media print query and set the display none or visibility hidden to that element that needs to hide at printing
like this
#media print{
.page-header{
display:none;
}
}
if this doesn't work with you try to add media = print link on an HTML page
like this
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
If still doesn't work try to add CSS code to the HTML page
Like This
<style>
#media print{
.page-header{
display:none;
}
}
</style>
try to do it with Laravel
<div class="header
#if(Route::currentRouteName() === 'yourPage')
{{hied-in-print}}
#endif "></div>
and use this class hied-in-print in #media print
<style>
#media print{
.hied-in-print{
display:none;
}
}
</style>
I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
I have the following css style which simply sets the styling stuff for the HTML table.
html
{
height: 100%;
width: 100%;
}
body
{
line-height: 1.6em;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden;
}
#hor-minimalist-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 70%;
height: 70%;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
color: #669;
padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
color: #009;
}
I have tried setting height property of th and also of td to 10%, but that doesnot work. If the number of rows get less, the rows automatically get larger instead of staying at the height of 10%.
The following HTML file is using the above mentioned CSS styling. Every thing seems to work fine except for the ROW length issue.
<!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>BOOKS</title>
<style type="text/css">
<!--
#import url("style.css");
-->
</style>
</head>
<body>
<table id="hor-minimalist-a" summary="Employee Pay Sheet">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>
</body>
</html>
How can I modify the CSS so that the height of ROWS stays fixed at 10% in any case.
I am not sure if you want to set width or height as you mentioned both. But you could try max-width: 10%; or an absolute value, as I am not sure, what your aiming exactly. You also could try using !important like width:10%!important;
Maybe this helps. If not you could provide a picture with your aim so we can understand better.
I am a beginner with HTML and I am trying to make a table layout. So far I have done the table rows, height, data etc. What I cant figure out is something like the six squares up on top (home, about me, product etc.) from the pictures. Any help would be appreciated.
Here is the code I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>
<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
Menu link<br>
Menu link<br>
Menu link<br>
Menu link<br>
Menu link
</td>
<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="55%" valign="top" bgcolor="#d2d8c7">
</td>
<td width="25%" valign="top" bgcolor="#999f8e"> </td>
</tr>
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
Welcome to Stack.
First of all, I STRONGLY advice you to waste some time and learn Bootstrap, table layouts are old fashionend and they're hard to apply maintenance.
table .menu div{
background: yellow;
color: blue;
display: block;
float: left;
width: 14.66666666666667%;
margin: 1%;
padding: 1px;
border: solid 4px blue;
box-sizing: border-box;
text-align: center;
}
I've developed this Code Pen showing how to create that kind of floating elements that you're seeking, but I've used some css styles (and I advice you to learn it too, It's extremely important nowadays).
Call me inbox if you want some tips or links to study :)
This will do the trick for the menu nav in a flexible layout.
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Menu Demo</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<div id="container">
<nav>
<span class=menu_item>Home</span>
<span class=menu_item>About me</span>
<span class=menu_item>Product</span>
<span class=menu_item>Services</span>
<span class=menu_item>Maps</span>
<span class=menu_item>Contact me</span>
</nav>
</div>
</body>
</html>
CSS File:
body
{
font-size: 100%;
padding: 0;
border: 0;
margin: 0;
}
nav
{
display: flex;
width: 100%;
flex-flow: row nowrap;
justify-content: space-around;
background-color: cyan;
padding: 0 10px 30px 0;
}
.menu_item
{
font-size: 1em;
border: 3px solid blue;
color: blue;
margin: 3px;
min-height: 2.5em;
width: 14%;
text-align: center;
text-decoration: underline;
background-color: yellow;
}
#container
{
}
~Pat
This is how you would literally do what you are trying to accomplish (creating a tabular format of your website). I'd recommend you spend some time learning bootstrap though and building a proper navbar and a responsive webpage. It will serve you better than working on html tables.
<table class="table table-hover">
<thead>
<tr>
<td>Home</td>
<td>About Me</td>
<td>Product</td>
<td>Services</td>
<td>Maps</td>
<td>Contact Me</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">This area will contain the Local Navigation</td>
<td colspan="2">This area will contain information about me</td>
<td colspan="2">This area will contain statistics of customer satisfaction</td>
</tr>
</tbody>
</table>
I'm trying to replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?