I have a website i am trying to build more for experience and practice. but i cant seem to get the nav bar to promperly show i dont know if i am referencing it correctly in the html file and also i dont know if my file structure is what it should be. any insight and help would be awesome.
I have seen where the .navbar methods are and they seems to be in the bootstrap.min.css file and i have changed and tried everyone of them to see if the bootstrap navbar will show.
It's hard to get the context that I would need just from the image that you posted but I see 2 things. you didn't include bootstrap CSS but you did include the theme. Refer to this SO post for the difference: What is the difference between bootstrap.css and bootstrap-theme.css?
As shown on the getting started page of bootstrap, your index page should have the following entrie
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I also noticed that you are missing the start to your body tag but you have the closing for it. The browser will try to help you on this one but you should fix it to rule it out.
Just by looking and your image I can see there is an HTML error.
Your nav must be in the body tag.
The head tag must only include scripts, style sheets, meta tags and anything that is not "visible" for the user. The body tag contains everything else. Good luck!
Related
I have already read several issues about displaying icons in former versions of blueprintjs. Mine concerns blueprint 2.0.0-rc.2 and feel it's an importing problem.
I am using webpack and importing blueprint v2 the following way:
In index.html:
<link href="node_modules/normalize.css/normalize.css" rel="stylesheet" />
<link href="node_modules/#blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
In my app.tsx:
require('../../../node_modules/#blueprintjs/core/src/blueprint.scss');
require('../../../node_modules/#blueprintjs/icons/resources/icons/icons-16.ttf');
The overall css loads correctly but fonts remain unreachable; can someone please tell me what I am doing wrong? Cheers!
You are missing the new blueprint-icons.css file, which imports the font files through CSS #font-face declarations. Add the following line before importing blueprint.css:
<link href="node_modules/#blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
We have updated the docs with latest usage instructions and will be shipping full 2.0 later this week (and updating the site accordingly).
I'm in the early stages of learning Kendo UI. I've got the grid work and loading data but none of the images/icons that should appear in the grid are appearing. When I load the page containing the grid, I get the following 404 errors. The error message doesn't tell me where it's expecting to find these files.
Where is Kendo UI looking for these files? Or, can I tell Kendo where to look for them?
I currently have the files located here in my MVC folder structure, but it's not finding them:
The fonts and icons should be located under the content\kendo\{your kendo version}\ (assuming you are creating an MVC.net site based on the tag (see image below)
if this is missing then try running the upgrade wizard in visual studio (assuming you are using visual studio here) or just include the files you require from your distribution.
can you also check you have included the required css links within your site (please note I am using the bootstrap theme here so alter to work with your theme as required):
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
if this is set up correctly just make sure the fonts etc are set to "content" for the 'Build Action'
Check to make sure that the version in your direction matches the version of the kendo.mvc.dll in your bin folder. It has to match your assembly version.
I found this out when I upgraded. Somehow my project was not pointing to the correct assembly.
So, I have been asked to fix an issue where a favicon isn't appearing in IE8 at work, but can't seem to figure out why it isn't working. I've even read the official Microsoft documentation on the subject, but haven't managed to get anywhere with this.
I have included the following in head of the site template, where $sitebase is set to http://www.slinkynote.com/ in the config file. The favicon image is a 32px by 32px .ico file.
<link href="<?php echo $site_base;?>favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="<?php echo $site_base;?>favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />
Does anyone have any experience with this issue? It appears fine in FF and Chrome.
Thanks,
Dan.
The problem seems to be that IE8 caches the icon in the browsing history (and NOT its temporary Internet files) ... if it fails once in IE, it will not try again for a while (I don't know how long, but long enough to be very annoying) ... anyway, the following simple header links work fine:
<link rel="shortcut icon" type="image/icon" href="/favicon.ico">
<link rel="icon" type="image/icon" href="/favicon.ico">
I'm not sure why you need them both, probably cross-browser compatibility. But the href does NOT need a hostname with www in it, or any hostname at all. It works even on a local machine
However, if IE8 has messed up its cache then this will drive you crazy. Luckily the solution is simple: change the links to the following (just add x) and make sure the icon will load first time (or else you will just mess up the cache again) ...
<link rel="shortcut icon" type="image/icon" href="/xfavicon.ico">
<link rel="icon" type="image/icon" href="/xfavicon.ico">
Afterwards change the links back to what you wanted originally, then the icon will reload the next time and thereafter be cached successfully.
You are using PNG image in ICO file, and setting wrong mime type. Make another icon but ACTUAL icon file and put it in the place of current one.
I noticed that the theme code is missing from the KitchenSink in the final version of ST2. Are there any default themes that ship with the product? Also, are there any open source themes available? I'd like to have a few themes handy for demos so I can easily switch between them.
Yes there are, if you open up senchatouch2/resources/css you've got the default sencha-touch.css and then you have apple.css, android.css, bb6.css(blackberry).
<link rel="stylesheet" href="senchatouch2/resources/css/apple.css" type="text/css" />
I think following url will help someone
http://developerextensions.com/index.php/sencha-touch-2-themes-builder
---Add the following link to your sencha-touch-2 app's html file.
---DEShowThemeBuilder(true); //function to show the theme builder
---DEShowThemeBuilder(false); //function to hide the theme builder
<script type="text/javascript" src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/themeBuilder/themeBuilder.js"></script>
Hi I'm editing a website that has been made compatable with internet explorer so it doesn't work in firefox.
Is there any way to add a firefox or mozilla stylesheet?
Thanks for you help
Judi
<!--[if FIREFOX]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]-->
You can't do anything as elegant as the Paul Irish solution for IE but you can create a FF specific set of definitions using:
#-moz-document url-prefix() { CSS BLOCK }
Before anyone starts jumping up and down screaming "THIS SHOULD NEVER HAVE TO HAPPEN UNLESS YOU DID SOMETHING WRONG" - it totally happens when we're talking about Firefox vs Chrome vs IE font rendering on a tightly constrained grid with a lot of left to right text justification.
You might also try out the CSS Browser selector:
http://rafael.adm.br/css_browser_selector/
This simple JS file allows you to append things like .gecko and .ff3 to your CSS.
* APPENDED - 2014 *
I want to actually append this because, two years later, the standard solution is to perform feature detection through modernizr.js instead of browser detection. "Firefox" is a very blunt instrument with all the versions hanging around the net. This answer still works, it's just not the recommended solution unless you very specifically need the browser, all versions, and nothing else.
One way to do this, with php is to look at the user agent and see what browser is it. This is what I use:
Ex:
if (preg_match('/Firefox|Chrome|Opera|Safari|MSIE 8.0/', $_SERVER['HTTP_USER_AGENT'])) {
link rel="stylesheet" href="one.css" type="text/css" media="screen"
}
else {
link rel="stylesheet" href="other.css" type="text/css" media="screen"
}
Also in the preg_match function you should enter the agents that you want.
Have in mind, if you don't know php, that the example I wrote needs editing and correct formatting.
No. The <!--[if IE]><![endif]--> syntax is Internet Explorer specific. It is a non-standard microsoft extension to CSS.
See conditional comments for more details.
No, conditional comments are entirely an Internet Explorer thing AFAIK.
However, you can create a conditional comment that IE will not parse and thus is for non-IE browsers only:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]>
this is however not valid HTML. There seem to be workarounds to make it valid. Check out the "Downlevel-Revealed conditional comment" paragraph in the Wikipedia article.