Altering CSS

Report · May 22, 2018

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.

Report · May 22, 2018

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.

Report · May 22, 2018

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.

Report · May 22, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 22, 2018

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

Report · May 22, 2018

Try this:

<!doctype html>

<html>

<head>

<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 class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown »</a>

</li>

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

</li>

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

</li>

</ul>

</nav>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 23, 2018

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?

Report · May 23, 2018

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'); ?>

Wappler, the only real Dreamweaver alternative.

Report · May 24, 2018

Will this work if it's not php?

Report · May 24, 2018

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,

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 25, 2018

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

Report · May 25, 2018

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

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Altering CSS

1 Correct answer