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
Related
So I'm trying to make a navigation bar (or header?) similar to what I've seen online from another website.
how i wanted it to be
I've successfully made the logo image centered. But I'm having trouble styling the buttons (like About, Blog, etc.), whether should I use floats or another type of style?
Here's my code to make the image centered:
.nav {
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fdf4e4;
}
.nav .logo {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home_btn {
margin: 0;
width: 85px; height: 85px;
background-image: url(drone.png);
background-size: cover;
background-color: black;
border: transparent;
}
<div class="nav">
<div class="logo"><button id="home_btn"></button></div>
</div>
But once I insert the text, the image is no longer centered.
.nav {
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fdf4e4;
}
.nav .logo {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home_btn {
margin: 0;
width: 85px; height: 85px;
background-size: cover;
background-color: black;
border: transparent;
}
.navbar {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.navbar .about, .services, .help, .partner {
font-family: 'Sifonn Pro';
background-color: transparent;
border: transparent;
cursor: pointer;
font-size: 20px;
padding: 0 16px;
color: #061925;
text-align: center;
}
<div class="nav">
<div class="logo"><button id="home_btn"></button></div>
<div class="navbar">
<button class="about" type="button" onclick="window.location.href='.html'">About Us</button>
<button class="services" type="button" onclick="window.location.href='.html'">Services</button>
<button class="help" type="button" onclick="window.location.href='.html'">Help Centre</button>
<button class="partner" type="button" onclick="window.location.href='.html'">Be Our Partner</button>
</div>
</div>
I want my 'About Us' and 'Services' to be on the left side of the navbar, while the 'Help Centre' and 'Be Our Partner' to be on the right side. Does anyone know how to do it? With floats or anything is fine, as long as I could get it similar to the sample I got from another website online.
create a 3 column grid with grid-template-columns: auto min-content auto; that way, the logo will be centered and only use as much space as needed. the left and right sided columns will take the remaining space equally.
nav {
display: grid;
grid-template-columns: auto min-content auto;
white-space: nowrap;
}
nav div:nth-child(1) {
text-align: left;
}
nav div:nth-child(1) a {
margin-right: 15px;
}
nav div:nth-child(3) {
text-align: right;
}
nav div:nth-child(3) a {
margin-left: 15px;
}
.logo {
width: 1em;
height: 1em;
background-color: black;
}
<nav>
<div>
About Wolfin
Blog
Contact
</div>
<div>
<div class="logo"></div>
</div>
<div>
Collection
Stories
Shops
</div>
</nav>
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'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;
}
I have this code and I want the css code with a max-width: 780px, the .second in a line alone because it is the logo, and the .first and .third on the line below. I don't know how to do it.
Normally, this elements are Ordered in one line with a wider width than 780px. The normal order: first, second, third
The order I want with a max-width: 780px:
.................second..............
........first........|.......third......
<header>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</header>
header {
background: #FFF;
width: 100%;
height: 160px;
}
.SearchBar {
width: 30%;
height: 130px;
display: inline-block;
float: left;
text-align: center;
}
.SearchBar:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.SearchBar>p {
padding-right: 0;
padding-left: 0;
display: inline-block;
}
.SearchBar>p>input {
background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent;
background-position: 90% 50%;
width: 230px;
height: 50px;
border: 1px solid #c8c8c8;
font-family: FuturaLight;
text-indent: 20px;
font-size: 18px;
}
.SearchBar>p>input:enabled {
cursor: text;
}
.logo {
width: 40%;
height: 130px;
display: inline-block;
margin: auto;
text-align: center;
}
.logo:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.logo a {
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
}
.shoppingcar {
width: 30%;
height: 130px;
display: inline-block;
float: right;
text-align: center;
}
.shoppingcar:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.cartletter {
padding-right: 0;
padding-left: 0;
display: inline-block;
font-family: FuturaLight;
}
<header>
<div class="subheader"></div>
<div class="SearchBar">
<a> FIRST</a>
</div>
<div class="logo">
<a> SECOND</a>
</div>
<div class="shoppingcar">
<p class="cartletter">
<a> THIRD</a>
</p>
</div>
</header>
hmm, well since there's no css code and jsfiddle, I'm assuming this can do the trick ? try it on and let me know please ?
#media all and (max-width: 780px) {
.second {
display:inline-block;
}
.first {
display:inline;
float:left;
}
.third {
display:inline;
float:right;
}
}
Trying to position a horizontal menu over an image.
I have it positioned over the image as of now, but I can't seem to center the li elements to the middle of the screen.
Here is the HTML:
<div id="banner">
<img src="security-people-interior.jpg"/>
</div>
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>About</li>
<li>Products</li>
<li>Monitoring</li>
<li>Testimonials</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</div>
The CSS3:
#banner {
display: block;
margin-left: auto;
margin-right: auto;
}
img, #banner {
width: 100%;
}
#menu-outer {
background: url(images/bar-bg.jpg) repeat-x;
z-index: 100;
position: absolute;
top: 25%;
width: 100%;
}
#menu {
????
}
ul#horizontal-list {
/*list-style: none;*/;
}
ul#horizontal-list li {
display: inline;
}
#menu a {
text-decoration: none;
margin: 10px;
float: left;
color: black;
padding: 2px 5px;
text-align: center;
white-space: nowrap;
}
#menu a:hover {
color: #fff;
background: red;
}
The only thing I am able to use is float in #menu{} in the css, but obviously float doesn't have centering.
CSS3 isn't my particular favourite to deal with, so any help would be greatful thanks.
Here are two options:
Set the display of the #horizontal-list element to inline-block and then use text-align: center on the parent element in order to center it.
Example Here
#menu {
text-align: center;
}
#horizontal-list {
display: inline-block;
}
Alternatively, using flexboxes:
Example Here
#menu {
display: flex;
justify-content: center;
}