I have problems on Html file-CodePudding

Hi i'm making a website but im having two problems

My html file doesnt saw my css file. My Html file is Website/html/index.html and Css file is Website/css/index.css
Even though i do text-align: center;(css file line:22) my list doesnt become straight line

My Html code

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>KK Kiralama</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <header >
      <div >
        <nav >
          <li><a href="index.html">Ana Sayfa</a></li>
          <li><a href="Hakkimizda.html">Hakkımızda</a></li>
          <li><a href="Araclarımız.html">Araçlarımız</a></li>
          <li><a href="Iletisim.html">İletişim</a></li>
          <li style="float:right"><a href="Giris.html">Giriş</a></li>
        </nav>
      </div>
    </header>

My Css code

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;}
html{
    font-size: 60%;
}

.kk-header{
    width: 100%;
    background-color:#191970;
}
.kk-nav{
  overflow: hidden;
  background-color: #191970;
}
.kk-nav a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


Thanks for any help!
Also im open to any advice on making this code more smooth

CodePudding user response：

First of all, try adding two dots to your CSS path. href="../css/index.css" Then for the alignment, add display: flex; to the kk-nav shown below.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;}
html{
    font-size: 60%;
}

.kk-header{
    width: 100%;
    background-color:#191970;
}
.kk-nav{
  overflow: hidden;
  background-color: #191970;
display: flex;
}

.kk-nav li a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<body>
    <header >
      <div >
        <nav >
          <li><a href="index.html">Ana Sayfa</a></li>
          <li><a href="Hakkimizda.html">Hakkımızda</a></li>
          <li><a href="Araclarımız.html">Araçlarımız</a></li>
          <li><a href="Iletisim.html">İletişim</a></li>
          <li style="float:right"><a href="Giris.html">Giriş</a></li>
        </nav>
      </div>
    </header>

CodePudding user response：

In CSS you are using class .kk-nav but you have defined the please replace the hyphen(-) sign with underscore sign(_) then your CSS with work. The corrected code is here

    .kk_nav{ /* using underscore */
  overflow: hidden;
  background-color: #191970;
}
.kk_nav a{ /* using underscore */
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

and if you want to make nav text in the center use li in CSS not a like

 .kk_nav li{ /* using li not a */
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

CodePudding user response：

Your HTML file doesn't see your CSS file because you haven't given him the good path to the CSS file. Both your files are inside Website folder, but in two different separate folders. So you need to tell HTML to return to its root/parent folder (Website) and from there to enter css folder where he'll find CSS file. You do that with ".."

<link rel="stylesheet" href="../css/index.css">

You made an error. In HTML you named your class "kk_nav" with an underscore and in CSS you called that class with a hyphen insted of underscore. Change it and it should work. And if it doesn't, then call li instead of a in CSS:

.kk_nav li {}

CodePudding user response：

I'm seeing your CSS file just fine when I load it on my machine. Alternatively, in your case, if your current path isn't working for you can set the path like this for example <link rel="stylesheet" href="./css/index.css">. I will mention this is the same method as your current path except you're just adding '.' in front of your current file path. This will tell your HTML file to look for the file you need in the 'CSS' folder in the same directory level as your HTML file (assuming you have your HTML file in the root of your working directory).
In your CSS file you have kk-nav as your class name but in your current HTML file, you set the class as kk_nav. The only other note I really have is I see that you're defining your font size in the 'HTML' tag of your CSS, by default that is set to 16px, if I recall correctly. If you want a bigger font for your code I would suggest the using body element as the best practice. for example: body {font-size: 20px;}

I hope this helps.

This is the updated HTML code I used on my machine

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    font-size: 60%;
}

.kk-header{
    width: 100%;
    background-color:#191970;
}
.kk-nav{
  overflow: hidden;
  background-color: #191970;
}
.kk-nav a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>KK Kiralama</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    <body>
        <header >
        <div >
            <nav >
            <li><a href="index.html">Ana Sayfa</a></li>
            <li><a href="Hakkimizda.html">Hakkımızda</a></li>
            <li><a href="Araclarımız.html">Araçlarımız</a></li>
            <li><a href="Iletisim.html">İletişim</a></li>
            <li style="float:right"><a href="Giris.html">Giriş</a></li>
            </nav>
        </div>
        </header>
    </body>
</html>

CodePudding user response：

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <header >
        <div >
          <nav >
            <a href="#">Ana Sayfa</a>
            <a href="#">abc</a>
            <a href="#">Araçlar</a>
            <a href="#">İletişim</a>
            <a href="#">Giriş</a>
          </nav>
        </div>
      </header>
  </body>
</html>