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">
Related
I have taken over a project for someone. Thee former developer started using using Bootstrap to create a new menu. The problem is that bootstrap and at least one other CSS file in the project have classes with the same name. Because of this, bootstrap is causing the existing layout to not display properly. What are ways to deal with this type of situation? Bootstrap really just needs to be use with the web page header and nothing else. CSS is not one of my strong skill sets.
The problem is that bootstrap and at least one other CSS file in the project have classes with the same name.//
This is the right time to find those clashing classes and give custom names to the external css files. It is always recommended that we don't change the bootstrap classes by modifying the bootstrap css or give our classes the same name assigned by bootstrap. Not doing so might make your life harder as your project expands. So better safe than sorry.
You said that it's the header that relies on Bootstrap and nothing else, if that is the case and your Bootstrap verion is 3.0 and up, you can get just the navbar and related css from the GetBootstrap.com customizer
After you toggle on what you need, scroll down and remove other additions (just unclick or toggle them all off) then go down and download just the CSS you need for the menu the other developer used. If it's the .container class that's conflicting, you can re-name it in the compiled CSS that you just downloaded and then use that re-named class in your html.
You didn't mention what conflicted, ususally it's the .container class but also elements may be messed up by the global box-sizing:border box that Bootstrap uses. To fix that, don't remove it, it's best to use that and just re-set your elements to the correct widths and don't worry about padding or border. Read about it here: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
You can try to change your CSS file to have more specific rules, for example;
<div class="header">
<div class="items">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
Set the CSS rule to
.header .items .block{
}
Instead of just
.block{
}
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.
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.