I'm trying to align all navigation links, besides the logo, to the right side of the container/navigation. I want to keep 1rem margin on both sides so that the content has some space to breathe.
I've tried using the code below but nothing on the page changes:
.menu:not(:first-child){
text-align: right;
}
<body>
<div class="body-wrap">
<header class="header">
<nav role="navigation">
<ul class="menu">
<li class="home-link"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></li>
<li>About</li>
<li>Writing</li>
<li>Speaking</li>
<li>Projects</li>
</ul>
</nav>
</header>
</div>
</body>
* { box-sizing: inherit; margin: 0; padding: 0; }
body {
position: relative;
line-height: 1.5em;
min-width: 320px;
margin: 0 auto;
color: #222222;
border: 30px solid #ffffff;
background-color: #f8f7f3;
}
.body-wrap {
display: flex;
min-height: 100vh;
display: box;
}
.header {
width: 100%;
max-width: 960px;
margin-right: 1rem;
margin-left: 1rem;
}
.menu {
display: flex;
position: absolute;
top: -0.83rem;
width: 100%;
max-width: 960px;
}
.menu:not(:first-child){
text-align: right;
}
li {
flex-grow: 1;
position: relative;
margin-right: 1em;
display: inline-block;
}
I expect all the nav links to align to the right when using the :not(:first-child) selector.
This:
.menu:not(:first-child)
selects class menu items that aren't a first child.
What you want is:
.menu :not(:first-child)
which selects non-first-child elements within a .menu class.
Notice the space.
Or better yet, make it more obvious what you really mean:
.menu li:not(:first-child)
You might just have to change to this if all you are looking to do is align the text to the right.
.menu li:not(:first-child){
text-align: right;
}
Related
I have tried to use the margin and padding tags, but I can never get it right because screen sizes change, and that makes the arrangements change. Also tried using flex
I am trying to make a navigation bar (top) in HTML and CSS, but I want to make all the tags uniform in spacing so it looks nicer.
Right now it looks like this:
Here is my HTML code:
<div class="header">
<div class="container">
<h1 class="logo"></h1>
<div class="nav">
<ul>
<li>Home</li>
<li>History</li>
<li>Where to Eat</li>
<li>Places to visit</li>
<li>Beauties of Nature</li>
<li>How to navigate Seoul</li>
</ul>
</div>
</div>
</div>
CSS:
.container {
width: 80%;
margin: 0 auto;
}
.header {
background: #293380;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
.nav {
float: right;
}
.nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
flex: 1;
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
.nav a {
color: #F0EFF7;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav a:hover {
color: #953D60;
}
.nav a::before {
content: '';
display: block;
height: 5px;
background-color: #F7D9F1;
position: absolute;
top: 0;
width: 0%;
in your css file, under .nav ul, write justify-content: space-between;, which spaces all the elements evenly.
I really recommend you look further into justify-content, since its the main way to space out the content the way you want. Really good tool
the layout I'm trying to achieve
So Im trying to achieve a layout of header shown in the picture below using HTML and CSS. I've started with doing the header and put the logo in the centre and the list business but I'm struggling with putting the logo in the centre and the list business in the corner. I've tried using text align but it hasnt worked and im sure its the float but im not sure the code i should use.
Heres my code:
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #ffe9e3;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: center;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav>
<ul>
<li>List Your Business</li>
</ul>
</nav>
</div>
</header>
Could make the header a flexbox and use justify and align to center the logo. Then make the nav absolute positioned to put it up in the top right corner.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
nav {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav>
<ul>
<li>List Your Business</li>
</ul>
</nav>
</div>
</header>
There are a couple of ways you can achieve this, but without your actual source code it is hard to work with. If you aren't using flex or grid, then I would say to set the parent element (The header container) to position relative, and then set the logo container itself to position absolute. You can then change the positioning as shown.
#hContainer {
position: relative;
width: 100%;
height: 150px;
background: skyblue;
}
#logo {
position: absolute;
color: white;
font-size: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 10px 12px;
}
<div id="hContainer">
<div id="logo">Logo</div>
</div>
I have created a header with one div as a main menu of website and added into it some divs as main menu items. My question is: how to center vertically and horizontally inner divs which are headers of main menu placed in main menu items? I have tried many solutions like transformations and flex style of display but unfortunately nothing works. Why there is not something like Horizontal / VerticalAlignment from XAML in CSS?
body {
margin: 0;
}
header {
height: 50px;
background-color: lightgrey;
}
#main-menu {
margin: 0 auto;
width: 1000px;
height: inherit;
}
.main-menu-item {
float: left;
width: 100px;
height: inherit;
}
.main-menu-header {
display: block;
height: inherit;
}
.main-submenu {
width: inherit;
word-wrap: break-word;
/*display: none;*/
list-style: none;
margin-left: -40px;
margin-top: 0px;
}
<body>
<header>
<div id="main-menu">
<div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(0, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(0, 'none')">
<div class="main-menu-header">MenuItem1</div>
<ul class="main-submenu">
<li>SubMenuItem1</li>
<li>SubMenuItem2</li>
<li>SubMenuItem3</li>
</ul>
</div>
<div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(1, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(1, 'none')">
<div class="main-menu-header">MenuItem2</div>
<ul class="main-submenu">
<li>SubMenuItem1</li>
<li>SubMenuItem2</li>
<li>SubMenuItem3</li>
</ul>
</div>
<div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(2, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(2, 'none')">
<div class="main-menu-header">MenuItem3</div>
<ul class="main-submenu">
<li>SubMenuItem1</li>
<li>SubMenuItem2</li>
<li>SubMenuItem3</li>
</ul>
</div>
</div>
</header>
Use the padding top and padding bottom simply?
Try the CSS line-height Property Follor this : https://www.w3schools.com/cssref/pr_dim_line-height.asp
You can use a css old trick, use this:
header{
height:50px;
display:block;
}
#main-menu{
position:aboslute;
top:50px;
margin-top:-25px;
}
Change your CSS to the following -
body {
margin: 0;
}
header {
height: 50px;
background-color: lightgrey;
}
#main-menu {
height: inherit;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.main-menu-item {
float: left;
width: 100px;
/* height: 100%; */
text-align: center;
}
.main-menu-header {
display: block;
height: inherit;
}
.main-submenu {
width: inherit;
word-wrap: break-word;
/*display: none;*/
list-style: none;
margin-left: -40px;
margin-top: 0px;
}
Using flexbox property here to achieve the desired effect
Okay so I'm in the process of learning flexbox but I cannot understand why my navigation title is above the links.
HTML:
<style>
#import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
.box {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: auto;
color: #fff;
}
nav {
font-family: "Oswald", sans-serif;
display: flex;
min-width: 100%;
background-color: #181818;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
max-width: 960px
}
nav a {
display: block;
padding: 1rem;
text-decoration: none;
color: #fff;
font-weight: 400;
transition: all 0.3s ease-in-out;
}
nav a:hover {
color: #343434;
}
.title {
margin: 0 35px 0 10px;
color: #1BC;
}
</style>
<nav>
<div class="container">
<a class="title">Architect</a>
<ul>
<li>Getting Started</li>
<li>Examples</li>
<li>Blog</li>
<li>Forum</li>
</ul>
</div>
</nav>
Container CSS:
.container{
width: 100%;
margin: 0 auto:
max-width: 1200px;
}
Code Pen Link: http://codepen.io/ZoidCraft/pen/XKMewy
I would like the title "Architect" to be align to the left of the links.
You set <a class="title">Architect</a> to display: block; in your css. Block level elements will take up their own line. display: flex; elements will also take up their own line.
To fix your problem you could first remove that display: block; from your nav a style. Then change your nav ul from display: flex; to display: inline-flex;. Now you just need to add some padding back to your nav since everything is display inline now, so add padding: 1em 0; to your nav
Here is an updated CodePen of what I am talking about.
I've a div container which is named headline. In this div there are two elements, a menu bar of type unordered list and a div container. I'll centering horizontally the menu bar, the other div container should dock on the right display side with a margin of 5%. How I can do this, has someone an idea?
Okay here is my litte example from jsfiddle: http://jsfiddle.net/nchm3gyj/
HTML
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="" />
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 60px;
width: auto;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
width: 60px;
height: 60px;
margin-right: 5%;
float: right;
}
#clear {
clear: both;
}
If you want your navigation bar centered in the parent block, here is one way of doing it.
Apply display: inline-block to the .navbar and text-align: center to .headline.
Assuming that you want the navigation bar centered with respect to the full
width of the parent block, you need to take the image out of the content flow.
You can do this by applying position: absolute to the .facebook element.
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
text-align: center;
position: relative;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 60px;
width: auto;
display: inline-block;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
position: absolute;
top: 0;
right: 5%;
width: 60px;
height: 60px;
}
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="http://placehold.it/60x60" />
</div>
I think you might need to position: absolute the facebook image and display: inline-block your menu bar (being centered by the .headline):
http://jsfiddle.net/nchm3gyj/32/
I'm a bit unsure of what you're trying to do, is this it? Applied text-align: center to .headline and display: inline-block to .navbar then position: absolute to .facebook?
http://jsfiddle.net/nchm3gyj/42/