Code: Select all
.nav {
position: relative;
margin : 0 auto; // or can be whatever you want...
}
Code: Select all
.nav li {
width: auto;
}
Code: Select all
.nav {
position: relative;
margin : 0 auto; // or can be whatever you want...
}
Code: Select all
.nav li {
width: auto;
}
Code: Select all
<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>
<!-- IF S_ENABLE_FEEDS -->
<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}"><!-- ENDIF -->
<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->
<!-- IF U_CANONICAL -->
<link rel="canonical" href="{U_CANONICAL}">
<!-- ENDIF -->
<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:
-->
<!-- IF S_ALLOW_CDN -->
<script>
WebFontConfig = {
google: {
families: ['Open+Sans:600:cyrillic-ext,latin,greek-ext,greek,vietnamese,latin-ext,cyrillic']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/w ... webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" media="all and (max-width: 700px)">
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->
<!-- IF S_PLUPLOAD -->
<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->
<!--[if lte IE 9]>
<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->
<!-- EVENT overall_header_head_append -->
{$STYLESHEETS}
<!-- EVENT overall_header_stylesheets_after -->
<style>
.nav ul {
list-style: none;
background-color: #21cf20;
text-align: left;
padding: 0;c
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #000;
display: block;
padding-left: 5px;
border-bottom: 1px solid #21cf20;
transition: .3s background-color;
}
.nav a:hover {
color: #ffffff;
background-color: #21cf20;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
.nav li {
position: relative;
margin : 0 auto; // or can be whatever you want...
width: auto;
border-bottom: none;
height: 20px;
line-height: 20px;
font-size: 1.8em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: left;
}
.nav > ul > li > a {
padding-left: 10;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
</style>
</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
<!-- EVENT overall_header_body_before -->
<div id="wrap">
<a id="top" class="anchor" accesskey="t"></a>
<div id="page-header">
<div class="headerbar" role="banner">
<!-- EVENT overall_header_headerbar_before -->
<div class="inner">
<div id="site-description">
<h1 style="font-size: 3em;">Empowered Golfers Manitoba</h1>
</div>
<!-- EVENT overall_header_searchbox_before -->
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box" class="search-box search-header" role="search">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
{S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<div class="nav">
<ul>
<li class="home"><a href="../../../../index.html">Home</a></li>
<li class="tutorials"><a href="#">Links</a>
<ul>
<li><a href="#">Buy And Sell</a></li>
<li><a href="#">Canadian Amputee Golf Association (CAGA)</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Golf Buddy</a></li>
<li><a href="#">Golf Course Owners and Operators</a></li>
</ul>
</li>
<li class="about"><a class="active" href="../../../../Provinces.html">Provinces</a></li>
<li class="contact"><a href="../../../../Courses.html">Courses</a></li>
<li class="contact"><a href="../../../../Snowbirds.html">Snowbirds</a></li>
<li class="contact"><a href="http://www.empoweredgolfersmanitoba.ca/phpBB3/">Discussion Board</a></li>
<li class="contact"><a href="../../../../Chatroom.html">Live Chat</a></li>
<li class="contact"><a href="../../../../Contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<!-- EVENT overall_header_headerbar_after -->
</div>
<!-- EVENT overall_header_navbar_before -->
<!-- INCLUDE navbar_header.html -->
</div>
<!-- EVENT overall_header_page_body_before -->
<a id="start_here" class="anchor"></a>
<div id="page-body" role="main">
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="information" class="rules">
<div class="inner">
<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
</div>
</div>
<!-- ENDIF -->
<!-- EVENT overall_header_content_before -->
Code: Select all
<div class="nav">
Code: Select all
<style>
.nav {
position: relative;
margin : 0 auto; // or can be whatever you want...
}
.nav ul {
list-style: none;
background-color: #21cf20;
text-align: left;
padding: 0;c
margin: 0;
}
.nav li {
width: auto;
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #000;
display: block;
padding-left: 5px;
border-bottom: 1px solid #21cf20;
transition: .3s background-color;
}
.nav a:hover {
color: #ffffff;
background-color: #21cf20;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
.nav li {
position: relative;
margin : 0 auto; // or can be whatever you want...
width: auto;
border-bottom: none;
height: 20px;
line-height: 20px;
font-size: 1.8em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: left;
}
.nav > ul > li > a {
padding-left: 10;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: auto;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
</style>
+ there is an online editor for testing).. Try it and find out more about css and how it works.w3schools is a normal site, to get some basic or intermediate knowledge about css. You can find some good examples & info about everything, that you have asked here.
Code: Select all
Error: CSS: c: Parse Error.
At line 48, column 9
g: 0;c↩margin: 0;↩}↩↩.nav li {
Error: CSS: Parse Error.
From line 88, column 8; to line 88, column 11
. ↩width: auto;↩bord
Error: CSS: padding-left: only 0 can be a unit. You must put a unit after your number.
From line 106, column 15; to line 106, column 16
ing-left: 10;↩}↩↩/
// or can be whatever you want...
that is probably why you are getting w3 errors.Charisma44 wrote: ↑Thu Mar 22, 2018 12:52 am I removed // or can be whatever you want...
I use Dreamweaver CC to edit.
Code: Select all
<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>
<!-- IF S_ENABLE_FEEDS -->
<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}"><!-- ENDIF -->
<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->
<!-- IF U_CANONICAL -->
<link rel="canonical" href="{U_CANONICAL}">
<!-- ENDIF -->
<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:
-->
<!-- IF S_ALLOW_CDN -->
<script>
WebFontConfig = {
google: {
families: ['Open+Sans:600:cyrillic-ext,latin,greek-ext,greek,vietnamese,latin-ext,cyrillic']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/w ... webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" media="all and (max-width: 700px)">
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->
<!-- IF S_PLUPLOAD -->
<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->
<!--[if lte IE 9]>
<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->
<!-- EVENT overall_header_head_append -->
{$STYLESHEETS}
<!-- EVENT overall_header_stylesheets_after -->
<style>
/* Add a black background color to the top navigation */
.topnav {
background-color: #21cf20;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #21cf20;
color: white;
}
</style>
</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
<!-- EVENT overall_header_body_before -->
<div id="wrap">
<a id="top" class="anchor" accesskey="t"></a>
<div id="page-header">
<div class="headerbar" role="banner">
<!-- EVENT overall_header_headerbar_before -->
<div class="inner">
<div id="site-description">
<h1 style="font-size: 3em;">Empowered Golfers Manitoba</h1>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">Links</a>
<a href="#about">Provinces</a>
<a href="#contact">Courses</a>
<a href="#contact">Snowbirds</a>
<a href="#contact">Discussion Board</a>
<a href="#contact">Live Chat</a>
<a href="#contact">Contact</a>
</div>
</div>
<!-- EVENT overall_header_searchbox_before -->
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box" class="search-box search-header" role="search">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
{S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<!-- menu start -->
</div>
<!-- EVENT overall_header_headerbar_after -->
</div>
<!-- EVENT overall_header_navbar_before -->
<!-- INCLUDE navbar_header.html -->
<!-- menu ends -->
<!-- EVENT overall_header_page_body_before -->
<a id="start_here" class="anchor"></a>
<div id="page-body" role="main">
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="information" class="rules">
<div class="inner">
<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
</div>
</div>
<!-- ENDIF -->
<!-- EVENT overall_header_content_before -->