Log in

View Full Version : Resolved menu not 100% width


mlegg
09-17-2014, 05:00 PM
on this page I am trying to use a new responsive menu: http://ahepa215.org/menu.html

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu-style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li>
<a href="#">About</a>
<ul class="hidden">
<li><a href="chapter215.html">Chapter # 215</a></li>
<li><a href="ahepa.html">AHEPA</a></li>
</ul>
</li>
<li><a href="brothers.html">Brothers</a></li>
<li><a href="scholarships.html">Scholarships</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

CSS

/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}

/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #036;
text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
background: #896DFA;
}

/*Style for dropdown links*/
li:hover ul a {
background: #896DFA;
color: #fff;
height: 40px;
line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #036;
color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
display: none;
}

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #036;
text-align: center;
padding: 10px 0;
display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
jscheuer1
09-17-2014, 08:07 PM
IDK, I just set the ul to width 100% and the li's to width 14.125% and it works in chrome.
mlegg
09-17-2014, 11:39 PM
I tried the changes and uploaded it here http://ahepa215.org/template.html
When a browser is full width, the menu goes all the way to the right past the banner width and container width. Also when you mouse over or hover over ABOUT the sub-menus (Chapter# 215 and AHEPA) don't show up

HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<META NAME="description" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION Chapter 215. The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order. We are a part of the District Lodge 9 that encompasses the Maine, New Hampshire and Vermont AHEPA chapters.">
<META NAME="keywords" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION, Chapter 215, Portsmouth NH, Portsmouth, NH, Maine, ME, New Hamptshire, Vermonth, VT, EVENTS, NEWS, PROGRAMS, ISSUES, EDUCATIONAL FOUNDATION, CONTACTS">
<title>AHEPA215.org Portsmouth NH Chapter #215 of the Order of AHEPA</title>
<link rel="stylesheet" href="style.css">
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
</head>
<body>
<div id="container">
<img id="logo" src="images/Ahepa215-banner.jpg" alt="AHEPA 215 logo">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li>
<a href="#">About</a>
<ul class="hidden">
<li><a href="chapter215.html">Chapter # 215</a></li>
<li><a href="ahepa.html">AHEPA</a></li>
</ul>
</li>
<li><a href="brothers.html">Brothers</a></li>
<li><a href="scholarships.html">Scholarships</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
<h1>Contact</h1>
<p>Thank you for contacting AHEPA! Please do not send important business correspondence via email. Unless otherwise instructed, please send all business correspondence directly to our postal address.</p>
<div class="columns">
<div class="left"><h3>AHEPA 215</h3>
<p>AHEPA 215 c/o St. Nicholas Greek Orthodox Church</p>
<p>40 Andrew Jarvis Drive</p>
<p>Portsmouth, NH 03801, USA</p>
<p>Phone: (603) 436-2733</p>
<p>Fax: (603) 436-2943</p>
<p>Email: <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></p>
<h3>Technical Concerns</h3>
<p>If you are experiencing technical difficulty with this website, have
Internet related questions or comments, or wish to advertise on AHEPA215.org,
please contact our <a href="mailto:mlegg10@gmail.com?subject=AHEPA">webmaster</a>.</p>
</div>
<div class="right">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2915.1776786379487!2d-70.76877209999999!3d43.058730499999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2bf80ef55ff4f%3A0xa4ccf752ddfbeb4c!2s40+Andrew+Jarvis+Dr%2C+Portsmouth%2C+NH+03801 !5e0!3m2!1sen!2sus!4v1410903567876" width="300" height="250" frameborder="0" style="border:0"></iframe>
</div></div>
</div>
</div>

<div style="clear:both;"></div>
</div>
</div>
</div>

<div id="footer">Copyright &copy; <a href="http://Ahepa215.org">Ahepa 215</a> ~ <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></div>
</body></html>

CSS

body {
width:100%;
margin:0;
background-image:url(images/greekkey2.gif);
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#036;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
a {
text-decoration:none;
}
#vlb1overlay {z-index:100 !important;}
#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display:block;
width:100%;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
width:100%;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
width:14.125%;
}

/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #036;
text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
background: #896DFA;
}

/*Style for dropdown links*/
li:hover ul a {
background: #896DFA;
color: #fff;
height: 40px;
line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #036;
color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
display: none;
}

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #036;
text-align: center;
padding: 10px 0;
display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid #000;
}
h2 {
clear:both;
text-align:center;
}
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}
@media screen and (max-width:920px) {
body {
font-size:90%;
}
#nav li {
height:90%;
}
}
@media screen and (max-width:820px) {
body {
font-size:80%;
}
#nav li {
height:80%;
}
}
@media screen and (max-width:740px) {
body {
font-size:70%;
}
#nav li{
height:70%;
}
}
@media screen and (max-width:660px) {
body {
font-size:60%;
}
#nav li {
height:60%;
}
}
@media screen and (max-width:570px) {
#nav ul {
position:static;
border:0;
box-shadow:none;
}
#nav li {
float:none;
width:100%;
}
#nav a,#nav ul a{
text-align:left;
padding:0 0 0 1em;
}
}

.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}

#left {
float: left;
width: 32%;
padding:5px;
}

#middle {
float: left;
width: 32%;
padding:5px;
}

#right {
float:left;
width:32%;
padding:5px;
}

.columns {
width:100%;
}
.left{
float:left;
width:40%;
}
.right {
margin-left:50%;
}
.clear {
clear:both;
}
.2columns {
width:100%;
}
.left{
float:left;
width:50%;
}
.right {
width::50%;
}
.clear {
clear:both;
}
/* Flexible iFrame */

.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#map {
height: 100%;
}
#footer {
background-color:rgba(58,162,173,1);
width:90%;
margin:auto;
text-align:center;
font-family:sans-serif;
font-size:80%;
color:#fff;
padding:0.5em 0;
}
#footer a {
color:#fff;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
jscheuer1
09-18-2014, 12:42 AM
You changed it from the original example. If you were to first apply my suggestions to that page (original example), you should see it working. Once you have that, you should be able to adapt the concept to the container div you have in your new example.
mlegg
09-18-2014, 01:02 AM
John isn't that what I did?


/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
width:100%;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
width:14.125%;
}
jscheuer1
09-18-2014, 03:20 AM
Not here, no:

http://ahepa215.org/menu.html

If you keep that and get rid of position absolute on the ul though, it will sort of work on the other page (template.html). You will need to maybe tweak the width of the li's and/or set the background of the ul to the same as that behind the menu elements to fudge the right hand edge. If that takes away the dividers, use border to reinstate them.

In the future, please present the full issue from the beginning.