I am slightly new to html and css and want to create my own portfolio. I have some problems with the classes though. Whenever I try to call them in css it doesn't seem to do what its supposed to do.
When I call it without using classes it works perfectly fine.
Hope somebody can help and find my mistake,
thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE
Changed css but still doesn't work.
This class won't work.
You pointed to the link with class header_nav. But you don't have it.
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
It should be (link inside the class .header_nav)
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE:
I've included the snippet. Is it what you want?
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
UPDATE 2
Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.)
.header_nav a {
font-family: arial;
display: block;
color:white!important;
text-align: center;
padding: 14 px 16 px;
text-decoration: none!important;
}
I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,
.header_nav li { your styles }
.header_nav a { your styles }
Make the following changes:
From
a.header_nav {
}
To:
.header_nav a {
}
and also you can make change to html for easiness
body{
background-color: #f1f6fe;
}
ul.header_nav_container {
float:right;
padding: 20px;
}
ul.header_nav_container li.header_nav {
list-style-type: none;
float: left;
padding: 0 20px
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav_container">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
If class doesn't work you can specify ids and pass the styles similarly
Related
I'm looking for a way to raise text up so that it can mirror the other text that is on the top left portion of the webpage.
I have text that is centered perfectly on the top left portion of my navbar. I have other text that has appeared on the top right potion of my page - semi near the navbar. I am looking for a way to raise the portion of text up so that it is level with the text in the top left portion, while keeping its placement in the top right area of the webpage.
The h3 element text is in perfect placement (top left)
The text in the div elements under the "navbar-right" class is centered to the top right of the webpage - which is correct- but it is not level with the text in h3 element.
Literally any help with this would be awesome. Thank you.
I tried looking around, yet couldn't find an exact answer. Hoping for any help or advice.
~ HTML ~ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="cleanstyle.css" />
<link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<div class="navbar">
<h3>Example</h3>
</div>
<div class="navbar-left"></div>
<div class="navbar-right">
<div>Home</div>
<div>About</div>
<div>Portfolio</div>
<div>Contact</div>
</div>
</body>
</html>
~ CSS ~ :
#import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
body {
margin: 0px;
font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}
.navbar {
padding: 20px;
font-size: 16px;
justify-content: space-between;
}
.navbar-right {
justify-content: right;
display: flex;
padding-right: 25px;
font-size: 16px;
text-align: right;
}
h3 {
padding-left: 20px;
text-align: left;
}
.navbar-left div {
text-transform: uppercase;
font-weight: 600;
}
.navbar-left,
.navbar-right {
display: flex;
align-items: center;
}
.navbar-left > *,
.navbar-right > * {
margin: 10px;
}
li {
text-align: right;
padding: 20px;
}
You may set the .navbar as a parent element to both .navbar-left and .navbar-right with display:flex and justify-content: space-between.
Your <h3> will be under the .navbar-left, and navigation div elements will under the .navbar-right
#import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
body {
margin: 0px;
font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}
.navbar {
padding: 20px;
font-size: 16px;
justify-content: space-between;
display: flex;
}
.navbar-right {
justify-content: right;
display: flex;
padding-right: 25px;
font-size: 16px;
text-align: right;
}
h3 {
padding-left: 20px;
text-align: left;
}
.navbar-left h3 {
text-transform: uppercase;
font-weight: 600;
}
.navbar-left,
.navbar-right {
display: flex;
align-items: center;
}
.navbar-left > *,
.navbar-right > * {
margin: 10px;
}
li {
text-align: right;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="cleanstyle.css" />
<link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<div class="navbar">
<div class="navbar-left">
<h3>Example</h3>
</div>
<div class="navbar-right">
<div>Home</div>
<div>About</div>
<div>Portfolio</div>
<div>Contact</div>
</div>
</div>
</body>
</html>
When I run the HTML code the text under “navbar-left” it is perfect, but the text under “navbar-right” is not bold and does not look the same. I imported the proper font and I am just wonder what my mistake was. I would like all of the text in the navbar to look the same in terms of boldness and font.
Any help would be huge thank you!
#import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
body {
margin: 0px;
font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}
.navbar {
padding: 20px;
font-size: 16px;
justify-content: space-between;
display: flex;
}
.navbar-right {
justify-content: right;
display: flex;
padding-right: 25px;
font-size: 16px;
text-align: right;
}
h3 {
padding-left: 20px;
text-align: left;
}
.navbar-left h3 {
text-transform: uppercase;
font-weight: 600;
}
.navbar-left,
.navbar-right {
display: flex;
align-items: center;
}
.navbar-left > *,
.navbar-right > * {
margin: 10px;
}
li {
text-align: right;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="cleanstyle.css" />
<link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?ifamily=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<div class="navbar">
<div class="navbar-left">
<h3>Example</h3>
</div>
<div class="navbar-right">
<div>Home</div>
<div>About</div>
<div>Portfolio</div>
<div>Contact</div>
</div>
</div>
</body>
</html>
I couldn’t seem to locate the issue. Any help would be amazing - thank you.
<!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" />
<title>DOM about</title>
<!-- <style>
.red {
background: red;
color: white;
text-transform: uppercase;
font-size: 2rem;
}
.blue {
background: blue;
color: white;
text-transform: capitalize;
font-size: 2rem;
}
.title {
background: blue;
color: white;
font-size: 3rem;
text-transform: capitalize;
}
.btn {
background: #f15025;
color: white;
font-size: 1.2rem;
border: none;
}
a {
display: inline-block;
margin-top: 100vh;
}
</style> -->
</head>
<body>
<div class="container">
<ul class="list-items">
<li class="item">link</li>
<li class="item">link</li>
<li class="item">link</li>
</ul>
</div>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
When I run this code I get no issues on my live server concerning the displaying of my links on top of eachother in the div.
BUT when I uncomment the styles section my lists are suddenly spread around huge individual containers. I don't understand how that is possible. Can someone please clarify what context/syntax I am forgetting.
I just started learning how to code this week so forgive me if this is obvious.
The Problem was the margin-top: 100vh; for a tag.
<!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" />
<title>DOM about</title>
<style>
.red {
background: red;
color: white;
text-transform: uppercase;
font-size: 2rem;
}
.blue {
background: blue;
color: white;
text-transform: capitalize;
font-size: 2rem;
}
.title {
background: blue;
color: white;
font-size: 3rem;
text-transform: capitalize;
}
.btn {
background: #f15025;
color: white;
font-size: 1.2rem;
border: none;
}
a {
display: inline-block;
/* margin-top: 100vh; Thats the problem */
}
</style>
</head>
<body>
<div class="container">
<ul class="list-items">
<li class="item">link</li>
<li class="item">link</li>
<li class="item">link</li>
</ul>
</div>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
Your links are spreading because you are giving margin-top: 100vh. So each a tag gets margin-top of 100vh. The problem is in the following place in style tag.
a {
display: inline-block;
margin-top: 100vh;
}
Here is the html and the css in a snippet:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
h1 {
float: left;
margin-top: auto;
margin-bottom: auto;
color: white;
}
.acme {
color: #e8491d;
}
nav {
float: right;
margin-top: auto;
margin-bottom: auto;
}
li {
display: inline;
font-size: 150%;
padding: 0px 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1><span class="acme">Acme </span>Web Design</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
</header>
</body>
</html>
The problem is with h1 and nav I set the top and bottom margin to auto and gave the header a height of 100px (105px with the border) and even though margin auto still not working I tried to add
display: block;
but again still no thing happens
All you need to update your header CSS to :
header {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
That fix the problem
-> Please attached following code into your attached files.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
h1 {
float: left;
margin-top: auto;
margin-bottom: auto;
color: white;
}
.acme {
color: #e8491d;
}
nav {
float: right;
margin-top: auto;
margin-bottom: auto;
}
li {
display: inline;
font-size: 150%;
padding: 0px 20px;
}
.display-table {
display: table;
height: 100%;
width: 100%;
}
.vertical-content {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Stack</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="display-table">
<div class="vertical-content">
<h1><span class="acme">Acme </span>Web Design</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
The HTML does not work with margin-top or margin-bottom, you need to create a flex display, check this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
For what you want, you need to do this:
display: flex;
align-items: center;
And if you need something else from flex, check the link
My nav bar is under the slideshow. I want it over but i can't figure out. I tried some absolute and relative positions but it doesn' work. Please find my a solution and if you have time give me a logical explaning.
My html page
<!DOCTYPE>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" type="text/css" href="all.css">
<title>
</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"</script>
<!Daca e IE><script src="http://html5shim.googlecode.com/svn/trunk/htm5.js"></script><!End>
</head>
<body>
<nav>
Logo
Home
Projects
Colections
Philosophy
Contact
Facebook
</nav>
<div class="cycle-slideshow">
<img src="images/233H.jpg" alt="blabla">
<img src="images/233H1.jpg" alt="blabla">
<img src="images/233H2.jpg" alt="blabla">
</div>
</body>
<footer>
</footer>
</html>
My css page
img {
max-width: 100%;
}
.cycle-slideshow {
width: 100%;
max-width: 2000px;
}
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
}
nav a {
display: inline-block;
text-decoration: none;
font-family: verdana;
font-size: 14px;
color: rgb(239,239,239);
margin: 15px 32px 0 32px;
}
nav a:hover {
color: pink;
use z-index property for this
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
z-index:10;
}
use maximum if slider also used
z-index
The nav position is being ignored because it is set to fixed. To solve this add padding to the slideshow that equals the height of the nav.
.cycle-slideshow{
padding-top: 45px;
}