I was googleing this question but could not get any appropriate result.
Is there an option in the script editor to import html classes and ids automatically? So for the following html code example, the css structure below is automatically created:
HTML:
<div class="container">
<ul>
<li></li>
</ul>
</div>
CSS
.container{
}
.container ul{
}
.container ul li{
}
.container ul li a{
}
Some Editors like Dreamweaver create the CSS code automatically when you apply a certain formatting to it.
For example if you select red as font color in a paragraph it adds the respective CSS code.
Depending on how you configure your CSS styles it may be added to a separate file or in the same HTML as a <style> tag
Related
I wonder is it possible to dereference a CSS file referenced earlier in the HTMl page.
I'm asking because I'm responsible for part of the page, the framework rendering the whole page references some CSS file in the format of
<link rel="stylesheet" type="text/css" href=XXX.css>
And this CSS file is overwriting my CSS file, so I wonder if I can dereference it or is there any other suggestions?
Thanks a lot.
Instead of trying to remove that file try putting more specific CSS rules:
[parent.css]
a {
color: red;
}
[your_file.css]
body a {
color: blue;
}
CSS always applies on entire document.
The way you can do for only one div is just define a unique id or class to your div you want to write css for.
<div class="main_div" id="myCss">
//further content like h1, div, ul, li
</div>
And now when you write css just inherit all the css like this
#myCss h1{
// mycss
}
#myCss ul li{
// mycss
}
This way css will be applied only on your div.
so I've been having a huge problem with trying to insert an image slider to my website at the moment, primarily that the nav bar CSS code is conflicting with the code for the slider. I imagine that there is a way to separate different CSS codes but I haven't found it yet.
In keeping the code as simple as possible to break down, here is the CSS I'm using.
<style type="text/css">
* {margin:0;padding:0;}
div {position:relative;height:3.2em;background:#FFFF99;border-top:2px
solid;border-bottom:2px solid;margin:0 0 30px;}
#nav {position:absolute;left:50%;top:0;margin-left:-380px;
height:3.2em;width:760px;list-style:none;}
#nav li {float:left;}
#nav a {display:block;text-align:center;color:#000;height:3.2em;
width:120px;line-height:3.2em;text-decoration:none; margin-left:
-2px;font-weight:bold;border-left:2px solid #000;border-right:2px solid #000;}
#nav a:hover,
#nav a:focus {background:#5E9BD9;color:#fff;}
#nav .active {background-color: #5E9BD9;}
</style>
And here is the HTML
<div>
<ul id="nav">
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
<li>Booking</li>
<li>Register</li>
</ul>
</div>
Please can I have help with splitting large groups of CSS code (I can do with singular lines but not for a large block like I have here)
Any help is appreciated!
Make sure that you give you slider div a unique id e.g
<div id="sliderwrapper">
then code your css in the following way
#sliderwrapper {
background-color: #ddd;
... etc etc
}
#sliderwrapper > div {
//this applies to divs that are DIRECTLY below the slider object
color: brown;
... etc
}
#sliderwrapper div {
//Any div at any level below the slider, not just directly below
}
#sliderwrapper .classnameyoucreated {
//classes that exist below the slider at any level
}
you can also specify custom attributes if your using html5. e.g.
<div id="sliderwrapper"><a class="classnameyoucreated" data-anythingyouwanttowriteherewillwork="value"></div>
#sliderwrapper > a.classnameyoucreated[data-anythingyouwanttowriteherewillwork=value] {
background-color: red;
... etc etc
//This is ultra specific and almost impossible to inadvertently override in another css block - specificity is the key here.
}
Because you've specified #nav in your CSS as long as #sliderwrapper is not a child of that tag you shouldn't have a conflict. If you do have a conflict there are some rules to remember.
The last specifier read by the browser is the priority
The most specifically defined specifier will trump a more ambiguous specifier
you can always override any value by adding !important to the end - but this is lazy and is bad practice when its over used.
You can also consider using .less files to enhance the syntax a bit and organize your code.
Good luck
Sounds like its an issue with specificity, hard to say though without seeing the code for the slider. As long as the nav bar and slider have no classes that overlap, there shouldn't be any issues.
Perhaps adding class="slider-[sometext]" to all slider elements and styling from there would solve your 'conflict' issues?
you have to use different ID-s.
Can anyone suggest how I would go about creating a css rule that would vary depending on the body class? This is within a backbone js app used within a mobile app.
At the moment I will have either 'ks3' or 'ks4' for a class on the body tag (as shown below) and i'd like to have .menu class for ks3 & one for ks4
Current CSS :
.menu {
background-image:url(../img/navigation/bg-768x1024.png); // need to set to null if body class has ks4
background-size: cover;
color: #fff;
}
html
<body class="ks4">
<div class="stk">
<div class="shell">
<div class="menu">
<!-- my menu here-->
</div>
</div>
</div>
</body>
So in essence I am trying to do the following in psuedocode..
if (body class is 'ks4') {
use the existing .menu class but set background-image to none.
}
Is this possible using advanced CSS selectors?
Since you set a rule for .menu it applies to all elements with menu class.
Now all you need is to set a rule to override current rule for background image.
body.ks4 .menu{
background-image:none !important;
}
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit