and thanks in advance,
I'm working on a css and html only (no js) menu for my website. I took the code from https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/ and adapted it. I have mostly succeeded, but have three issues I'm struggling with.
On the desktop version, I can't seem to set the children at the same height as their respective parents (I can either get the child to open at the top of the menu, or the bottom, but not in between).
On the mobile version, I want to force the children to stay open after they've been hovered on (otherwise it creates a huge disruption as the user gradually scrolls down the options in the menu (IE, the children close, shrinking the menu, while the user's scroller remains in the same place).
As the menu has a hidden checkbox to open/close the dropdown (on mobile), it only closes when clicked within the box. Is there a way without JS to close this anytime the user clicks outside the menu?
I am trying by all means NOT to use JS, if possible. Grateful for any advice.
STYLING FOR MENU
/* reset */
a{
text-decoration: none;
}
ul{
list-style: none;
}
li {
list-style-type: none;
}
/* Logo */
.logo{
display: inline-block;
color:#D7C9AA;
font-size: 1px;
}
/* Nav menu */
.nav{
width: 100%;
height: 100%;
}
.nav{
max-height: 0;
transition: max-height .5s ease-out;
}
/* Menu Icon */
.hamb{
cursor: pointer;
float: right;
padding: 20px 15px;
background-color:#7b2d26
}
.hamb-line {
background:white;
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hamb-line::before,
.hamb-line::after{
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
}
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
/* Responsiveness */
#media (min-width: 881px) {
.nav{
max-height: none;
}
.hamb{
display: none;
}
.parent {
display:inline-block;
line-height:30px;
background-color:#D7C9AA;
border-right:#CCC 1px solid;}
.parent a{
margin: 20px;
color: #7b2d26;
font-weight:bold;
font-family: brandon-grotesque-1,brandon-grotesque-2,'Open Sans',Helvetica,Arial,sans-serif;
font-size:130%;}
.parent:hover > ul{
display:block;
position:absolute;}
.child {
display: none;}
.child li {
background-color:#ededed;
line-height: 40px;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid; width:100%;
}
.child li a{
color: #7b2d26;
}
ul{
list-style: none;
margin: 0;
padding: 0px;
min-width:14em;
}
ul ul ul{
left:100%;
margin: 20px;
top:0;
margin-left:1px;}
li:hover {
background-color: #c3c3c3;}
.parent li:hover {
background-color: #c3c3c3;}
.expand{
font-size:14px; margin-right:5px;}
}
#media screen and (max-width:880px) {
.nav{
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
#menu {
margin-top:20px;
margin-left:0;
}
.parent {
display:block;
line-height:30px;
background-color:#ededed;
border-top:#CCC 1px solid;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid;
padding-top:10px;}
.parent a{
margin: 16px;
color: #7b2d26;
text-decoration: none;
font-family: brandon-grotesque-1,brandon-grotesque-2,'Open Sans',Helvetica,Arial,sans-serif;
font-size:130%;}
.parent:hover > ul{
display:block;}
.child {
display: none;}
.child li {
background-color:#ededed;
line-height: 30px;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid; width:100%;}
.child li a{
color: #7b2d26;}
ul{
list-style: none;
margin: 0;
padding: 0px;
min-width:4em;}
ul ul ul{
left: 100%;
top:0;
margin-left:10px;}
li:hover {
background-color: #c3c3c3;}
.parent li:hover {
background-color: #c3c3c3;}
.expand{
font-size:14px;text-align:center; margin-right:5px;}
}
*/CSS TO LOAD IMAGES IN HEADER, SHOULDN'T BE RELEVant
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App title -->
<title>Responsive Pure CSS Menu</title>
<!-- Link CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation bar -->
<!-- Navigation bar -->
<header class="header">
<!-- Logo -->
LR
<!-- Hamburger icon -->
<input class="side-menu" type="checkbox" id="side-menu"/>
<label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
<!-- Menu -->
<!-- Menu -->
<nav class="nav">
<ul id="menu">
<li class="parent">What We Do
<ul class="child">
<li>Mission, Vision, Values</li>
<li class="parent">Our Programs<span class="expand">»</span>
<ul class="child">
<li>Education</li>
<li>Health</li>
<li>Resource Center</li>
</ul>
<li class="parent">Our Impact<span class="expand">»</span>
<ul class="child">
<li>Financials</li>
<li>Success Stories</li>
<li>Newsletters</li>
</ul>
</li>
</ul>
</li>
<li class="parent">Who We Are
<ul class="child">
<li class="parent">Meet The Young Women<span class="expand">»</span>
<ul class="child">
<li>Grantees Seeking Sponsors</li>
<li>Grantees with Sponsors</li>
<li>Graduates</li>
</ul>
<li>Meet The Support Team</li>
<li class="parent">Meet the Boards<span class="expand">»</span>
<ul class="child">
<li>Meet the Zambian Board</li>
<li>Meet the US Board</li>
</ul>
<li>Meet The Donors</li>
<li>Our Partners</li>
</li>
</ul>
</li>
<li class="parent">Get Involved
<ul class="child">
<li>Donate</li>
<li>Sponsor a Young Woman</li>
<li>Contact Us</li>
<li>Spread the Word</li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h1>
Some content
</h1>
<p>
More Content
</p>
</article>
</main>
</body>
</html>
Related
I have two specific questions concerning my website for my class.
First, my floating left-side vertical nav bar is getting in the way of the different sections on my theme/genre page of my website.
Whenever I go to this page, the nav bar by default is pushing my first section ("Horror") over to the right. This is good and I want ALL of my sections to permanently move to the right so that my nav bar will not be floating over any of my sections. However, right now only this first section is moved to the right and while the nav bar "floats" down, the nav bar either floats directly over the sections or the sections just get distorted and look weird.
Here is the Theme.html page code below. I only included the first "section" for brevity's sake.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>
<div id="headings">
<h1>Board Games Theme & Genre</h1>
</div>
<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
<li>Home</li>
<li>Theme/Genre>
<ul class="submenu"><!--Added .submenu-->
<li>Horror</li>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Space</li>
<li>Nuclear Apocalypse</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<section id="Horror"class="sections"><h3>Horror</h3>
<hr>
<img src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images">
<p>Arkham Horror is a great deck building game.</p>
<br>
<img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images">
<p>This game was a mega-hit during its Kickstarter campaign last year. Extremely in demand and a great buy, if you can get your hands on it.</p>
<br>
</section>
I have looked in my CSS class "sections" and tried many times to move that blue border over to the right, but still cannot do it.
Here is my CSS code below for the theme/genre's sections and navigation code:
.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
border-width: 10px;
border-color: #1D3D94;
padding-left: 20px;
padding-right: 20%;
overflow:auto;}
.images {float: left; /*adjust the pics in the Theme/Genre Sections*/
padding-top: 10px;
padding-right: 10px;}
#nav {float: left; width: 200px; margin: 10px 0;}
/* define a fixed width for the entire menu */
.navigation {width: 190px;}
/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
padding: 0;
margin: 0;}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}
/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}
/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
max-height: 200px;}
/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}
/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}
Is there any way to permanently move these sections to the right out of the way of the nav bar?
Secondly, I do not want use a scroll bar function in the nested directoires but instead show ALL of my sections together when my mouse hovers over the "Theme/Genre >" heading in my nav bar. As of now, it only shows five of the seven sub-directories before having to use a scroll bar to scroll down to see the rest.
How do I remove the scroll bar and show ALL seven sub-directories?
Thanks a lot for any and all help you may give. I do appreciate it.
You could handle your submenu items with the css :hover states.
And you could place your menu and your content like this :
<div class="site-container">
<nav class="menu"><!-- Your menu--></nav>
<main><!-- Your main content--></main>
</div>
and add display: flex; on the .site-container.
Set the width: of your menu to 200px for example
And the width of the main content to calc(100% - 200px);
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
display: flex;
flex-flow: row wrap;
}
.menu {
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu nav > ul {
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
}
.menu ul li.has-child li {
display: none;
background: #8E8E8E;
}
.menu ul li.has-child:hover li{
display: block;
}
main {
/*Total size minus the menu size*/
width: calc(100% - 200px);
padding: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
You could do an improvement by fixing your menu at the top left of the screen with position: fixed; top: 0; left: 0; z-index: 2;, so it's always visible. And set position: absolute; left:100%; top: 0; on the submenu and position: relative; on its parent li, so the submenu will appears at the right of your menu. It will prevent the menu from doing "Yo-yo".
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
position: relative;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
position: relative;
}
.menu ul li.has-child ul {
display: none;
background: #8E8E8E;
position: absolute;
left: 100%;
top: 0;
}
.menu ul li.has-child:hover ul{
display: block;
}
main {
padding-left: 210px;
padding-right: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
Use padding-left
Make sure the items that are listed are sitting in a 'container' so that all the children inside the container can sit wherever the parent sits. This allows you to use the following CSS rules for content (with the id of #content for example):
#content {
position: relative;
padding-left: 5em;
box-sizing: border-box;
width: 100%;
}
Explanation
position: relative - make sure the children abide by the basic rules of the parent
padding-left: 5em - Push the parent (content) to the right of the menu by 5em, all children will be relative to the parent
box-sizing: border-box - keep all the padding relative to the inside the width and height of the container (by subtracting the size) rather than appending size dynamically.
width: 100% - Let the container fill the rest of the space (1)
1) if width: 100% is over-taking the space of the menu then consider using width: calc(100% - 5em) where 5em is the width of the menu
Note It's worth putting into consideration that to do this you normally need a fixed/max-width menu and would be ideal to do so. Otherwise text, images and so on may expand the menu infinitely within a percentage of that space.
element:hover
To eliminate the scrollbar on the menu you will have to find what is taking up the space. If these are more items that you want to show/hide when the cursor is above the menu item you can use the element selector :hover which can tell the menu to hide certain items. You can then use it to set before the hover event occurs and during the hover event. For example:
body { background: white; }
body:hover {background: red;}
A more relative example would be to set the height of the main menu item so that the rest cannot be shown (with the use of overflow: hidden)
ul li ul li {display: none};
ul li:hover ul li {display: block}
What I'm trying to achieve:
I tried using a nested unordered list but found it difficult to set 2 buttons to the left and 2 buttons to the right, I am now trying something a little different but still no success, also I want the distance between these button to stay constant when viewed on different sized displays. Any help would be greatly appreciated.
(If anyone is familiar with xml you'll know that that its possible to give things a weight. so say you have 3 items in a box and you give them all a weight of 1 each items would take up a third of the space in the box, is there anything like this in html?)
This is what I have so far.
#navContainer nav {
display: inline-block;
}
#nav1 {
background: aqua;
position: absolute;
left: 0;
}
#nav2 {
background: pink;
position: absolute;
right: 0;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
How about a flexbox approach, then you only need one list
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
width: 100%;
justify-content: space-between; /* spreads things across the horizontal line */
}
.signin {
margin-left: auto; /* moves this to the right */
margin-right: 10px; /* gap between signin and signup */
}
.help {
margin-right: auto; /* don't need this really */
margin-left: 10px; /* gap between highscores and help */
}
<nav id="nav1">
<ul>
<li class="highscores">Highscores</li>
<li class="help">Help</li>
<li class="signin">Signin</li>
<li class="signup">Signup</li>
</ul>
</nav>
you can use flexbox,
just using 1 ul removing extra markup unnecessary
ul {
display: flex;
justify-content: space-between;
align-items: flex-end;
background: lightblue;
height: 160px;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
li:nth-last-of-type(2) {
margin-left: auto
}
<ul>
<li>Highscores</li>
<li>Help</li>
<li>Signin</li>
<li>Signup</li>
</ul>
just using 1 nav and 2 ul if you want to keep the container at a minimal state
nav{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 160px;
background: lightblue
}
ul:last-of-type {
margin-left: auto
}
ul {
display: flex;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
<nav id="navContainer">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
You can do it with the Flexbox:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
ul {
list-style: none;
display: flex;
}
ul > li {
margin: 5px;
padding: 5px 0;
width: 125px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px #000;
font-weight: bold;
text-transform: uppercase;
border-radius: 25px;
background: purple;
}
#navContainer {
display: flex;
justify-content: space-between;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
I don't understand ur question completely, but I think this might be your solution:
<html>
<head>
<title>Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/pageFormatting.css">
<style>
#navContainer nav {
display: inline-block;
}
li {display:inline;margin:20px;}
#nav1 {
background-color: aqua;
position: absolute;
left: 0;
display:inline-block;
}
#nav2 {
background-color: pink;
position: absolute;
right: 0;
display:inline-block;
}
</style>
</head>
<body>
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
</body>
</html>
I added tags and the head and body tags. Within those style tags I wrote the css. nav1 is now left en nav2 is now right.
Tell me if I'm wrong.
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
This question already has answers here:
How to remove indentation from an unordered list item?
(10 answers)
Closed 7 years ago.
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
Here's what it looks like:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><img src="images/logo.png" height="157px" width="237px"></div>
<!--
<div class="social">
<ul>
<li><img src="images/icons/facebook.gif"/></li>
<li><img src="images/icons/twitter.gif"/></li>
<li><img src="images/icons/youtube.gif"/></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/image1.gif" />
</li>
<li>
<img src="images/slider/image2.gif" />
</li>
<li>
<img src="images/slider/image3.gif" />
</li>
</ul>
</div>
</section>
<div class="main">
<h1>Ozanam Club</h1>
<p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the
St. Vincent De Paul society who himself had two children with learning difficulties
and who was concerned at the general lack of leisure provision for them.</p>
<p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society.
The name of the clubs are called after Blessed Frederick Ozanam who is the founder
of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club
and a seperate club for younger members. We have an adults club in Hamilton and
Paisley and also a club in Carfin for younger members. </p>
<h1>Membership</h1>
<p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p>
<p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with
vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p>
<p>You can find more information on our a F.A.Q page.</p>
</div>
<div class="side">
<img src="images/events.gif" alt="Events" />
View
</div>
<div class="side">
<img src="images/photos.gif" alt="Events" />
View
</div>
</div>
<footer>
<div id="footer-wrap">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</footer>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
</html>
CSS:
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';}
#wrap {margin: 0 auto; width: 100%; max-width: 1000px;}
header {position: relative;}
#logo {margin: 20px 0 0 0; display: block; float: left;}
.social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;}
.social li { float: left;}
.social img { height: 35px; width: 35px;}
#navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; }
#navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;}
#navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;}
#navigation li:last-child { border: 0;}
#navigation ul,
#navigation li {float: left;}
#navigation a { color: #195c8a; text-decoration: none; font-weight: bold;}
#navigation a:hover { color: #13405f;}
.main { float: left; margin-top: 20px; width: 625px;}
.main h1 {font-family: 'EnigmaticBold'; color: #13405f; }
.main p {color: #13405f;}
.main a {color: inherit; }
.side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; }
.side a { text-decoration: none; color: #3c88bc;}
.button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;}
footer { height: 100px; background: #195c8a; clear: both; }
#footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; }
#footer-wrap li { float: left; list-style: none; padding-right: 3em;}
#footer-wrap a {color: white ;text-decoration: none;}
The <ul> element has browser inherent padding & margin by default. In your case, Use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
I don't see any margin or margin-left declarations for #footer-wrap li.
This ought to do the trick:
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
by default <UL/> contains default padding
therefore try adding style to padding:0px in css class or inline css
I have a div which in 1000px; and a navigation bar which is also 1000px; but it doesn't extend as much as the div.
Please help...
[index.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>[phantzm]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<center>
<div class="banner">
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ">
</div>
<center>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>
fun stuff
<ul>
<li>jokes</li>
<li>riddles</li>
<li>facts</li>
</ul><!-- end of Second List -->
<li>
my work
</li>
<li>
my favourite songs
</li>
<li>
my favourite links
</li>
<li>
about me
</li>
<li>
contact me
<ul>
<li>phone</li>
<li>e-mail</li>
<li>mail</li>
</ul><!-- end of Second List -->
</li>
</li><!-- end of List Item -->
</ul><!-- end of Unordered List -->
</div><!-- end of navMenu div -->
</div><!-- end of wrapper div-->
</center>
</head>
<body bgcolor="#FFCECE">
</body>
</html>
[style.css]
body {
background: SILVER;
margin: 0;
padding: 0 auto;
}
.banner {
background: blue;
width: 1000px;
height: 70px;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#navMenu {
margin: 0;
padding: 0;
line-height: 30px;
width: 1000px;
}
#navMenu ul {
margin: 0;
padding: 0;
border: 1px white;
}
#navMenu li:hover {
font-weight:normal;
text-transform: capitalize;
background:silver;
}
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
}
#navMenu ul: hover {
text-transform: capitalize;
}
#navMenu ul li a {
text-align: center;
font-family: "Arial";
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: white;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top:30px;
border: 1px white;
}
#navMenu ul li:hover ul {
visibility: visible;
}
I have added the code for the style and index.. As you can see both the banner and navmenu have 1000px;
Just change you CSS like this: Live Demo
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
width:165.6px;
}
165.6 is (1000 - 5)/6 (approx)
Using Chrome, right-click each element and choose "Inspect Element". Scroll down to "Metrics". This will show you what other properties are affecting the apparent width of each element (margin, border, padding, box-model, and positioning).
The navigation is not 1000px because each item is set to fixed width
You should change the width of each item using percentage, so the width of each item is relative to 1000px and the number of items
however, if it's still not working, you should add <div style="clear:both;"></div> at the bottom of <ul></ul>
The length of the navigation bar is decided by each individual bullet point in the list. Where you have width: 150px; shows the length of each individual li. The length of all of them together gives you the length of the navigation bar. You add display: inline-block; under the #navMenu ul li to make it depend on the original width.