CODEWITHSUNDEEP
htmlcss
S. Tiba
S. Tiba

Reputation: 31

My CSS doesn't work, except for one page in my website

I just started learning webdesign and I'm having this ongoing problem and I've posted a question about it before. Everything I tried didn't work but I made a few changes so I wanted to rephrase the question and add some more details.

I'm making a simple website for a Romanian artist and it will have an English version and a Romanian version (switching languages with tiny flags in the nav bar).

It's all written in WordPad, using just html and css, and all pages are in the same root folder. I have several html files and one css file (so it's an external file), which is linked in the head of each page. I have English versions and Romanian versions and they're all linked accordingly from the navigation.

Now, my issue is that the CSS will only work on the main English page and refuses to on any of the others, no matter which language, despite all of them having the same head, header and footer structure.

I tried Firefox and Chrome and it's the same story.

I clicked on "Page Source" on all the pages when opened in a browser, corrected any errors showing up, and the link to the css and all pages works when I click it.

I initially had several CSS files, one for each html file, but I deleted them except for one (I misunderstood the process initially and didn't realize they can all have the same css file). So now there is only one CSS file in the root folder "Style.css".

All html files are saved in "Unicode" encoding.

Except for the modified words, this is the exact css, as well as html structure of the main English page (on which the CSS works):

h1 {
    display: inline-block;
    font-family: Tahoma;
}

nav {
    display: inline-block;
    float: right;
    font-family: Tahoma;
}

address {
    float: right;
}

article.figures figure {
    display: inline-block;
    float: left;
}

aside {
    float: right;
    Font-family: Verdana;
}

footer {
    color: grey;
    font-family: Tahoma;
    float: left;
}
<!DOCTYPE html>
<html>

<head>
  <title>Name</title>

  <LINK rel="stylesheet" type="text/css" href="style.css">

  <meta charset="utf-8">
  <meta name="description" content="Name, visual artist">
  <meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
  <meta name="author" content="Me">

</head>

<body>

  <header>
    <img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
    <h1>Name </h1>


    <nav>
      <a href=///C:/Users/.../main page in English.html>Galleries</a>
      <a href=file:///C:/Users/.../News.html>News</a>
      <a href=file:///C:/Users/.../About.html>About</a>
      <a href="http://www.saatchiart.com/...">Shop</a>


      <a href="file:///C:/Users/.../webpageinRomanian.html">
        <img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
      </a>
    </nav>

  </header>





  <address>email</address>


  <article class="figures">

    <figure>
      <img src="images\painting.jpg" width="335" height="325" alt="painting">
      <figcaption>Paintings from 2010 - 2015</figcaption>
    </figure>



    <figure>
      <img src="images\2.jpg" width="335" height="325" alt="painting 2">
      <figcaption>2009 - 2000</figcaption>
    </figure>



    <figure>
      <img src="images\3.jpg" width="335" height="325" alt="painting 3">
      <figcaption>1990 - 1999</figcaption>
    </figure>

  </article>




  <footer>copyright Name
    <br>

    <A HREF="https://www.facebook./...">
      <IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
    </A>
    <A HREF="https://www.behance....">
      <IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
    </A>
    <br>Webdesign by me
  </footer>

</body>

</html>

This is a page on which the same CSS doesn't work:

h1 {
  display: inline-block;
  font-family: Tahoma;
}
nav {
  display: inline-block;
  float: right;
  font-family: Tahoma;
}
address {
  float: right;
}
article.figures figure {
  display: inline-block;
  float: left;
}
aside {
  float: right;
  Font-family: Verdana;
}
footer {
  color: grey;
  font-family: Tahoma;
  float: left;
}
<!DOCTYPE html>
<html>

<head>
  <title>Name News</title>

  <LINK rel="stylesheet" type="text/css" href="style.css">

  <meta charset="utf-8">
  <meta name="description" content="Name, visual artist">
  <meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
  <meta name="author" content="Me">

</head>

<body>

  <header>
    <img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
    <h1>Name </h1>


    <nav>
    <a href=///C:/Users/.../main page in English.html>Galleries</a>
      <a href=file:///C:/Users/.../News.html>News</a>
      <a href=file:///C:/Users/.../About.html>About</a>
      <a href="http://www.saatchiart.com/...">Shop</a>



      <a href="file:///C:/Users/.../webpageinRomanian.html">
        <img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
      </a>
    </nav>

  </header>





  <address>email</address>


  <h2>What's New</h2>

  <h3>Upcoming exhibitions:</h3>
  <ul>
    <li>July 2016</li>
    <li>October 2016</li>
  </ul>




  <footer>copyright Name
    <br>

    <A HREF="https://www.facebook./...">
      <IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
    </A>
    <A HREF="https://www.behance....">
      <IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
    </A>
    <br>Webdesign by me
  </footer>

</body>

</html>

Which might work on this website, but I swear, it won't work in my browsers.

It's driving me nuts.

I'd be extremely grateful for any help!

EDIT: This is what shows up in the developers console for the 'News' page: enter image description here

enter image description here

And this is the root folder: enter image description here

Upvotes: 1

Views: 2037

Answers (2)

Mathias Haugsb&#248;
Mathias Haugsb&#248;

Reputation: 438

Well it is working for me... make sure that the html and css files actually are in the same folder

/folder
--thing.html
--other.html
--style.css

And as pointed out in comment don't use c:/ to referer to files

Upvotes: 1

user4431269
user4431269

Reputation:

Try this inside your <head>

Source: w3schools

<base href="http://www.yourwebsite/" target="_blank">

Upvotes: 1

Related Questions