I have this kind of table:
<table>
<tr><td>Count A</td><td>12</td></tr>
<tr><td>Count B</td><td>8</td></tr>
</table>
I'm new to CSS but from what I've read so far I'm assuming that the html should be:
<div id="counts-container">
<div class="count">
<div class="count-label">Count A</div><div class="count-number">12</div>
</div>
<div class="count">
<div class="count-label">Count B</div><div class="count-number">8</div>
</div>
</div>
It seems to me that I'm on the right track but I'm not sure about how to write the CSS for this html structure. Any suggestion I appreciate.
Ok, so I just want to confirm with you guys. This table should be:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td><tr>
</table>
In your case using a <table> is ok - just structure it correctly:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td></tr>
</table>
<th> being the table header cell.
If you are confused about when to use tables and when not I suggest you to consult the specification http://www.w3.org/TR/html4/struct/tables.html
If this is tabular data than just go ahead and use a table. Thats what that HTML element is supposed to be used for.
div's are for page layout, table's are for displaying tabular data.
http://webdesign.about.com/od/tables/a/aa122605.htm
You probably should be using a <table> tag. Sites that say they're bad really mean "abusing them for formatting reasons instead of using padding and margins is bad".
But if you're set on using <div>s, try this:
#counts-container {display: table;}
.count {display: table-row;}
.count-label, .count-number {display: table-cell;}
counts-container becomes your table,
count becomes your row,
count-label and count-number become your column so you have to write css like this
#counts-container,
.count
{
width:400px;
float:left;
}
.count-label
{
width:150px;
float:left;
}
.count-number
{
width:250px;
float:left;
}
{#} for id and
. for class
Related
I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp
i am trying to display a few labels with a fair bit of space in between them on the same line in an html document. This does work.
How to get this working in a nicer way?
<div>
firstlabel             secondlabel
</div>
You could wrap your 'labels' in <span> tags, give them classes, and add margin with CSS.
Example here: http://jsfiddle.net/peduarte/Rf5kB/
HTML
<div>
<span class="firstLabel">firstlabel</span>
<span class="secondLabel">secondlabel</span>
</div>
CSS
.firstLabel {
margin-right: 50px;
}
You should use a semicolon after  .
<div>
firstlabel secondlabel
</div>
Try this:
<div class="main">
<div class="left">firstlabel</div>
<div class="right">secondlabel</div>
</div>
.main{
width:220px;
}
.left{
width:110px;
float:left;
text-align:left;
}
.right{
width:110px;
float:right;
text-align:right;
}
Sorry but this is a really freaky way to do that. Why don't you place those Labels in <p>-Tags and format the spacing via margin,padding ?
The correct non breakable space entity is , you forgot the semicolon at the end (;). A better way, however, to achieve what you want to do would be to enclose firstlabel and secondlabel in <span> tags and use css to make them stand apart, like suggested by peduarte.
Whether it works depends on the browser; the correct notation is with a semicolon (as mentioned by nyarlathotep). But no-break spaces give you very rough control. A better approach is to use CSS, e.g.
<div><span style="padding-right: 5em">firstlabel</span>secondlabel</div>
You can tune the padding-right value, using whatever units are suitable for your context. But generally, the em unit is most suitable, as it means that the spacing is automatically scaled when font size is changed.
I'm surprised that no one suggested the simple inline style:
<div style="margin-right: 500px;">firstlabel</div>
<label >Subscription Expiry: 2019=04-30 00:00:00<br><br></label>
Subscription Type: paid
Say I have my CSS like this:
div.some-class table
So I have:
<div class="some-class">
<table ...>
..
</table>
</div>
Now if I need to have a child div inside the table, the child seems to inherit from the parent style, and I want this to be styled differently.
<div class="some-class">
<table ...>
<div> <table .. > ... </table> .. </div>
</table>
</div>
how do I do this? do I have to be explicit and do this:
div.some-class table div.other-class table
Any other way?
You can just do .other-class{...} if you're trying to style the div itself, or .other-class table {...} if you want to style the table.
You should always be explicit. It makes things easier to understand:
div.some-class table { /* styles */}
div.some-class table div.other-class table { /* child-styles */}
Either that or use an #id somewhere.
You could
give the first table a specific class name and have all rules point to that class (this is the easiest solution but the least nice in terms of clean CSS)
Use the child selector div.some-class > table to create rules that address only the first table and not the second one (doesn't work in IE6)
Frequently I am aligning text such as:
To: 07/02/2010
From: 07/02/2010
Id like it to be displayed like this:
To: 07/02/2010
From: 07/02/2010
So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.
What do you recommend?
Definitely definition list (<dl>).
<dl>
<dt>From:</dt><dd>07/02/2010</dd>
<dt>To:</dt><dd>07/02/2010</dd>
</dl>
/* CSS */
dl {
overflow: hidden;
}
dt {
width: 50px;
float: left;
}
I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.
But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:
To: From:
07/02/2010 07/02/2010
You could do something like this, if for some reason you didn't want to use tables:
CSS
.sideheading { width: 3em; float: left; }
HTML
<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010
Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).
But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!
Use a definition list or white-space nowrap.
I've seen this problem before, a quick google search:
http://www.google.com/search?q=css+forms
...brought me here:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and I copypasted the HTML and CSS into this:
<html>
<head>
<style>
label
{
width: 5em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
</style>
</head>
<body>
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Looks good to me, save it in a .html and see for yourself.
Padding with s sounds messy. How about something like this:
<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010
.header { display: inline-block; width: 5em;}
In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.
This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.
I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.
I have a web page in ColdFusion which shows contents from a SQL table. The contents are iterated using cfloop and are rendered using a div block. My code snippet follows-
<cfloop query="qry1">
<div class="subBlock">
<div class="item"><h4>Date:</h4><p>#qry1.date#</p></div>
<div class="item"><h4>Name:</h4><p>#qry1.name#</p></div>
<div class="item"><h4>Address:</h4><p>#qry1.address#</p></div>
</div>
</cfloop>
What gets shown on the page looks like-
Date:
06/01/2009 03:40 PM
Name:
XYZ ABC
Address:
ZZZ St.
So the problem is that I'm getting those line breaks. Whereas what I want is something like this-
Date:06/01/2009 03:40 PM
Name:XYZ ABC
Address:ZZZ St.
I'm using a similar div at another page and it is shown correctly there. The only difference here is that I'm using div tag inside cfloop tag.
Please let me know where I'm going wrong.
cheers
The h4 has an implicit line break after it, as well as the p. You can either use a CSS style of display: inline-table for the h4, or use a span and apply a class that makes it look like the h4 style you wish.
In addition to what the other answers have said about h4 and p having default block-level styling, headings are generally intended for document sections, not for labelling specific pieces of information.
Consider using a definition list, which is (arguably) more semantically correct:
<cfloop query="qry1">
<dl class="party_details">
<dt>Date:</dt><dd>#qry1.date#</dd>
<dt>Name:</dt><dd>#qry1.name#</dd>
<dt>Address:</dt><dd>#qry1.address#</dd>
</dl>
</cfloop>
Then some CSS similar to:
dl.party_details dt
{
float:left;
clear:left;
font-weight: bold;
}
dl.party_details dd
{
float:left;
clear:none;
}
(probably needs tweaking)
Alternatively, a regular ul/li with a span class="title" might be preferred.
If you want to keep the current tag structure you could float the P tags in your CSS. Something like (untested):
.subBlock .item p { float: left; }
Personally I'd restructure the tags to this:
<div class="subBlock">
<div class="item"><p><strong>Date: </strong>#qry1.date#</p></div>
...
...
</div>
or
<div class="subBlock">
<div class="item"><p><span class="title">Date: </span>#qry1.date#</p></div>
...
...
</div>
then apply a style for the span .title class
use a table, much easier to control the layout and appearance that using div, p, and h4 tags. divs especially can sometimes do some strange things when I use them.
<table>
<cfloop query="qry1">
<tr>
<td class="item">Date: #qry1.date#</td>
</tr>
<tr>
<td class="item">Name: #qry1.name#</td>
</tr>
<tr>
<td class="item">Address #qry1.address#</td>
</tr>
</cfloop>
</table>