I have created a three page web page and I'm using an external css stylesheet that is adjusting my navigation lists so they go across the top and have a coloured background.
When I try and create a list on a page within a table the indenting and vertical listing don't work.
I traced the issue to the external style sheet.
How do I go about turning off the settings the stylesheet did so I can properly format the list?
[EDIT- Okay, so I did a work around. I removed the external stylesheet link as was suggested and put all the style info into my head. Then I did a div around the ul and another around the li which seems to half way gotten it working. Around the li I set the width:50px and that got my vertical listing working. The list-style-type:square still doesn't do anything but I'm too fed up to care anymore for tonight.]
<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">
<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
<!-- And the External CSS Stylesheet Code -->
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
I just read your edit, and while it seems you're gone I am going to answer anyway. Don't give up. CSS can be frustrating to troubleshoot and troublesome to implement in the beginning. Inline styles, font tags hell it all seems ever so much easier, until you realize the actual power that CSS gives you over your styling. I think what you should do is step away from your work for a little bit and do some reading on CSS so you're better understanding what it is you're doing, I'm going to give you a couple of tips here that should help with the issues at hand, but I still think you need to read more.
Get the styling OUT of the head and back into an external style sheet, that is the worst advice you could have possibly been given.
Read up on specificity first. That is how CSS decides which rule applies if there are conflicting rules. For example take this code:
a{color:blue;text-decoration:underline;font-weight:bold;}
p{color:red;}
a{color:green;font-weight:normal;}
Your links are going to turn out green, underlined and normal weight. This is because the green and normal weight came after the blue and bold in the order of how it was read, this is the simplest of the rules, there are others like is it inline, is it an id or a class etc. Read the rules and you'll understand how to write your CSS to get the rules to apply where you want them. This is where the terrible "put it in the head" advice came from because that CSS will be applied after external CSS. Still doesn't make it the right way to do it.
Learn about Classes and ID's. Just quickly ID's are unique names you can apply to elements for example you could then style just that ID in your CSS with #mainNav{color:blue} the thing to remember about ID's is they are UNIQUE. Do not use 5 UL's with the ID of mainNav (the main reason for this is so you can use them to identify them, say in js or jQuery for example). If you have multiple things that need the same styling you use classes, the nice thing about classes is you can chain them so for an easy example consider the following code:
.blue{color:blue}
.underlined{text-decoration:underline}
.bold{font-weight:bold}
Seems sort of dumb on first reading but now look at how you could apply that.
<p class="bold blue">This is some blue text<span class="underlined"> some of it is underlined</span> and some of it isn't</p>
This is where you need to look to solve your problem. If you wanted to apply those list styles just to your nav, adding a class would solve it cascading to other lists. See the following:
.nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.nav li{float:left;}
.nav a{display:block;width:400px;background-color:#ff0000;color:white;}
.nav a:hover,a:active{background-color:#cc0000;}
<div class="nav">
<ul>
<li></li>
</ul>
</ul>
Any other lists you create wouldn't take on those styles. Basically you want your external style sheet to start with your basics then get more specific as you go. So the styles you want on every list go at the top and go on the ul and li or ol and li elements, then as you go further down the sheet you can get more specific.
Stay away from inline CSS
Stay away from CSS in the head
Trust me, learn to do it right and you'll be so happy you'll never understand why you did it any other way. Make use of the Chrome inspect element to trace down why something is displaying a certain way and then fix the CSS, forget these hack ways of fixing it. Fix it right.
If i know what your asking, you cant do that.
You can inspect with firebug/chrome dev tools and find the properties which are being overwritten.
Once you find them you can then overwrite in your own stylesheet.
Keep in mind that specificity is important here as well.
If it does not work you may need to add weight to your selectors, or use the !important keyword.
So you want to retain the styles in the sheet, just keep it from affecting the list on the page? Why not give that list a particular ID and style differently?
For example, I just called your list #cellul and gave it a 10px margin to demonstrate the different styling:
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:none;margin:10px;padding:0;overflow:hidden;}
Here's the result: JsFiddle
You can set a class for your <ul> like so:
<ul class="sth">
Then in the CSS stylesheet, put your class name afterthe ul like:
ul.sth {list-style-type:none;margin:0;padding:0;overflow:hidden;}
Related
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I have recently started to make some User Interfaces for Websites. What i am currently using something called Bootstrap, which is easy to start with and looks good. But the idea behind does not seem too efficient, since we are making our jsp code (the content) dependent on the css elements like this:
<tr class="row col-m-7">
<td class="column"> ...
<a class="btn btn-xs btn-success"> .. </a>
</td>
<td class="column"> ... </td>
</tr>
Recently the Bootstrap has introduced a newer version (v3), and i had to change many class attributes until the jsp gets a stable look. I would like to keep the code in separate layers for content and presentation like this, so i can easily switch my UI framework without loosing any content:
Content (simple html or jstl):
<tr>
<td>...
<td>...
</tr>
Presentation:
.. somehow achieving giving a good look to the table above .. (how ???)
How can i separate content and presentation layers on JSPs?
UPDATE
A new standard is being developed, called Web Components, which will enable developers to create custom html elements which hide the implementation of styling and inner html markup. For example, a modal widget could be declared by the following syntax:
<bootstrap-modal>
<h1>Hello World!</h1>
</bootstrap-modal>
Behind the scenes, the developer has specified the actual html markup used to render the widget, that implementation is tied to the custom component.
Here are a few tutorials to get you started:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation
http://css-tricks.com/modular-future-web-components/
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/
If all <a> elements were to look the same, then you could write one css class and all <a> elements would have the same styling:
a {
color:blue;
}
Some websites, for whatever reason, possibly even concerning the value of the href attribute; will want different colors and styling for different <a> elements. The only way to achieve that is with the class attribute which refers to a css class from a stylesheet:
a.red {
color:red;
}
<a class="red" href="red.html"/>
This means that if you want unique styling for same element names, you will always need to write code which links together the presentation element and the styling.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.
I have this table in some code;
<table>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
</table>
I would like to not use tables and do the alignment and such all in CSS. I tried;
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
Example would be trying to convert this data to CSS to align as the table would;
<table>
<tr><td align="left">Bob</td><td align="center">Dingle</td><td align="right">3923.33</td></tr>
<tr><td align="left">Johann</td><td align="center">Strauss</td><td align="right">33.33</td></tr>
<tr><td align="left">Skip</td><td align="center">Skipperson</td><td align="right">0</td></tr>
</table>
But the text in the middle doesn't align correctly as its jagged (different lengths) and so are the left and right values. Seems this is madness and I am leaning towards "Just Use Tables".
First, get your HTML right: Use the correct tags to contain your data. The information you gave isn't really enough for us to ascertain what type of information you're trying to format. If it is tabular data, then there's no shame in using tables - its what its meant for.
Now the correct manner to using CSS is not to place all of your styles inline like what you are doing. Keep them in a separate CSS file instead, and use selectors to avoid having to repeat yourself so many times.
Here's the solution: http://www.jsfiddle.net/2TDXc/
Oh, and please don't listen to that 'Just Use Table' bullcrap. Really, its better for everyone in the long run.
What do you mean jagged? You mean you want text-align:justify ? Or do you mean you're having trouble with the columns being different heights? If the latter, containing divs might help. For that matter, try using divs instead of spans or setting display:block
Anyway, looking at the CSS templates provided by Matthew James Taylor may help if you mean the latter problem.
You need to make use of the display:inline and display:inline-table css attributes. They're great for forcing any element to sit next to each other on the same line.
<div>
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
</div>
As for the jagged-ness, you must realize that your columns do not inherit or share anything from each other like they would in a table, so you'll ultimately have to hardcode a width. It looks like a table might be what you need.
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.