I'm working on an inherited webpage. Specifically trying to implement a print.css (there wasn't any print.css up till now).
The previous developer has put in ...
<hr class="hidden" />
The CSS for this in the main css is (unsurprisingly):
.hidden {
display: none; }
... at points which separate the major sections of the page. Wondering if anyone can say why this might be useful?
There's no separate print.css though it's possible he intended to implement one and ran out of time. The page is nicely designed, so I am assuming the previous guy knows what he's doing.
It's indeed very probable he wanted the print version of the page to have a horizontal line there. In that css he probably would have defined the "hidden" class as being "display: inline".
Well, the HRs still serve their semantic purpose as dividers even if they're not visible, I suppose. But yes, it's a bit weird. Maybe he intended for them to show in print, to keep from having a massive block of text.
Are there any HRs around that aren't hidden? Looking at those cases might give you some more information. Considering he did this with a class, it might imply these are exceptions somehow, since he could've made it global with just hr {display:hidden;}
I think that prevuous guy wanted to add visible <hr> only for print version and in the browser view <hr> were not necessary.
Trying to understand the reasoning behind the markup/styles applied to the following snippet. Sample as Originally Found in the Wild is a cross-browser compatible example of displaying a background-image in an <hr />. In this case, style="display:none" is declared on the <hr /> element itself, for displaying a background image in place of the line or border. Below is the related HTML/CSS:
HTML:
<div class="hr">
<hr />
</div>
CSS:
div.hr {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}
The only thing I can assume is that he's put the hrs there so that they appear on browsers where css isn't rendered; typically something like WebbIE. They will certainly be visible if you turn off your browser's css
The other reason I can think of is that he was making tests - it's easier to comment out the display:none; line on the css rather than erasing out all the hrs manually. At the end he decided not to use hrs, but he forgot to remove them, or was just a bit lazy.
Well, one reason could just be to reduce the size of the page. If you're having a lot of elements you save some charaters.
<hr class="hidden" />
<hr style="display: none;" />
Another reasons could just be a coding style to have the control over all styles in one file and not to go with inline-styles. Or it was planed to go with a print version later. So many reasons are possible.
Looks like he/she might have anticipated being asked to get rid of the horizontal rules, so pro-actively put the hidden class on them.
That being said, it's not necessary to do it that way, as simple hr { display:none; } would have sufficed. But then I've seen some good designers go mental with a gazillion classes that just aren't required.
Alternatively it was an accident, and it was meant to go into the print.csss file so the horizontal rules wouldn't be printed.
Who really knows? It's a mystery!
Placing headings with a class of 'hidden' and clip or display:none inside each of the tags is said to be a good practice. It was called 'document outlining' and it's supposed to be used with html5. It's main purpose is to better inform search crawlers about the website's content.
Related
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
This may be an odd question, but I'm trying to make a div that will act as a sort of preview pane for an HTML mail message in which I want to make sure all styles are done inline. So I'd like for the div and its contents to receive no styling from the outside page.
Is there a way to do this (in CSS or Javascript) or do I have to override every individual style that has previously been set?
I'll show some code, but that's kind of breaking what I wanted this question to be. For example, let's say I have a div:
<div id="somediv">
<h2>Message Header</h2>
<p>This is some content</p>
</div>
Since this div is a part of a larger page, it and its contents are subject to styling (such as margins, paddings, fonts, font sizes, colors, etc) from the surrounding page and any CSS files included. Is there a way to negate ALL of that styling rather than individually overriding them?
In the future, you reset all properties with all: unset declaration, but it's only available on Firefox 27+.
For now, you can put your "inner" content in a separate document and embed it via iframe:
<iframe src="content.html"></iframe>
content.html (minimum valid HTML5 document):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Content</title>
</head>
<body>
<h2>Message Header</h2>
<p>This is some content</p>
</body>
</html>
I guess the closest you can get is to do some sort of CSS reset on everything within a given container, and then possibly try to re add some default-like margins and such till it looks "unstyled" again. And then take it from there with your inline CSS.
Another, completely different approach could be to display the mail in an iframe, in which there is no applied styling at all. Can probably be done, but might be a more complex thing to implement.
If you want to rewrite inherited CSS and not use the browser-default-CSS, you can add an !important behind every property. For example:
#noInherit {
background-color: #fff !important;
}
I'm not sure if you can stop inheritance. Maybe someone else can give you a better answer.
I don't believe you can remove all styles as there is no such thing as null in css. You can put everything to auto it one big dump
.noStyle{
width: auto;
height: auto;
etc...
}
but I don't think that would get the effect you are after as it will just make the div inherit everything from it's parent(s). More detail about exactly what you are trying to accomplish might make it easier to help you find a workable solution but I don't think the question as currently posed is "solvable".
You can use the negate selector. Just add :not before any CSS rule you don't want to apply on that div.
http://www.w3.org/TR/css3-selectors/#negation
Hard work if you do it manually, but you can automate it if you feel like. Note it will only work on modern browsers.
The other way is to use iframe. Not recommended.
I want to make bubbles containing content, placed around a HTML page. So, I made a .bubble CSS class, and put the positional values as an in-line style. This gave me some rather long lines. The style guides of programming languages I've used dictate a maximum line length, and specify how overly long lines should be broken up. Something like
<div class="bubble"
style="top: 10%;
left: 40%;
right: 60%;
width: 480px;
height: 295">
Content.
</div>
...looks absurd. What is good form for this?
I would rather look at that in one line. With that said, I pretty much never see it broken like that. And in some cases, I think the browser removes the line breaks anyways.
Though I would really rather not see in-line CSS.
However, if you have to have in-line CSS, I think the standard of 'whatever fits on the screen' which is 80 characters-ish still holds.
EDIT
Just to be sure, I did some light searching for in-line CSS guidelines and ever site I found is strongly against it as a practice all together. I know your question was about in-line CSS but I feel obligate to say don't. It breaks the concept of separation of concerns. It tightly couples your html to your CSS. What if you want to play around with a new design? Now you have to edit your html directly and risk breaking the flow or the page altogether instead of just pointing to a new CSS file.
If you need specific CSS for one particular element, slap an ID on it and throw it in your external CSS doc.
EDIT: It's not necessary to have both left and right declarations. If you tell the browser that the element is 40% from the left, it will know that it's 60% from the right. That will save you a few characters of code, and will not change the outcome.
You didn't make a bubble css class. You made a bubble class and added inline css to the div tag.
You have quite a few alternatives. I'm not quite sure why you haven't chosen them.
If line length is an issue, delete the spaces. You don't need them, and keeps the line shorter.
<div class="bubble" style="top:10%;left:40%;width;480px;height:295;">
Content.
</div>
But, agreeing with another post here, do not use inline css. It's bad practice. If the styles must be within the file (as in Tumblr themes) put them inside a style tag.
<style> .bubble {top:10%;left:40%;width:480px;height:295;}
</style>
Or do what most of us do, and put the style on a separate css file, with a link to it between the head tags.
<link href="yourstyles.css" rel="stylesheet" />
Did you consider doing this through js and jQuery? Alternatively, you could something like this:
$('.someBubble').css({
top: 10%;
'left': '40%',
'right': '60%',
'width': '480px',
'height': '295px'
});
Not knowing what constraints or limits you have to work with, this would at least let you keep styles from inlineing.
I'm specifying a teal background color for the body of a page:
<body style="background-color: #0197B1">
This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)
I add the following at the bottom:
<br style="clear:both" />
some text
</body>
to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm ... why does this happen, what's the fix?
Page can be viewed at: http://www.momentumnow.co/testimonials
Thanks
Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.
Remove html {background-color:#ffffff;} and you should be done.
When you float an element you are removing it from the document's flow. The page loses a sense of where and how large the element is.
You page is a series of nested tables with floated elements inside. The only thing providing actual vertical structure is the tables themselves. Your background is ended where the tables run out.
To recode this page would be easy for someone who was familiar with Standards-based, semantic markup. I would suggest learning those methods. In the meantime, #Christian Varga's solution will get you off for the time being.
I check Firefox only,
line 4: html{background-color:#ffffff; height:100% }
Just remove body
or
line 4: html,body{background-color:#0197B1; height:100% }
I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).