I am constructing a basic html5 website with 5 pages for practice as I am in the process of relearning html5 and CSS.
I have a div with ID "education" and Class "content-list".
Inside this div is a Caption and an unordered list Class "content-ul"(NOTE: Caption is contained in "content-list"). The list contains 3 list items.
I want to set the font-weight to bold for the caption, but not the unordered list.
Here's what I have:
HTML:
HTML:
<div id="education" class="content-list">
<caption>Education:</caption>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
CSS:
.content-list {
... styles
font-weight:bold; /* Sets caption and list to bold */
.... styles
}
.content-ul {
.... styles
font-weight:normal; /* Sets list back to normal */
.... styles
}
This achieves the desired result, but I am wondering if there is a better/more efficient way of doing this.
Keep in mind, 4 of the 5 pages use this code. For this reason I opted against using in line styles as I would have to do it 4 times in total. This would remove the need to set the list to bold and then back to normal again, but would still use more code than the chosen method.
Any help/suggestions would be great.
caption is for tables, use i.e. a h4 for lists
<div id="education" class="content-list">
<h4>Education:</h4>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
Side note, styling a caption work when used properly
table, th, td {
border: 1px solid black;
}
table caption {
color: red;
font-weight: bold;
}
<table>
<caption>Caption</caption>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
Looking through your example, I can see you only want Education to be bold and not the content other than it. For this simply, do it like
caption{
font-weight:bold
}
CSS in OP won't be needed.
Related
I've got a table that needs to be striped but it has some rows that may become hidden later on. After hiding some of the rows re-striping does not occur so the striping is off. How can I force the table to re-stripe itself? Here is my css that I feel should work, but it's not. And then also my html.
.isHidden {
display:none;
}
tbody {
tr:not(.isHidden):nth-child(odd) {
background: rgb(238, 238, 238);
}
}
<tbody>
<tr [ngClass]="{'isHidden': !line.get('isVisible').value}" *ngFor="let line of lineDetailsArray.controls; let i=index;">
...
</tr>
</tbody>
At present, you won't be able to solve the problem with CSS only, unfortunately. True, there's a potentially useful addition in the spec - :nth-child(An+B of S). The following example exactly matches your case:
Normally, to zebra-stripe a table’s rows, an author would use CSS
similar to the following:
tr {
background: white;
}
tr:nth-child(even) {
background: silver;
}
However, if some of the rows are hidden and not displayed, this
can break up the pattern, causing multiple adjacent rows to have the
same background color. Assuming that rows are hidden with the [hidden]
attribute in HTML, the following CSS would zebra-stripe the table rows
robustly, maintaining a proper alternating background regardless of
which rows are hidden:
tr {
background: white;
}
tr:nth-child(even of :not([hidden])) {
background: silver;
}
The caveat? Support of this option in browsers is not even limited: it's non-existent.
But still, there's a way out of this misery. Even though Angular won't just let you place ngIf and ngFor on a single element (it'll be way too simple I suppose), there's a workaround - using <ng-container> as a placeholder:
<ng-container *ngFor="let item of list">
<ng-container *ngIf="!item.hidden">
<tr>
<td>{{item.name}}</td>
<td><input type="checkbox"
[checked]="item.hidden"
(change)="item.hidden = !item.hidden" /></td>
</tr>
</ng-container>
</ng-container>
Demo (kudos to #imkremen for helping to create this one).
I am converting a docx to html format (using apache poi) and sending it as email.
A snippet of generated html looks something like this
<html>
<head>
....
<style>
span.Normal{
font-family: 'Arial';font-size: 9.0pt;
}
span.Title{
font-family: 'Cambria';font-size: 28.0pt;color: #000000;
}
span.MySubtitle{
font-family: 'Arial';font-size: 18.0pt;color: #000000;
}
span.MyTitle{
font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
}
...
</style>
</head>
<body>
....
<p class="Normal Title MyTitle">
<span id="_GoBack">
<span class="Normal Title MyTitle">Welcome Message</span>
<span class="Normal Title MyTitle"> </span>
<span class="Normal Title MyTitle">Username</span>
</p>
<p class="Normal Title MySubtitle">
<span class="Normal Title MySubtitle">Issues and Solutions</span>
</p>
...
</body>
</html>
The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.
Does Outlook support multiple css? Is there a way I can control multiple css generation.
I've just discovered this problem myself.
It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.
Stylesheet:
<!--[if gte mso 9]>
<style type="text/css">
.red {
color: red;
}
.large {
font-size: 72px;
}
</style>
<![endif]-->
Markup:
<div class="red">
THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
Result:
As far as I see, all versions of Outlook are affected. Including the newer ones.
I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:
https://github.com/hteumeuleu/email-bugs/issues/117
As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.
The classic yet efficient solution for mail is rely in the table tag.
You can find a good example here
Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.
Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.
Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.
I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.
Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.
My suggestions are to:
Use semantic markup
Discard classes and use semantic selectors
Use the DRY principle (don't repeat yourself)
list rules with a logical order, such as starting from the largest and ending at the smallest.
Here's some refactored code using your styling rules and demonstrating how to use each element.
<html>
<head>
<style>
body {
color: #000000;
}
h1,
h2,
p {
font-family: 'Arial';
}
h3 {
font-family: 'Cambria';
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p {
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is paragraph text.
</p>
</body>
</html>
I have a problem in my div elements I can not show them in one line:
<div>
<table>
<tr>
<td>hellow world</td>
</tr>
</table>
<ul>
<li>hi world</li>
</ul>
</div>
the table shown above the the ul and I want the tow elements to shown in one line next to each other.
I tried to use:
div
{
display:inline;
}
or :
div
{
display:block;
}
But it did not work . any body can help me on this??
If you want to show the table and the ul side by side, those are the two elements you should target, not the container they happen to be in.
If they are the same height, simply writing
table {float:left; margin-right:40px}
will do the trick. (You will need the margin, because lists also work with margins to show the bullets, and the bullet would end up inside the table if you didn't provide for that.)
See fiddle
If the table is higher, you will also have to clear the float afterwards, else subsequent content may also end up to the right of the table:
div::after {content:''; display:block; clear:both}
See updated fiddle
Float your content:
div
{
float: left;
}
You can apply display:inline-block, but the key is making sure you apply it to the correct elements...
table, ul
{
display:inline-block;
}
Here is a working example
you can just use table,ul{display: inline-block;} demo
Try this
<div>
<table style="float: left;">
<tr>
<td width="100">
hellow world
</td>
</tr>
</table> <ul>
<li>hi world</li>
</ul>
</div>
The selectOneRadio element in JSF is translated to a table, where the radio button and its label are put within the same <td> in a table.
<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
value="#{bean.selectedType}"
layout="pageDirection">
<f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>
<!-- Generated HTML -->
<table id="j_id_i:types">
<tbody>
<tr>
<td>
<input id="j_id_i:types:0" type="radio" value="VALUE1"
name="j_id_i:types"/>
<label for="j_id_i:types:0"> Value #1</label>
</td>
</tr>
<tr>...</tr>
...
</tbody>
</table>
Before I was using Bootstrap, the elements within the <td> would appear side by side, but now look under each other.
The processed CSS for the element is the following, as given by Firebug.
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #333333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
html {
font-size: 100%;
}
I have no clue what may be producing such behaviour. It's not a concern of width, as this is the single element within the <div>, and without bootstrap it is rendering side by side.
That's because the <label> has due to the Bootstrap CSS become a HTML block element which starts naturally at a new line.
You need to make it a HTML inline element again. So, you need to override the Bootstrap CSS accordingly. Perhaps you want to apply this for labels in table cells only. E.g.
td label {
display: inline;
}
I have a table that looks something like this.
EDIT - I re-extracted code. I think the question makes more sense now. (Answers may not)
<div class="view view-latest-news-view view-id-latest_news_view view-display-id-latest_news_block_1 view-dom-id-1">
<div class="views-admin-links views-hide">
</div>
<div class="view-content">
<table class="views-view-grid">
<tr class="row-1 row-first">
<td class="col-1">
</td>
</tr>
<table>
</div>
</div>
How can I address only the "views-view-grid" tables that are contained by the "view-latest-news-view" class? Something like this...
.view-latest-news-view table.views-view-grid {
border-collapse:separate;
border: 1px solid red;
}
** END EDIT **
Thanks!
** ANSWER: **
this works... but maybe I could be more specific?
.view-latest-news-view .views-view-grid {
border-collapse:separate;
border: 1px solid red;
}
This does not work because <table class="views-generic-grid"> is not contained with in any element with the class views-admin-links. (You open the div and then immediately close it, so it has no children.)
So when you say this:
How can I address only the "views-generic-grid" tables that are contained by the "views-admin-links" class?
The answer is you can't, because there are no "views-generic-grid" tables contained in elements with the "views-admin-links" class.
Either extend the div to surround the table, or pick a different selector than .views-admin-links.
The way your markup is right now, you can't, you have to extend .views-admin-links to surround the entire .views-generic-grid table, and then you can write a selector like this:
.views-admin-links .views-generic-grid