<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
</style>
<body>
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
community! I'm doing basic training on WebDev and ran into a problem with inline positioning.
I created a footer with H3 and nav (ul>li*2). I want H3 to be positioned on the left and li anywhere, but on the same line as H3, in principle (haven't questioned the position relative to the center of the page yet).
Solved the problem through display: inline;, but for each element, but could not find a more elegant solution and without duplication
.class footer {
display: inline;
}
.class h3 {
display: inline;
}
and so on.
Please help me find a competent and elegant solution. Thank you!
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
Try to use flex in order to set the position of elements
footer {display: flex;}
More info here
As said #KristiK, flex is a good way.
But you have a wrong.
.footermenu nav doesn't have sense in your code. It points to nav elements inside .footermenu. So these are appropriate selectors for styling to nav in your code:
nav or .footermenu or nav.footermenu.
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
}
ul {
margin-top: 20px;
display: flex;
}
a {
padding-left: 20px;
}
</style>
<body>
<footer class="footer" style="display: flex">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul style="list-style: none;">
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
Related
Even through the browser shows the css style in the sources, the background color is not displaying. Any thoughts?
.footer {
list-style-type: none;
margin: 20px;
background-color: #009DDC;
}
<div class="footer">
<li>© Cedar Flute, 2022.</li>
<li style="float:right">Web Design: Leagh Branner.</li>
</div>
I think something like this might be closer to what you are looking for...
.footer {
background-color: #009DDC;
padding: 20px;
display: block;
overflow: hidden;
}
ul {
list-style-type: none;
}
li {
float: left;
margin-right: 20px;
}
<div class="footer">
<ul>
<li>© Cedar Flute, 2022.</li>
<li>Web Design: Leagh Branner.</li>
</ul>
</div>
If your color still doesnt want to show you could use
background-color:blue !important;
Using "!important" basically forces the CSS style
It worked fine for me. Are you sure you're CSS file is linked correctly? My file was in a CSS folder and I have this in the HTML head
<link rel="stylesheet" href="css/index.css">
It would be better to use flexbox.
<ul class="footer">
<li>© Cedar Flute, 2022.</li>
<li>Web Design: Leagh Branner.</li>
</ul>
.footer {
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 20px;
background-color: #009ddc;
}
If you still wanted to use float ( would recommend to switch to flexbox) -
<ul class="footer">
<li style="float:right">Web Design: Leagh Branner.</li>
<li>© Cedar Flute, 2022.</li>
</ul>
.footer {
list-style-type: none;
margin: 20px;
background-color: #009ddc;
overflow: auto;
}
or
<ul class="footer">
<li style="display:inline">© Cedar Flute, 2022.</li>
<li style="float:right;">Web Design: Leagh Branner.</li>
</ul>
I have a list of href links that I want to center.
<div id="top-nav">
<ul>
<style>
ul li,
ul li a {
color:black;
font-size:20px;
}
</style>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
So far I've tried
<li style="text-align:center;>Discord Server</li style="text-align:center;>
and
<li><a style="text-align:center;href="Discordserver.html">Discord Server</a style="text-align:center;></li>`
Neither of these worked
Since there are three, is there a way of centering one of the lists and having one on the left and one on the right of the centered one?
Try writing the attached code, it will surely work. And if it doesn't let me know in the comments I will try my best to help you. I have added margin-left: 50%; corrected a bit of CSS.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li{
color:black;
font-size:20px;
margin-left: 50%;
}
</style>
</head>
<body>
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>`
</body>
</html>
You can try
I think it will help
.top-nav , ul {
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
It's unclear what exactly you're trying to achieve based on the question, but try this:
ul {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
margin: 0 20px;
}
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
I also want to note something else since you've said you're new to lists and maybe HTML – you don't need to apply inline styles to both the opening and closing tags, just the opening tags.
Incorrect:
<li style="text-align:center;>Discord Server</li style="text-align:center;>
Correct:
<li style="text-align:center;>Discord Server</li>
This won't actually cause any issues, but it's not valid HTML.
I have a navigation which uses a full width drop down sub-menu (the about drop down) but I am struggling to align the links within the submenu centeraly underneath their parent. I also need this to be responsive so the sub-links stay central no matter the view width.
Could anyone help me by telling me where I am going wrong or what I would need to do to achieve this effect?
Thanks in advance for any help.
.navigation--main li:hover>ul {
display: flex;
justify-content: center;
}
ul.navigation--main li ul {
background: #000;
color: #fff;
display: none;
position: absolute;
top: 114px;
left: 0;
width: 100%;
}
ul.navigation--main li ul li {
padding: 1.5em 0.5em;
}
<div class="navigation--container">
<div class="logo">
<img src="assets/img/Group 85.svg" alt="ORRAA Logo" class="homeLogo" height="78.93" width="260" />
</div>
<div class="navigation">
<ul class="navigation--main">
<li>Home</li>
<li>About
<ul>
<li>
Ocean risk</li>
<li>
About ORRAA</li>
</ul>
</li>
<li>Membership</li>
<li>Governance</li>
<li>Contact</li>
</ul>
<ul class="navigation--social-icons">
<li>
<img src="assets/img/facebook.svg" alt="facebook">
</li>
<li>
<img src="assets/img/instagram.svg" alt="instagram">
</li>
<li>
<img src="assets/img/Path 22.svg" alt="twitter">
</li>
</ul>
</div>
</div>
you can change in css file.. hope this solution help you.
.navigation--main li:hover>ul {
display:flex;
justify-content:center;
width: calc(100vw - 112px);
}
.navigation--main li:hover>ul li{
margin-left:20px;
}
ul.navigation--main li ul {
background: $brand-sky-blue;
display: none;
width: 100%;
}
ul.navigation--main li ul li {
padding:10px;
}
this is example for reference: codepen.io/arpita1030/pen/pMLQME
I do not know if I understood correctly, but here is my proposal
.navigation--main li:hover > ul {
display:flex;
justify-content: center;
position: static;
}
Now the div in question appears right underneath About navigation link and moves rest of the elements further down.
Navigation menu doesn't align to the right. Please help!
** HTML code: **
<nav id="main">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
** CSS code (not working): **
nav#main li {
float: left;
text-decoration: none;
text-align: center;
}
I tried this, but it didn't work:
nav#main {
float: right;
}
Try setting a width to your nav item or setting it's display property to inline block. It's a block level element so by default it takes all the horizontal space that there's available. So if it's 100% wide you can't see where it's aligned/floated.
nav#main {
display: inline-block;
}
or
nav#main {
width: 50% /*for example*/
}
try this you don't need any float ,it works
nav#main ul li {
text-align: right;
text-decoration: none;
display:inline-block;
}
#main{
text-align: right;
}
<nav id="main">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>