I have the following html markup currently just displaying simple text "HELLO STACKOVERFLOW" with some styling. The markup was taken from illustrator and I am trying to incorporate bootstrap to make a more responsive page. I cannot figure out why the text will not change with the browser size. It seems fixed. The browser shows the bootstrap scripts are working but I can't figure out what is overriding bootstrap. The style in the code are just text size and color.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=1190,height=792" />
<title>5707.CC2014.R30TEST2-1</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
<script src="script/idGeneratedScript.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body id="x5707.CC2014.R30TEST2-1" onload="RegisterInteractiveHandlers();" lang="en-GB" xml:lang="en-GB" style="width:1190px;height:792px">
<div class="container">
<div class="row">
<div class="col-lg-6" style="width:13883.54px;height:2339.22px;position:absolute;top:0px;left:0px;-webkit-transform-origin: 0% 0%; -webkit-transform: translate(0px,45.2px) rotate(0deg) scale(0.05);transform-origin: 0% 0%; transform: translate(0px,45.2px) rotate(0deg) scale(0.05);">
<p class="Basic-Paragraph ParaOverride-1"><span id="_idTextSpan000" class="CharOverride-1" style="position:absolute;top:-470.32px;left:0px;letter-spacing:15.4px;">HELLO STACKOVERFLOW</span></p>
</div>
</div>
</div>
</body>
</html>
The two comments are just right. You got this code from a generator (Illustrator as you wrote above, though style stylesheets are InDesign stylesheets). Generators often add inline styling. That's what happened here, too. Just delete all the style="[css-rules]" attributes from your body elements and it will be working.
See the rules for the cascade and specificity.
The sizes set by Bootstrap's stylesheet using the .col-lg-6 has a specificity of 0010 while the sizes set by Illustrator's style attribute have a specificity of 1000.
The style attribute is more specific, so it overrides the CSS rather than the other way around.
Related
I wanna change the style of some elements which are affected by the bootstrap classes of the parents element.
-I put the link of the stylesheet below the one of bootstrap
-I even moved the .css file outside the html's folder as adiviced in a similar topic but it still doesn't work
(IF I PUT THE CODE IN THE INTERNAL STYLESHEET IT WORKS INSTEAD)
For now I'm just trying to remove the style from the list
BE AWARE: running this code from the snippet is gonna show you no issues, however on the browser it doesn't actually work
Here's the code
ul {
list-style-type: none;
}
<!doctype html>
<html lang="en-us">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css">
<!--
<style>
ul{
list-style-type:none;
}
</style>
-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul>
<li>
<a class="active" href="/home.html">Home</a></li>
<li>
Blog
</li>
<li>
Digital Nomad
</li>
<li>
About
</li>
</ul>
</div>
</nav>
</div>
<div class="col-sm-4">
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
You need to look at CSS Specificity rules. Just because you define a rule doesn't automatically mean it overrides a rule declared earlier.
Specificity is calculated on 4 factors abcd:
a (1 if inline, 0 if in a file),
b number of IDs in CSS rule
c number of attribute selectors, classes and pseudo-classes,
d number of element names and pseudo-elements.
The rule with the largest 4 digit number abcd wins and overrides lesser declarations, so inline declarations will override anything declared in an included CSS file.
Other CSS Specificity articles
CSS Tricks
Specificity calculator
Possible Solutions
It's generally not a good idea to change 'base' styles or to override Bootstrap styles directly.
You can override other declarations by adding !important to your rules, but this is generally regarded as a poor solution.
Add your own class and/or id to elements which you wish to customise.
If you wish to have a quick effect, then you can add your own specific id or class to the body element and then declare your rules relying on descendents of that id or class. Using an id in this way will give your rules a specificity of 01xx in a file, which will probably be enough to override Bootstrap rules.
e.g
CSS in file:
#mypage ul {
list-style-type:none;
}
HTML:
<body id="mypage">
...
<ul>
</ul>
</ul>
Can you verify that your external style sheet is actually being loaded? If it works when written in the internal style tag, but not in an external file, it sounds like that file isn't loading properly. That could be an issue with the file name, the path to the file, or even an invalid structure of the file itself.
Include your own stylesheet above the bootstrap link
<link rel"stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
I had this problem a lot of times, this works for me every time since the CSS stylesheet above is preferred over the one below
Further to my last answer, this works fine in Chrome:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/myrule.css">
<meta charset="UTF-8">
<title>Tests</title>
</head>
<body id="mypage">
<div class="container-fluid">
<!-- rest of your html here -->
myfile.css just contains:
#mypage ul {
list-style-type:none;
}
i am trying to implement a style switcher according to https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to .
but as soon as i add a title="" to the css link, the css file won't get loaded on the page an the styles fall back to default bootstrap.
my external css files are added at the bottom of the body. the order is:
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">
is there something i miss?
You probably did everything right (except one thing, see below*), the code that's in the article is using curly quotes ‘’ “” when it should be using straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
So if you copied and pasted this part, it won't be parse correctly. This is the correct way with straight quotes:
Change style to default
Change style to alternate
Review this PLUNKER instead of the Snippet. The Snippet won't work because of the multiple stylesheets involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you said:
...my external css files are added at the bottom of the body...
You should always place <link>s inside the <head>. Most often, JavaScript/jQuery needs the actual DOM to be loaded before it can do anything. So it's important in most situations to make sure your styling (<link> and <style>) go first and inside the <head>.
For <script>, it's best to place them at the bottom of <body> just before the closing tag </body>. See the Snippet and PLUNKER for example of <link>, <style>, and <script> layout.
I've a piece of code that's been working fine until I include some css.
Here is the link to the code (the code editor here didn't like the mix of script and html and was testing my patience sorry).
Gist code snippet can be viewed here
It's using Bootstrap. The issue is this works fine (it displays a text input with a x to clear it and when you press the x it clears the text input box). When I include the...
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
though, clicking the x in the input box does nothing. Can anyone see any obvious reasons?
Without CSS included it's fine. With CSS included it fails.
The css file is basically a massive compiles .less file and probably not appropriate to place in a code box here so here it is in another gist link.
UPDATE: Here are the console logs if that helps: enter link description here
The locations of your javascript file links and event handler code are incorrect. You are calling $("#searchclear").click(..... before you load jQuery and all of the linked js files should be just before the closing body tag, not after it. Changing your html to the below will fix this issue:
Working Demo
(note that I changed some of the links to link to the CDN versions of the files to avoid errors in my demo):
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>create appt</title>
<!-- Vendor CSS -->
<link href="vendors/animate-css/animate.min.css" rel="stylesheet">
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- Following CSS codes are used only for specifics in this test-->
<style type="text/css">
.margin-bottom > * {
margin-bottom: 20px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
</style>
</head>
<body>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control" value="LUNCH">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div>
<!-- Javascript Libraries -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendors/nicescroll/jquery.nicescroll.min.js"></script>
<script src="vendors/waves/waves.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="vendors/sweet-alert/sweet-alert.min.js"></script>
<script src="js/functions.js"></script>
<script>
$("#searchclear").click(function(){
$("#searchinput").val('');
});
</script>
</body>
</html>
<!-- css -->
<link href="css/app.css" rel="stylesheet" type="text/css">
I'm new to jquery, and I've had a lot of trouble getting a full screen slideshow to work. I've tried downloading jquery 1.11.1. I've linked to 1.8, 1.9, and 1.11.1. The first image shows up with the numbers "123" on it, but it's not dynamic. The other two images aren't showing up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<style></style>
</head>
<body>
<div id="slides">//Slides container to control width
<div class="slides-container">//suggested form by superslides.com
<img src="images/dsc_0844-8x12.jpg" alt="">
<img src="images/dsc_0785-8x12.jpg" alt="">
<img src="images/dsc_0720-8x12.jpg" alt="">
</div>
</div>
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Additional superslides plug-ins
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.animate-enhanced.min.js"></script>
<script src="scripts/application.js"></script>
<script src="scripts/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
//Initialize slideshow
<script type="text/javascript">
$(function() {
$('#slides').superslides({
animation: 'fade'
});
});
</script>
</body>
</html>
Your use of non-HTML comments is probably not helping, since you're essentially polluting the DOM with text nodes, and the slideshow script may not be resilient to that.
Comments in HTML look like this:
<!-- Initialise slideshow -->
not this:
// This is a JavaScript comment
I'm trying to implement a jQuery slider with increments. I've gone from, the actual project page, to a test page of the project with just the slider, to just the slider. In all cases I've been unable to get the handle to move. It also seems to have a width of 1px or similar.
My code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery slider</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
I'm sure there is something very simple at fault here, but I really cannot see it for the life of me. The custom part of my download, was just clicking the 'select all components'.
i don't think the slider will show if there is no content and no fixed height ... dry this:
<div id="slider" style="width: 300px; height: 200px">
// Put a huge lorem ipsum text here ;)
</div>
I tried your exact code in a .html file...only replacing your includes with:
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui-lightness/jquery-ui-1.7.2.bluetie.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
...and it worked...slider across the entire screen...easily movable...
non of my files were modified from what I got off the jquery site....
If you are not getting a javascript error,...my guess is that your .css file isn't being included.
Hope this helps,
Andrew