After I defined my side menu, I came over this wall that I find hard to break. Thinking back, I should have use css grid instead.
I couldn't find a way to position my main element to the right side of the nav element. I just want to see that H3 in the middle of the remaining body space, to the right. I'm struggling for 2 hours by now so I came to ask for some help.
You have to open fullscreen to really see the page, I haven't created any media queries yet so the style gets stretchy.
Hope you guys have a few minutes to spend with a CSS noob :).
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 30vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 15%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Content Wrapper */
.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* Content Wrapper */
<!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>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<main class="home-card">
<section class="author">
<h3>My Name</h3>
</section>
</main>
<!-- Content -->
</body>
</div>
</body>
</html>
Wrap the nav and main tags to a wrapper like .nav_wrapper then use flex display to the wrapper as follows to show them side-by-side.
.nav_wrapper {
display: flex;
}
More information about the flex style can be found here.
Related
how do I make my <a> tags in my Navbar take the full available height from it´s parent instead of just the space required by the content?
Currently, the hover effect only triggers when you mouseover the TEXT, because that's all the space that the content is taking. I want the entire available height to be clickable when hovered.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-800: #0d0d0d;
--clr-600: #122459;
--clr-400: #3565f2;
--clr-200: #3d79f2;
--clr-100: #f2f2f2;
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Bebas Neue", cursive;
}
body {
font-family: var(--font-primary);
background: var(--clr-100);
color: var(--clr-800);
padding: 0;
margin: 0;
}
h1 {
font-family: var(--font-secondary);
}
header {
background-color: var(--clr-800);
color: var(--clr-100);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.5rem var(--clr-800);
height: 40vh;
}
header > h1 {
margin: 0 0 0 4rem;
}
nav > ul {
display: flex;
list-style-type: none;
margin: 0 4rem 0 0;
padding: 0;
}
nav > ul > li {
margin-left: 2rem;
}
nav > ul > li > a {
color: var(--clr-100);
text-decoration: none;
}
nav > ul > li > a:hover {
color: var(--clr-800);
background-color: red;
padding: 2rem 0;
}
<!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>Website</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght#300;500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</html>
This structure should work nicely for you. I recommend getting good at using your browser dev tools. If you inspect your elements you will notice that nav and ul need to have height: 100%; to fill the available header height.
Then, you need to set min-height: 100%; on a and use flex with align-items: center; to center them once again. I adjusted the spacing by adding horizontal padding and margin on the a so it doesn't affect the clicking area.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-800: #0d0d0d;
--clr-600: #122459;
--clr-400: #3565f2;
--clr-200: #3d79f2;
--clr-100: #f2f2f2;
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Bebas Neue", cursive;
}
body {
font-family: var(--font-primary);
background: var(--clr-100);
color: var(--clr-800);
padding: 0;
margin: 0;
}
h1 {
font-family: var(--font-secondary);
}
header {
background-color: var(--clr-800);
color: var(--clr-100);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.5rem var(--clr-800);
height: 40vh;
}
header>h1 {
margin: 0 0 0 4rem;
}
nav>ul {
display: flex;
list-style-type: none;
margin: 0;
padding-right: 3em;
}
nav>ul>li>a {
color: var(--clr-100);
text-decoration: none;
}
nav>ul>li>a:hover {
color: var(--clr-800);
background-color: red;
}
a {
padding: 0 .5em;
margin: 0 .5em;
}
nav,
ul {
height: 100%;
}
a {
min-height: 100%;
display: flex;
align-items: center;
}
<!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>Website</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght#300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</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'm having issues trying to align these 2 divs (background and home-card). I changed the html nesting but I can't find the right way to make them stack on top of each other (home-card under background div).
I want the home-card to sit under background, both filling the remaining viewport.
flex-direction: column has no effect and I feel a bit lost to be honest. It is my first time using flexbox from scratch even though I've read about it, I still have troubles when practicing.
As you can see on fullscreen snippet run, these 2 divs are next to each other. I guess flex-grow is causing me layout issues, but I couldn't find a better way to make the background div fill the whole remaining space.
Any help is appriciated. Sorry for posting the whole code but I had to provide you the right context.
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.page-container {
display: flex;
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 25vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 25%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Home Card */
section.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* div.home-card {
background: url(/img/final.svg) no-repeat;
flex-grow: 1;
} */
div.background {
background: url(/img/final.svg) no-repeat;
flex-grow: 1;
background-color: crimson;
}
div.home-card {
display: flex;
}
.author {
background-color: blueviolet;
}
.author h3 {
font-size: 1.5em;
}
#media (orientation: portrait) {
body {
background-size: auto 100vh;
}
}
/* Home Card */
<!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>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<main class="page-container">
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<div class="background"></div>
<div class="home-card">
<section class="author">
<h3>My name</h3>
</section>
</div>
<!-- Content -->
</main>
</body>
</div>
</body>
</html>
If you just put your background and card in a separate div you can get the desired effect.
<!-- Content -->
<div class="content">
<div class="background"></div>
<div class="home-card">
<section class="author">
<h3>My name</h3>
</section>
</div>
</div>
<!-- Content -->
CSS:
.content{
display: flex;
flex-direction: column;
}
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.
I'm confused, why it collapses when the window shrinks horizontally? I've tried to set the width of the div and tried setting display:block. I'm using Bootstrap 3, but I don't think it is relevant.
h1 {
font-family: 'LatoBold';
color: #ff990f;
}
/*---------------------------------- Header ----------------------------*/
#header {
position: relative;
margin-bottom: 1em;
min-width: 100ex;
white-space: nowrap;
}
#header > .inner {
height: 95px;
}
/* njnavbar
************************************/
#header .njnavbar {
position: absolute;
bottom: 0px;
right: 0px;
height: 42px;
min-width: 90ex;
white-space: nowrap;
}
#header .njnavbar * {
font-family: 'LatoBlack', Arial, Verdana, sans-serif;
font-size: 16px;
color: #FFF;
text-transform: uppercase;
text-shadow: #08121b 0px 1px 1px;
}
#header .njnavbar ul {
margin-right: 15ex;
}
#header .njnavbar ul li {
float: left;
line-height: 42px;
margin: 0 10px;
list-style: none;
}
#header .njnavbar ul li.last {
margin-right: 0!important;
}
#header .njnavbar > ul > li > a:hover {
color: #e5ca38;
}
/* Phone Number
************************************/
#header .phone {
position: absolute;
top: 1ex;
margin-top: .5ex;
right: 10px;
padding-left: 30px;
height: 26px;
line-height: 26px;
font-size: 18px;
}
#header .phone strong {
font-family: 'LatoBlack';
}
<!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>example.COM</title>
<!-- Bootstrap -->
<link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/fonts.css" type="text/css" />
<link rel="stylesheet" href="assets/css/login.css" type="text/css" />
</head>
<body>
<div id="header"><div class="inner">
<h1>example.COM</h1>
<div class="phone">
For reservations call <strong>888-555-1212</strong> | <strong>888-555-1213</strong>
</div>
<div class="njnavbar" style="min-width:90ex">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>longer choiceasdf</li>
<li>Customers</li>
<li class="last">Contact</li>
</ul>
</div> <!-- /njnavbar -->
</div></div> <!-- /inner /#header -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Problem seems to be related to the float property.
#header .njnavbar ul li {
float: left; /*remove this*/
display: inline-block; /*add this*/
}
Then the white-space: nowrap; on the parent container will start to work properly.
Also be aware of the ex units, it's rarely used, unless you know what you're doing.