While trying to access pages from folder my url keeps stacking one after another rather than going to appropriate page.
This is my directory structure.
Website/
css/
js/
includes/
header.php
footer.php
helper.php
sub-folder/
foo.php
index.php
after going to localhost/sub-folder/foo.php it goes to localhost/website/sub-folder/foo.php/index.php instead of localhost/website/index.php
This causes error even when loading css from foo.php which connects via header.php
This is my header.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chili Pili</title>
<!-- Bootstrap CSS only -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/imagehover.min.css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<link rel="stylesheet" href="css/style.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom CSS file -->
<link rel="stylesheet" href="css/utils.css"></link>
<link rel="stylesheet" href="css/responsive.css"></link>
<style>
li{
font-size:20px;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover .dropdown-menu .dropdown-item:hover {
color: var(--color1) !important;
}
.active{
color: var(--color1) !important;
border-bottom:2px solid var(--color1);
border-width:20%;
text-align:center;
}
</style>
</head>
<body>
foo.php
<?php
include '../includes/header.php'
?>
<?php
include 'includes/footer.php'
?>
What can be done so urls don't keep stacking and return correct url so css file can be accessed from foo.php. Currently due to stacking its impossible to retrieve css files
In header.php <link rel="stylesheet" href="css/imagehover.min.css"> will link file header.php/css/imagehover.min.css.
try to add a / in front of css like so <link rel="stylesheet" href="/website/css/imagehover.min.css">
Related
I'm trying to add custom styles to navigation and body but the styles aren't showing in my home page but it's showing in another page I'm not getting it any one can help me out with solution where I'm messing around
index.php
<?php include 'include/css.php';?>
<?php $page = 'home';include 'include/navbar.php';?>
<?php include 'include/scripts.php';?>
Screenshot of browser for index.php
css.php
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
Screenshot of browser for /include/css.php
style.css
body{
background-color: aqua;!important
}
.navbar-nav > li > a {
color: #ffffff;
}
i am attaching github link please download files upload in your local server and
kindly find the error
you can download files here
Try this one.
body{
background-color: aqua !important;
}
.navbar-nav a {
color: #ffffff !important;
}
maybe you have a path issue for <link rel="stylesheet" href="../css/style.css">
check your directory for home page and other pages.
I can't figure it out what could cause this issue, but i'am pretty sure it simple. I am extending main view main.blade.php (located in views folder). This includes css from partials folder.
I have two pages: Enquire, Approved enquire. (both located in views/trader/ folder.) only difference is routing, one would have /enquires the other would have /enquires/approved.
Blade/Css working if on main route: Route::get('/enquires','Trader\PagesController#getEnquires');
Blade/Css does not work when using suburl: Route::get('/enquires/approved','Trader\PagesController#getApproved');
Please refer to this image:
routing display error
If you require any other information please let me know,
Tahnks in advance,
Dan
It seems the problem is in how you're creating links to assets (images, CSS and JS files). To make it work, use Laravel asset() helper:
<link rel="stylesheet" href="{{ asset('css/theme.css' }}">
Which will create full path to an asset.
Also, you must keep all assets inside public directory of your project, for example: /laravel_project/public/css/theme.css
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title')</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Trusted Workers - Find local tradesmen">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/default.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
I've looked all over for a solution but the external link for "gencustomfont" will not work, yes everything is named correctly. Though if I put the bare code in it will, but I'd feel better if it was less cluttered once I officially start adding styles. I'm using c panel.
MAIN
echo '<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/gencustomfont.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<h1>We are making magic!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>';
?>
CSS
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #FF7878;
background-color: #000;
}
</style>
As can you see I'm trying to override the bootstrap css with my own. I don't have the time to use "Less".
In your .css file, you do not need to put <style type="text/css"> and </style>. These are only needed in the HTML file!
im using appserver and i want to link style.css
.header {
height: "40px";
background-color: "red"
}
in my index.php
<html>
<head>
<META HTTP-EQUIV="Content-language" CONTENT="ar">
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<title>بام للسيارات | تبضع اينما كنت</title>
</head>
<body>
<div class="header">
</div>
</body>
</html>
but it didnt work i dont know why can someone help me
Obviously your CSS is incorrect,
.header {
height: "40px";
background-color: "red"
}
Noticing the quotes in your values, which are invalid in CSS syntax. It should be,
.header {
height: 40px;
background-color: red;
}
After reviewing your code, there is no other coding errors. But your have serious errors with your file encodings.
index.php was encoded in UTF-16LE, and your didn't declare your charset in the <head> section nor the BOM (neither does your css file, which is encoded in UTF-8). So the browser guesses the resource files are also encoded in UTF-16LE, which read two bytes as one character. So your CSS became totally meaningless to the CSS parser, as it reads 栮慥敤ൻ †栠楥桧㩴㐠瀰㭸††慢正牧畯摮挭汯牯›敲㭤ൽ.
So the fix is pretty straight forward,
Add charset declaration at the begining of your <head>
Save your index.php as UTF-8 encoding or add charset="utf-8" to <link>.
Use this
<html>
<head>
<META HTTP-EQUIV="Content-language" CONTENT="ar">
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<title>بام للسيارات | تبضع اينما كنت</title>
</head>
<body>
<div class="header">
</div>
</body>
</html>
I have packed your code ger it from here
My file structure is as follows....
iamdan > css > style.css
My php file, head.php is in a file called includes which is in:
iamdan > includes > head.php
which contains the following code:
<head>
<title>Website title!!!</title>
<meta charset="UTF"-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
Now it's loading the info fine and some of the style sheet (just the font style) none of the other styling is coming through...
Any ideas?
You have a mistake in your meta charset:
<meta charset="UTF-8">
And the other thing is:
<link rel="stylesheet" href="css/style.css" type="text/css">
This is relative from your script position. When you are in a subfolder. The path is wrong.
<link rel="stylesheet" href="/css/style.css" type="text/css">
Put a / before your path. Then your browser load the css file always from the root:
xx.de/css/style.css
Or put the complete URL before your script.
<link rel="stylesheet" href="http://xx.xx.de/css/style.css" type="text/css">