I am using Yii-bootstrap extension and I am having some styling problem because bootstrap css files affect the main content of the page.
My main content is a map done with OpenLayers so I am having several problems with styles mixing between them. I have tried to do a css file more general, as I have seen they recomend on the web,for applying different styles but as they are two "automatic" libraries is a hard work to try to guess how they work and the classes they use.
Is there any way to disable a css file for a concrete div?
you can create a class for that div and reset the values you have changed for general divs.
Nothing that I'm aware of, no.
The only way I can see is..
<div class="outer">
<div class="inner" >
Inner Content
</div>
</div>
You could do something like..
.outer{
}
.outer .inner{
/* override the specific styles you need here */
}
Related
I think I cannot do that one in CSS, but wanted to see whether someone would have such a solution...
I have a div with the page content, a div which can be in several different location in the HTML, and a set of paragraphs. The CSS would have to place the second div between two paragraphs.
There is a sample HTML:
<div id="to-be-placed">Move Me</div>
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
Say we want to place the "#to-be-placed" div after the 3rd paragraph, is there a way to do that in CSS? I can reference the 3rd paragraph as so:
content.p:nth-child(3)
But I really don't see a way to tell CSS to move my DIV to that location...
Note: the #to-be-placed div could be inside the #content div, at the beginning or at the end.
P.S. Please, don't come up with hard coded sizes and positions. That won't work.
P.S. Just in case you get all excited about jQuery. I know how to do it with jQuery. So no, I don't need you to give me such an answer. (see How to add div tag in-between two paragraphs when wrapped inside main div using jquery for those who wonder.)
This cannot be done using CSS, as CSS does not provide any mechanism for moving elements in HTML, only for styling existing elements and adding new content through the use of pseudoelements. The best you're going to get is a solution that uses JavaScript or jQuery.
If you only want to add styled text content, you can add that using the ::after pseudo-element in CSS, but it does not support HTML, only plain text:
p:nth-child(2)::after {
content: "- Added content";
}
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
You can't do that exactly, but a possible workaround would be to define the div as the ::after element on the 3rd p element. This technically puts the div inside the p, but it might do what you're looking for.
p:nth-child(3)::after {
content: "Move Me";
display: block;
}
Here's a fiddle: https://jsfiddle.net/me5su05f/1/
Short answer: No you cannot do that. CSS (Cascading Style Sheet) is designed for styling. It is not designed to be used to manipulate DOM elements. JavaScript on the other hand is built for doing that. So if you happen to be wanting to use CSS for manipulating your DOM then you might want to re-think your approach to the solution.
I have a navbar that I made using the bootstrap CSS. I would like to add it to my website which already has its CSS Stylesheet and when I attach both stylesheets, it conflicts and messes up all my styling. Is there a way I can easily add a CSS Stylesheet and have it only apply to one particular div?
For example, is there a way I could only load the CSS on that id?
Bootstrap CSS is extremely large so I'm hoping there is a way that does not require having to add #myid before each of the hundreds of CSS rules.
Edit It appears this is being interpreted in the wrong direction. The question is not how can I just get the navbar CSS, because that still messes up other styling.
Is there a way I can put a #mydiv around all CSS rules in a bootstrap stylesheet (for example #mydiv { #header {CSS rule} #content {CSS rule} } so that the rule is only applied to one div or do something similar to that effect? I know that example wouldn't work, but is there something that can be done similar to that effect to solve my problem?
This is one way of doing it:
You can get the appropriate css from GetBootstrap.com's customize
page
Add the id="mynav" to the parent of the navbar if there is one or wrap the navigation in a div with the id="mynav"
Open up the bootstrap.css you downloaded, remove any unnecessary css (perhaps normalize if it's a repeat of what you have).
Find all navbar related styles, and put a #mynavbar (space) .navbar
You will then open up your own CSS and put the #mynav in front of the styles affected.
Since the navigation and all of Bootstrap works with border-box sizing, you'll have to change your math in YOUR css.
HTML - Example only:
<div id="mynav"><header class="navbar navbar-static-top">
...
</header></div>
CSS example, there's lots of this so you have to add the #mynav before all
#mynavbar .navbar {styles}
You can get the navbar and related css and js from GetBootstrap.com's customize page:
http://getbootstrap.com/customize/
Toggle as follows:
Scroll down and make other adjustments as you need to the colors and such to the Navbar:
Then scroll down again and click the download.
The download will contain the CSS of what you selected. Then you would open up the bootstrap.css file you got, you'll see the normalize css and other base settings and the navbar, without other styles. If there are conflicting classes, rename them and apply them to your html.
You didn't mention what conflicts but usually it's the .container class being the same or the global -- and necessary -- box-sizing:border-box that Bootstrap uses. If you see mess ups, go back into your own CSS -- not Bootstrap's, and adjust the math (include all borders and padding). Read up on box-sizing:border-box to learn more.
You can also use the less css for developing your theme. download less master from github
And use less compiler such as winLess for windows, simpLess, and Koala (supports windows, mac and linux) compiling your less files.
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{
}
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 have the following page structure
<div id ="site-wrapper">
<div id ="banner">
<div id="menu">
<center>Menu Goes Here</center>
</div>
</div>
<div id="content">
<center>Content Goes here</center>
</div>
<div id="sidebar_r">
<center>Right sidebar</center>
<div id="sidebar_top">
Sidebar top
</div>
<div id="sidebar_middle">
Sidebar middle
</div>
<div id="sidebar_bottom">
Sidebar bottom
</div>
</div>
</div>
How do i structure the css . I have used ids for all of the divs is there a better way to do it?
htmldog's css for beginner
Have a look at the html5 spec - http://www.whatwg.org/specs/web-apps/current-work/multipage/
You can make use of elements such as "header", "footer", "nav" and "section". this will reduce the amount of id's you have to set in your css and make your markup more semantic.
also, having lots of css selectors stacked will have a performance hit.
In regard to you question!
an example css structure could be..
#menu center { ... }
#sidebar_r center { ... }
try not to go mad like
#site-wrapper #banner #menu center { ... }
your css parser has more work todo and your css becomes less manageable if you wanted to rename say #site-wrapper to #container.
my rule of thumb is..
use an id if the element is a container or only appears once.
use a class if the element appears more than once such as li's.
make use of tags, i only use an id or a class if its required. you can always add it later.
I would suggest replacing your <center> tags with <span> tags instead, then applying a text-align:center style in your css. As far as structuring your css... it depends how it should look. Can you be more specific?
Download some of these templates and study how they setup their sites layouts:
http://www.freecsstemplates.org/
http://www.templatemonster.com/free-templates.php
ya you can use both ID and Class for css but remember one thing that ID has better specificity than class.So whenever you are using class you can use multiple classes at a time but if you are using ID then you can use one ID.For better CSS after writing your css make it validate through w3c css validator.
To know the css specificity check this link and decide what will be your css.
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
At the simplest, all you need to use is:
#sidebar_r {
float: right;
}