Hello I am using Weebly Pro and I would like to learn how to make an accordion side bar. Now it will currently open the submenus next to the menu and it makes huge mess.
this is my website:
www.exceptyebeconverted.com
I would like something more like this:
www.excatholicsforchrist.com
I need some extreme help. I have searched google and youtube for help and have not been able to understand any of it enough to help me. That is why I am here.
How could I edit this code to get the accordion effect? Do I have to change HTML as well? Does that mean I change the page layout?
<body class="wsite-theme-light short-header-page">
<div id="container">
<div id="sidebar">
{logo}
<div id="avmenu">{menu}</div>
</div>
<div id="main-wrap">
<div id="header">
<table id="header-right">
<tr>
<td>
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
<td class="search">{search}</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="clear:both"></div>
</div>
<div id="banner">
<div class="wsite-header"></div>
</div>
<div id="main">
<div id="content">{content}</div>
<div id="footer">{footer}</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
/* side-nav
--------------------------------------------------------------------------------*/
#avmenu {
clear: left;
margin: 70px 0 0;
padding: 0;
}
#avmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#avmenu li {
list-style: none;
}
#avmenu li a {
font-weight: 400;
text-decoration: none;
color: #fff;
font-family: "Lato", Arial, Helvetica, sans-serif;
font-size: 15px;
display: block;
line-height: 1;
margin: 0;
padding: 10px 5px 10px 14px;
border-bottom: 1px solid #903f3f;
}
#avmenu ul > li:last-child a,
#avmenu ul > span:last-child li a {
border-bottom: none;
}
#avmenu li#active a,
#avmenu a:hover {
color: #fff;
background: #903f3f;
}
/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
border-top: 1px solid #903f3f;
position: relative;
top: -1px;
}
#wsite-menus .wsite-menu li a {
padding: 8px;
background: #903f3f;
border: none;
border-bottom: 1px solid #bd5353;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #723131;
}
Try following this:
https://www.youtube.com/watch?v=gLy3vaIhyKA
Also, since this is using JQuery, there are other JQuery based accordion widgets you can use, like https://jqueryui.com/accordion/ and http://www.jqueryrain.com/example/jquery-accordion/
Related
my code is as follows.
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-stable/tinymce.min.js"></script>
<style>
tr,
td {
text-align: center !important;
padding: 7px !important;
border: 2px solid #c8c8c8;
}
.rowSelected {
color: blue;
}
</style>
<table it="table" style="width: 100%; background-color: #fff !important;border-collapse: collapse; border-width: 2px; border-color: #ececec; border-style: solid; color: #757575; text-align: center !important; font-weight: 500;">
<tr>
<td>1</td>
<td>name</td>
</tr>
<tr class="rowSelected">
<td>2</td>
<td>FullName</td>
</tr>
<tr>
<td>3</td>
<td>Code</td>
</tr>
</table>
<br>
<textarea id="fldText">
<p>Hello, World!</p>
<p>Show my row Selected: ?</p>
</textarea>
I want to double-click on the table to add the value of the selected row to the cursor or question mark.
But I do not know how to do this !؟
My Demo Code
In my program it is not clear which row is selected and this is determined by the user.
I have a pretty simple unordered list with some links in an html email that generated by a server. It looks and works as expected in most email clients (gmail, apple mail, outlook web), but in Outlook desktop some of the links don't work, seemingly at random.
Specifically, some of the links (all from the same list) work, some don't. When they don't, they don't appear as links: they're not underlined and the cursor doesn't change when you mouse over them.
Here's the code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Lead</title>
<style>
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] h2 {
margin-bottom: 5px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.btn-primary table td:hover {
background-color: #229422 !important;
}
.btn-primary a:hover {
background-color: #229422 !important;
border-color: #229422 !important;
}
.statusLinks a {
color: #870a0a
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">New lead from Bill Jones of Jason Test 20220511 B</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="margin-top: 20px; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<img src="http://company.com/logo.png" alt="company logo" width="227" height="31" border="0" style="-ms-interpolation-mode: bicubic; max-width: 100%; padding-bottom: 2em; border: 0; outline: none; text-decoration: none; display: block;">
Hello,
<br/>
<br/>The following sales lead has been assigned to you based on the inquiry sender's location and needs.
<br/>
<br/>Please process the lead within 24 hours; contact the inquiry sender (when needed) and select the correct status or delegate the lead to someone else. Options are listed in the bottom of this email.
<br/>
<br/>
<h2>Lead Details</h2>
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:block; width: 100% !important; margin-bottom: 20px"><tbody>
<tr><td style="color: #888888; font-size: 12px;"> ID#:</td></tr>
<tr><td style="padding-left: 10px;">218271</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Source:</td></tr>
<tr><td style="padding-left: 10px;">Manually-added lead - Outbound Calls</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Status:</td></tr>
<tr><td style="padding-left: 10px;">Awaiting Sales Action</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Generated Date:</td></tr>
<tr><td style="padding-left: 10px;">12 May 2022</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Company:</td></tr>
<tr><td style="padding-left: 10px;">Jason Test 20220511 B</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Location:</td></tr>
<tr>
<td style="padding-left: 10px;">
United States
</td>
</tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Contact:</td></tr>
<tr><td style="padding-left: 10px;"><div><div style="margin: .3em 0"><span style="margin-right: .25em; border: 1px solid #ccc;padding:.25em">Bill</span> <span style="border: 1px solid #ccc;padding:.25em">Jones</span></div></div><div>jason#company.com</div><div>Marketing Allowed: No</div></td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Interest:</td></tr>
<tr><td style="padding-left: 10px;">Training</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Customer Comment:</td></tr>
<tr><td style="padding-left: 10px;">
--
</td></tr>
</tbody></table>
<table role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #F7ACAD; border-radius: 3px; width: 100%;" width="100%">
<tr>
<td style="padding:10pt">
<h2 style="margin-top:0">Update Lead Status</h2>
<p>Please process this as soon as possible and select one of the options below. For detailed information of the categories, please review your Sales Handbook.</p>
<ul class="statusLinks">
<li>Qualify</li>
<li>Mark as Non-Sales Inquiry</li>
<li>Work-In-Progress</li>
<li>Mark as Disqualified</li>
<li>Mark as Junk / Solitication</li>
<li>Send to Dealer</li>
<li>Mark as Career / Media / PR / Sponsorship / Supplier Inquiry</li>
<li>Delegate to Someone Else</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="clear: both; border: 0; border-bottom: 1px solid #cacaca; margin: 20px 0;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">Your feedback is always appreciated.</p>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer" style="clear: both; margin-top: 10px; text-align: center; width: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
©2022 product, a product of Company.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
Some relevant details:
The email uses the Cerberus html template.
There are no list specific styles in play outside of changing text color (no positioning or z-index stuff, etc.)
I can't replicate it myself at all; my user can't replicate it on demand either, but sees the problem routinely.
As far as I can tell the user is using the most up to date version of outlook desktop with no plugins.
Questions
Is anyone else seeing this problem?
Are there any obvious problems with my markup?
Are there any ways to lint/validate html emails for outlook standards?
Updates:
20220513 Stabbing around in the dark, I noticed if you change the zoom in the separate message window some of the links no longer work. They still look like links, but the hover and click actions no longer work. This might be related.
20220513 With some more messing around, when viewing the message in the separate, just scrolling up and down changes whether or not the links work. This has got to be some kind of outlook bug.
I have an email that I'm working on that included a light-colored background image with black text and a button over it. On MS-Outlook Dark Mode (macOS 10.15) and Outlook.com Dark (Chrome), the text and button are white. Here's my code.
I followed advice from this article: and have added the fixes recommended in the section How to Keep Text Black Inside VML in Dark Mode, but the text is still white. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NielsenIQ Consumer 360</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="color-scheme" content="light dark">
<meta name="supported-color-scheme" content="light dark">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td, h1, h2, h3, p, li, a {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
<style>
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size:0; line-height: 0; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; font-size: 0; line-height: 0; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u ~ div #body-table a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a {text-decoration: none;} /* for Windows 10 underlining */
body[yahoo]{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table { border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;empty-cells:show; }
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* Make sure the links are Black in Gmail */
.link { text-decoration: underline; color: #000000 !important; }
.link:hover { text-decoration: none; }
/* Target Outlook App for Dark Mode */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }
/* Styles for Dark Mode */
#media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
h1.black-header1, p.black-para, .inner a { color: #000000 !important; }
.keep-black { color: #000000 !important; }
/* .two-column__white-bg-left-img .two-column,
.two-column__black-bg-right-img .two-column,
.wrapper { background-image: none !important; } */
/* Hides Light Mode-Only Content, Like Images */
.light-img { display:none; display:none !important; }
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap');
.wrapper { width: 640px; background-color: #fefefe; }
div.left-column td.inner,
div.right-column td.inner { padding-top: 20px; }
.niq-top { width: 100%; }
.niq-angle { width: 100%; }
.top-story { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 60px; }
.hero-image { width: 100%; max-width: 100%; }
.dark-gray-cat-left { font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; color: #666666; font-weight: 700; }
.divider { width: 640px; height: 12px; }
.social-section, .copyright-section { padding-left: 60px; padding-top: 60px; padding-bottom: 60px; padding-right: 60px; }
.branding-section { padding-left: 60px; padding-top: 20px; padding-bottom: 20px; padding-right: 60px; width: 640px; }
.footer-section { padding-left: 60px; padding-top: 60px; padding-right: 60px; padding-bottom: 80px; }
img.bottom-logo { width: 196px; height: auto; }
a.black-link { color:#000000; }
a.white-link { color:#ffffff; }
/*C360 Styles */
.inner { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 30px; }
/*Media Queries*/
#media screen and (max-width: 480px) {
.wrapper { width: 480px; }
.niq-top { width: 100%; }
.niq-top img { width: 480px; height: auto; }
.niq-angle img { width: 480px; height: auto; }
.top-story { padding-left: 40px; padding-top: 20px; padding-right: 40px; padding-bottom: 40px; }
.branding-section { width: 480px; }
.divider { width: 480px; height: 6px; }
.social-section, .copyright-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; }
.footer-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 60px; }
}
</style>
<!--[if gte mso 16]>
<style>
body {
background-color:#353535 !important;
}
.keep-black {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 \#000000 1 100000\,99000 \#000000 1 100000";
color: #ffffff !important;
mso-color-alt: auto;
}
</style>
<![endif]-->
</head>
<body style="background-color: #b3b3b3;">
<!-- Top Section Header / 0- ===== Only this top portion expands 100% width across the top ===== -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #010101;" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="niq-top" style="background-color: #010101;font-size:0;line-height:0;"><img alt="NielsenIQ" src="https://microsites.nielsen.com/web-assets/wp-content/uploads/sites/10/2021/01/the-iq-brief-top-bar-no-N.png"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Top Section -->
<!-- Main Content Area -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presenation" style="background-color: #fefefe;">
<tr>
<td><!-- Top Story Block -->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center"><!-- Top Story -->
<table border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="width: 640px;">
<tr>
<td class="lead-in" style="background-image: url('https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png'); background-color: #ffffff; background-position:top left; background-repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#fefefe" style="width: 640px; height: 317px;">
<v:fill type="tile" type="frame" src="https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png" color="#656565" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="inner">
<h1 class="keep-black" style="font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 38px; color: #000000; mso-color-alt:auto;font-weight: 700;">Gain the momentum to tackle what's next</h1>
<p class="keep-black" style="font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; color: #000000; mso-color-alt:auto;">Explore ideas that are motivating progress and transforming the consumer packaged goods industry.</p>
<!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%;mso-text-raise:32pt"> </i><![endif]--><span style="mso-text-raise:12pt;color:#ffffff;">Join us at C360 2022</span><!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%"> </i><![endif]-->
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've done a bunch of googling, but I can't find an answer anywhere that works for me.
I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:
form {
margin: 0 auto;
background-color: #3d549a;
}
input {
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 400px;
padding: 15px;
border-radius: 5px;
}
textarea {
height: 5em;
resize: vertical;
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 860px;
padding: 15px;
border-radius: 5px;
}
.asterisk_input:after {
content: " *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -20px;
font-size: 17px;
padding: 0 5px 0 0;
}
.buttonblue {
padding-left: 90px;
background-color: #31b9e9;
font-family: avenir;
font-size: 16px;
width: 300px;
height: 75px;
color: #ffffff;
padding: 0;
border: none;
border-radius: 5px;
box-shadow: 0px 5px 1px #21a1c6;
}
button {
margin-left: .5em;
}
<table width="100%" style="background-color: #3d549a" height="820px">
<tr height="250">
<td valign="bottom" align="center" width="100%" colspan="4">
<span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
<hr color="#273a72" width="75" align="centre">
<span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span>
</td>
</tr>
<tr>
<td>
<form action="/my-handling-form-page" method="post">
<p>
<input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
<input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
</p>
<p>
<textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>
<span class="asterisk_input"> </span>
</p>
<p>
<button class="buttonblue" type="submit">SEND MESSAGE</button>
</p>
</form>
</td>
</tr>
</table>
(I'm also having trouble centreing it ;) But one problem at a time, I suppose
Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:
First, add a class named "required" or some such to the input box itself. Then, add the following tags:
.required::-webkit-input-placeholder:after {
content: " *";
color: red;
}
.required:-moz-placeholder:after {
content: " *";
color: red;
}
.required:-ms-input-placeholder:after {
content: " *";
color: red;
}
for align centre just add
display: table;
in .form class.
* {
margin: 0;
border: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
background: #474747 url(bg.png);
}
h1 a {
display: block;
text-decoration: none;
font: 40px Helvetica, Arial, Sans-Serif;
letter-spacing: -5px;
text-align: center;
color: #a0a0a0;
text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
div#mobile pre {
width: 275px;
margin: 0 auto;
background: #222;
padding: 10px;
font-size: 20px;
color: #555;
text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 20px;
}
This is what I have so far on an iPhone-optimized version of my site. But when viewed from an iPhone/iPod touch, it looks well, except that there is excess space on the right. How can I fix this?
I think you have some tabs or spaces after your "labels". You should also have the text in label-elements.
What you might have:
<pre> <form method="post" action="/index.php">Enter a URL<br />(WITH THE http://): <br /><input type="text" name="url">
<br />Want a custom tag? <br /><input type="text" name="custom">
</form>
No URL was entered.</pre>
What you should have:
<form method="post" action="/index.php">
<label for="url">
Enter a URL (WITH THE http://):
</label>
<input type="text" name="url">
<label for="custom">
Want a custom tag?
</label>
<input type="text" name="custom">
</form>
<p>No URL was entered.</p>
Then you need to style it to make it look like before. Remember the pre-element is usually used to output code.