The index.html file has different width and height than other pages [but it should] - html

I'm working on a simple static page where I've (about,contact etc.).
The problem is that index.html page has different width and height(body) comparing to others pages. But I set one size for all pages and it works on them - except index.html
First thought - I messed with CSS and tried to find class or id which could change the css of my index.html - NOPE.
Then i just copied whole content from about.html and paste it to index.html and again the size was wrong.
Finally i change the name of index.html on home.html and after that the width and height was CORRECT.
So the problem was not in content of html but in filename.
I searched through whole my work directory if some css has not affecting "index.html" name , but without effect.
Any tip where I can fix this problem?
[I'm using boostrap]

Can't exactly say without any code, but i had experienced a similar issue before, so it might help.
It might be a browser issue. Try to see the index.html in different web browsers. If you ever used the Zoom option in your browser while on index.html, it will automatically display your index.html with the last time Zoom preferences, so the page will appear different from what it should look according to the CSS.
Try cleaning cache and then try opening the index.html
that's all that could be told without any code. Please upload the code if you still face the problem.

Related

CSS not linking to new HTML pages (Breaks on other pages except for index.html)

This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.

My github pages is not loading index.html as a default

My problem is simply when I go to username.github.io it takes me to another page in my repo rather than index.html however, when I go to https://username.github.io/index.html it works correctly. I would rather have username.github.io point directly to index.html.
Note: My problem is NOT like the problem here
My problem is also NOT like the problem here as "waiting" doesn't fix it, nor do any of the other solutions given
Edit: It is consistent, rather than going to index.html it takes me to a page where I'm hosting a game I made, which also is in a whole other directory and is not even titled index.html.

Links in style.css will not update

I have a website, I moved the site to a new pc, loaded it up into dreamweaver, however the links for images in the css are still pointing to the old location, I have tried to change them but them will always revert back tot he old location. I tried uploading the site then downloading the style.css to see if that could kick it, but i will not.
When I open up the style.css I can see the old location, (yes I have always used the properties to add the location of header images.
As a last resort I manually changed the style.css, however I will not work for me.
Any ideas?
It looks like your paths are absolute instead of relative. Absolute path won't work if you relocate your image or HTML files into different folders or change your folder structure. The browser won't be able to find the image file.

First website, only index.html page loads

I have made my first website and in the preview in Safari and Chrome from Dreamweaver it works fine. But after uploading my files with Filezilla to 000webhost and typing in the URL, only the index page loads, links to other pages on the site don't work, images are broken and the css isn't applied.
I'm think it is because I haven't named the files correctly in the code, but I have no idea what to call them in order to get it right.
The file you upload to is public_html. So I've tried http://www.webaddress/public_html/Pages/entertainment.html but it didn't change anything.
Thanks for any help!
Without code examples it's very difficult to answer this, but it's probably just that your URL format is incorrect.
For example, if you've got example.com/example/example.html and that page contains a CSS file with a location of /css/style.css, the web browser will look for example.com/css/style.css because the slash at the beginning of the URL tells it to go to the root.
In this case, your CSS file is probably actually in example.com/example/css/style.css. Remove the beginning slash so the location is css/style.css and the web browser will look for the file using the current page's location as it's starting point.

HTML Wamp - debugging required

Well I built a page which is working absolutely fine as you can see below:
but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this
the problem is that the attached Style Sheets are not working and the Java Script is not working.
see below
where you see the green dots here the images are loaded fine...
where you see the pink dots the images are not loaded
where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...
WHATS HAPPENING
Perhaps your assets (css and js) are served incorrectly?
If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.
It looks like the images are in the wrong place.
WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:
"Look for the file example.png in the folder C:\www\images\"
You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.
This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:
url('images/example.png');
Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)
Hope that helps.
i had my links like
href=".\images\image.png"
just changed them to
href=".\images/image.png"
the server was doing what it was supposed to do...