I used typical way to create tabs using jQuery UI, by wrapping up asp.net usercontrols as below -
<div id="tabs">
<ul>
<li>Schools</li>
<li>Colleges</li>
</ul>
<div id="tab1">
<uc:schools id="ucSchools" runat="server" />
</div>
<div id="tab2">
<uc:colleges id="ucColleges" runat="server" />
</div>
</div>
Tabs work awesome, but including jQueyui.css. Made all the contents of the my user control larger, than usual.
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
I do not see any name collision in jqueryui.css with our stylesheet.
If you've encountered this issue, please suggest how to tweak the css to keep containing div size intact.
Which ever class you want to have first priority or override then you should use !important
Example:
div {
color: #ff0000 !important;
}
UPDATE:
Apart from !important, the other way is "Render your link tag after jquery-ui stylesheet link on the page. So your file takes priority and applies to the page".
Example:
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css" />
Related
Is it possible to have a different style source for each div.
Example
<div src="abc.css"> A
</div>
<div src="xyz.css">B
</div>
You can have multiple stylesheets in your HTML, and then use the CSS code inside them for your divs. Here; 'div1' class is inside div1-styles.css and 'div2' class is inside div2-styles.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="div1-styles.css">
<link rel="stylesheet" href="div2-styles.css">
</head>
<body>
<div class='div1'>
Div-1 text
</div>
<div class='div2'>
Div-2 text
</div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
First its not a good practice but even is a horrible practice.. you can just use different classes in your style file and will done the work.. but if you're insisting in that even if its not right.. you can do it using this JQuery plugin that used scoped attribute to achieve that
The plugin: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
I'm trying to use this and create a different landing page utilizing it.
Here is the HTML. The rest is on codepen.
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,700,900,300,100' rel='stylesheet' type='text/css'>
<div class="overlay">
<div class="wrap">
<h1>Scrolling Form</h1>
<input type="text" placeholder="Username">
<input type="email"placeholder="Password">
<input type="submit" value="Sign In">
<i class="fa fa-question"></i>Forgotten Password
<i class="fa fa-user"></i>Create an Account
</div>
</div>
I'm fairly new to coding and using Codepen but when I copy the code into Sublime Text 2, it doesn't work.
Why is that and what can I do to fix this problem?
This may seem obvious, but if you're copying and pasting that code exactly as it appears in the pen, then it isn't working becasue;
1) It's not a full HTML document. It's just a snippet of the body. It need's a doctype, head, body and html tags. Without a complete HTML structure, the browser doesn't treat it as an HTML document.
2) Even if you were creating a full HTML document out of the example, it won't work as-is from Codepen, because Codepen attaches the CSS to the HTML automatically. You would have to link the CSS file in the head of the HTML document for it to work locally.
<head>
<title>Copied from Codepen</title>
<link href="/style-from-codepen.css" rel="stylesheet">
</head>
For some reasons I have to use JQM and Bootstrap in my mobile application.
But the problem is that there is a conflict between them. The proble is that the footer will appear fine WITHOUT bootstrap link but once its is added, only half of the footer will be seen. How do we solve this issue ? Is there any way to say html page to use a certain css conditionally ?
Thanks in advance.
CODE:
<!--HEADER-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.min.css"/>
<!-- STUFFS-->
<div data-role="footer" data-position="fixed">
<p align="center">© Mobile App</p>
</div> <!-- FOOTER -->
I have my angular application set up and everything is working. I am trying to add some custom css to input so I made a new file my.css
.myInvalid {
border: 5px solid red;
}
I have added that file to my index.html and the file gets loaded but when I write
<input type="text" class="myInvalid"/> there isn't any border around my input.
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js"></script>
<script src="Scripts/ui-bootstrap-0.4.0.js"></script>
<script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
<link href="Content/css/my.css" type="text/css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container-fluid">
<div data-ng-view=""></div>
</div>
<input type="text" class="myInvalid"/>
</body>
</html>
If I write my css inline <input type="text" style="border: 5px solid red" /> everything works. The behavior is the same in all browsers. Any ideas?
You have to make sure that your selector is more specific than the bootstrap one,
Instead of .myInvalid use input[type='text'].myInvalid
Check out this answer for more about selector priority.
This sounds like a specificity problem. Do the other stylesheets you're including define styles for <input type="text">? If you define your style block as follows, I bet you see your red border:
.myInvalid {
border: 5px solid red !important;
}
I'm not saying adding !important is the solution, but if it works you know your selector (.myInvalid) isn't specific enough to override other styles defined for this element.
You'll need to inspect your <input> from the browser and see what style declarations are matching it and overriding the properties you're trying to set. Then you can adjust your selector accordingly.
i am a newbie C# Programmer. I have a problem in xhtml. I want to check that if browser is IE6 or not. For example if ie6 then div id="div1" style="display:block;" else div id="div1" style="display:none;">
How can i control my browser and use if clause in xhtml?
Assign to your div one permanent style:
<div id="div1" class="jumping-div"></div>
Define the default style:
style1.css:
div.jumping-div
{
display:none;
}
Then create another stylesheet which will redefine the class:
style2.css:
div.jumping-div
{
display:block;
}
Then using conditional checks you can include another stylesheet:
<link href="style1.css" rel="Stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="style1.css" rel="Stylesheet" type="text/css" />
<![endif]-->
conditional comments are easiest, you can also do it server side...
<% if (HttpContext.Request.UserAgent.Contains("internet explorer 6")) //Not sure what the exact name is, need to look it up.
{%>
//HTML
<%}%>