He guys, right now im working on a conversion-page that is supposed to be included on websites of our partners. We're given a certain space inside their websites to promote our product. The space we're offered is of course supposed to be styled with html and css. And this is where it gets a little complicated. Is there a smart way to prevent our stuff inside their html-structures to be formated by their css?
Sure, I could check all affecting formations and just overwrite them with our own css-formations, but this is pretty dirty and not very reliable in terms of possible changes in the future.
How would you handle this? Might iFrame be a valid solution?
Thanks
Without an iframe you can use a special application of the universal reset concept.
/* cssreset.com */
#your_company_div * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.5em;
text-decoration: none;
vertical-align: baseline;
/* and perhaps some more... */
background: white;
color: black;
}
You may want to explicitly define the font/family as well, unless you just want to use theirs to make it fit in better.
The idea here is basically that it shouldn't matter anymore what the parent website has defined for CSS styling, your content should look the same basically no matter what, because the * trumps all.
Note that there is the same sorts of downside with using a universal reset, in that you nuke inheritance and will have to do define margins and padding if you want a non-zero value.
This shouldn't be that big of a downside for you as you are not so much designing a whole web site, and thus for a little extra work up front it won't matter how they change their site, your block will stay mostly the same.
If you use Iframe then can invoke your page as external in your partners website with your own stand alone style. Else give a hierarchy style to the div and its child elements
Related
Seems that hiding a element can be done 500 ways. I'm looking what what is best for browser compatibility standards, and possibly even performance...
This is what I wish to hide:
<li class="header-menu-user"><a class="header-user" href="/Settings/User/UserProfile">User Settings</a></li>
What I have tried in the past is for another scenario in which I did a display:none on a li with a data- attribute etc..
I just tried to do this and it is not working (not hiding it)
.header-user {
display: none;
}
There are many ways but one of these two usually is appropriate:
display: none;
Will hide the element, meaning surrounding elements will ignore it as if it were not in the DOM, even though it is and you can still target it.
opacity: 0;
Will essentially make the element transparent, not visible but it still occupies space in various layout models.
You can hide a specific <a> tag like this:
li.header-menu-user a[href^="/Settings"] { display: none; }
With just using CSS Display:none; would be the way to go. The only performance impact this is really having is that you are still sending all the content that is hidden to the client browser. If you want to improve performance perhaps consider removing the content on the server side if that is an option for you.
The fundamental ideas for this idea for a simple web page format are
a) let the user decide what he wants text to look like
b) make the code as short and simple as possible
In his browser settings (if the application allows it), the reader chooses the typeface, size of text, size of headings (H1, H2, etc.), background color and other defaults. So far, the sole line in the external CSS file: body { max-width: 30em; font-family: Sans-Serif }.
But, a very familiar (and practical) convention is a top bar (title/masthead and/or navigation) with no margin-- it bleeds to the edges of the browser/device, filling the space entirely. The problem is that all browsers have a margin by default.
So, how is the no-margin bar achieved-- while letting the browser default margin work for the rest of the HTML page?
The inherit, reset and unset css keywords seem to get close. And, obviously, one thing that repeatedly appears when researching this notion is { margin: 0; padding: 0; }.
What is the solution for a top navigation bar with no margin and a margin in the main content area below it controlled by the browser default?
Is it even possible?
read the body margin and assign negative margin to header:
<div id="header">Some text to test</div>
<script>
var defaultmargin=$("body").css("margin").replace("px","");
$("#header").css("margin",-defaultmargin+"px");
</script>
You can make whatever changes you want with JavaScript (JQuery is my prefered framework).
For web design, man, you really need to look by yourself. Google is your friend !
What you are asking right is the basic and you certainly won't get a complete course here. I can however advise you to look for HTML/CSS MOOC or so (OpenClassrooms might offer free english course, unless you prefer french ?).
You might also like Bootstrap, if you give it some thought : Bootstrap Website
By all means, Happy Easter !
Put the rest of code between <div class = "rest"> </div> and include the following css.
body {
margin: 0, padding:0;
}
.rest {
margin: 5px
}
You could do a css reset by placing the following at the top of your css file:
* {
margin: 0;
padding: 0;
border: 0;
}
I have an application where I allow users to add a snippet of code onto their website which in turn adds a small widget to the site allowing their users to interact with the application etc.
What i'm doing now is placing all of my html in a container that they place on the site with (hopefully) a unique id. Lets say ts-container. Then, in the css that gets loaded on the site that is meant to style my elements, I place #ts-container in front of every selector in the style sheet. Is this the best and only method of protecting my css from affecting their page elements, or is there some way to wrap the entire style sheet without having to actually id every class? Is there a way to place the style sheet in the wrapper container and have it only affect those elements or something? Should I be doing this in an iframe or something similar instead?
Just looking for some suggestions in case I am missing a best practise in my situation.
You can do a sub-reset of the CSS:
#ts-container * {
margin: 0;
padding: 0;
font-size: 13px;
font-weight: normal;
background-color: white;
color: black;
}
You might need to enter some extra styles, but this should prevent any CSS from the parent document from affecting your widget.
iframes are a much easier way to do this, though. Whether you use them or not is a design choice.
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/
I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.