I want my webpage to be responsive, I knew it can be done using bootstrap but the thing is where do i include it in my .css file and I want to know whether can I include my own positioning when I use bootstrap or is shouldn't?
You include it in the <head> section. See example.
If you have any custom CSS, include it under bootstrap.min.css
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="custom_style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Place content here -->
</body>
</html>
Related
today I started some boilerplate project. I am using gulp to output minified css from SASS. I have two .css files - normalize.css and main.css. Both of them are minified from the same directory. When I am starting localhost with XAMPP I open index.php it could not load main.css but normalize.css is loaded. I get the following in console:
Also when I go to see files that are in localhost directory I see that main.css is there, but when I click on it it says that it could not found this file - error 404 and in url bar I see that it added "/" at the end of main.css - strange behaviour:
However when I open this index.php in Firefox everything is fine and both styles are loaded and displayed correctly. Here is index.php code if needed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="">
<title>Title of site</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./dist/css/normalize.css">
<link rel="stylesheet" type="text/css" href="./dist/css/main.css">
<!-- FavIcon -->
<link rel="icon" type="image/png" href="//" sizes="32x32">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Local -->
<!-- <script src="./js/jquery.min.js"></script> -->
</head>
<body>
<h1>Hello wosfsdfsdfrld!</h1>
<p>scss and sass</p>
<p><?php echo('THIS IS HEADERsfsfsdf'); ?></p>
<img src="./img/testimg.png">
<script type="text/javascript" src="./dist/js/app.js"></script>
</body>
</html>
So it seems that it is somehow related to Chrome Browser, what could be an issue? Maybe some XAMPP config? But I have never touched it
The problem was name of folder containing project "siteStarter-php" caused some conflicts - changed it to "siteStarterPhp" and everything is working
I am learning the php and get some difficulties, I am trying to include the php file in header of another file, but the css is not working?
here is my project directory structure
Project Structure
and here is my php code...
blogpage.php
<html lang="en">
<head>
<?php include 'head.php';?>
<title>Off Canvas Template for Bootstrap</title>
</head>
I have included the path in Struts-2/blogpage.php
here is my head.php
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
Is CSS folder located under the head.php?
Try to add slash to all links:
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet">
<link href="/css/blog.css" rel="stylesheet">
You may check, adding the links directly, without including th php. Try in that way to see if the links work.
Solution One:
As per your folder structure you have all the style-sheets under the CSS folder and you are trying to include it in the PHP file which is located outside the CSS folder and the procedure it that you have to directly point it out to the CSS folder to pertain the links to all the files that you provide in head.php.
The head.php should look like this so that it will not pertain to any error.
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="css/blog.css" rel="stylesheet" type="text/css">
Errors:
Your forward slash trailing in the first link will fails since you have added the forward slash over to the bootstrap.css and hence that file will not call out in blogpage.php page. That is the reason you are not getting css over to the blogpage.php.
The type="text/css" is missing to the stylesheet call in the head.php and this may also cause the Error.
And pertaing to that you need to call the head.php in the blogpage.php as follows:
<html lang="en">
<head>
<?php include ('../head.php'); ?>
<title>Off Canvas Template for Bootstrap</title>
</head>
Best Practice
But you can wrap up all the head.php, footer.php, header.php into the includes folder so that it will be a constant under that folder and you can provide up the links without any error.
Since you are calling it inside the Struts-2 folder your path may fail sometimes and the CSS may result in Error.
Tips:One the site is loaded up fully you press CTRL+U so that your entire code will open up in the new window (View Page Source) and you can check to that whether all the links that you are proving are executing correct in the browser.
Solution Two:
You can add up the forward slash over to the CSS folder structure since it will not fails up when you try to add it u over to any of the page that you use. Since all the communication will be done from the root directory on all calls
And your head.php will look like
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="/css/blog.css" rel="stylesheet" type="text/css">
Building fresh from Bootstrap 3.3.4. Nav dropdown works fine on pages in the root directory, but when I call the nav in the header in a directory using:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/header.php');
?>
It pulls everything but the dropdown navs don't work.
Any ideas what could be causing it?
It seems you are calling only the header part of your page. The bootstrap and jquery breaks if their code is inserted in the page more than once. Hence,
make sure that you are calling the bootstrap libraries and relevant jquery libraries in right order and only once in any page.
Something like this :-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--You code -->
</body>
<!-- javascript files-->
</html>
Im trying to hide my url for the css and only display the relative path. here is my html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="<?php echo site_url('css/bootstrap.min.css'); ?>" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Then when i view in browser my source code shows this.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="
How do i fix this. The file im using is a php file.
Did you load the url helper?
$this->load->helper('url');
You can also Auto Load the helpers if you want to only load them once
To autoload resources, open the application/config/autoload.php file and add the item you want loaded to the autoload array. You'll find instructions in that file corresponding to each type of item.
CodeIgniter AutoLoad
I could not find the function site_url in the default php library, is PEAR enabled on your server?
if you want the relative path you could use:
<?php echo $SERVER['HTTP_HOST'].'css/bootstrap.min.css'; ?>
or just
../css/bootstrap.min.css
or directly from the root
/css/bootstrap.min.css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Codey Buzz's</title>
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
<!-- mobile -->
<link href="../stylesheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/script.js"></script>
<script src="javascripts/SpryMenuBar.js" type="text/javascript"></script>
<script src="js/clearbox.js"></script>
<link href="stylesheets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
<script type="text/xml">
<oa:widgets>
<oa:widget wid="2648024" binding="#OAWidget" />
</oa:widgets>
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<header>
<h1>Inspiring Message</h1>
</header>
<div id="content">
the above html is my header.php file which i include on every page of my website.
I include this with
<?php include("includes/header.php"); ?>
at the top of every page.
In dreamweaver CS6 I get an error that my head tag is in a locked region. I did some research and came across stuff involving a template, though I didn't use a template, I hand wrote my code minus the widgets I'm trying to add. How do I unlock this? I've tried commenting out my head secion in my header.php file and adding a new head section on my index.php page but it still gives me the same error. I don't want to insert the widget into a new page. I want to "unlock the head tag". I added the templatebegineditable in hopes of fixing it though it doesn't work in any variation Ive tried. around the title, before the end of the head tag etc. The support on Adobe for fixing this problem is beyond idiotic, everyone ends up manually inserting the content and changing every link and script directory.
anyone know the fix for this?
By default, your template should have an editable region in it just before the closing tag. It looks like this:
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
Dreamweaver should be able to find that editable region and insert the tag there automatically.
Its Mentioned in Adobe Forums!