CSS sheet not affecting the layout - html

first of all, I couldn't find a way to phrase my problem in one sentence, so I'll try to be more explicit in the post.
So I've been developing on VS, essentially doing web development with Razor MVC, for almost a year now and there's something that has been bugging me. On most of my projects I use a unique stylesheet in which I put all of my rules. My problem is, if I reload the page, the CSS won't apply and I have to make a change to my CSS and save it for the rest of the sheet to works. I also noticed that if I leave VS, the CSS now apply permanently. So it's not really a big issue that won't let me work properly, but still it's a bit boring to have to change a value and then hit ctrl+z each time I reload the page.
So I wanted to know if anyone had had the same problem, and if yes what was the solution; and if no, I'll listen to any idea.
Thanks for your time and have a nice day :)

Related

Strange HTML and CSS behavior

One of my clients has been encountering this issue when she goes onto the app. I was wondering if anyone had any idea how to get it to show normally? Im not sure if this is a code issue or her computer.
Everything is getting bunched together
Edit: I did not provide the code because it is very lengthy and I feel like there could be another answer that isn't linked to my code since it is only happening to that computer.
There really isn't a lot to go off of this. It could be as simple as changing the width of the input tag which would take almost no time to fix. If you're using bootstrap or some other framework maybe a class name is messed up somewhere in the html. It would be a lot easier to pinpoint what exactly the problem is if there were code to go along with it. Also there could be no problem with the code and could just simply be her machine, but there is still no way to figure that out without looking over it.

HTML to WordPress

I've never used WordPress.org before. I'm wondering if I can convert this html website that I have to wordpress exactly the same?
https://reporting.pacificamerican.org/pas/
And if this website is a wordpress site, does it means that I don't have to go into the codes if I want to update my content? Because right now with html site it takes more time to update all the contents.
Thank you.
Yes, you can, but looking at the content I wouldn't say it looks like a great idea. Mostly because of how static the current content seems to be.
Pros:
It looks like you are about to add a blog-page. WordPress does make such re-occuring content easy.
It looks like you have repeated the menu on every page. (If you change the menu on one page, then you have to makes changes to all pages as well?). WordPress would help with that and let you use one menu everywhere. But there are also tons of easier methods to accomplish the same thing without WordPress. (For example <?php include 'menu.php';?> using PHP).
Cons:
The "multiple sub-pages in one page" that you are using doesn't play naturally with WordPress. Absolutely possible yes, perhaps not even difficult, but not out-of-the-box for sure.
The time it would take to edit pages would likely not change as drastic as you hope. I believe that the current content looks so static that anyone with a bit HTML/CSS knowledge would rather want to edit those static html files over having to click around in the WordPress admin interface.
The scroll-spy, editing tables and things like the yearly admissions does not come naturally either. I can think of a few dozen ways to solve such things with WordPress, but if you are going to do this work yourself, then the WordPress-conversion will take some effort and the results will not always be as pretty as you might imagine.
You'll definitely take a performance hit over using only static html. (But that is true for any CMS/framework)
My suggestion would be to first look at your current workflow. Perhaps look at an IDE that can upload with a click or on save, have history so you can back up when things break, and predefined snippets that make static content changes easy, (and of course code syntax highlighting!).
What tools are you using now?
Also remember that you are asking on a coding-site. Not many here would opt to use the WordPress editor over simply editing html-files. In fact, I dare to say many here carries a deep grudge after having to work around some specific quirks in the WP editor (aka tinyMCE).
Sure, you could replicate the layouts.
Sure, your content would be editable with just a form.
It would take a lot of effort, but certainly doable.

What can I do to help someone else easily edit the website I am working on?

I am currently in an internship and making a website for someone. I have nearly finished the website and they would like a way to easily edit the website without messing around too much with code. They have no development team and once my internship is over, obviously they'll be stuck and they would like a way to edit the content on the website. How can I go about doing this? I mentioned a WordPress site to them but they didn't like the sound of that. Are there any other ways in which I can allow them to have this functionality?
Cheers
You can either create a Wordpress-similar, with a login, and while navigating through pages they would have options normal users do not have (e.g: delete, etc).
Or you could create an admin dashboard, where there would be every settings.
I think the second one is the best option for you, as it doesn't require you to modify any pages already created, and you will not have to adapt the style of your website to those supplementary options which would be shown on every pages if you used the first option.
Edit:
Or you could have all the content of the website in files, so that they simply need to edit the files to change the content. Even though I think option 2 is better, this one is a lot simpler to put in place.

Why is my "HTML5 Boilerplate" page non-interactive?

Why is my site in progress on the "HTML5 Boilerplate" system resulting in non-interactive pages?
Example: http://www.maxilham.com/buttons
I am no expert at coding, but I have made several websites and have an increasingly better knowledge of html, css, js and so on. I do not have real training or a technical background, so I always like to try systems and templates that are probably more semantically correct and up to date than anything I would write out of thin air.
Thus I downloaded the http://html5boilerplate.com/ template and then went about coding as I normally do. Everything looked perfect (at least as I expected it to, not finished designing), but when I replicated index.html to start testing links and building the other pages, I realized no links on the page were clickable, and that in general the whole thing was acting more like a screen-cap or .pdf then the website I thought I had made.
When I stripped everything out of the BP .css file (except for what I had added), I broke the structure/styling, but all the links became active, hovering states showed, etc..
I cannot pinpoint what it is about the starter index.html/style.css combo or what I am doing wrong to them, that is breaking the site.
Does anyone know of an obvious mistake/coding conflict that would freeze/lock my pages?
Thanks in advance for any help and sorry if this is too specific/generic/not in right place.
AB
Check for a negative z-index. If you have a z-index that is lower than 0, it will place it 'behind' the body tag, aka make it completely non-interactive. Only reason I guess that is because I am unable to inspect anything and I've seen this before.
Alternatively, make sure you don't have some sort of page-wide element with a z-index that is higher than everything else, however Inspecting any element on the page only selects the body tag, leading me to believe that is the culprit.
I doubt the problem is in any way directly related to the HTML5BP.

TDD/Testing CSS and HTML? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
IS there a way to test CSS and HTML? For instance: sometimes some of the notices get affected by some CSS changes. I don't want to be testing all the notices by hand every time I do a change.
Thanks
It's very difficult to automate testing of layout. But it's not too difficult to drastically cut down the time and effort involved so that you can do it manually, but very quickly.
You could try Blink Testing.
I've heard of it used for websites like this.
Write a script that walks through your website, visiting as many pages as you can think of.
At each page, take a screen shot.
Combine all the screen shots into a 'movie' with just a second or two for each screenshot.
Now, each day you can 'play' the movie and watch it for any issues.
You could even extend bcarlso's approach but replace the MD5 check with a visual check. Each page gets displayed for 1 second - first the known good, then the new. You could alternate them a few times so any obvious errors will appear as a flicker.
A website with hundreds of pages can be checked like this in a matter of a few minutes. You may not think this will provide enough time to find issues, but it is remarkably efficient in identifying obvious problems with your website.
Any pages that have major layout problems will pop out at you as they don't match the same pattern as all the other pages.
I am assuming that the issue that you're trying to test would be that the CSS changed in some incompatible way with the layout causing, for example, text to be truncated or otherwise visually "broken". If that's the case, then I would say that there isn't a good way to test the aesthetics of a page at this time. One of the primary benefits of TDD and CI is quick feedback so that you know something is broken before it gets to production. Not knowing much context around your environment and how those changes make it into your app it's hard to suggest solutions, but here is an example of a potential non-traditional option:
Put a commit hook into your repository that let's everyone on the team know via an e-mail when someone changes some CSS. Preferably with a diff of the CSS. This would give the team a heads up to keep an eye out for layout problems.
We started an experiment to use WATIR to walk some of the main screens in the app and take a picture using ImageMagik (essentially a screenshot) and store it in a "Last Known Good" folder. Every day re-run the script on a clean install of the app and data and place the images in a "Current" folder. At the end of each run use an MD5 to compare the images and alert on changes. Have the QA team review a list of flagged screenshots and if the change was acceptable (for example, a field was added as part of a feature) then copy "Current" to "Last Known Good". Unfortunately we didn't get our experiment finished so I don't know if it will work well. I'm concerned about the brittleness of screenshots as "assertions".
Hope that helps!
I believe Selenium can test your frontends for you. Specifically for browser compatibility testing, take a look at Selenium RC.
If you'd simply like to make sure you're contents are in the right contents etc. etc. you can create a simple testing suite that's going to be making GET requests to your website. When you receive all the content you can run it through a validation template like xslt. Well formed html will usually be able to be matched against xslt's or xsd's. It is not ideal but if you're only worried about the structure of your website and not the styling you'll be able to achieve it this way.
A change to CSS should not affect the behaviour of a page, only it's appearance, so I'm not sure that Selenium would be much help for this.
I'm going to take a guess that you are trying to avoid problems such as elements being misplaced on the page so that they are not readable. If so, you would probably need some kind of OCR-based tool, but I don't know one off-hand to suggest.
However, it may be to better to invest your effort in preventing this kind of problem in the first place. If your layout is easily broken, maybe you need to refactor your CSS to something simpler.