Center the primary menu #1

New Issue

Closed

opened 2021-08-01 18:39:44 +00:00 by kjodle · 13 comments

kjodle commented 2021-08-01 18:39:44 +00:00

Owner

Copy Link

No description provided.

kjodle commented 2021-08-01 18:40:28 +00:00

Author

Owner

Copy Link

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 2021-08-01 18:45:03 +00:00

Author

Owner

Copy Link

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 2021-08-01 18:45:29 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:28:58 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:31:36 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:35:19 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:37:19 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:38:50 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:43:03 +00:00

Author

Owner

Copy Link

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 2021-08-01 19:59:58 +00:00

Author

Owner

Copy Link

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 2021-08-01 23:40:51 +00:00

Author

Owner

Copy Link

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 2021-08-04 23:26:48 +00:00

Author

Owner

Copy Link

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 2021-08-05 23:03:10 +00:00

Author

Owner

Copy Link

Let's close this for now.

Let's close this for now.

kjodle closed this issue 2021-08-05 23:03:14 +00:00

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

No results found.

Labels

Clear labels

No items

No Label

Milestone

Clear milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

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

No dependencies set.

Reference: kjodle/portage#1

No description provided.