I'm trying to build my own website.I am new to html/css and I've been dealing with this problem for a while now . Whenever i try to create clickable text , it doesn't work. i want it to be clickable to open up another html file , but it's not working at all , any advice ?
Ok so it seems that the tabs work and lead to another html file only when css isn't linked to the main html i dont know why its like that .
.Home {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -140px;
padding-left: 800px;
font-size: 15px;
text-decoration: none;
}
.Projects {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -160px;
padding-left: 900px;
font-size: 15px;
text-decoration: none;
}
.About {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -180px;
padding-left: 1025px;
font-size: 15px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="Home_css.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="Home"> <b>HOME</b></div>
<div class="Projects"><b>PROJECTS</b></div>
<div class="About"><b>ABOUT</b></div>
</body>
</html>
What i expected was for the tabs to be clickable and lead to another html file , but none of them are responding could it be that i did something wrong in the css ?
Because of top:-140px & negative values we cannot see div elements
Also set padding values to low so no need to scroll page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="Home_css.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="Home"> <b>HOME</b></div>
<div class="Projects"><b>PROJECTS</b></div>
<div class="About"><b>ABOUT</b></div>
</body>
</html>
.Home a, .Home a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.Projects a, .Projects a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.About a, .About a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
Please check the link
Check here
Most likely you have another element above the links. Right-click on a faulty link, and select "Inspect element". This will open the development toolbar of your browser, with the element you right-clicked selected.
The selected element will either be the anchor, or it will be another element. If it's not the anchor, it means it's the element sitting above the anchor which prevents your click from going through.
Related
I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
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.0" />
<link
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
I Want to make it so the 100 appears in the top right corner of my div, I have it aligned to the right but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
The code is not clean (from a CSS perspective), however I would suggest doing display:flex;, justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.
Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body {
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan {
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
display: flex;
justify-content:space-between;
align-items: center;
}
h1 {
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2 {
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3 {
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<div>
<h2>Titan</h2>
<h3>Exo Male</h3>
</div>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
Try
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
If i understand correctly the solution is very simple; for h1 element
position: fixed;
top: 0;
right:0;
I'm creating my personal website but having trouble understanding why navigation bar size changes when I change from one HTML file to another HTML file. For example, when I click Photography_Color HTML, the navigation bar becomes bigger compared to the Main HTML. All the HTML files are using the same CSS, so I'm not sure what the problem is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<!--SOCIAL MEDIA ICON STYLESHEET-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]Son | Art & Code </title>
<div class="top">
<div class = "center">
<h>J[a]son</h>
<p>Personal Blog</p>
</div>
<nav class = "top_child">
<div class = "logos">
</div>
<div class = "nav">
<ul>
<li>HOME</li>
<li>PHOTOGRAPHY
<ul class="photography_1">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>CODING</li>
<li>ABOUT</li>
</ul>
</div>
</nav>
</div>
</head>
CSS:
body {
background-color: black; /*rgb(241, 233, 233);*/
}
html, body {
height: 90%;
margin: 0;
padding: 0;
}
.top {
margin: auto;
padding: 1.0em;
overflow: hidden;
background-color: black;
top: 0;
display: block;
position: sticky;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
z-index: 100;
clear: both;
overflow: hidden;
}
.top p {
color: white;
font-size: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.center {
text-align: center;
}
.center a{
color: rgb(224, 224, 228);
font-size: 1.5em;
}
.center a:hover{
text-decoration: none;
color: rgb(224, 224, 228);
}
.nav {
float: right;
position: relative;
list-style: none;
display: block;
}
.nav li {
display: inline;
list-style: none;
position: relative;
}
.photography_1 {
display: none;
}
.photography_1 li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 20px;
left: 25px;
}
You need to move your div with the class of top, out of the tag and inside a tag.
The element is a container for metadata (data about data) and is placed between the tag and the tag.
The tag defines the document's body. It contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="top">
<!-- Put the rest of whats inside the top div here -->
</div>
</body>
</html>
I'm trying to add Google API fonts to my webpage to learn more about HTML and I can't get any of the API fonts to load. I've been trying with the Santina font, but it always reverts back to my "default" Courier New font. The code worked when I added an #import statement to the top of the CSS document, so I believe the link is correct, but the HTML doc doesn't seem to link the API font to the CSS page. Am I overriding the CSS doc somehow?
My HTML doc:
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400"
ref="stylesheet" type="text/css">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
The CSS Doc:
#title {
font-family:"Sansita", Courier New;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
Edit: added better spacing for code
You've got ref="stylesheet" instead of rel="stylesheet"
Doh.
#title {
font-family:'Sansita', times, sans-serif;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
I'm using a website to help me to found speed issues on my website.
This problem occurred but I don't know how to solve this
Specify a character set early The following resources have no character set specified in their HTTP headers. Specifying a character
set in HTTP headers can speed up browser rendering.
My code is this:
<!DOCTYPE html>
<html>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=description content="EFR3SXZ's personal site">
<meta property=og:title content=EFR3SXZ>
<meta property=og:description content="EFR3SXZ's personal site">
<meta property=og:image content=http://richpreview.com/richpreview.png>
<link rel="shortcut icon" href=http://richpreview.com/favicon.ico type=image/x-icon>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen">
<!-- body {
color: white;
background-color: #003;
margin: 0px
}
#horizon {
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext {
font-size: 14px
}
.headline {
font-weight: bold;
font-size: 24px
}
#footer {
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link,
a:visited {
color: #06f;
text-decoration: none
}
a:hover {
color: red;
text-decoration: none
}
-->
</style>
<title>EFR3SXZ</title>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
Incarnoob
<br>
<span class="headline">EFR3SXZ</span>
<br>website</div>
</div>
</div>
<div id="footer">
Incarnoob's Dofus page</div>
</body>
</html>
The HTML you use is largely irrelevant to the HTTP headers. How you set those depends on the HTTP server you are using and (if applicable) the server side programming language that is generating the response.
If you were (for example) using Apache HTTPD, you might edit your server configuration file to include:
AddDefaultCharset ISO-8859-1
(NB: I'd suggest moving away from legacy encodings and use UTF-8 now it is the 21st century).