Highlighted

Altering CSS

New Here ,
May 22, 2018

Copy link to clipboard

Copied

I've been running my own site for a few years and I've been hoping to someday add new coding to "spruce it up," so to speak. I've been finding and following tutorials on a few things, and I've been successful in some. But one that is perplexing me is adding drop down menus to my site.

I followed a tutorial and actually made one by creating the property code on the same html page. But when I try to add that code to my CSS, it goes crazy. The menu doesn't keep the same spacing, and when I roll over the buttons, the drop down parts show up at the top of the screen. I'm thinking there's a conflict with the established code, but for the life of me, I can't find it.

Any help is appreciated.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Includes go inside your parent HTML document.  See tutorial below.

Alt-Web Design & Publishing: Server-Side Includes with PHP

TOPICS
Create menus in Dreamweaver

Views

512

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Altering CSS

New Here ,
May 22, 2018

Copy link to clipboard

Copied

I've been running my own site for a few years and I've been hoping to someday add new coding to "spruce it up," so to speak. I've been finding and following tutorials on a few things, and I've been successful in some. But one that is perplexing me is adding drop down menus to my site.

I followed a tutorial and actually made one by creating the property code on the same html page. But when I try to add that code to my CSS, it goes crazy. The menu doesn't keep the same spacing, and when I roll over the buttons, the drop down parts show up at the top of the screen. I'm thinking there's a conflict with the established code, but for the life of me, I can't find it.

Any help is appreciated.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Includes go inside your parent HTML document.  See tutorial below.

Alt-Web Design & Publishing: Server-Side Includes with PHP

TOPICS
Create menus in Dreamweaver

Views

513

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

Could you post a link to your work in progress so we can take a look?

Without seeing the actual code you're working with, it's pretty much impossible to help aside from giving vague generalizations.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0
New Here ,
May 22, 2018

Copy link to clipboard

Copied

Understandable.

Here's the code I'm using now and wanting to change:

___________________________________

* {

    margin: 0;

    padding: 0;

}

body {

    background: #000000 url(images/img01.gif) repeat-x;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #999999;

}

h1, h2, h3 {

}

h1 {

    font-size: 3em;

}

h2 {

    letter-spacing: -1px;

    font-size: 2em;

}

h3 {

    font-size: 1em;

}

p, ul, ol {

    margin-top: 1.8em;

    line-height: 180%;

}

ul, ol {

    margin-left: 3em;

}

blockquote {

    margin-left: 3em;

    margin-right: 3em;

}

a {

    color: #CCCCCC;

}

a:hover {

    text-decoration: none;

    color: #FFFFFF;

}

hr {

    display: none;

}

/* Header */

#header {

    width: 960px;

    height: 316px;

    margin: 0 auto;

    background: url(images/TMAnewLogoSmaller.jpg);

}

#header h1, #header h2 {

    float: left;

    margin: 0;

    text-transform: uppercase;

    color: #FFFFFF;

}

#header h1 {

    padding: 30px 0 0 20px;

    font-size: 3em;

}

#header h2 {

    padding: 47px 0 0 8px;

    font-size: 1.8em;

    font-style: italic;

}

#header a {

    text-decoration: none;

    color: #FFFFFF;

}

/* Menu */

#menu {

    width: 960px;

    height: 100px;

    margin: 0 auto;

    background: url(images/BGImage4.jpg);

}

#menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: normal;

}

#menu li {

    float: left;

    padding: 12px 10px 0 20px;

}

#menu a {

    text-decoration: none;

    letter-spacing: -1px;

    font-size: 1.2em;

    font-weight: bold;

}

#menu a:hover {

    text-decoration: underline;

}

/* Page */

#page {

    width: 920px;

    margin: 0 auto;

    padding: 30px 20px 20px 20px;

    background: url(images/img04.jpg) no-repeat;

}

/* Content */

#content {

    float: left;

    width: 605px;

}

.post {

    margin-bottom: 40px;

}

.post .title {

    border-bottom: 1px solid #454545;

}

.post .title a {

    text-decoration: none;

}

.post .entry {

    padding: 0 20px;

}

.post .meta {

    height: 20px;

    padding: 15px 20px;

    background: url(images/img05.gif) no-repeat;

    line-height: normal;

}

.post .meta a {

    text-decoration: none;

    font-weight: bold;

}

.post .meta a:hover {

    text-decoration: underline;

}

.post .meta .byline {

    float: left;

}

.post .meta .comments {

    float: right;

}

/* Sidebar */

#sidebar {

    float: right;

    width: 295px;

}

#sidebar ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

#sidebar li {

}

#sidebar li ul {

    padding: 0 0 20px 20px;

    list-style: square inside;

}

#sidebar h2 {

    height: 50px;

    padding: 13px 20px 0 20px;

    background: url(images/img06.gif) no-repeat;

    font-size: 1.6em;

}

/* Search */

#search {

    padding: 20px;

    text-align: center;

}

#search input {

    margin-bottom: 10px;

    padding: 3px 5px;

    background: #1F1F1F url(images/img06.gif) no-repeat center center;

    border: 1px solid #454545;

    font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;

    color: #FFFFFF;

}

#search #s {

    width: 80%;

    background: #1F1F1F;

}

/* Calendar */

#calendar {

    padding-bottom: 20px;

}

#calendar table, #calendar caption {

    width: 80%;

    margin: 0 auto;

    text-align: center;

}

#calendar caption {

    text-transform: uppercase;

    letter-spacing: .25em;

    font-weight: bold;

}

#calendar thead th {

    background: #333333;

}

#calendar tbody td {

    background: #111111;

}

#calendar a {

    text-decoration: none;

    font-weight: bold;

}

#calendar a:hover {

    text-decoration: underline;

}

/* Footer */

#footer {

    width: 960px;

    margin: 0 auto;

    padding: 20px 0;

    background: url(images/img07.gif) no-repeat;

}

#footer p {

    margin: 0;

    line-height: normal;

    text-align: center;

}

_____________________________________________________

And here is what I'm trying to add to the MENU section:

_____________________________________________________

/* Menu */

       

        ul#navmenu, ul.sub1, ul.sub2 {

            list-style-type: none;

            font-size: 9pt;

        }

       

        ul#navmenu li {           

            width: 125px;

            text-align: center;

            position: center;

            float: left;

            margin-right: 10px;

        }

       

        ul#navmenu a {

            text-decoration: none;

            display: block;

            width: 150px;

            height: 30px;

            line-height: 40px;

            background-color: #1D5A73;

            border: 1px solid #CCC;

            border-radius: 5px;

        }

       

        ul#navmenu .sub1 li {

        }

       

        ul#navmenu .sub1 a {

            margin-top: 5px;

        }

       

        ul#navmenu .sub2 a {

            margin-left: 10px;

        }

       

        ul#navmenu li:hover > a {

            background-color: #CFC;           

        }

       

        ul#navmenu li:hover a:hover {

            background-color: #FF0;

        }

       

        ul#navmenu ul.sub1 {

            display: none;

            position: absolute;

            top: 26px;

            left: 0px;

        }

       

        ul#navmenu ul.sub2 {

            display: none;

            position: absolute;

            top: 0px;

            left: 126px;

        }

       

        ul#navmenu li:hover .sub1 {

            display: block;

        }

       

        ul#navmenu .sub1 li:hover .sub2 {

            display: block;

        }

       

        .darrow {

            font-size: 11pt;

            position: absolute;

            top: 5px;

            right: 4px;

        }

       

        .rarrow {

            font-size: 13pt;

            position: absolute;

            top: 6px;

            right: 4px;

        }

________________________________________________________________

Like I mentioned, I thought simply replacing the MENU section would work, but it's causing major glitches.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

Without seeing the related HTML, it's hard to comment about any of this.  Can you please put your page online and post the URL?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0
New Here ,
May 22, 2018

Copy link to clipboard

Copied

Here's my original page that works that I'm trying to alter. http://themandalorianarsenal.com/index.html And I have the following page linked to "styleNEW.css" that has the MENU code above altered. http://themandalorianarsenal.com/indexTEST.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

Try this:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

nav ul {

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

}

nav li {

    float: left;

    list-style: none

}

nav  li a, .dropbtn {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

nav li a:hover, .dropdown:hover .dropbtn { background-color: red; }

nav li.dropdown { display: inline-block; }

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    text-align: left;

}

.dropdown-content a:hover { background-color: #f1f1f1 }

.dropdown:hover .dropdown-content { display: block; }

</style>

</head>

<body>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown &raquo;</a>

<div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>

</li>

<li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown &raquo;</a>

<div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>

</li>

<li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown &raquo;</a>

<div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>

</li>

</ul>

</nav>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 1
New Here ,
May 23, 2018

Copy link to clipboard

Copied

Thank you for your help, but what I'm asking is not how to write the correct code because that's what I've already done. I guess I should have uploaded this one as well:

http://themandalorianarsenal.com/TMAindexTest2.html

This was the successful creation of this individual page from the YouTube tutorial after I altered it for my site. As you can see, it works fine with the menu code on this particular page.

What I'm asking is how do I add the menu coding from this individual page to the CSS for my site so that all pages have the same style of menu? And is there some conflict in the coding that I'm not seeing that is making it go crazy when I try?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2018 0
Adobe Community Professional ,
May 23, 2018

Copy link to clipboard

Copied

If your server includes a serverside code like PHP, you could use the include function.

To illustrate, cut and paste all of the menu code into a new file called menu.html or similar. Then, where the menu has been cut from your main document include the following line

<?php include_once('menu.html'); ?>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2018 0
New Here ,
May 24, 2018

Copy link to clipboard

Copied

Will this work if it's not php?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 24, 2018 0
Adobe Community Professional ,
May 24, 2018

Copy link to clipboard

Copied

PHP includes work in .php files.

Includes also come in different flavors based on your server & hosting plan. If you have a Windows server, it's possible you can use  SHTML includes instead of PHP.

In your .shtml document,

<!--#include virtual="menu.html" -->

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 24, 2018 1
New Here ,
May 25, 2018

Copy link to clipboard

Copied

I feel like I'm being impossible, but do I put this code in the html or the css? And does it matter where?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 0
Adobe Community Professional ,
May 25, 2018

Copy link to clipboard

Copied

Includes go inside your parent HTML document.  See tutorial below.

Alt-Web Design & Publishing: Server-Side Includes with PHP

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 1