I built this site and I can't get the navbar or my image in the middle. I tried a lot like making flex boxes, setting margins, ... .I just can't find the problem. I hope it isn't a problem that you can't see the pictures etc. because it looks messy.
Here is a part of my code:
body {
background-color: #333333;
}
.navBar {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #9D9C9C;
opacity: 0.8;
width: 95%;
position: fixed;
align-items: center;
}
.logo {
width: 200px;
}
ul {
list-style-type: none;
width: 40%;
white-space: nowrap;
}
a {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
.voorPagina {
width: 95%;
}
<!DOCTYPE html>
<html>
<head>
<title>Dia architecten</title>
</head>
<body>
<div class="navBar">
<img class="logo" src="/Images/LogoDIA.png" />
<ul>
Projecten
Over
Contact
</ul>
</div>
<img class="voorPagina" src="Images/VPDia.png" />
</body>
</html>
Thank you!
Something like this?
You were using justify-content: space-between; for the div with .navBar class, instead if you go for justify-content: center;, it will center all the child elements of the div! Also I added a placeholder image for checking purposes!
Note: Please click on the link full page to view the proper centered navbar!
body {
background-color: #333333;
}
.navBar {
display: flex;
justify-content: center;
padding: 10px;
background-color: #9D9C9C;
opacity: 0.8;
width: 95%;
position: fixed;
align-items: center;
}
.logo {
width: 200px;
}
ul {
list-style-type: none;
width: 40%;
white-space: nowrap;
}
a {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
.voorPagina {
width: 95%;
}
<!DOCTYPE html>
<html>
<head>
<title>Dia architecten</title>
</head>
<body>
<div class="navBar">
<img class="logo" src="http://lorempixel.com/100/25/" />
<ul>
Projecten
Over
Contact
</ul>
</div>
<img class="voorPagina" src="Images/VPDia.png" />
</body>
</html>
Related
I'm a beginner Web Developer who is currently working on my first responsive website. I’ve run into an issue with my dropdown menu where the width (which I want to cover the whole screen) begins to reduce when the screen size passes a certain threshold (484 pixels or less). I had a similar issue in other areas of my site that after some research I was able to fix by adding “mid-width: fit-content;” to my HTML ruleset, but it doesn’t seem to be helping the dropdown. Any idea what could be causing this? I’ve been unable to find a cause or solution so any advice would be greatly appreciated.
Below is a simplified version of my code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>A Website</title>
<link rel="stylesheet" href="./styles/MenuTestCSS.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<div class="flexContainer">
<div id="logoBox">
<h2 id="logo">Website</h2>
</div>
<nav>
<ul id="menu" class="flexContainer">
<li class = "navLink"><a href="" >Link</a></li>
<li class = "navLink">Link</li>
<li class = "navLink">Link</li>
<li class = "navLink">Link</li>
</ul>
<div class="flexContainer">
<div id="menuToggle">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</nav>
</div>
</header>
</body>
</html>
/* GENERAL STYLES */
html {
box-sizing: border-box;
min-width: fit-content;
}
body {
width: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.flexContainer{
display: flex;
flex-flow: row wrap;
}
/* HEADER STYLES */
header {
color: white;
background-color: #485696;
height: auto;
}
header .flexContainer {
align-items: center;
height: 100%;
width: 100%;
}
header h2 {
font-size: 48px;
margin: 20px 0;
padding-left: 25px;
}
nav {
align-self: stretch;
width: 485px;
}
nav .flexContainer {
justify-content: space-around;
}
header a, header a:visited {
color: white;
text-decoration: none;
font-size: 26px;
}
header li {
display: inline-block;
}
#menuToggle {
width: 45px;
height: 50px;
display: none;
}
.square{
width: 45px;
background-color: white;
height: 5px;
}
.square + .square {
margin-top: 10px;
}
nav {
flex: 1 0 0;
}
nav .flexContainer {
justify-content: flex-end;
}
#menuToggle {
margin-right: 3em;
width: 30px;
height: 30px;
display: block;
}
#menu {
background-color:#485696;
position: absolute;
top: 92px;
left: 0%;
height: auto;
padding: 10px 25px;
display: block;
border-top: 4px solid white;
}
.navLink + .navLink {
margin-top: 1em;
}
#menu li {
display: block;
}
.navLink + .navLink {
margin-left: 0px;
}
You've got this issue because you set nav{ width: 485px }
so it's logically will be shrinked when the with is lower than 485px, I notice you to learn about relative lengths such as "%", "rem", "em", "vh"...
so in your case you'll just change the nav { width: 485px } by width: 100%
So I have a code for a website that uses HTML and CSS but I have a problem with CSS.
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #222222;
width: 100%;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
This is my result:
Result Image
It works and all, but if you look at the bottom left (at the menu), it isn't fully covered. I have tried many ways to cover it, but I can't seem to get it right.
Any ideas? Appreciated if you explain it to me as well.
Most major browsers apply a margin on the body, thus causing the footer not expanding to the viewport's full width.
To get rid of the margin, applying margin: 0 to body:
body {
background-color: #222222;
width: 100%;
margin:0;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
Just add left : 0;
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can also reduce that type of error by just adding this code at the top.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
I'm just building a mini test project in an online HTML/CSS course I'm doing for beginners and I don't understand why my navbar content doesn't respond to screen width. The header border goes right through my content if you keep reducing screen width (I've left borders on so you can see that happening).
I have copied my code and the course instructor's code below so that so you guys can tell me why his works but mine doesn't. The only major difference I see is that I used anchor tags whereas he used button tags for navigation but I still don't get why that is a problem (I set my anchor tags to display:block; in case their inline display was the issue).
My code:
/*mycss.css*/
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header {
border: 1px solid hotpink;
height: 100vh;
width: 10vw;
display: flex;
flex-direction: column;
justify-content: space-around;
border-right: 1px solid #D7DBDD;
}
div#top-nav {
border: 5px solid green;
height: 25%;
width: 100%;
display: flex;
flex-direction: column;
}
ul {
border: 1px solid gold;
list-style-type: none;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
li {
border: 1px solid red;
width: 100%;
/* text-align: center; */
}
li a {
border: 1px solid blue;
display: block;
padding: 20px 0 20px 20px;
text-decoration: none;
color: #16A2D7;
font-size: font-size: 2vw;
}
li a:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<header>
<div id="top-nav">
<ul>
<li>Inbox</li>
<li>Contact</li>
<li>Accounts</li>
</ul>
</div>
<div>
<ul>
<li>Legal</li>
</ul>
</div>
</header>
</body>
</html>
Instructor's code:
/*main.css*/
html,
body,
div,
nav,
button {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
}
html {
color: #16A2D7;
font-size: 2vw;
}
#sidebar {
height: 100vh;
/* arrange child elements */
display: flex;
flex-direction: column;
justify-content: space-between;
/* format */
border-right: 1px solid #D7DBDD;
width: fit-content;
/*the width*/
}
.sidebar-child {
/* arrange child elements */
display: flex;
flex-direction: column;
}
.sbc-top {
/* format */
padding-top: 2rem;
}
.sbc-btm {
padding-bottom: 2rem;
}
button {
/* format */
color: inherit;
background-color: white;
font-size: 1rem;
height: 3rem;
width: 10rem;
/*the width*/
text-align: left;
padding-left: 2rem;
cursor: pointer;
}
button:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<!--<link rel="stylesheet" href="main.css">-->
</head>
<body>
<div id="sidebar">
<nav class="sidebar-child sbc-top">
<button>Inbox</button>
<button>Contact</button>
<button>Accounts</button>
</nav>
<div class="sidebar-child sbc-btm">
<button>Legal</button>
</div>
</div>
</body>
</html>
The chief thing that is causing you issues is this rule:
header {
width: 10vw;
}
This means, no matter what, make my <header> have width equal to 10% of the width of the viewport. This doesn't account for size of the content within. Take a look at your professor's rule for the #sidebar, it uses width: fit-content which doesn't limit the size of the container.
An additional issue is that you are using:
li a {
display: block;
}
Which means the <a> are going to try and eat as much space as they. Normally, they are inline which causes them not to try to fill out width. Depending on what presentation you are trying to make, you should remove the width: 10vw; and the display: block; to start.
I'm sure I have made some kind of really obvious stupid mistake here but it's been bugging me for a while now and I just cannot figure it out no matter where I look.. I am just practicing with a very basic, boring site and I need the image to be responsive in the section underneath the header, but for some reason no matter what I do, I just can't get it to work.
Sorry if this has been answered, I had a look and couldn't find anything exactly the same. If anyone could shed some light on this for me I would be very appreciative. Thanks in advance.
HTML:
<html>
<body>
<header>
<div class="container">
<div class="brand">
<img class="brandImg" src="https://photos-1.dropbox.com/t/2/AACo_XuN80WW6m3RltLuUDD-Koivyw205OCV55h43hevVQ/12/184045382/png/32x32/1/_/1/2/network.png/EKPi4YsBGMICIAIoAg/u6N5dEYvNDRNysVhT6Arx-eKOa64tOkilzRp8K3e93Y?preserve_transparency=1&size=1600x1200&size_mode=3" alt="Brand Image">
<h3 class="mainTitle">Network Solutions</h3>
</div>
<nav>
<ul class="navBar">
<li>About |</li>
<li>Portfolio |</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="heroImg">
<div class="container">
</div>
</div>
</section>
</body>
</html>
CSS:
/* MAIN STYLES */
.container {
max-width: 60%;
margin: 0 auto;
}
/* HEADER */
header {
height: 100px;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.brand {
float: left;
display: inline;
margin-top: 20px;
}
.brandImg {
height: 4em;
width: 4em;
float: left;
margin-bottom: 5px;
}
.mainTitle {
font-family: 'IBM Plex Mono', monospace;
line-height: 1.2em;
position: relative;
left:8px;
top: -5px;
}
/* MAIN NAVIGATION */
ul {
float: right;
}
li {
margin-top: 15px;
float: left;
display: inline;
font-size: 40px;
padding-left: 15px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: gray;
}
/* HERO SECTION */
#showcase {
width: 100%;
height: 100%;
}
.heroImg {
background-image: url("https://photos-1.dropbox.com/t/2/AADgiVKPX---q_yzz3R6QXjMuvUF9x1suRGMjLMV8QkZVQ/12/184045382/jpeg/32x32/1/_/1/2/hero.jpeg/EKPi4YsBGMICIAIoAg/-UTK8zUqda_wA3F-VrZAdIZvo84OHHGWCbLEcdCi1K8?size=1600x1200&size_mode=3");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Codepen link
The logo image in your pen is throwing a 403 error. Generally speaking, you can make an image responsive with the following CSS:
img {
display: inline-block;
max-width: 50px; /* Width of your image */
max-height: 50px; /* Height of your image */
width: 100%;
height: auto;
}
Here is a JSFiddle example. Drag the window to see how the image reacts.
img {
display: inline-block;
max-width: 650px;
max-height: 250px;
width: 100%;
height: auto;
}
<img src="http://via.placeholder.com/650x250" alt="Stack Overflow Test Image" />
Here's another example using Flexbox making the image responsive relative to another element:
#test {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
img {
display: inline-block;
max-width: 250px;
max-height: 150px;
width: 100%;
height: auto;
}
h1 {
margin-left: 15px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
<div id="test">
<div id="logo">
<img src="http://via.placeholder.com/250x150" alt="Stack Overflow Test Image" />
</div>
<h1>This is a Test Title</h1>
</div>
Could not yet find this exact issue that I am having addressed, so it here goes:
I am trying to create a nav bar with a heading on the left-hand side, and some nav items on the right. I also want the nav to be centered on the page, with a width of 960px. I am trying to accomplish 2 additional things:
1.) The nav bar should be fixed to the top so that it does not disappear when you scroll.
2.) The spacing between the heading and the nav items should be the first to disappear when you minimize the screen. Currently, the items do not flex at all.
I am able to get one of these two things accomplished at a time, but not both at the same time. Any help would be most welcome, thank you.
html {
font-family: helvetica;
font-size: 18px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.banner {
background-color: aqua;
opacity: .5;
border-radius: 10px;
position: fixed;
}
.header {
display: flex;
justify-content: space-between;
height: 4rem;
align-items: center;
width: 960px;
}
.container .banner .header h1 {
margin-left: 2.5rem;
}
.container .banner .header .nav ul {
display: flex;
width: 200px;
justify-content: space-between;
text-decoration: none;
margin-right: 2.5rem;
}
.container .banner .header .nav ul a {
color: black;
list-style-type: none;
text-decoration: none;
}
<div class="container">
<div class="banner">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</div>
You can use align-items: left for your heading and align-items: right instead of using margin
* {
padding: 0;
margin: 0;
}
html {
font-family: helvetica;
font-size: 18px;
}
.container .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
height: 4rem;
align-items: center;
width: 100%;
position: fixed;
background: aqua;
opacity: .7;
border-radius: 10px;
}
.container .header .nav ul li {
display: inline-flex;
}
<!DOCTYPE html>
<html>
<head>
<title>My Puppy</title>
<link href="./resources/reset.css" type="text/css" rel="stylesheet">
<link href="./resources/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</body>
In your css file:
remove in .header
.header {
width: 960px;
}
add in .banner
.banner {
max-width: 960px;
width: 100%;
}