I was trying to style a php file called dashboard.php with bootstrap. I only wrote some html code in the file to begin. When I test it, I found the styling in 'ul' tag was wrong. However other classes such as 'class="col-sm-2"' 'class="row"' are working as expect.
This is code in the dashboard.php:
<?php ?>
<!DOCTYPE>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" >
<li><a href="dashboard.php">
<span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
<li><a href="#">
<span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
<li>Categories</li>
<li>Manage Admins</li>
<li>Comments</li>
<li>Live Blog</li>
<li>Logout</li>
</ul>
</div><!-- End of side area-->
<div class="col-sm-10">
</div><!-- End of main area-->
</div><!-- End of raw-->
</div>
</body>
</html>
This is the screen shot I made when testing the dashboard.php:
enter image description here
If you chack the image. The left side with words in blue belongs to 'ul' tag. The style is completely wrong. It also failed to add glyphicon icons. I checked the syntax of my html code , there seems nothing wrong.
I also want to add more information:
the extension of the file is .php
I opened the XAMPP with Apache opened
the url that opens the file dashboard.php is correct:
http://localhost/studyexample/PHPCMS/dashboard.php
Can you help me to find why the styling in 'ul' tag is completely wrong? Thank you so much.
The problem here may be that you are using relative URLs for your assets, but have not used a base tag. The easiest thing to do is just add a forward slash to the path to your assets. When I run your code in CodePen it looks like it should:
https://codepen.io/anon/pen/vpWLqo
So, what I mean is, for the following assets:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add a forward slash so the URLs are absolute:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Once you do that, I think you'll find that things start looking different for you. If not, you'll need to specify more of a complete path to the assets, meaning you may need to have the full path, like:
<link rel="stylesheet" type="text/css" href="/studyexample/PHPCMS/css/bootstrap.min.css">
<script src="/studyexample/PHPCMS/js/jquery-3.2.1.min.js"></script>
<script src="/studyexample/PHPCMS/js/bootstrap.min.js"></script>
Related
I encountered this error while trying to create a navbar with Bootstrap,
the result should be a navbar but it's not, trying to understand the nature of the error I copied W3schools's code( https://www.w3schools.com/bootstrap/bootstrap_navbar.asp )in the editor (Atom). Both my code and W3schools's code aren't working, but they seems to be correctly written. Where am I wrong? May I have your help please?
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<nav class=“navbar”>
<nav class="navbar">
<a class="navbar-brand" href=“#”>Something</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">One</li>
</ul>
</nav>
</body>
</html>
Before including bootstrap, you should include jquery...
For example:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Change your Text Formatted Quotes from this.
<nav class=“navbar”>
To Non text Formatted quotes.
<nav class="navbar">
In your code you are using Bootstrap 4.x, which is the newest release and is completely different, many things look quite similar between 3.x and 4.x but in short anything that worked in 3.x has more chances to break in 4.x.
So instead of using W3School's code as your reference, use Twitter Bootstrap's documentation for version 4.0 :
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Also, your HTML code doesn't look quite right, for e.g this line
<li class="nav-item"><a href="#" class="nav-link">One</li>
You forgot to close <a>. So it is important you take a look at your code and see if something is being caused by a syntax error. Other than that if fix the code the output is what you will get from the HTML. Nothing sort of a navbar because you have to follow Twitter Bootstrap 4's guideline on lay-outing a navbar
https://getbootstrap.com/docs/4.0/components/navbar/
Another issue is that you have put boostrap.min.js before jQuery, for Bootstrap's JavaScript to work you first have to load jQuery.
Good luck.
So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ETB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ">
<a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
<ul id="navigation" class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:
html
{
background-color: black;
}
See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.
There are two options here:
When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
Bootstrap.min.css is overriding your css styles (see answer by alex-bell)
Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.
Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.
Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.
Using Chrome as an example hit f12 to bring up the developer tools
Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css
Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.
Finally, and unrelated to the Dev Tools, learn about CSS Specificity
I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:
<style>
body {
background-color:black;
}
</style>
I assume you do, but just incase you do not know each html document can contain multiple <style> tags.
I have made a website in dreamweaver using bootstrap 3 and less.
I have used navbar default and customised it.
I have just added some extra pages to my site, such as about.html and blog.html
however, on these extra pages the dropdown menu doesn't seem to work. It does work fine on the homepage, with exactly the same code.
I have wrapped with a < li > already and just copy and pasted all the html into my new html files as follows, to have the navbar there on each page. Please advise if I have done something wrong, I am pretty much a complete beginner.Thanks!
<div class="header clearfix">
<nav class="text-center">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li>
Our Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>jhdhalbalb</li>
<li>hdjdjjdj</li>
<li>bdjdshbd</li>
</ul>
</li>
<li role="presentation">About us</li>
<li role="presentation">Blog</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</div>
Add this to the head section of all your pages:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Sometimes bootstrap local files don't work - doing this will let you know if you should re-download them. This is something that has happened to me before.
Also your HTML is very messy, making it hard to really look through. Try cleaning it up a bit and making sure you're following W3 standards so you can follow your code and others can read it.
You should also read this: http://getbootstrap.com/javascript/#dropdowns Bootstrap dropdowns require an extra .js plugin.
My css doesnt work (html and css file are in the same folder) and i tried to give all the path ton href ,here is my files.First file is menu2.html and second is menu2style.css.Can anyone help?
html:
<head>
<title>
test menu
</title>
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
</head>
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
and css:
nav{ background-color:#99FF66;}
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
The style element is for inline style. Don't put HTML to load an external stylesheet in it. Remove <style> and </style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
HTML start tags require a type before you put any attributes. In this case you need a link element.
<link rel...
The URL to your CSS should be:
To your CSS, not to an HTML document.
Either relative to the root of your website (e.g. /css/styles.css) or relative to the current document (styles.css since you say they are in the same folder). Not the full path on your local filesystem.
You don't need a type attribute here either.
Thus:
<link rel="stylesheet" href="styles.css">
If you include an external stylesheet, you must not wrap the element in style tags.
<!-- styles in menu2style.css -->
<link rel="stylesheet" type="text/css" href="menu2style.css">
<!-- inline styles -->
<style>
nav { background-color:#99FF66;}
</style>
Make sure you have the correct path specified in the href attribute!
You can write your style in the head, by using style tag.
if you want to external css you should use only link tag. you go to wrong way, because you are write the link tag in style tag.
<link rel="stylesheet" type="text/css" href="Your_directory/menu2style.css">
you write the wrong extension of style css style.It should be the dot css(.css)
Hmm.. I think you need to see the basics of HTML/CSS...
Here's an example of full html document :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/your/file/styles.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
You can see more examples here :
W3Schools
you have no need to write style tag
and you missing the link rel for add css style sheet
test menu
<***link*** rel="stylesheet" href="var/www/html/css_tests/menu2style.html" type="text/css">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
test menu
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
test menu
<link rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.css">
<body>
<nav>
<img src="">PHOTO 1</A>
<img src="">PHOTO 2</A>
<img src="">PHOTO 3</A>
<img src="">PHOTO 4</A>
<img src="">PHOTO 5</A>
</nav>
</body>
The problem is with your link where you have given the path of your CSS file. It becomes difficult for the browser to understand what kind of path he has to point in order to get the relevant styles.
What I have done is I have created a separate file named menu2style.css and I have refered in my HTML page. This is a kind of using stylesheet, and it is called External Style.
Step 1: Create a file with named menu2style.css (css is the extension of stylesheet just in case if you are not aware of)
<style>
nav{
background-color:#99FF66;
}
</style>
Step 2: Refer the path of the CSS stylesheet that you just created in step1.
<link rel="stylesheet" type="text/css" href="C:/MyFolder/menu2style.css">
If you see above in the path I have given absolute path. This points the exact location in your file/ folder and renders the stylesheet from it onto a webpage.
Hope this helps.
I am building a web page that uses the tag to navigate the page -
Menu
...
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
/nav>
This generally works fine, except when I also include the script reference-
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
Then, the navigation no longer functions. There are a number of other jquery mobile scripts being loaded as well, but this is the one that breaks the navigation. There are some other ID Selectors that still work, but I think they are processed through jquery mobile. This one is not; it just navigates to a new location on the same page.
I set up a working example on github which can be found here:
https://github.com/hypnoboy/jqmobile_breaks_html5_navt
The behavior can be observed by clicking through the pages. As a bonus and to make it easier to see, I added a jpg photo of my favorite "WTF" software installation moment.
Here is a complete sample web page in which the problem can occur:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<!--begin entries for jquerymobile-->
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--end entries for jquerymobile-->
</head>
<body>
<!-- start of navigation -->
Menu
<!-- end of navigation -->
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<!-- causes href navigation in the page to fail -->
<header><div class=main_heading>
<h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
</header>
<p>This is some sample text
</p>
Menu
Menu
<img id="front" src="WP_000241.jpg"/>
<!--start of navigation-->
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
</nav>
<!-- /end of navigation -->
<script src="js/vendor/jquery-2.0.2.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/main.js"></script>
<script src="libs/app.js" type="text/javascript"></script>
<script src="pages.js" type="text/javascript"></script>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</body>
</html>
Any assistance appreciated.
One of JQuery Mobile traits is loading 2 pages at once into the DOM and showing just one. It is part of the JQM ajax functionality. If you have used an ID in a master page or part that is loaded into more than 1 of your pages you will probably find that upon inspecting your source at runtime you have duplicate IDs
Turning off the ajax functionality and having it do postbacks is a workaround, or use classes
Image showing the issue (image from pluralsight course video)