I'm struggling with this problem for over an hour and can't get it right, I know these are basics but none solution from google helped, I don't understand what's the problem. I got that navigation bar and I want to vertically center logo and list elements inside it:
<nav id="mainMenu">
<img class="logo" src="images/logo.png" alt="logo" />
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
css:
http://klaunfizia.pl/damian/style.css
Here's the demo: http://klaunfizia.pl/damian/
#edit:
When I put margin-top:50% for #menu why it refers to entire body instead of nav element?
Notice - the class name are different. From your existing style, remove: #mainmenu, #menu, and #menu li. Here is an example the code -> DEMO
Here is your new html:
<ul class="nav"> <img class="logo" src="images/logo.png" alt="logo" />
<li>Home
</li>
<li>About me
</li>
<li>Portfolio
</li>
<li>Contact
</li>
Here is your new CSS:
.nav {
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color:red;
}
.nav li {
display:inline;
}
.nav a {
display:inline-block;
padding:10px;
text-decoration: none;
color: #000000;
}
Since your "nav" element is fixed try wrapping your "ul" element in a div and setting the css of the margin to the distance you desire.
<div style="margin-top:20px">
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
The vertical spacing of block elements can be a bit tricky as they were never intened to behave that way. So some tricks are always required.
You can center them to the middle by making the list and the logo's position relative, than giving them a 50% top and a negative margin with the half of their height. So just add these properties to the existing ones:
.logo {
position: relative;
top: 50%;
margin-top: -25px;
}
#menu {
position: relative;
top: 50%;
margin-top: -10px;
}
use this:
#mainMenu {
height: 80px;
width: 100%;
background-color: #F00;
position: fixed;
line-height: 80px; /* added */
}
#menu {
float: right;
margin-right: 16%;
display: inline-block; /* added */
}
Related
I'm very, very new to HTML and CSS, so sorry for my ignorance! I'm trying to add an image to my header, to go to the left and above the navigation. Any help anyone can give would be amazing!!
I have tried two ways of adding the image, the first using , but it did not show (I could see the image 'content' highlighted in blue on the page when i was in the console, but i couldn't see the image. The second way I used a , then the css below:
body {
background-color:#4A4849;
margin: 0 auto;
font-family:Arial, helvetica, sans-serif;
}
.Logo {
display: inline;
float:left;
width: 100%;
height: 100%;
background-image: url('../Images/Logo.png');
}
header {
text-align: center;
width: 100%;
height: 15%;
background-color: white;
margin: 0;
}
My full CSS includes the below...i feel like the problem is to do with the , as in the console the dimensions show as 1304x0 (but I am able to see the navigation) I therefore tried adjusting the header, which is why it duplicates with the .topnav.(see below) :)
.topnav {
font-weight: bold;
background-color: white;
overflow: hidden;
position: fixed;
top: 0;
left 0;
width:100%;
height:15%;
}
.topnav ul {
list-style-type:none;
overflow: hidden;
margin:0;
padding: 0;
}
.topnav li {
display:inline;
padding: 0px;
margin: 0px;
}
.topnav a {
float: right;
color: #4A4849;
text-align: center;
padding: 20px 10px;
text-decoration:none;
width:10%;
}
It would be great if anyone could help, as I've tried different things based on resources i've found online!
*HTML, in case you need it:
<body>
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
There are a few things that can be changed with how you are setting things up:
I would recommend not making your logo the background-image on a div, when an <img> tag will work better in your case (<img src="path/to/your/logo.png">).
If you do use it as a background-image on a div, you have to remember that background images do not affect the height of an element.
Setting a % height on the .Logo div will also not work, since a percentage height needs to be relative to a containing element and you also set it to an inline element (height will not apply). Since, its parent (header) has as height of 15%, but that element also has no reference to 15% - e.g. 15% of what? The body tag would need to have a height set to 100%.
Only for your logo, I would simply do this:
<header>
<img src="your logo link">
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
If you absolutely want to make it a background-image:
.Logo {
height: whatever your logo height is;
display: block;
background-image: url( ../Images/logo.png );
background-repeat: no-repeat;
}
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
On my website, I want a horizontal menu, which is centered on the page. So, the whole menu should be centred.
At this moment, I can create a horizontal list, but the list still stays at the left side. I want it centered.
Can someone please tell me what to change in my code to center it?
My HTML:
<div class=menu>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
My CSS:
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
div.menu{
display: table;
}
div.menu a {
display: block;
margin-left: auto;
margin-right: auto;
width: 60px;
color: navy;
background-color: #FF0000
}
li{
float: left;
}
Add margin:auto to your div.menu to accomplish this
div.menu{
display: table;
margin:auto;
}
JSFiddle: http://jsfiddle.net/0xb7j9zc/
Check out this fiddle http://jsfiddle.net/ByShine/33sz6nrt/4/
HTML
<div class="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS
ul {
text-align: center;
}
ul li {
display: inline-block;
}
I'm assuming you wish to center the menu (align it to the middle of the page). One approach, and I'm sure there's a few out there, is to wrap the 'menu' div into another div tag and set the align attribute to center, like so:
<div align="center">
<div class=menu>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
Here's an example: http://jsfiddle.net/q9ae01qe/
The <nav> should be aligned to the left, below the logo and slogan. However, despite attempting to do so with both margin and padding it remains above the logo and centered on the page. Any help with how to rectify this is greatly appreciated.
HTML
<header>
<div id="logo">
<img src="img/logo.png" alt="GEC logo" />
</div>
<div id="slogan">
<h1>Revolutionizing Potential</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Coaching Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
CSS
/* Header */
header {
margin-top: 95px;
}
#logo {
float: left;
}
#slogan {
float: right;
margin-top: 90px;
}
nav ul li {
display: inline;
float: left;
}
nav ul li a {
padding-right: 20px;
}
nav ul li:last-child {
padding-right: 0;
}
To your CSS add:
nav {
clear:both;
}
jsFiddle example
First off what I always do is to give all elements default widths and hights.
The nav is an inline element and not a block.
to refrain from using clear fixes you should put a div element around the logo and the slogan.
like this:
HTML
<header>
<div id="header_top">
<div id="logo">
<img src="img/logo.png" alt="GEC logo" />
</div>
<div id="slogan">
<h1>Revolutionizing Potential</h1>
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Coaching Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Now you can just give the header_top div a display block and a overlfow:hidden.
That will give make the header_top div grow with its content.
Now giv you nav a display:block style and it is done
I tested it local on my notebook and it worked like a charm :)
add:
CSS
#header_top{
display: block;
overflow: hidden;
}
nav{
display: block;
}
I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...
---| 900px Container |---
---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |---
Currently, the best method I can find to do this is the following:
nav ul {
width: 900px;
margin: 0 auto;
}
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 150px;
}
The PROBLEM with this is two fold. First of all, it doesn't truly justify it, but rather spreads the li tags evenly throughout the ul tag.. creating uneven white-space between smaller menu items like "HOME" or "ABOUT" and larger ones like "BASIC SERVICES".
The second problem is that the layout breaks if a nav item is larger than 150px, which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav.
Can anyone solve this for me? I've been scouring the web for solutions, and they all seem to come up short. CSS / HTML only if possible...
Thanks!
UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The table cell property works on 94% of browsers currently. You'll have to do something about IE7 and below, but otherwise should be ok.
UPDATE (7/30/13): Unfortunately, there is a webkit bug that impacts this if you're combining this layout with Media Queries. For now you'll have to avoid changing the 'display' property. See Webkit Bug.
UPDATE (7/25/14): There is a better solution to this below now involving text-align: justify.
Using this is simpler and you'll avoid the Webkit bug.
The modern way to distribute items evenly is to set the following two declarations on the container element:
.container {
display: flex; /* (1) */
justify-content: space-between; /* (2) or space-around or space-evenly */
}
The value to use for justify-content depends on which kind of even distribution is needed.
See MDN
ul {
list-style: none;
padding: 0;
width: 90vw;
border: 3px solid gold;
display: flex;
}
a {
background: gold;
}
ul {
justify-content: space-between;
}
ul ~ ul {
justify-content: space-around;
}
ul ~ ul ~ ul {
justify-content: space-evenly;
}
<h3>justify-content: space-between; </h3>
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>
Here's my original answer - if for some reason using a flex container isn't viable
Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don't have to work out % widths for each list item
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
FIDDLE
This one really works. Also has the benefit that you can use media queries to easily turn off the horizontal style — for instance if you want to stack them vertically when on mobile phone.
HTML
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
CSS
#nav {
display: table;
height: 87px;
width: 100%;
}
#nav li {
display: table-cell;
height: 87px;
width: 16.666666667%; /* (100 / numItems)% */
line-height: 87px;
text-align: center;
background: #ddd;
border-right: 1px solid #fff;
white-space: nowrap;
}
#media (max-width: 767px) {
#nav li {
display: block;
width: 100%;
}
}
http://jsfiddle.net/timshutes/eCPSh/416/
if you can, use flexbox:
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PREVIOUS PROJECTS</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>RESEARCH & DEV</li>
<li>CONTACT</li>
</ul>
ul {
display: flex;
justify-content:space-between;
list-style-type: none;
}
jsfiddle: http://jsfiddle.net/RAaJ8/
Browser support is actually quite good (with prefixes an other nasty stuff): http://caniuse.com/flexbox
An ideal solution will:
Automatically scale to the width of the navigation container
Support a dynamic number of menu items.
Using a simple ul menu inside of an nav container, we can build a solution that meets the above requirements.
HTML
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Basic Services</li>
<li>Specialty Services</li>
<li>Our Staff</li>
<li>Contact Us</li>
</ul>
</nav>
First, we need to force the ul to have the full width of its nav container. To accomplish this, we will use the :after psuedo-element with width: 100%.
This achieves our goal perfectly, but adds trailing whitespace from the psuedo-element. We can remove this whitespace across all browsers through IE8 by setting the line-height of the ul to 0 and setting it back to 100% on its li children. See the example CodePen and solution below:
CSS
nav {
width: 900px;
}
nav ul {
text-align: justify;
line-height: 0;
margin: 0;
padding: 0;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav ul li {
display: inline-block;
line-height: 100%;
}
I tried all the above and found them wanting. This is the simplest most flexible solution I could figure out (thanks to all of the above for inspiration).
HTML
<div id="container">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PREVIOUS PROJECTS</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>RESEARCH & DEV</li>
<li>CONTACT</li>
</ul>
</div>
CSS
div#container{
width:900px;
background-color:#eee;
padding:20px;
}
ul {
display:table;
width: 100%;
margin:0 0;
-webkit-padding-start:0px; /* reset chrome default */
}
ul li {
display:table-cell;
height:30px;
line-height:30px;
font-size:12px;
padding:20px 10px;
text-align: center;
background-color:#999;
border-right:2px solid #fff;
}
ul li:first-child {
border-radius:10px 0 0 10px;
}
ul li:last-child {
border-radius:0 10px 10px 0;
border-right:0 none;
}
You can drop the first/last child-rounded ends, obviously, but I think they're real purdy (and so does your client ;)
The container width limits the horizontal list, but you can ditch this and just apply an absolute value to the UL if you like.
Fiddle with it, if you like..
http://jsfiddle.net/tobyworth/esehY/1/
This should do it for you.
<div id="nav-wrap">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
#nav-wrap {
float: left;
height: 87px;
width: 900px;
}
#nav {
display: inline;
height: 87px;
width: 100%;
}
.nav-item {
float: left;
height: 87px;
line-height: 87px;
text-align: center;
text-decoration: none;
width: 150px;
}
Have you tried setting the li width to, say, 16% with a margin of 0.5%?
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 16%;
margin-right: 0.5%;
}
edit: I would set the UL to 100% width:
nav ul {
width: 100%;
margin: 0 auto;
}
This is the sort of thing that the CSS flexbox model will fix, because it will let you specify that each li will receive an equal proportion of the remaining width.
I tried so many different things and finally found what worked best for me was simply adding in
padding-right: 28px;
I played around with the padding to get the right amount to evenly space the items.
Instead of defining the width, you could just put a margin-left on your li, so that the spacing is consistent, and just make sure the margin(s)+li fit within 900px.
nav li {
line-height: 87px;
float: left;
text-align: center;
margin-left: 35px;
}
Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>
<div id="container">
<object>
<div>
alpha
</div>
</object>
<object>
<div>
beta
</div>
</object>
<object>
<div>
charlie
</div>
</object>
<object>
<div>
delta
</div>
</object>
<object>
<div>
epsilon
</div>
</object>
<object>
<div>
foxtrot
</div>
</object>
<span></span>
</div>
</html>
I'm hesitant to offer this as it misuses ye olde html. It's not a GOOD solution but it is a solution: use a table.
CSS:
table.navigation {
width: 990px;
}
table.navigation td {
text-align: center;
}
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="navigation">
<tr>
<td>HOME</td>
<td>ABOUT</td>
<td>BASIC SERVICES</td>
<td>SPECIALTY SERVICES</td>
<td>OUR STAFF</td>
<td>CONTACT US</td>
</tr>
</table>
This is not what tables were created to do but until we can reliably perform the same action in a better way I guess it is just about permissable.