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.
Related
I'm making a website that uses a Bootstrap UI, that can be found here. At the moment, the UI's width is not limited, and is thus, going to the ends of the page. I was wondering how I would limit the width of the UI. Now, I'm not too experienced in CSS or web development in general, so please excuse my ignorance. Below is how I thought I would do it, using CSS
<style type="text/css">
.custom {
width: (width)px !important;
}
</style>
I then tried to place the '.custom' on the end of the "container" div to be < div class="container.custom" >. Now I know this is wrong, as it isn't working, so I was wondering how I could fix this, and implement it.
If you want to declare to classes for a div, you have to put it this way <div class="class1 class2">, without the dot (".").
Please don't use frames to realize a website, this is horrible. Also !important should only be used if absolutely necessary.
When adding multiple classes to an element you separate them with a space.
<div class="container custom">
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'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.
Okay, this is a weird one to me. Here's the HTML element I'm working with:
LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png
A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:
alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png
The width of the image's parent element needs to be dependent on the image's size.
I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).
Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)
Check out this great article on the best ways of handling the image-with-a-caption scenario.
Personally this is one of those cases where you gotta suck it up and go with that works.
Make the container a table with table-layout:fixed and put the image in the top row. You can also do this with pure CSS using the display:table-* properties (and the IE7-js library for IE6 compatibility).
What table-layout:fixed does is make the table drawing algorithm lock the width of each table column once the width of the first cell in that column is known. The caption will have nowhere to expand to so it will wrap to the width of the image (the first cell).
Alright, it looks like there's no simple solution that I can pull off. Thanks for helping me work that out :)
I think that, given how I'll be storing those images, accessing width won't involve constant recalculation. I may just use that server-side magic instead.
Thanks!
Here's a solution that probably does not work for you even though it does produce the layout you requested:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.a {float: left;
position:relative;}
div.b {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
background-color:gray;}
</style>
</head>
<body>
<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>
</body>
</html>
You see the reason why it is unsatisfactory if you place some content below the div a. It will overlap with the caption, because the absolutely positioned caption did not extend the parent div vertically. It still may work for you if you have enough white space below anyway or you are willing to reserve it.
I came up with a working and fairly clean solution.
The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:
http://test.dev.arc.net.au/caption-layout.html
Tested and working in IE8, Firefox and Safari/Win
The table answer would work. Easily. I can't encourage its use but ease-of-use does have merit. I was going to suggest using the clip: CSS property, but I can't get it to work on my local machine (for some reason, though it renders the example at cssplay.co.uk perfectly).
The downside of this is that it probably only works if you define fixed-widths for the containers. I'm sure there must be a way, though. I'll keep looking.