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.
Related
im brand new to coding and in a mad rush to get my website finished before i have to put it live in 4 days. im having serious issues with the menus on my site. i used a drag and drop editor to build it and am customizing small parts using the html element tool where i need to. The problem im having is that the editor as far as i can tell only uses one master css file for styling the menus... which means all my menus regardless on "in editor" settings have 15px padding around them. This is a huge issue for my footer which contains TONS of links. I need to find a way to apply css to only the menus in the footer. (there are a few coppies of the master page meaning theres actually a few footers, one for each master page)
sadly as im so new to code i dont really know what the hell it is im doing here.
but in short i just need to be able to make a little piece of css for my footer that i can apply that will only affect the menus in it and no where else
i dont want to paste the code in here as part of this question as i dont really kno what part to look for and what little i have looked into my code would be like 5 pages long or something. so please if you can help me just let me know what to look for or how to find it (im good at using the google chrome inspect tool) so i can paste only whats needed.
just in case it helps heres the current link to my website.
http://sites.simbla.com/fd066dd7-48f1-6002-53ae-f18c93075f27/careersart_art?misc=1475010324849
I suppose you don't have the options to add classes to your editor. Your footer does not use a footer tag, rather another instance of the div with class 'containerHolder'. What you could do (since the footer is the last instance of this class) is to use the css :last-child selector.
Your code would look like:
div.containerHolder:last-child li {
// css rules here
}
This will only target items inside of your footer. This is not the greatest method, but possibly the only one since you don't have control or knowledge of the markup itself. The above example would only target li's inside of your footer.
I'm not 100% on what you are wanting but you can select all the menu items by using #MP485 ul li as the selector or if you want the links #MP485 ul li a so if you want to edit the padding you can use something like this:
#MP485 ul li {
padding-bottom: 2px !important;
}
If you use !important at the end this should override any other styles.
Alright this is probably a newbie question but it is very much frustrating me. I clearly say in the style tags that the top blue bar needs to be snug against the top and the two side panels need to be snug against the sides.
Yet for some reason it has taken the liberty of inserting a blank white space around my html.
Here is the link: http://popularn.com/nate/error.html
See that white space on the left and at the top?
Even when I say top:0% and left:0%, it still doesn't work. It's like it's laughing at me and I've had enough. It's like it is starting the document at top:2% and left:2% and there's nothing I can do...
remove margin from the body, set top left to 0, and off course don't forget the position attribute
html,body{padding:0; margin:0;}
#someElement{position: absolute; top:0; left:0}
also -
putting position:absolute; top:0; left:0; to the body is like doing nothing
and the position of the #top_menu should be position: fixed and not fixes which has no meaning
Browsers have a set of default styles which are known as 'User-agent styles'. These are a generic set of CSS rules that it applies to elements. You know when you put a H1 in a page, and it appears big, and in bold? These are those styles.
The base elements in your pages are all styled with these UA rules. Body, HTML, div, etc - they all have a small amount of padding on them, which is where this is coming from.
Consequently, it's good practice to always use a CSS reset, when you are developing beyond basic styles. There's a couple of good ones I'd recommend. As CSS is hierarchical (hence cascading!) you need to include resets first.
Firstly is Eric Meyer's CSS reset. This applies generally to everything, and is invisible for most purposes. You include the file, everything gets reset to base.
Secondly is Yahoo UI 3 (YUI) reset, which takes a slightly different approach. They let you selectively apply a reset to different areas of a page by including a class. This is useful for some things, but for almost every small/medium sized project I'd recommend Eric's reset linked above - but it's useful for comparison and learning.
Instead of trying to tune out inconsistencies as you go along - using a CSS reset will give you a baseline for all elements which is the same on every browser. Believe me - you want this. When you get further into html, forms for example or fun stuff like that, then this kind of thing is an absolute life saver.
Hope that helps!
You need to reset the default padding and margin on any browser. I usually use this:
*{padding:0;margin:0;}
I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}
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.
For some reason, I'm having a problem with these two pages on my website that should have some elements look the same, but for some reason, they look a little bit different.
I have some included asp files which are linked to the same CSS files, so that is why I believe they should be the same. The spacing looks off on the about.asp page though. The index.asp page looks great, however.
Here are the two pages:
http://www.marioplanet.com/index.asp
http://www.marioplanet.com/about.asp
Any ideas as to why these are kind of screwy?
There is extra spacing on the about page, because the spacing gets removed by a style in SlideShow.css on the index page:
* {
margin:0;
padding:0;
}
The above looks like a simplistic implementation of a reset.css style.
Looking at those pages with Chrome's devtools (or Firebug in Firefox) will show that the SlideShow.css in index.asp has a * style in it (that is, every element) to set padding to 0, which makes the padding and margin of your body (and everything else) zero.
This is very bad practice on the part of whoever made SlideShow.css, and is what is mostly screwing up your layout. An css include that is intended to be used modularly (as with a drop-in slideshow) should never use a * style block, because that affects every element in the page. It should have all of its style blocks prefixed with some class to limit its effects to the slideshow module.
Looking at your SlideShow.css, it looks like you may have pasted in some CSS from elsewhere, which is where it may have been introduced. You also shouldn't include <style> tags in external CSS files.
If you remove the SlideShow.css include, your pages should look much more similar. From there, you can edit SlideShow.css to remove the * style and add the include back in, making sure it doesn't screw everything up again, but still lets your slideshow do its thing, or just find a different slideshow module.