Labels Milestones

New Issue

Center the primary menu #1

Closed

opened 3 years ago by kjodle · 13 comments

kjodle commented 3 years ago

Owner

There is no content yet.

kjodle commented 3 years ago

Poster

Owner

Changed this in style.css:

nav#top-menu,
nav#primary-menu {
	background: #fafafa;
	font-size: 0.9em;
	z-index: 100;
}

to this:

nav#top-menu,
nav#primary-menu {
	background: #fafafa;
	font-size: 0.9em;
	z-index: 100;
	width: 50%; /* Need to set this via a variable */
	margin: 0 auto;
}

Changed this in style.css: ``` nav#top-menu, nav#primary-menu { background: #fafafa; font-size: 0.9em; z-index: 100; } ``` to this: ``` nav#top-menu, nav#primary-menu { background: #fafafa; font-size: 0.9em; z-index: 100; width: 50%; /* Need to set this via a variable */ margin: 0 auto; } ```

kjodle commented 3 years ago

Poster

Owner

Changed this in menus.css:

#belowheadermenu,
#belowheadermenu ul,
#belowheadermenu ul li,
#belowheadermenu ul li a,
#belowheadermenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

to this:

#belowheadermenu,
#belowheadermenu ul,
#belowheadermenu ul li,
#belowheadermenu ul li a,
#belowheadermenu #menu-button {
  margin: 0 auto;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: max-content;
}

Changed this in menus.css: ``` #belowheadermenu, #belowheadermenu ul, #belowheadermenu ul li, #belowheadermenu ul li a, #belowheadermenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ``` to this: ``` #belowheadermenu, #belowheadermenu ul, #belowheadermenu ul li, #belowheadermenu ul li a, #belowheadermenu #menu-button { margin: 0 auto; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: max-content; } ```

kjodle commented 3 years ago

Poster

Owner

That seems to have done the trick. Now just need to work on border and background issues.

That seems to have done the trick. Now just need to work on border and background issues.

kjodle commented 3 years ago

Poster

Owner

Changed this in style.css:

nav#top-menu,
nav#primary-menu {
	background: #fafafa;
	font-size: 0.9em;
	z-index: 100;
	width: 50%; /* Need to set this via a variable */
	margin: 0 auto;
}

to this:

nav#top-menu,
nav#primary-menu {
	font-size: 0.9em;
	z-index: 100;
	width: 50%; /* Need to set this via a variable */
	margin: 0 auto;
}

This took care of the background color issue.

Changed this in style.css: ``` nav#top-menu, nav#primary-menu { background: #fafafa; font-size: 0.9em; z-index: 100; width: 50%; /* Need to set this via a variable */ margin: 0 auto; } ``` to this: ``` nav#top-menu, nav#primary-menu { font-size: 0.9em; z-index: 100; width: 50%; /* Need to set this via a variable */ margin: 0 auto; } ``` This took care of the background color issue.

kjodle commented 3 years ago

Poster

Owner

Changed this in style.css:

nav#top-menu,
nav#primary-menu {
	font-size: 0.9em;
	z-index: 100;
	width: 50%; /* Need to set this via a variable */
	margin: 0 auto;
}

to this:

nav#top-menu,
nav#primary-menu {
	font-size: 0.9em;
	z-index: 100;
	margin: 0 auto;
}

Changed this in style.css: ``` nav#top-menu, nav#primary-menu { font-size: 0.9em; z-index: 100; width: 50%; /* Need to set this via a variable */ margin: 0 auto; } ``` to this: ``` nav#top-menu, nav#primary-menu { font-size: 0.9em; z-index: 100; margin: 0 auto; } ```

kjodle commented 3 years ago

Poster

Owner

Changed this in menus.css:

#belowheadermenu {
	font-family: serif;
	background: #fff;
	border-top: solid 1px #333;
	width: 50%;
	margin: 0 auto;
}

to this:

#belowheadermenu {
	font-family: serif;
	background: #fff;
	border-top: solid 0.15em #ddd;
	width: 50%;
	margin: 0 auto;
}

Changed this in menus.css: ``` #belowheadermenu { font-family: serif; background: #fff; border-top: solid 1px #333; width: 50%; margin: 0 auto; } ``` to this: ``` #belowheadermenu { font-family: serif; background: #fff; border-top: solid 0.15em #ddd; width: 50%; margin: 0 auto; } ```

kjodle commented 3 years ago

Poster

Owner

Changed this in style.css:

body > header {
	border-bottom: solid 1px #444;
	background: #ffffff;
}

to this:

body > header {
	background: #ffffff;
}

Changed this in style.css: ``` body > header { border-bottom: solid 1px #444; background: #ffffff; } ``` to this: ``` body > header { background: #ffffff; } ```

kjodle commented 3 years ago

Poster

Owner

Changed this in menus.css:

#belowheadermenu {
	font-family: serif;
	background: #fff;
	border-top: solid 0.15em #ddd;
	width: 50%;
	margin: 0 auto;
}

to this:

#belowheadermenu {
	font-family: serif;
	background: #fff;
	border-top: solid 0.15em #ddd;
	border-bottom: solid 0.15em #ddd;
	width: 50%;
	margin: 0 auto;
}

Top-end borders are now looking good.

Changed this in menus.css: ``` #belowheadermenu { font-family: serif; background: #fff; border-top: solid 0.15em #ddd; width: 50%; margin: 0 auto; } ``` to this: ``` #belowheadermenu { font-family: serif; background: #fff; border-top: solid 0.15em #ddd; border-bottom: solid 0.15em #ddd; width: 50%; margin: 0 auto; } ``` Top-end borders are now looking good.

kjodle commented 3 years ago

Poster

Owner

Change this in style.css:

#container {
    margin: 0px auto;
    max-width: 1000px;
    min-width: 700px;
    width: 80%;
    background: #ffffff;
    padding: 20px;
}

to this:

#container {
    margin: 0px auto;
    max-width: 1000px;
    min-width: 700px;
    width: 80%;
    background: #ffffff;
    padding: 20px;
    border-bottom: solid 0.15em #ddd;
}

And delete this from style.css:

body > footer {
	border-top: solid 1px #444;
}

Centering, color, and border issues should be resolved now.

Change this in style.css: ``` #container { margin: 0px auto; max-width: 1000px; min-width: 700px; width: 80%; background: #ffffff; padding: 20px; } ``` to this: ``` #container { margin: 0px auto; max-width: 1000px; min-width: 700px; width: 80%; background: #ffffff; padding: 20px; border-bottom: solid 0.15em #ddd; } ``` And delete this from style.css: ``` body > footer { border-top: solid 1px #444; } ``` Centering, color, and border issues should be resolved now.

kjodle commented 3 years ago

Poster

Owner

Changed this in menus.css:

#footermenu {
  font-family: sans-serif;
  background: #333333;
  }

to this:

#footermenu {
  font-family: sans-serif;
  background: #333333;
  width: max-content;
  margin: 0 auto;
}

We will still need to adjust colors.

Changed this in menus.css: ``` #footermenu { font-family: sans-serif; background: #333333; } ``` to this: ``` #footermenu { font-family: sans-serif; background: #333333; width: max-content; margin: 0 auto; } ``` We will still need to adjust colors.

kjodle commented 3 years ago

Poster

Owner

Changed this in menus.css:

#belowheadermenu {
	font-family: serif;
	background: #fff;
	border-top: solid 0.15em #ddd;
	border-bottom: solid 0.15em #ddd;
	width: 50%;
	margin: 0 auto;
}

to this:

#belowheadermenu {
	font-family: serif;
	background: #fff;
	border-top: solid 0.15em #ddd;
	border-bottom: solid 0.15em #ddd;
    max-width: 1000px;
    min-width: 700px;
    width: 80%;	margin: 0 auto;
}

This makes the primary menu the same effective width as the #container div, which means the top and bottom borders on the primary menu will match the width of the container.

Also changed this in style.css:

#container {
	margin: 0px auto;
	max-width: 1000px;
	min-width: 700px;
	width: 80%;
	background: #ffffff;
	padding: 20px;
    border-bottom: solid 0.15em #ddd;
}

to this

#container {
	margin: 0px auto;
	max-width: 1000px;
	min-width: 700px;
	width: 80%;
	background: #ffffff;
	padding: 1.5em 0;
    border-bottom: solid 0.15em #ddd;
}

This eliminates the entra container padding on the sides.

Also changed this in style.css:

#content {
	float: right;
	padding: 0 2%;
	width: 74%;
	margin-bottom: 2em;
}

to this:

#content {
	float: right;
	padding: 0 0 0 2%;
	width: 74%;
	margin-bottom: 2em;
}

This eliminates the padding on the right side to bring text out in line with the right side of the primary menu borders.

Also changed this in style.css:

#sidebar {
    float: left;
    padding-right: 6%;
    /* text-align: right; */
    width: 26%;
}

to this:

    float: left;
    padding-right: 6%;
    /* text-align: right; */
    width: 26%;
}

I'm not sure if I'll keep that, though.

Changed this in menus.css: ``` #belowheadermenu { font-family: serif; background: #fff; border-top: solid 0.15em #ddd; border-bottom: solid 0.15em #ddd; width: 50%; margin: 0 auto; } ``` to this: ``` #belowheadermenu { font-family: serif; background: #fff; border-top: solid 0.15em #ddd; border-bottom: solid 0.15em #ddd; max-width: 1000px; min-width: 700px; width: 80%; margin: 0 auto; } ``` This makes the primary menu the same effective width as the `#container` div, which means the top and bottom borders on the primary menu will match the width of the container. Also changed this in style.css: ``` #container { margin: 0px auto; max-width: 1000px; min-width: 700px; width: 80%; background: #ffffff; padding: 20px; border-bottom: solid 0.15em #ddd; } ``` to this ``` #container { margin: 0px auto; max-width: 1000px; min-width: 700px; width: 80%; background: #ffffff; padding: 1.5em 0; border-bottom: solid 0.15em #ddd; } ``` This eliminates the entra container padding on the sides. Also changed this in style.css: ``` #content { float: right; padding: 0 2%; width: 74%; margin-bottom: 2em; } ``` to this: ``` #content { float: right; padding: 0 0 0 2%; width: 74%; margin-bottom: 2em; } ``` This eliminates the padding on the right side to bring text out in line with the right side of the primary menu borders. Also changed this in style.css: ``` #sidebar { float: left; padding-right: 6%; /* text-align: right; */ width: 26%; } ``` to this: ```#sidebar { float: left; padding-right: 6%; /* text-align: right; */ width: 26%; } ``` I'm not sure if I'll keep that, though.

kjodle commented 3 years ago

Poster

Owner

This is working now, but we still need to figure out a variable percentage that will work in mobile devices.

This is working now, but we still need to figure out a variable percentage that will work in mobile devices.

kjodle commented 3 years ago

Poster

Owner

Let's close this for now.

Let's close this for now.

kjodle closed this issue 3 years ago

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

Labels

Apply labels

Clear labels

No items

No Label

Milestone

Set milestone

Clear milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Assign users

Clear assignees

No Assignees

1 Participants

Notifications

Subscribe

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Write Preview

Loading…

Cancel

Save

There is no content yet.