I'm working on a simple CRUD application to keep track of phones using Webmatrix 3. My Default.cshtml file displays the table.
When clicking on a row it goes to the EditPN.cshtml page for the user to edit the information for that record.
Now, following this tutorial I look into the value of UrlData[0] in my EditPN page.
Everything works fine with just one problem: since the URL ends up being something like this:
http://localhost:64053/EditPN/2223334444 my paths for CSS and JS files are off. My brute force solution has been to have both:
<link href="_css/myStyles.css" rel="stylesheet">
<link href="../_css/myStyles.css" rel="stylesheet">
in my _Layout.cshtml.
That way both http://localhost:64053/Default.cshtml and http://localhost:64053/EditPN/222333444 will have the CSS styles.
Since I don't like that, I tried to format the URL string to be this: http://localhost:64053/EditPN?pn=2223334444. Didn't work.
Tried this too: http://localhost:64053/EditPN.cshtml?pn=2223334444. Didn't work either. It doesn't even go to the EditPN.cshtml page.
How can I solve this issue? Oh, and BTW, I don't want to use the Webmatrix helpers. I want to keep things under JS, jQuery, etc.
You should prefix the url to your css and js files with a ~/, which tells web pages to work out the relative path:
<link href="~/_css/myStyles.css" rel="stylesheet" />
Related
I'd like to scrape all the linked javascript and css files on a give domain with Scrapy. The issue is that I don't quite understand how to extract the links from the link elements.
Assume I'm scraping example.com. There are links to js and css of the form:
<link rel="stylesheet" href="/path_to_css/example.css"/>
<script src="/path_to_js/example.js"></script>
These links start from the root domain, so no problem. But if the links are like the ones below, it starts to get confusing:
<link rel="stylesheet" href="path_to_css/example.css"/>
<script src="path_to_js/example.js"></script>
These relative URLs are supposed to work such that if I'm on example.com/some_page/ the link paths are appended to that like: example.com/some_page/path_to_js/example.js. That's not how it always works in actual web pages however. On some web sites with language selection eg.example.com/en/some_page, the relative paths start from example.com/en instead of the full path of that page.
So, while expecting to find the files at example.com/en/some_page/path_to_js/example.js, you find them at example.com/en/path_to_js/example.js
Is there any way to understand from where the relative paths start from?
While scraping, Scrapy allows you to create an absolute URL from a Relative URL
You could do something like this
for link in response.css("link"):
response.urljoin(link.css("::attr(href)").extract_first())
for script in response.css("script"):
response.urljoin(script.css("::attr(src)").extract_first())
I am in the process of creating a portfolio website for a web design course I am taking. I have created a style sheet for my website but I am having trouble getting the changes to show up on my site. All of the changes appear when I view it locally through Chrome, but when I upload my website the changes don't show up. I have checked my code and even tried validator.nu to see if their are any problems but it appears that their are none.
Here are my html and css files:
https://gist.github.com/J-Conley/94255b04292287b58892b75fdc5e35c0
and my website:
http://cook-camel-58438.bitballoon.com/.
If it helps I have a folder called cf_template-1.1.1 and in that folder I have a folders named html, css, and img. Any help would be appreciated.
There are errors in the console, make sure to fix these and try again if it persist.
the image urls behaves differently in localhost and live, make sure to upload those images properly using your website builder whatever it is and not use static urls.
I see you used bootstrap here. When overriding styles make sure you use the exact same selector whatever library did used you are trying to modify i.e. .md-content .md-container .md-input .md-label span you can use inspect element / web developer tools to find this and use the exact same selector to override the default style given by the library, make sure the last thing you import is your custom style sheet.
You made wrong with css file path.
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
Replace With
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="styles.css">
all your images are not found. Check the path / upload them again and make sure it's right. Maybe try the absolute path;
http://d33wubrfki0l68.cloudfront.net/bundles/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc.js is not a style sheet. Please remove the style tag of it
You should upgrade your Jquery from version 1.11.3 to 3x.
That will help because version 1.11.3 is not compatible with Bootstrap 3.3.5.
Also you should try to press the "disable cache" button in Chrome Dev Tools->Network->Disable Cache. Usually, cache is the culprit of not updating CSS.
I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css
can someone explain what is the difference in accessing CSS in browser by putting question mark ? in the end and why the new CSS is not making any affects on Website.
I have deployed a new CSS on web server but its not making any affect.
I tried to open the URL in browser as below:
www.mysite.com/styles/css/main.css
and it loads the older version of CSS.
Then I tried it as below and it loads the new version of CSS.
www.mysite.com/styles/css/main.css?
After doing all this. New CSS change does not affecting the website. Its still displaying the old design.
Kind Regards
You need to add something after the ? then change it when you change the CSS. What is happening is a browser will cache anything that doesn't change for a specific period, it does that by checking file names. so main.css? is still main.css? Anything after the question mark is a query string, generally it's used to pass data to a particular file. In this case it's just used to change the file string so the browser will update it every time it changes without affecting the file itself.
There are a couple of ways you can handle this, the first is manually changing the version, probably the easiest idea if you have a single header file, as in a template system that always loads the same head data.
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver1/>
Then on next change:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver2/>
If you'd rather do it automatically you can add a bit of PHP script to the css line like this:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?time=<?php echo filemtime('./assets/css/main.css');?>" />
This is essentially adding a value that changes every time you save the file and results in something like this, the next time I save the file that time= value will change:
<link rel="stylesheet" type="text/css" href="http://localhost/refficient/trunk/assets/css/main.css?time=1350305706" />
browser cache is the reason,Adding ? after css is not recommended.Open your hosting space and clear cache and thread pool as well.
Im trying to convert an html template to ASP.Net MVC 4 project. Bbut i have run in an problem. Then opening the localHost:11062/ site everything looks prefect. But if i try same address just calling the controller and action direct localHost:11062/StartMenu/Index, which should be the same, but it's not. For me it looks like the css file isent loaded correct. But if it wasent the start site should not look different?
I suspect that you have hardcoded the url to some of your CSS files, just like this:
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
instead of using an url helper:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Of course the same is true for all static resources such as javascript, images, ...
You should never hardcode urls in an ASP.NET MVC application. Always use url helpers when dealing with urls.
Also if you are referencing some static resources (such as images) in your CSS file, don't forget that they should be relative to the location of the CSS file.
You might easily see this in the Net tab of a javascript debugging tool such as FireBug where you would get 404 errors for the corresponding resource.