The Doxygen don't say anything about the creation of a particular title (or even change de the size of a simple text... lame). My search are surprisingly infructuous about this simple task:
I search a way to put a bigger title on the main page. This title must be huge, squared and centered, here's my actual code:
<div align="center">
<table>
<tr><td> {/Huge **Huge sized title**}
</table>
</div>
Everything work except the size, I tried it outside, font size="X" and the # don't work either.
How to use it correctly?
Related
I'm making an e-mail template. I want to make a line below the heroImage.jpg. The line cannot be a part of the heroImage.jpg as there are several other lines in the e-mail and they should all look the same.
The way I do it is that I set a border-bottom to a table row in which heroImage.jpg is placed.
My problem is that in GMAIL (when the e-mail is delivered, but not in OUTLOOK for example) I get a thin ribbon of space between heroImage.jpg and my line. I think it is because GMAIL does not recognize valign nor vertical-align and thus the heroImage.jpg is aligned top (probably default option) and the colour of #heroImageBlock is thus visible.
But how it should be is that heroImage.jpg would be aligned bottom and right below to it would be my line (no annoying space in between).
Is there a way to force GMAIL to recognize valign or vertical-align and get rid of that annoying space?
HTML
<tr>
<td align="center" valign="bottom" id="heroImageContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">
<tr class="border-bottom">
<td>
<img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
</td>
</tr>
</table>
</td>
</tr>
CSS
#heroImageBlock td{vertical-align:bottom;}
I've tried to assign vertical align to all other elements too (see below) but it does not work.
#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}
In OUTLOOK image and a red line are nicely together as it should be:
In GMAIL there is an annoying gray line between the image and the red line.
Valign/vertical align isn't your issue here. Since you're specifically setting a block image, you shouldn't have anything to vertically align. This points to another issue to do with the way you're declaring the image, but I'll get to that soon.
FYI, it's best if you give us more scope or more code. You're referencing a border-bottom class, but we can't see what properties to render that border are. Same goes for the id on the image. If any properties are being set on classes or IDs in the head, it's best to include those for us to help you debug.
Here are my suggested improvements to try and fix this.
1. Don't set any properties or classes on table rows. They aren't designed for that use. Moving the border may fix the issue but even if it doesn't, tables and table cells are where you should be adding these. In this case, move the border-bottom class declaration to the table cell under the row.
2. Have you tried setting display:block; on the image? By default, images will be declared as inline and you have to specifically set is as block. When inline, spacing can appear below images and will throw spacing and dimensions out when trying to be pixel perfect, or in your case aligning content directly below.
Let me know how those go.
Try adding these styles to the parent element:
font-size:0px and line-height:0px.
By default Gmail tends to add its own spacing. The above should remove it.
I have an html email .oft (Outlook File Template) created in Outlook 2010 with a table layout width set to 600px. This ecard template is distributed to others at the company who might want to add a few lines of texts and signature to the bottom after the table.
However all the added text appears on the top right next to the table. How can I either block any content on the right of the table or set the width of the email to be only 600px so any new additions will appear correctly at the bottom after the table? I know that floats and clear css don't work reliably across in html emails.
Thanks, Attila
Your best bet would be to create a table at 100% width. Inside that table, make two cells, one with a width of 600, and another with a width of 'auto'. THis will then span the full remaining width of the email window.
This is not an ideal situation, but as you have mentioned, there are very tight limitations on what is achievable in MS Outlook 2010, let alone 2007.
Something like this:
<table><tr>
<td width="600">Enter details here</td>
<td> (space character so no client disregards this cell) </td>
</tr></table>
You may need to experiment with the width of that last cell, you could try and make it 100% or something to force the take up of all extra space on the right, but it will come down to your code, and your email, and what works best for that organization.
If that doesn't work, consider a nested table inside the first table to be extra sure...
<table width="100"><tr>
<td width="100%">
<table width="600"><tr>
<td width="600">Enter details here</td>
</tr></table>
</td>
<td> (space character so no client disregards this cell) </td>
</tr></table>
As a guide - I use the Campaign Monitor reference for compatibilities:
http://www.campaignmonitor.com/css/ - download the XLS file on that page.
Good luck.
I used the following code to generate a form in attached image.
Is it possible to change the size of the fields in the form.
I want to decrease size of input field of Estimated time and the dropbox field to the right of it
{{=form.custom.begin}}
<table>
<table><tr>
<td><b>Type :</b></td><td><div>{{=form.custom.widget.type}}</div></td>
</tr><tr>
<td><b>Title :</b></td><td><div>{{=form.custom.widget.title}}</div></td>
</tr><tr>
<td><b>Description :</b></td><td><div>{{=form.custom.widget.description}}</div></td>
</tr><tr>
<td><b>Estimated Time :</b></td><div'><td>{{=form.custom.widget.estimated_time}}{{=form.custom.widget.estimated_time_unit}}</td> </div>
</tr>
<tr>
<td></td><td><div align='center'>{{=form.custom.submit}}</div></td>
</tr>
</table>
{{=form.custom.end}}
Yes. You can and there are many ways.
The recommended way is to look at the generates JS. You will find it follows a naming convention described in the book. You can use CSS to change the look-and feel of every widget.
input[name=estimate_time] { width:50px }
Similarly you can use JS/jQuery (I would recommend you do this in the view).
jQuery(document).ready(function(){ jQuery('input[name=estimate_time]').css('width','50px');});
You can also use jQuery-like syntax in python in the controller:
form.element('input[name=estimate_time]')['_style']='width:50px'
I have a large form that consists of all the input (text, checkbox, radio, etc...), I have them grouped together in a fieldset tag and a legend for each feildset. Each input has a label associated with it as well. My question is what is the best approach to display the information on one screen and take advantage of the horizontal real estate the user might or might not have?
I would love it to be all CSS with minimal (if any) table layout(s) as I think tables are for tablature data and not presentation. CSS3 and HTML5 are welcome as well.
Also I would like to have the ability to add branding as this might need to look like another site instead of the original site developed for.
What would be the best approach for this? I have the idea I would use li tags to do the horizontal look but I would like to break to the next line at the end of the screen (Think no scrolling horizontal but vertical is okay)
CSS Novice looking for design pattern advice
This is an example but I think I have around 50 fields
<!DOCTYPE HTML>
<html>
<head>
<title>Large Form</title>
</head>
<body>
<form action="">
<fieldset>
<legend>***</legend>
<label for="fname">First Name</label><br />
<input type="text" name="fname" id="fname" value="" /><br /><br />
<label for="lname">Last Name</label><br />
<input type="text" name="lname" id="lname" value="" /><br /><br />
<label for="gender">Gender</label><br />
<select name="gender" id="gender">
<option value="">-- select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</fieldset>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The first thing that comes to mind is that you want to remove the <br/> tags from the form. If you need vertical space, use CSS padding and margins since they're easier to change and make spacing consistent.
With that out of the way, other than branding (which will influence the look and feel of the form the most) the things you want to consider the most are accessibility and ease of use. Your use of labels and unwillingness to use tables for layout are a good start for accessibility so I'm not going to mention it further.
For ease of use, you'll need to make sure that each field can be tabbed to (in an order that makes sense), has a clear, meaningful label, has no unnecessary validation rules (such as forbidding whitespace in a phone number - don't force the user to clean data that can be cleaned automatically) and those validation rules that are necessary have clear, easy to understand messages that appear, ideally, as the user is entering the data rather than waiting for the user to submit the form.
Each of your field sets should be visually grouped either by colour, with a border or some other method. Individual field set should not be broken up, but different field sets can be separate from each other as long as they are contextually different (like address versus interests, for example).
Since you're already grouping field sets, you can use them as your basic unit of page layout. Each set could be floated, for example, in order to maximimize horizontal usage regardless of the user's browser width. As long as the sets are visually distinct enough and are clearly labelled there shouldn't really be any issues with that.
If consistency is more your thing, then each field set should be separated from each other vertically. That would make sure the form is ordered and laid out the same way for every user. Again, the important thing is visual consistency and ease of use. Users are used to forms being laid out vertically so the wasted horizontal space of doing it that way shouldn't be a very big concern.
Just remember: you're making something that should be easy to use and not frustrating. The position of fields should reflect that: they should be natural, grouping like fields together and separating groups of like fields from dissimilar fields. As long as you're keeping that in mind you're probably in good shape.
And don't forget to do some quick usability tests to make sure your validations make sense and are clear.
Have a look at CSS3 grid positioning. It has a clear but powerful syntax, e.g. from the link:
body {
grid-columns: * * (0.5in * *)[2];
grid-rows: 20% *;
columns: 3;
column-gap: 0.5in;
}
Elements use gr units to choose their grid cell:
img {
position: absolute;
left: 2gr;
width: 3gr;
}
You would only have to give an id to your fieldsets then set their position and extents in your style file.
One of my favorite ways to group large forms is with the jQuery style accordion. It allows you to abstract the form into key groupings, keep the form all on one page, and eliminate the need for page scrolling; all with an intuitive user interface.
A good example of this is the Barnes & Noble checkout form process.
Check out CSS Flexbox for some liquid flexibility withing you design sets. I would also recommend picking a "style" and sticking with it. Agree with Welbog.
I guess that if you have a form with 50 fields, you surely have to split it to themed tabs. Say 3 to 5 tabs. They can be implemented by Javascript.
You may want to save input data on-the-fly, because the user may need a long time to finish the form, so there is bigger possibility that he will catch a loss of internet connection or some other factor, that will erase his half-finished form, which would probably dissapoint him and leave your site.
Also consider that user has to have a place for his eye to rest, so be sure to make enough blank room between inputs.
In my application, I have to fix all the closing tags of the <img> tag as shown below. Instead of closing the <img> with a >, it should close with />.
Is there any easy way to search for all the <img> in this text and fix the > ?
(If it is closed with a /> already then there is no action required).
Other question, if there is no "width" or "height" to the <img> specified, what is the best way to solve the issue?
Download all the images and get the corresponding attributes of width and height, then add them back to the string?
The correct <img> tag is the one that closes with /> and have the valid width & height.
<img align="left" hspace="5" width="150" src="http://s3.dlnws.com/images/products/images/749000/749208-large" alt="" title="">
Apple today unleashed a number of goodies, including giving iMacs and Mac Pros more oomph with new processors and increased storage options. We have those deals today, along with many more items for the Mac lover. Along with the refreshed line of iMacs and Mac Pros, we’ll also look at a number of software deals [...]
<p><img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/0/di" border="0" ismap><br>
<img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/1/di" border="0" ismap></p><img src="http://feeds.feedburner.com/~r/cultofmac/bFow/~4/Mq5iLOaT50k" height="1" width="1">
Regular expressions will solve the problem with closing your tags correctly - make sure whatever you're using to edit your code supports regular expression searching, and then search for something like this (assuming that all of your unclosed image tags end with a ">):
\<img (.*?)"\>
and replace it with this:
<img $1" />
As far as the bit about the width and height attributes, if you're trying to display the images at their regular width and height, you shouldn't need them. The only time you should need width and height is if you're displaying the image at a different size than the original image's size, which doesn't appear to be the case here.