Hi I'm making a website but I'm having two problems
My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
Even though i do text-align: center;(CSS file line:22) my list doesn't 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 class="kk-header">
<div class="kk-container">
<nav class="kk_nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</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, I'm open to any advice on making this code more smooth.
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 class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
In CSS you are using class .kk-nav but you have defined the class="kk_nav"
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;
}
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 {}
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 class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="nav">
Ana Sayfa
abc
Araçlar
İletişim
Giriş
</nav>
</div>
</header>
</body>
</html>
Related
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
I have searched all over the internet searching for answers to why no matter what I do glyphicons just won't show up for me. They only show as a little square "[]".
I have made sure that I am linked to the correct path. and have all the files in my project like the other forum posts have said and I even tried to change the font-family like someone suggest but nothing changes.
Am I missing something? Can someone explain the fix to me in the simplest of terms? I am very new to HTML and CSS still and get confused quite easily!
.main{
overflow: auto;
background: url(portal.png), black;
max-width: 100%;
min-height: 900px;
background-size: cover;
background-position: center;
}
.main-nav{
text-align: right;
margin: 50px 50px 0 0;
}
.main-nav li{
display: inline;
text-align: center;
padding: 20px;
font-size: 22px;
}
.main-nav li a{
color: #A8F766;
text-decoration: none;
}
.main-nav li a:hover{
color: #fff;
text-decoration: none;
border-bottom: 2px #A8F766 solid;
}
.main-text h1{
text-align: center;
margin-top: 150px;
color: #fff;
font-size: 70px;
}
.fa-bath{
font-size: 90px;
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practice</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<nav>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="main-text">
<h1>Placeholder.<i class="fa fa-gamepad"></i><br>Placeholder.<br>Placeholder.</h1>
</div>
</div>
</body>
</html>
This looks like path issue. Does all your .css files stored in single folder or different folders? If they are stored in different folders can you please list the folder structure for .css files?
Also, just wanted to point out an alternative approach using BootstrapCDN to directly link the css file.
For example, following worked for me:
.fa-gamepad {
color:blue;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>Game pad</h1>
<i class="fa fa-gamepad fa-5x"></i>
</body>
In my head I want to use the "Your Image is More Important Than Ours" with an emphasis on More Important.
I also want that to be underlined and shadowed to match a red background (white shadow). That emphasis also I'm debating if it should blink or fade in.
For some reason, my css isn't working on it.
HTML CODE:
<!-- This is a HTML Document-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<body>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
CSS So Far:
header {
width: 100%;
height: 200px;
}
header:h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header:em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
Nothing's working. Probably something stupid on my end. Thanks for the help in advance.
You should put header tag inside yout body tag.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<body>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
and also change your css selector
header {
width: 100%;
height: 200px;
}
header h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
note the space between header and h1.
It will result like this (darkgreen background added to show italicized text which is white).
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<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">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty