Different size on nav-bar on different pages. On the "index.html" the nav bar is 222x100 and it looks way smaller and on the other page "faq.html" it is 1110x100 and it´s not even half as big as the navbar in index.html. How to make the navbar the same size in every site?
Here are the files:
https://github.com/wreckitralph-tech/html-css-help.git
Thanks for helping me out!
I downloaded your repository, tested it (I had to copy the css and the image into their folders, like /src/img and /src/css ), and it gave me the same navbar on all the pages.
The text was very small, so in the css i replaced the 3px tag with a 20px so I could see clearer the text. The final result was working, and I could switch to all the htmls as intended.
Here is a picture of what i got:
Navbar-screenshot
So, in conclusion, you may have removed the line that was causing the issue for this question, or your browser cached the css file on only one webpage. For this, you can clean your browser's cache ( some of them have a specific command, or it can be found on the settings ).
Related
I am wondering if anybody else ever encounters this problem, and if there is something I'm not doing or missing in order to resolve it:
While building a site I am trying to resize my images so that they are all the same height.
I change all the image files to the same height and resolution in a photo-editing software, but yet when I replace the old images with the new image in the root folder, nothing changes when I preview it on the page. It's not a file naming/structure issue or anything like that, the right files are in the right folders, everything is correct there. When I open the html file in chrome and see that no change in the size is appearing I have tried clearing the cache, incognito windows, hard refreshes, reboots, waiting days to see if the magic internet gods change it ... but nothing works. The images remain in their original non-uniform sizes they were before. It's like the new image sizes/files are not being registered.
Has this ever happened to anyone else?
I have made some modifications to a website I am working on and now, when I load the homepage, the header image seems to load after the rest of the page leaving a white space and then the image loads it pushes the rest of the page down to where it should be. This site is created from scratch with HTML, CSS and JS. The website is https://www.visionwebdesign.ca so you can have a look. Once the webpage is in the browser cache, it loads fine.
The header is actually a part of a carousel of images. Here is the code I am working with:
Vision Web Design
...
I have tried reducing my images to a smaller size but no luck there. Looking for any help available.
J.P.
This is probably not the answer you are looking for, but looking at the HTML page code it appears you are just loading in the images quite normally using IMG tags, no script code in use there, so any delay may simply be the time it takes for the images to download from the server to the browser. I saw just a bit of a delay in loading the header image (tried in both Firefox and in Chrome) but I'm on a 300Mbps down internet connection so everything is fairly quick.
Image size may be one thing to look at. Alternately setting the content DIV to display:none until after the first image has loaded then switching it using Javascript. I found this example here at Stack Overflow:
A method of solving this problem would involve hiding the full body for the 2 seconds or however long it takes to load the body. We can do this using Javascript:
var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}
And then in the HTML add the following div surrounding all the content of your webpage:
<div id="allcontent" style="display: none;">
I have a ruby on rails application. When clicking on a link which leads to a different page, where no background is set for the body element, the background does not change. It does however if you reload the new page.
I tried overwriting the background image on the new page which the link leads to, but that didn't help either.
All Code can be found here but the links I am talking about are for example Inhaltsverzeichnis github. The CSS I am talking about is
body {
background-image: url(<%= asset_path 'background.jpg' %>);
background-position: center;
background-size: cover;
}
in the corresponding view. It isn't included in the DOM if you click on the link, but is still is shown in browser.
The current master branch is also deployed here.
If you go onto that page and click on "Inhaltsverzeichnis" in the Navbar in the top left of the page you go to a new page and the background image stays. If you now reload the page the background image will vanish and the site looks like it should.
Can someone explain me what I am doing wrong? It looks to me as if the site somehow gets cached incorrectly or something.
Also, the problem only occurs if you click on the links within the page, if you type the url yourself, the page loads correctly in the first place.
Thank you in advance for any help :)
I found out what the problem is.
Rails by default bundles turbolinks, which does not reload the <head> of a new page if you click a link, to make loading pages faster. So as I put my style tags within the <head> of the page, these attributes didn't change until you reloaded the page. The quick fix was to remove turbolinks, but in the long run I will probably try to reintroduce it but then properly configure my page to use it to my advantage.
When using a template purchased from another site, by default the home page looked nice and the other pages had headers that were slightly 'off.' When I asked about repairing the pages, I was given some .css code that fixed the other pages, but now the home page is off (seems pretty obvious).
Here's the site: http://nyctodesign.com/gulfsales/index.php/
As you can see, the header is correct for every page but the home page. I looked up how to edit the .css for just one page, and got a tutorial that suggested a new file, say 'home-page.css' with my correct code, and this snippet of code below in the custom design xml:
<reference name="head"><action method="addCss">
<stylesheet>../theme300/css/home-page.css</stylesheet>
<params>media="screen"</params></action></reference>
I tried this code, and there is no change in the webpage. Can somebody point me in the right direction?
Okay, I ended up fixing it by coding opposite CSS as the other file - it gave a margin of 31 pixels on the header, so when I included the new home-page.css file, I changed this line to 0 pixels instead.
The code used above worked, I just had the relative URL in there incorrectly - now it uses the code I provided ONLY on the home page, and overwrites the regular 31 pixel margin.
The footer on my news page is inside of the container.
The actual file has the footer code outside of the container,
so I can't really grasp what is causing the footer to move positions.
I tried to edit my news.php but when I edit (delete certain divs on that template) nothing changes. However, if I delete divs within my index.php file there are changes when I view the site in my browser.
Why might this be happening?
The HTML is pretty much the same in each file so I don't get it.
Take a look at these pages to see the difference.
http://keihead.com/test/about - Correct
http://keihead.com/test/news - Wrong
In WordPress specific page templates get's loaded based on the query. Check out this page from WordPress codex.
I think you are editing the wrong file. Find out which template is getting called and change that particular file.