I just started to learn programming in PHP. So i got an old script from a friend where i can learn on and got the following question.
The scripts contains a menu on the left wich is this code:
<td width="125" align="left" valign="top" class="left_nav"><table width="125" border="0" cellspacing="0">
<tr>
<td class="left_nav_inner">
Actions:
- test.
Can someone help me how to put the column on the right?
This is the class left_nav
.left_nav {
background: #333;
border-left: 1px solid #000000;
border-right: 0px solid #000000;
border-top: 0px solid #000000;
border-bottom: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
width: 125px;`
}
You need to change css:
.left_nav {
position:absolute;
right: 0px;
margin-top: 50px;
background: #333;
border-left: 1px solid #000000;
border-right: 0px solid #000000;
border-top: 0px solid #000000;
border-bottom: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
width: 125px;
}
See Demo : http://jsfiddle.net/HjYR9/
First this has nothing to with php
Second your html is incomplete
or its just wrong.
But if you want a object in the right corner of your screen use this.
position: absolute;
right: 0px;
top: 0px;
visit this link link if you want to find more info about it
Related
I have two tr classes.
The view is:
I defined my css but seems I can not align it to make space between headlines equal.
I dont want do change my view with additional tags, just want to edit my existing tr's and td's.
My css:
td.style36 {
vertical-align: center;
text-align: center;
border-bottom: none #000000;
border-top: none #000000;
border-left: none #000000;
border-right: none #000000;
font-weight: bold;
color: #FFFFFF;
font-family: 'Trebuchet MS';
font-size: 10pt;
background-color: #3B4E87;
}
td.style62 {
border-bottom: 1px solid #C0C0C0 !important;
border-top: none #000000;
border-left: none #000000;
border-right: none #000000;
color: #000000;
font-family: 'Trebuchet MS';
font-size: 10pt;
background-color: white;
text-align: center;
}
And HTML:
<tr class="row17">
<td class="column5 style36 s">DATE</td>
<td class="column5 style36 s">TYPE</td>
</tr>
<tr class="row18">
<td class="column0 style62 n">18/Dec/2019 16:12:52</td>
<td class="column1 style62 null">credit</td>
...
</tr>
This question already has answers here:
Chrome render bug with border-collapse
(1 answer)
Chrome bug with colspan and border?
(2 answers)
Closed 3 years ago.
What I'm basically doing is to reproduce a pre-formatted table in HTML/CSS. However, it's displayed differently in different browsers.
Firefox and IE shows it as it's intended. Chrome, however, draws a bogus line that's not there even by inspecting the HTML. In the original file, Chromium Embedded (CEF1) has additional differences.
I made a snippet to demonstrate the problem:
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
So the question is: Is there a problem with the above CSS, or anything that should be used in a different way? I doubt such a basic thing could be a Chrome bug. Still, I don't want that line below cell "B".
Browsers have some leverage in how they interpret things, and Chrome can be ...different... and intractable sometimes.
In any case, I don't think you can reset the border color or size (it ignores transparent and 0), but you can override it with a color that will blend into your background. Removing border-collapse may work, but seems like the opposite of what you really want.
As a bonus, putting the border on all sides corrects a jog downward that Chrome was giving 'B' because it lacked a border. (Other browsers didn't do this.)
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: 1px solid white;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
The border-collapse was causing the issue in Chrome. Not sure if needed?
https://jsfiddle.net/mayjr9dL/
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
You just need to remove border-collapse:collapse to remove underline from cell "B".
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
I think this is happening because of your border-collapse property. If you remove it you will see the line vanishes from underneath the B. Sometimes browsers interpret CSS properties differently because there is no set rules. You can try out websites like caniuse to find out the difference in CSS properties or Pleeease, which is a Node.js application that easily processes your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintainability.
I have the following simple HTML - https://jsfiddle.net/mark69_fnd/6g0L0jwc/
<body style="background-color: white; font: normal 14px Verdana">
Hello
<p></p>
<a style="
font: bold 11px;
text-decoration: none;
background-color: blue;
padding: 10px;
color: white;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;"
href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
<p></p>
Good bye
</body>
Now I am trying to see how it is rendered when emailed using the service at https://putsmail.com.
In gmail:
In Outlook:
Is it possible to change the HTML code in a way that Outlook displays the button with padding, like Gmail does?
Unfortunately, I cannot use images, but everything else is fine.
EDIT 1
LGSon's answer
<body style="background-color: white; font: normal 14px Verdana">
Hello <br>
<div style="display: inline-block;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;">
<a style="display: inline-block;
font: bold 11px;
background-color: blue;
border: 10px solid blue;
text-decoration: none;
color: white;"
href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
</div>
<br> Good bye
</body>
generates the following result in Outlook:
Which is pretty close to what I need, but the white bar stretching along the page is in the way.
Will this work?
<body style="background-color: white; font: normal 14px Verdana">
Hello <br>
<a style="display: inline-block;
font: bold 11px;
background-color: blue;
border: 20px solid blue;
text-decoration: none;
color: white;"
href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
<br> Good bye
</body>
I'm trying to setup some links in an email and I'm having trouble getting them to display correctly.
<p style="display: block; text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</p>
They appear fine on desktop (side by side). On mobile I'd like them to stack but, as expected, they only take up 45% of the screen which is too small.
Since I can't reliably use media queries because of Gmail, is there any way to make them stack and appear at a reasonable width on mobile?
Thank you
Add a min-width to your anchor's, and since you re-style the p, use a div instead.
<div style="text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</div>
You can bring your code back to the past using tables. This technique is only reliable if it's just for an email.
<table width="500px">
<tbody>
<tr>
<td width="50%">Link one</td>
<td width="50%">Link two</td>
</tr>
</tbody>
</table>
I'm currently making a checkout/thankyouforyourorder page for a webshop, and i made different borders with text in them explaining the process after you succesfully placed an order. I gave my borders an orange color and have 4 of them in a row under each other. I want an orange line in the center of them all so i can link them together and style them so i can make a chronologic process of how their order arrives at home. I hope this makes sense, because i have no clue of how to explain it any other way and i can't wrap my head around where i have to look or what to look for. Can anyone who understands this help me?
.opsomming {
width: 600px;
border: 1px;
border-style: solid;
padding: 5px;
margin-top: 3;
border-color: #FFA500;
box-shadow: 2px 2px 2px ##3F3F3F;
font-family: Georgia, Times;
font-weight: 400;
border-radius: 3px;
background-color: #FFBA43;
}
this is 1 of the borders, what i want to do is make a vertical line in the middle of them all, so i can link them together.
You mean like this?
HTML
<div class="leftline-wrap">
<div class="opsomming">content</div>
<div class="opsomming">content</div>
<div class="opsomming">content</div>
<div class="opsomming">content</div>
</div>
CSS
.opsomming {
width: 600px;
border: 1px;
border-style: solid;
padding: 5px;
margin-top: 3;
border-color: #FFA500;
box-shadow: 2px 2px 2px #3F3F3F;
font-family: Georgia, Times;
font-weight: 400;
border-radius: 3px;
background-color: #FFBA43;
}
.opsomming {
margin-left:10px;margin-bottom:5px;max-width: 90%;position:relative;
}
.opsomming:before {
display:block;
content: "";
border-top: 1px solid #FFA500;
width:10px;
height:1px;
position:absolute;
left:-10px;
top:45%;
margin-top: 0px;
margin-left:-1px;
}
.leftline-wrap {
border-left: 1px solid #FFA500;
}
(1) https://jsfiddle.net/q6xzxoan/2/
or like this
(2) https://jsfiddle.net/9ua89hds/4/