So I've seen several answers to this question here and around the web, but I cannot seem to get it to work for me.
This is first time coding anything beyond the basics (and I only have a week to do it for a class).
I've tried using two ul's with a div in the middle, but one ul with the logo image as a li seems to get me the closest. My problem is that while the logo is actually centered, I can't get the other li's to be centered around it while getting the whole nav bar itself to be centered on the page.
The site will also have to be responsive (a whole other issue, I know, but I don't want to gunk up my code with a solution that will be incompatible with a responsive design). I'm also not sure hoe to get the logo and the other li's to be vertically centered. I've tried 'vertical-align: middle' but without any success. Thanks so much for any help.
Here's my HTML.
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div>
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li{
display: inline-block;
padding: 60px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
You can go to the site [here].
Don't know why are you using logo in menu. You can place it to the center using position property. Using your current structure responsive version is also difficult.
For desktop version, add below code in your css
.nav ul li:nth-child(3){
width:250px;
}
This will create a proper structure. But I would suggest, not to use current structure to center a logo. Separate logo from your menu and place it in separate div and position it using position property.
Here is the update fiddle http://jsfiddle.net/JtfBP/
#logo {
height: 60px;
padding: 0;
width: 250px;
}
Can you make the background of the header the logo instead and not make it repeat?
.header {
width: 965px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
background:url('Images/pantry logo.png') center;
}
Use separate div layers instead of a ul list, that utilise the same div class (div.navigator) with the same height as the header, then use display:float and float: left in your css.
div.navigator {
list-style: none;
text-decoration: none;
width: 192px;
height: 200px;
padding: 60px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
display: float;
float: left;
}
so your header code is now:
<div class="header">
<div class="nav">HOME</div>
<div class="nav">MENU</div>
<div class="nav"></div>
<div class="nav">CONTACT</div>
<div class="nav">ABOUT</div>
</div>
Related
As you read on the title, I've been trying to make a navigation bar but I'm having several issues I haven't experienced before. I even made a list:
Buttons sticking into the navigation bar even though they don't belong in the div class.
Navigation Bar
Well now, I've seen this before, but I've gotten a bit rusty on HTML and don't quite remember how to fix it. If you can't tell, the links are not lined up with the text/logo. How can I fix this? I'm trying to make it slim.
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
width: 100%;
left: 0;
top: 0;
position: fixed;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
It is sticking because of position: fixed;. The button doesn't see the .navigation-bar. Add padding to a parent that contains these elements.
h1 needs to have display:inline-block;. ul is just below h1 now.
I have a bigger HTML header containing a menu and a large picture.
I would like to place text on the image somewhere as a "title" to the page.
Whenever I try to add my <h1> tag somewhere, it positions the text above the menu and it's not what I want.
I would like to be able to position any form of tags somewhere in the picture and I am struggling to find a solution as my code is not efficient to do this.
I am starting to understand what my problem is but I cannot find a solution.
Here is a template of what's going on. I want to place the text somewhere next to my face (as weird as it sounds lol), anyone?
body {
font: 15px/1.5 Gravity, Arial;
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 800px;
background: url('../img/web_bg.jpg');
background-size: cover;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
z-index: 100;
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #fff;
z-index: 100;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
nav ul li a:hover {
background-color: #white;
border: none;
color: #000;
text-align: center;
opacity: 0.6;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<header id="home">
<h1>MOHANAD ARAFE</h1>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">MOHANAD ARAFE</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
You are going good, cheers for that. For the problem you are facing I would suggest you to play with z-index. It is a CSS property, and defines the elements as layers. Element with greater z-index will be the top most layers, followed by the elements with lesser z-index. I would suggest you to set z-indec of image to lowest, and make the content above in another container, and set the z-index of this container to a higher range, this should solve your problem.
Here's more reference on z-index
Happy Coding.
I would suggest using grid in these kind of situations where you have to deal with position of elements. A crash course on grid will be the best option. I personally use it a lot and don't have to care about anything other than z index.
You can use position: absolute; for the h1 tag and use top value in %, and left value in %
h1{
position:absolute;
top: value in %;
left: value in %;
}
header{
position:relative;
}
Note: apply a class name for h1 and apply css for that class or else it might affect h1 tag in sub pages.
After having had troubles trying to display three containers in a row with the middle one being centered on the page and the side ones being of a fixed width I came across the CSS Flexbox model, mentioned in a Stackoverflow question.
Using display: flex instead of float: left or displaying the containers as inline-box whilst messing with margin seems to be working quite well, with way fewer lines of code.
However, I ran into an issue with flexbox that I can't seem to solve on my own:
I want a container #menubar to hold three containers in a row: #logo, nav and #search.
<div id="menubar">
<div id="logo"></div>
<nav>
<ul>
<li>Articles</li>
<li>Images</li>
<li>About</li>
<li>Disclaimer</li>
</ul>
</nav>
<div id="search"></div>
</div>
The #logo-container as well as the #search-container are of a fixed size (width: 80px, height: 80px). One should be placed at the very left side of the #menubar-container and one should be placed at the very right.
The nav-container should be centered within the middle of the #menubar-container. Basically the positioning is working and I get the desired layout:
[#logo left] [nav centered] [#search right]
However, for some reason the #logo-container is being displayed at the specified dimension of 80px width * 80px height while the #search-container is being displayed at 79px width * 80px height, even through the CSS looks like:
header div#menubar div#logo {
width: 80px;
height: 80px;
background-color: orange;
}
header div#menubar div#search {
width: 80px;
height: 80px;
background-color: orange;
}
To confirm I made a screenshot and zoomed in with Photoshop, selecting the container to view its dimensions.
I can't figure out why the #search-container is missing one pixel in width.
Here is a JSFiddle with the HTML and CSS I am using.
Am I using flexbox correctly?
How do I fix it so both side-containers are 80x80 pixel in dimensions?
Am I using flexbox correctly?
Yes and no
Instead of width you should, ideally, be using the flexshorthand property combining, flex-grow, flex-shrink and flex-basis.
header div#menubar div#logo {
flex: 0 0 80px;
height: 80px;
background-color: orange;
}
Alternatively, you can ensure that the element doesn't shrink by using width AND the flex-shrink value of 0
* {
margin: 0;
padding: 0
}
body {
background-color: #dfe3e5;
}
header div#top {
height: 22px;
/*background-image: url('../img/colorbar.png');
background-position: top left;
background-repeat: repeat-x;*/
background-color: gray;
}
header div#menubar {
background-color: #1c2227;
display: flex;
justify-content: space-between;
}
header div#menubar div#logo {
flex: 0 0 80px;
height: 80px;
background-color: orange;
}
header div#menubar nav {
display: table;
text-align: center;
background-color: darkred;
}
header div#menubar nav ul li {
display: inline-block;
margin-left: -4px;
list-style-type: none;
line-height: 80px;
text-align: center;
}
header div#menubar nav ul li a {
outline: 0;
display: block;
text-transform: uppercase;
padding: 0px 20px;
font-size: 1.1em;
font-family: 'Raleway', "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #eee;
text-decoration: none;
}
header div#menubar nav ul li a:hover {
color: #000;
background-color: orange;
}
header div#menubar div#search {
flex: 0 0 80%;
height: 80px;
background-color: orange;
}
<header>
<div id="menubar">
<div id="logo"></div>
<nav>
<ul>
<li>Articles
</li>
<li>Images
</li>
<li>About
</li>
<li>Disclaimer
</li>
</ul>
</nav>
<div id="search"></div>
</div>
</header>
Then you get the right result
I'm trying to create a simple navigation that consists of five list items. All of which are 20% in width. There are two items containing text, a centered item containing the site logo as an image and then another two list items containing text.
My issue is that when I have an image in the third item, the text in the surrounding list items gets bumped down. I can't see any margins or anything acting upon them or any reason why this should be happening and no matter what I try, it doesn't seem to work.
Any ideas or an explanation would be much appreciated :)!
JSFiddle
HTML
<div class="navigation">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Categories</li><!--
--><li><img src="http://www.placehold.it/140x64"></li><!--
--><li>Contact</li><!--
--><li>Personalise</li>
</ul>
</div>
</div>
CSS
.navigation {
top: 0;
width: 100%;
height: 64px;
position: fixed;
background: #ffffff;
border-bottom: 1px solid #dfdfdf;
}
.navigation .container {
width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
.navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navigation li {
width: 20%;
height: 64px;
display: inline-block;
text-align: center;
font-size: 16px;
}
Add or replace this CSS properties in your .navigation li rules :
display: table-cell;
vertical-align: middle;
Example
Here I have a nav bar set up with a centered logo. The only problem is that I can't get it to look quite right with spacing. The logo is set to 'position: absolute' 'left: 50%' and 'margin-left: -125px' so that is always in the center. Now I just need to get the text balanced around it in a more symmetrical way, but I can't seem to figure out how to do so.
Here's the HTML
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div><!--end header-->
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li {
display: inline-block;
padding: 105px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
#logo {
height: 60px;
padding-top: 40px;
width: 250px;
}
You can go to the site here.
Here's what I would do, and this is just the way I would normally go about things.
I would take the padding of the li, then add the 105px padding to the top of the header (or nav). Next, add some arbitrary margin-right to each li element (say 48px), while of course setting li:last-child to margin: 0; Next take the padding-top and the height off the li#logo and change it to this:
#logo { width: 250px; position: relative; }
Finally, just use a transform to center the logo if you are going to use absolute positioning. This essentially does the same thing as the margin-left, but it is a little more flexible. So the image css should look like this:
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I used this code and it worked perfectly for me. I can make you a fiddle or something also if you are having trouble still.