I have tried changing the display and getting rid of some code? probably erased the wrong thing or some code is overlapping? Im new to web development so if you can explain what I did wrong that will be great thanks. Check out Code on this JSFiddle link. https://jsfiddle.net/galbruh/htsrmy0L/2/#&togetherjs=PjjPVg1cOR
.toc-nav {
float: left;
/*list-style: none;*/
margin-top: 2%;
/*margin-left: 10%;
margin-right: 0%;*/
width: 100%;
text-align: center;
}
.toc-nav li {
display: incline;
list-style-type: none;
}
.toc-nav li a {
color: white;
text-decoration: none;
padding: 10px 70px;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.toc-liv li.active a {
border: 1px solid white;
}
.toc-nav li a:hover {
border: 1px solid white;
}
#media screen and (max-width: 500px) {
.toc-nav li a {
float: left;
/*display: none;*/
width: 100%;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="js/classie.js"></script>
<style>
body,html {
height: 100%;
margin: 0;
background-color: #2f3036;
}
b {
color: black;
font-family: "Teodor";
font-size: 25px;
}
.bg {
/* The image used */
background-image: url("images/logo.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
label {
color: white;
}
</style>
</head>
<body>
<header id="top"></header>
<nav role="navigation">
<ul class="toc-nav">
<li>About</li>
<li>Albums</li>
<li>Music</li>
<li>Contact</li>
</ul>
</nav>
<div class="bg"></div>
You have a spelling error in display: incline, it's actually spelled inline. That fixes it.
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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 rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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 rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
Ideally I want to keep the same layout when the browser window shrinks. I don't know if I need media queries to do that. I was trying to use flex-shrink but it wasn't having any effect. I thought flex has a default shrink property? I think part of the problem is I have too many css rules that may be conflicting with one another- I'm trying to get it to look like the wireframe image (below). Here is the codepen.
wireframe-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: 'Cantarell', sans-serif;
font-size: 20px;
}
<!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>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src="images\ic-logo.svg" alt="logo" />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul>
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
You will have to set media queries for your elements to adjust their size at a certain browser width. See the sample ones I added below:
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
Of course, feel free to change the sizing as you desire. See it working in the snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: "Cantarell", sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: "Cantarell", sans-serif;
font-size: 20px;
}
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-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.0" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src='https://svgshare.com/i/esC.svg' title='' />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul class="nav-links">
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
I just started taking an HTML/CSS class for beginners and we have a final project where we need to create a multi-page website so I am currently practicing by making a website of my own but I can't seem to figure out how to align the navbar list I have to right of the logo where the logo is on the left side of the navbar.
Here's my code:
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">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: white;
display: block;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul{
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: var(--primary-color);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
All help would be appreciated!
Set nav as flex container:
body {
background: black;
margin: 0;
color: white;
}
nav {
display: flex;
align-items: center;
background-color: white;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
}
.navbar ul{
display: flex;
list-style: none;
/*margin: 0px 25px 0px 90px;*/
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: black;
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
<!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>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
<style>
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: rgb(255, 238, 0);
display: block;
display: flex;
align-items: center;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</nav>
</body>
</html>
Easiest way to create a navbar. Have a look
You need to adjust Width of the images and use this property to align image to left float:left
body,
div {
margin: 0;
border: 0 none;
padding: 0;
background-color: rgb(65, 63, 63);
}
.md {
background-color: black;
padding: 20px;
}
a {
color: white;
text-decoration: none;
padding: 15px;
}
a:hover {
background-color: rgb(224, 224, 224);
color: black;
}
img{
width: 40px;
height: 30px;
float: left;
margin-top: 15px;
}
<!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>Document</title>
</head>
<body>
<img src="https://iconape.com/wp-content/files/zy/291859/png/291859.png">
<div class="md">
HOME
BAND
TOUR
</div>
</body>
</html>
I am trying to change the logo size with the help of below media query but it doesn't work. display: none works but the height and width property doesn't for the below media query.
So whats the problem with the below code.
/* SMALL PHONES TO SMALL TABLETS 481 TO 767px */
#media only screen and (max-width: 767px) {
.logo {
height: 20px;
}
}
/* SMALL PHONES FROM 0 TO 480px */
#media only screen and (max-width: 480px) {
}
css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-size: 20px;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
background-color: #fff;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 80%;
margin: 0 auto;
}
/************** HEADER ***************/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.83), rgba(10, 189, 227, 0.21)), url(img/header-background.jpg);
height: 200px;
background-position: center;
background-size: cover;
}
.logo {
height: 100px;
width: auto;
float: left;
margin: 10px 0 0 20px;
}
.main-nav,
.main-nav-right {
margin-left: 22px;
}
.main-nav {
float: left;
list-style: none;
margin-top: 15px;
}
.main-nav li {
display: inline-block;
margin-right: 22px;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav li a {
text-decoration: none;
text-transform: uppercase;
color: #cbc8c8;
word-spacing: 2px;
font-size: 80%;
font-weight: 400;
}
.main-nav-right {
float: right;
list-style: none;
margin-top: 15px;
margin-right: 22px;
}
.main-nav-right li {
display: inline-block;
margin-right: 22px;
}
.main-nav-right li a {
text-decoration: none;
text-transform: uppercase;
color: #cbc8c8;
word-spacing: 2px;
font-size: 78%;
font-weight: 400;
}
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/other-css/grid.css">
<link rel="stylesheet" type="text/css" href="css/other-css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="row">
<header>
<nav>
<img src="https://www.freelogodesign.org/img/logo-ex-7.png" class="logo" alt="logo">
<ul class="main-nav">
<li>Home</li>
<li>Add A Post</li>
</ul>
<ul class="main-nav-right">
<li>Login</li>
<li>Register</li>
</ul>
</nav>
</header>
</div> <!-- main row div -->
</body>
</html>
you forgot this meta:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is explain about this meta:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have looked online and tried different things to make the contact form be centered when the screen is or gets smaller. The header and navbar are responsive, the contact form is not. Also, my code was in two separate sheets on here and then the website randomly combined them. You can break them apart if you know how.
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
img {
max-width: auto max-height: auto;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
.cognito {
margin: 0 auto;
width: 100px;
}
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Events.css">
<link rel="stylesheet" type="text/css" href="contactusmobile.css" media="screen and (max-width: 900px)">
</head>
<body>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.cognito {
position: absolute;
margin-top: 20px;
margin-left: 450px;
}
body {
background: url('heartcoffee.jpeg');
background-repeat: no-repeat;
background-size: 2000px 1000px;
}
</style>
<div class="cognito">
<script src="https://services.cognitoforms.com/s/q8sF4QFeokuqNI1bQZm3vg">
</script>
<script>
Cognito.load("forms", {
id: "1"
});
</script>
</div>
</body>
</html>
It’s useless post all code of your problem request.
However, for center a form inside a div container you can use:
.center{
margin:0 auto;
}
Else inside a position:relative; container:
.center{
position:absolute;
left:50%;
transform:translateX(-50%);
top:0;
}