The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help changing Navigation bar background colour?, I am a first time web designer in need of help changing the background
Kennebob
post Oct 15 2014, 02:51 PM
Post #1





Group: Members
Posts: 1
Joined: 15-October 14
Member No.: 21,677
Hello, I am in need of help. I am a first time web designer, and I have taken a school project and am creating a website for it - just to learn some things about web design. I have a desired look of my website, which I have here:
http://i.imgur.com/499PPWu.png

and I have my current site, which looks very poorly and is in need of plastic surgery.
http://i.imgur.com/Jlhxxtl.png

If you would like to see my code, it is here:

<!DOCTYPE>
<html lang="en">

<head>
<title>Milkquake - Home</title>
<link rel="shortcut icon" href="real favicon.ico"/>
<meta charset="utf-8" />

<link rel="stylesheet" href="home.css" type="text/css" />
<meta name="viewport" content="width-device-width, initial-scale-1.0">
<meta name="viewport" content="height-device-height, initial-scale-1.0">
</head>

<body class="body">

<header class="mainheader">

<div id="Logo"><img src= "Logo small.png"></div>

<nav id="Menu">
<ul>
<div id="Home"><li><a href= "index.html">Home</a></li></div>
<div id="About"><li><a href= "about.html">About</a></li></div>
<div id="Nutrition"><li><a href= "nutrition.html">Nutrition and Ingredients</a></li></div>
<div id="Contact"><li><a href= "nutrition.html">Contact</a></li></Contact></div>
</ul>
</Menu>
<br>
<br>
<br>
<br>
<br>
<br>

<hr>


</header>
</body>

CSS:

.mainheader img {
position: fixed ;
top: 1% ;
left: 10% ;



}

body {
background-color: #00BFFF ;
}

li {
display: inline;
}


ul {
list-style-type: none;
margin: 0;
padding: 0;
}



#Home {
position: fixed;
top: 8%;
left: 27%;
text-decoration: underline;
}

#About {
position: fixed;
top: 8%;
left: 35%;
}

#Nutrition {
position: fixed;
top: 8%;
left: 43%;

}

#Contact {
position: fixed;
top: 8%;
left: 59%;

}


a {
text-decoration: none;
}


a:link {
color : gray;
background-color : white ;
font-family : "Tw Cen MT" ;
text-decoration : none ;
}
a:visited {
color : gray ;
background-color : white ;
font-family : "Tw Cen MT" ;
text-decoration : none ;
}
a:hover {
color : #00BFFF ;
background-color : white ;
font-family : "Tw Cen MT" ;
text-decoration : none ;

}
a:active {
color : #00BFFF ;
background-color : white ;
font-family : "Tw Cen MT" ;
text-decoration : underline ;
}




Any help is really appreciated smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 15 2014, 05:03 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Well, as a starting point, if you want the menu to have a different background color than the rest of the page you need to specify that.


CODE
#menu   { background: white }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 07:08 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC