This question already has answers here:
CSS child selector higher precedence than class selector?
(3 answers)
Closed 1 year ago.
Ok, sorry in advance for the question for being silly and very specific, but I just cannot figure this out.
I am simply trying to style two <li> elements that are positioned as such: <nav><ul><li>text</li></ul></nav>. Also, I want to style the footer to be white.
I don’t know what is wrong in my code, what is preventing it from happening.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100vh;
font-family: 'Roboto', sans-serif;
color: #ffffff;
background-color: #0e2a47;
}
.Titlebanner {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-color: #48ffd5;
border-radius: 1em;
}
.Titlebanner h1>a {
color: #ffffff;
font-weight: 700;
font-size: 2em;
text-decoration: none;
border-bottom: 2px solid #48ffd5;
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
padding: 0;
}
nav li {
list-style: none;
display: flex;
margin: 2em;
padding: 1em;
border-radius: 1em;
border: 2px solid #48ffd5;
}
/* --------------Here is what I’ve tried to modify but doesn’t work-------*/
a:hover,
a:visited,
a:link,
a:active {
color: white;
text-decoration: none;
}
/*---------------------------------------*/
.body {
display: flex;
flex-direction: row;
}
.ranking {
width: 8%;
height: 4em;
background-color: grey;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0.5em;
}
.ranking>ul {
padding: 0;
display: flex;
flex-direction: column;
}
.ranking>ul>li {
margin: auto
}
.Analysis {
display: flex;
flex-direction: row;
margin: auto;
width: 80%;
justify-content: center;
text-align: justify;
}
/*---------------------- and here for the footer -------*/
footer>a {
display: block;
width: 30%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: white;
}
/*-----------------------------------------------*/
<body>
<header>
<div class="Titlebanner">
<h1>Impact of Privacy Policies on Users’ Lives</h1>
</div>
<!------------- here is the part I’m trying to style----->
<nav>
<ul>
<li>Results</li>
<li>Analysis</li>
</ul>
</nav>
<!----------------------------------------------------->
</header>
<div class="body">
<div class="ranking" id="ranking">
<ul>
<li>First Place</li>
<li>Second Place</li>
</ul>
</div>
<div class="Analysis">
text
</div>
</div>
</body>
<!----------------- and the footer I’m trying to style as well------->
<footer>
<span class="">
About us
</span>
</footer>
<!------------------------------------------------------------->
You are trying to access the a tag that is a direct child in your footer use footer a or footer > span > a instead
I am not sure why your header styling is not working, I guess it has to do with specificity try simplifying your selector header > h1 > a to header a and change a:hover to header a:hover
also try not to use capital symbols when naming classes
Related
I have a navbar inside a header tag. the header tag is flex. the navbar too. in the navbar i have three a tags with the display value inline-block; and a padding in the height and width. So far so good. When i hover the links the hover effect is shown over the whole height.
The problem: If I add an image to the first link, I can't make the image higher than 10 px because the padding affects the entire navbar height. What I do not want.
Question: How can I add the image to the link without it affecting the height of the navbar?
My code
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<div class="flex">
<div>
<img src="https://via.placeholder.com/30">
</div>
<div>10000</div>
</div>
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
expected
body {
margin: 0;
pading: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px; /* Add a top margin to avoid content overlay */
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
xca
</main>
</div>
Use flex behavior to align and stretch instead of additional markups
In the code snippet below, I removed the extra markup in the first a element that contains the img. Instead, I made all a tags display: inline-flex and removed vertical padding in the first one. Then, using the parent nav element's align-items property, I ensured each a tag has the same full height for consistent hover effect.
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: stretch;
}
.navbar a {
display: inline-flex;
}
.navbar a {
color: #f2f2f2;
justify-content: center;
align-items: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:first-of-type {
padding-top:0;
padding-bottom:0;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<img src="https://via.placeholder.com/30">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
My header should be fixed on the page so i couldn't use float:right;. I'm %150 newbie around here. Logo should be on right side of the navbar and also responsive. I tried margin, float and other flex properties. I'm just going to be mad. Where is the mistake.
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
The issue is mainly caused because you nesting so many flexboxes within each other. As such the elements will not span the entire available width automatically.
Give the nav tag a width of 100% to fill out the entire containers width: #nav-bar { width: 100% }
to align the logo to the right within a flexbox use margin-left: auto: .header-logo { margin-left: auto; }
Also you could improve your code by removing the ID from the nav element and target the nav element directly. As semantically you should only have one nav element it would be unecessary to asign an id to it. Same rule also counts for the header element.
Then you could remove display: flex; from the header which has only one child element in the first place and as such is useless. IMHO it would be smarter though to close the nav with the ul as the logog is semantically not part of the navbar.
Last but not least you could remove flex-direction: row as it is the default value anyways.
#nav-bar {
width: 100%;
}
.header-logo {
margin-left: auto;
}
/* original CSS */
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
I also created a Codepen for you where I corrected the code to be semantically correct and to shroten it to the necessary lines: Codepen
When I create a new div, the second one, whether it be an image or text. It overlaps the first div container. I figured it may be something to do with the display: flex;, but I'm not sure. Also I am super new so sorry if this is elementary.
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
.container {
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container li {
display: inline;
text-decoration: underline;
justify-content: flex-end;
margin-right: 20px;
}
.header-image {
height: 50px;
margin-left: 10px;
}
.container li:hover {
text-decoration: none;
cursor: pointer;
color: darkgray;
}
<div class="container">
<img class="header-image"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
<div>
<p>Hello</p>
</div>
Thank you.
It's because your container has positioned: fixed; assigned to it. If you add a margin to your second div and apply top: 0 to your container you can push it down without affecting your container element like below:
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
.container {
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
top: 0rem; /* force container to the top of the page */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container li {
display: inline;
text-decoration: underline;
justify-content: flex-end;
margin-right: 20px;
}
.header-image {
height: 50px;
margin-left: 10px;
}
.container li:hover {
text-decoration: none;
cursor: pointer;
color: darkgray;
}
div:nth-of-type( 2 ) {
margin-top: 4rem; /*give the second div top margin to push it down */
}
<div class="container">
<img class="header-image"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
<div>
<p>Hello</p>
</div>
just remove position: fixed form .container or if you wants it to be fixed you can add z-index: 1
Your second div ('Hello' block) overlaps first div(header container), because first div has position: fixed style.
When you apply position: fixed or position: absolute to element, the element is become removed from the normal document flow, and no space is created for the element in the page layout(https://developer.mozilla.org/en-US/docs/Web/CSS/position).
Since div is removed from document flow it doesn't take any space in document, imagine that div is flying on another separate layer.
If you want to keep position: fixed property you need to compensate it's height by applying:
padding-top: 69px to div's parent -> body.
and
top: 0 to .container to make header stick to the top of the screen;
This way all next elements will have right position from beginning and you will not need to offset each of them.
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
/* HERE */
body {
padding-top: 69px;
}
.container {
height: 69px;
border-bottom: 1px solid seashell;
/* HERE */
top: 0;
position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container li {
display: inline;
text-decoration: underline;
justify-content: flex-end;
margin-right: 20px;
}
.header-image {
height: 50px;
margin-left: 10px;
}
.container li:hover {
text-decoration: none;
cursor: pointer;
color: darkgray;
}
<div class="container">
<img class="header-image"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
<div>
<p>Hello</p>
</div>
<div>
<p>Second Hello</p>
</div>
I am a total beginner in coding & try to create a webpage for a student project, using React.
I have a problem while creating the navbar for the page. How do I position the items (Home, Project, Team, Kontakt) to the right side of the bar?
This is what it currently looks like:[1]: https://i.stack.imgur.com/gUJPi.png
Here is the code I am currently using:
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);
& scss code for the container and the navbar:
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
}
and
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F, 30%);
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 20px;
list-style: none;
float: right;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
Thanks in advance for your help! :) (
Wrap you left elements and use flexbox
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__left">
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);
I would add flex: 1 to the .navbar__title. It will push everything after it to the right as much as it can.
Use flexbox for the items. I did change the code a bit, and made it HTML-CSS friendly, so adapt it for React (className, RouterLinks etc).
Summary: The Nav has display: flex applied and it has 2 child elements (Logo+Title and Menu), and I added justify-content: space-between.
In the <ul> class, I added another display: flex so the items are behaved as a row. By default, the flex-direction is row. If you want anything as column, you must add flex-direction: column.
Here is a working snippet:
* {
list-style: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar__navigation-items ul {
display: flex;
}
.navbar__navigation-items ul li {
margin-right: 10px;
}
<nav class="navbar">
<div class="container">
<div class="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div class="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div class="navbar__navigation-items">
<ul>
<li>Home</li>
<li>Project</li>
<li>Team</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
All you need to do, is to add margin-left: auto for your navbar__navigation-items style.
That will position your navbar__navigation-items to the right and push everything else within the same container to the left.
Another option would be to use flexbox. For your container apply display: flexbox to it. and add justify-content: space-between; and it will also work. But this will control all other elements within container to behave based on that call.
Check below, I've done it and all works.
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F, 30%);
}
.container {
max-width: 115rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
margin-left: auto;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 20px;
list-style: none;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
<nav class="navbar">
<div class="container" >
<div class="navbar__title">
<h2>Our project</h2>
</div>
<div class="navbar__navigation-items">
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
</div>
</div>
</nav>
there is multiple ways to do it but adding
float: right
to
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
float: right;
}
should do the trick,
might need to add width: 100% to the container aswell
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
Edit:
i agree that float is not the best tool but i suggested it because he already use it in his code and it required only css changes but https://stackoverflow.com/a/63427704/8382007 answer with width to 100%
.container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
surely is better
I'm having trouble displaying my child div tags side-by-side while the parent div tag is display flex, if anyone can show me how to get this to work, that would be great! Here's my code sample:
css
.wrapper{
z-index: +1;
display: flex;
flex-direction: column;
height: 100vh;
align-items: baseline;
justify-content: space-around;
}
.wrapper .logo{
outline: 1px solid #fff;
width: 400px;
height: 150px;
}
.wrapper .logo img{
width: 100%;
}
.wrapper .discription{
width: 320px;
outline: 1px solid #fff;
}
.wrapper .discription h1{
color: #fff;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.wrapper .links{
outline: 1px solid #fff;
}
.wrapper .links nav ul{
list-style-type: none;
list-style: none;
padding: 0;
margin: 0;
}
.wrapper .links nav ul li{
display: block;
}
.wrapper .links nav ul li a{
font-size: 20px;
color: #fff;
padding: 10px;
display: block;
text-transform: uppercase;
text-decoration: none;
}
html
<div class="wrapper">
<div class="logo">
<img src="images/fire-engine.png" draggable="false">
</div>
<div class="discription">
<header>
<h1>Best non-host mw2 menu cheat engine [cex/dex]</h1>
</header>
</div>
<div class="links">
<nav>
<ul>
<li>home</li>
<li>pricing</li>
<li>support</li>
<li>login</li>
</ul>
</nav>
</div>
</div>
what I'm trying to do, similar to this:
Just keep display: flex and remove flex-direction: column in your .wrapper because flex-direction by default is row when you have display: flex.
.wrapper{
z-index: +1;
display: flex;
height: 100vh;
align-items: baseline;
justify-content: space-around;
}
https://jsfiddle.net/nL27af3z/1/