I'm attempting to have a vertical navigation bar using just HTML5 and CSS3. The desire is to have the menu appear on the left and have the rest of the page on the right. As the user scrolls down, I want the menu to move down with the user. Thus far I have the vertical menu looking the way I would like it, but I've not been able to complete the rest. Each solution I've tried thus far either meant structuring the page in an odd way or using Javascript. Is this possible using just HTML5 and CSS3?
CSS
/* Menu Navigation Properties */
nav
{
text-align: center;
padding-right: 1.0em;
}
/* Menu container */
nav ul
{
float: left;
list-style-type: none;
padding-top: 0;
padding-left: 0;
padding-right: 0.75em;
}
/* Menu item container */
nav ul li
{
margin-top: 0em;
margin-left: 0.15em;
margin-right: 0.15em;
}
/* Menu item Appearance */
nav ul li a
{
background-color: black;
color: #D0E2F1; /* Light Blue */
height: 2em;
line-height: 2em;
width: 9em;
display: block;
border-width: 0.1em;
border-style: solid;
border-color: #dcdce9;
text-decoration: none;
text-align: center;
}
/* Menu item hovered over by user */
nav ul li a:hover
{
background-color: #D0E2F1; /* Light Blue */
color: black;
}
/* Current Page on the Menu */
nav ul li a.current
{
font-weight: bold;
}
HTML files
<html>
<body>
<nav>
<!-- Menu Item List -->
</nav>
<h1>Page Title</h1>
<!-- rest of page -->
</body>
</html>
If you can't wrap the rest of the page in a wrapper, you could make space for the menu with
body {
padding-left: 10em;
}
and then fix the position of the menu and pull it back into the space left by the padding on the body
nav {
position: fixed;
width: 9em; // Probably a good idea to fix the width of the menu
margin-left: -10em;
...
}
If you can wrap the rest of the page in a wrapper, just give it enough left margin to keep it out of the way of the menu.
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
CSS selector for first element with class
(23 answers)
Closed 2 years ago.
I'm trying to make a navigation bar but I'm having a lot of trouble making changes to separate elements without changing every single item in the nav bar.
For example, if I wanted more padding/space between for only one element in the nav bar (in between the name and other elements such as projects, resume, etc), how would I achieve that? Or even if I wanted to change the text size for a single item in the nav bar (Make first name bigger than the rest).
Here is the HTML:
<div class="navbar">
First Name
Projects
Resume
About
</div>
Here is the CSS:
.navbar {
overflow: hidden;
background-color: white;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 200%;
}
One way is with :first-of-type or nth-of-type(1). This selects, in this case, the first anchor element inside of navbar. You can change the argument in nth-of-type to select any element in the menu.
.navbar {
overflow: hidden;
background-color: white;
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
border-bottom: 1px solid black;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 100%;
}
.navbar a:nth-of-type(1) {
padding-right: 20px;
background: #777;
font-size: 2em;
}
<div class="navbar">
First Name
Projects
Resume
About
</div>
You could use :nth-child selector. Please take a look to this page: https://css-tricks.com/almanac/selectors/n/nth-child/
I'm trying to build a responsive website with a sidebar navigation menu. Everything has been working smoothly until I started to build and design the navigation menu. It looks like I want it to in a full-sized browser window but when resized to make it smaller, the block elements start to get bigger in comparison to the rest of the page and the text doesn't stay centered. I may be making a stupid mistake, as I am quite new to CSS.
I want the navigation bar to be the same height as the part of the page that is containing the text, so I enclosed everything in a <div> with the background color green, then floated the div containing the text with a white background to the right and the div containing the navigation links to the left. This is in example of the HTML and CSS code for the navigation links:
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
#navigation {
list-style-type: none;
padding-top: 2vw;
width: 15%;
float: left;
}
#navigation a {
font-size: 1.2vw;
text-decoration: none;
color: white;
display: block;
padding-left: 2vw;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
padding-right: 0.5vw;
vertical-align: middle;
}
I want the block elements to resize with the rest of the page and the links inside them to be vertically centered. Am I doing something wrong?
Here's a comparison between the view in a normal sized window and the view in a smaller one
This can be achieved in several ways, but the cleanest would probably be using flexbox or grid layout in CSS.
Something like this? (using flexbox):
.layout {
/* Use flex layout */
display: flex;
/* make the layout use the full viewport height */
min-height: 100vh;
}
.main {
/* Make the main element grow */
flex: 1;
padding: 1em;
}
.nav {
/* Center children vertically */
display: flex;
justify-content: center;
flex-direction: column;
/* Keep the nav width at 15% */
flex-basis: 15%;
list-style-type: none;
padding: 1em;
background: green;
color: white;
}
.nav .menu {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: white;
}
<div class="layout">
<nav class="nav">
<ul class="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav>
<main class="main">
Content ...
</main>
</div>
I have a horizontal menu that is made up of a series of ul's and li's. The submenus look great so I don't need to do anything with those. The primary ul looks great until you hover over the far right li.
When doing that, it looks good in Safari but the hover comes about 2 pixels short of the background on the ul in Firefox and IE and even more in Chrome. I have tried adjusting the padding to make it look good in Firefox and IE but then you still have the same issue in Chrome and in Safari, that far right li breaks down to a new line. Of course, adjusting it to look good in Chrome makes all the other browsers break to a new line. This site is using Wordpress which creates the menu dynamically so I can only change the CSS. Here is the basic idea for the code:
<html>
<head>
<style type="text/css">
#header {
margin: 0 auto;
width: 980px;
}
ul li {
font-size: 13px;
line-height: 21px;
}
#header .main-nav #menu-main-navigation {
background: #169BAC;
width: 100%
}
#header .main-nav > div ul {
width: 100%;
list-style: none;
float: left;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#header .main-nav > div ul li ul{
top: 43px;
}
#header .main-nav .menu-div>ul>li {
padding: 5px 14px;
float: left;
border-right: solid 1px #54AEC2;
}
#header .main-nav .menu-div ul li:hover {
background: #2A588D;
}
#header .main-nav .menu-div>ul>li:first-child {
padding-top: 9px;
height: 28px;
}
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 26px;
border-right: none;
}
#header .main-nav .menu-div>ul>li a{
line-height: 15px;
text-decoration: none;
color: #FFF;
padding: 0px 13px;
text-align: center;
display: inline-block;
}
</style>
<head>
<body>
<header id="header">
<nav class="main-nav">
<div class="menu-div">
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-275">Home</li>
<li id="menu-item-310">For New<br />Patients</li>
<li id="menu-item-376">Cleanings &<br />Prevention</li>
<li id="menu-item-381">General<br />Dentistry</li>
<li id="menu-item-453">Restore Your<br />Smile</li>
<li id="menu-item-462">Dental Anxiety &<br />Sedation Options</li>
<li id="menu-item-463">Dentistry For<br />Kids</li>
<li id="menu-item-464">Insurance &<br />Payment Options</li>
</ul>
</div>
</nav>
</header>
</body>
You can see the site at http://riverbend.caswellwebcreations.com.
Thank you for any help that you can give me on this.
The width of the li elements is being defined by their padding and the font-size (and padding) of the a elements inside them. The font propertys are not uniform between browsers, some browsers put text bigger or smaller than others. That seems to be the problem.
If you want to stretch the li elements "cross-browser" you should define the width of the li elements via css like this:
#menu-item-275{
width: 64px;
}
#menu-item-310{
width: 77px;
}
#menu-item-376{
width: 96px;
}
#menu-item-381{
width: 82px;
}
#menu-item-453{
width: 104px;
}
#menu-item-462{
width: 131px;
}
#menu-item-463{
width: 105px;
}
#menu-item-464{
width: 132px;
}
If you sum the width of each li item (plus padding and border) you get the width of the menu container: 980px. And the browsers will take that width to render the li's.
I hope this works!
UPDATE
Just found another (and more easy) solution!: https://stackoverflow.com/a/14361778/3762078
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 20px;
border-right: none;
float: none; /* ADD THIS */
overflow: hidden; /* AND THIS */
}
'float: none'. Forces last li element to be as wide as it can (the
default block element's behavior).
'overflow: hidden'. Prevents the last li element to stretch to ul's full width.
Although this doesn't prevent the width changes to all li elements on every browser, hence making the last li's width be thinner or wider (and sometimes expanding that li's height), is a nice solution.
I'm trying to create a page setup with two navigation areas (top and left) similar to this:
The light gray area is where the main content for each page is going to be. On the left is the second navigation menu that should extend to the bottom of the screen and be even with the main content area.
I can't figure out how to adjust them so that both the left menu and the main content area extend down to the bottom of the screen. I use width percentages, float, and position CSS properties to align them next to each other (display property had no effect). I believe the problem is that I have to push the main content area up 95 pixels using:
bottom: 95px;
Otherwise, the bottom right corner of the left navigation menu and the top left corner of the main content area touch each other diagonally and there is a big white gap under the title area before it reaches the light grey main content area.
The only way that I have discovered to extended their heights' to the bottom is to set their height in pixels, but that doesn't completely work since I am moving the main content area up 95px so the bottom of the main content area has a white gap below it, and it is not even with the left navigation menu. My HTML secture looks like this:
<body>
<header>
<nav id="topMenu">
</nav>
<div id="titleAndUserInfo">
</div>
</header>
<nav id="leftMenu">
</nav>
<section id="main">
</section>
</body>
The nav tags follow the ul li a pattern
Update
I was able to get my CSS and HTML5 working so that the position is correct but the left navigation menu and the light gray main content area still doesn't expanded down to the bottom of the screen when there is not enough content to do so automatically. How do I force this? Setting their heights with 100% or a px value don't seem to be working. Here is my HTML, CSS, and results as viewed in Chrome.
<body>
<header>
<nav id="topMenu">
<ul>
<li>xxx</li>
<li>xxxxx</li>
</ul>
</nav>
<div id="titleUserLogin">
<h1>Title</h1>
Welcome <strong>test</strong>!
Log Off
</div>
</header>
<nav id="leftMenu">
<ul>
<li>Home</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ul>
</nav>
<section id="main">
<p>content</p>
</section>
</body>
/* General */
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
}
/* Header */
header {
text-align: left;
float: right;
position: relative;
width: 90.5%;
}
div#titleUserLogin {
color: #fff;
background-color: #303030;
display: inline-block;
width: 100%;
}
div#titleUserLogin h1 {
display: inline;
}
div#titleUserLogin a {
text-align: right;
float: right;
}
/* Navigation menus */
nav#topMenu ul {
padding: 0 0 2px;
position: relative;
display: inline;
}
nav#topMenu ul li {
list-style: none;
display: inline;
}
nav#topMenu ul li a {
background-color: #303030;
color: #fff;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
padding: 10px 20px;
line-height: 2.8;
text-decoration: none;
}
nav#leftMenu {
background-color: #303030;
position: relative;
float: left;
width: 9%;
}
nav#leftMenu ul {
position: relative;
}
nav#leftMenu ul li {
list-style: none;
}
/* main content */
section#main {
background-color: #d7d7d7;
height: 100%;
width: 90.5%;
float: right;
height: 100%;
}
Solution:
Add the following rule, and adjust nav#leftMenu and section#main rules with percentage heights until the content of each reaches the bottom of the screen:
html {
height: 100%;
}
im wondering if anyone could please help me with a css / html issue.
I have a complex background image. The menu div is positioned at the correct location to overlay the background where it is ment to position. The entire LI has a hover rollover image with a display type of block. The result is that when the mouse is over the list href the entire block rollover works..
The problem happens however when i attempt to add padding to create a buffer between the list item text and its border.. Things start to go funny... I'll add a screen shot.. Padding is required to move it from the border.
The second problem exists that i cant valign the text to the middle without applying a line height.. The solution works great until items wrap.. I need to be able to wrap menu item text..
The below example shows the state with the current CSS/HTML. The menu bar and rollover are in place as expected. Amend i cant place the image to to restrictions on posting as a new person here.. The example can however be found at 213.40.100.100 / example1.jpg
The below example shows the state when padding OR margin is added. The LI seems to completly shift, not moving the interal text..
213.40.100.100 / example2.jpg
<div id="wrapper">
<div
id="header">Header</div> <div
id="menu">
<ul>
<li><a>Contact Us</a></li>
<li><a>Recommends</a></li>
<li><a>Deals</a></li>
<li><a>Home</a></li>
</ul> </div> <div id="content">Content</div>
<div id="footer">Footer</div>
</div>
#charset "utf-8"; /* CSS Document */
* { margin: 0; padding: 0; }
body {
padding-top: 10px;
background: url(background.jpg) no-repeat center top; height:100%;
}
div#wrapper {
margin: auto;
height: 100%;
width: 978px;
min-width: 978px;
}
div#header {
height: 196px;
}
div#menu {
height: 69px;
position:
relative;
}
div#menu ul {
height: 69px;
list-style-type: none;
}
div#menu ul li {
display: block;
height: 69px;
width: 140px;
float: right;
padding: 5px;
}
div#menu ul li a:hover {
display:block;
background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#menu ul li a {
text-decoration: none;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#content { margin-top: 80px; }
I think you are adding the padding to the wrong element.
or you add a "margin" to the <li> or you add a padding to div#menu
I should do this:
A div#menu with the yellow gradient background, with the 5px padding and a margin: 80px 0 0 0;
Inside this div, the <ul><li>...</li></ul>
You don't need to add any padding or margin to the li, just be sure the height of each li is less than the div#menu heigh + padding.