I have developed an CSS navigation menu and for each navigation item I have written php.file.
homepage.php
<html>
<head>
<title>My First Try Of CSS Navigation Bar</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/*
End navigation bar styling. */
/* This is just styling for this
specific page. */
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #fff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Shree Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. -->
<ul id="nav">
<li>Home
</li>
<li>About US
</li>
<li><a href="#">Contact
US</a>
</li>
<li>Login
</li>
</ul>
<!-- That's it! -->
<div id="content">Area
<tr>
<td height="20px" />
<td style="text-align:left">
<select name="leavetype" id="leavetype">
<?php $query="select code,areaname from areamaster" ; $query_run=mysql_query($query); mysql_num_rows($query_run); while($row=mysql_fetch_assoc($query_run)) { ?>
<option value="<?php echo $row['code']?>">
<?php echo $row[ 'areaname']?>
</option>
<?php } ?>
</select>
</td>
</tr>
</div>
</body>
</html>
aboutus.php
<?php include( "$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<html>
<head>
<title>Shree Shree Property,Kolhapur</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 5em 0;
padding: 0;
list-style: none;
background-color: #f3f3f3;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
ul.primary li:hover a {
background: pink;
color: #666;
text-shadow: none;
}
#nav li {
float: left;
background: #0080ff;
}
#nav li a {
display: block;
padding: 8px 17.5px;
text-decoration: none;
font-weight: bold;
color: black;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: black;
background-color: #00bfff;
}
/* End navigation bar styling. */
/* This is just styling for this specific page.
*/
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #00bfff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
h4 {
font-size: 1.1em;
float: center;
padding: 1em 8px;
color: #333;
background-color: #00bfff;
margin: 0;
-webkit-align-content: center;
align-content: center;
}
#content {
padding: 1em 8px;
}
#current a {
color: #ff0000;
}
#dddd {
color: red;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<form name="tstest" action="test20.php" onsubmit="return CommonFunction(this); method=" POST "> <h1>Shree
Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. --> <ul id="nav ">
<li>Home</li> <li class="current " id="dddd ">About US</li> <li>Contact US</li>
<li>Login</li> <li>Add Property</li> <li>Luxarious Property</li>
<li>Property For Sale</li> <li><a href="# ">Other
Services</a></li> </ul> <!-- That's it! --> <div> <html>
<body> <div id="wrap ">
<h4>Shree Shree Property<h4> <p>Shree Shree Property provides
leading property consultancy in Kolhapur</p> </div>
<body> </html> </form> </table> </div> </div>
</body> </html>
i need to set color of only home menu that is first from left manu. then
i need to change color of only selected menu background
and whenver i navigate to another menu that menu color also need to change
and previously changed menu's color need as like i at home page
You have done like this already. In home.php you use
<a href="../riteshproject/home.php" class="active">
So if you want to add same style to other pages just add this to your current php window.
class="active"
For example if you are on about.php Then open the file and change it to look like this. Also make sure that other a href tags do not have the same active class.
About US
If you want to style it better just find or create active class in your css file
.active {
background-color: red;
}
Related
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
this is my first post. Hope I'm specific enough to get some help :)
I created a dropdown menu in my navigation bar for my clanwebsite. But I can't change the css in a way that it would be the same as my other titles from the navigation bar.
Also when I go over it with my cursor, the login button is being moved. And the css of my navigation is different when I go to the Main team page in the dropdown menu.
Thanks!
NOTE don't mind the php. Still working on that.
my HTML of the home page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<li><div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
my CSS
p {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #444;
}
li {
float: left;
box-shadow: 15px 15px 50px #888888;
font-size: 20px;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
position: relative;
display: inline-block;
}
.dropdown-content a {
display: block;
background-color: slategray;
}
.dropdown-content {
display: none;
position: inherit;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
overflow: hidden;
background-color: slategray;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
font-size: 20px;
position: relative;
display: inline-block;
}
. dropbtn:hover {
background-color: crimson;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: crimson;
padding: 20px 50px;
}
and my Main Team page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.
My CSS/HTML code is:
body {
font-family: FuturaLight;
background: white;
color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid yellowgreen;
border-top: 1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer {
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Contact
</li>
<li>Over
</li>
<li>Foto's
</li>
<li>Activiteiten
</li>
<li>Papierwerk
</li>
<li>Afspraken
</li>
<li>Uniform
</li>
<li>Technieken
</li>
<li>Jaarthema
</li>
<li>Rituelen
</li>
<li>Verhuur
</li>
<li>Inschrijvingen
</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%" " >
<div style="font-family: Futura ">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
Many thanks in advance.
Add to your ul in your Stylesheet this:
text-align: center;
and replace from li
float: left;
with this
display: inline-block;
That could do it.
Hope this helps.
Have you considered flexbox as it will work depending on screen size and you can set it to be centre alligned.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just note it wont work in older versions of ie
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content:center;
flex-wrap: wrap
}
li {
float: left;
border-right:1px solid yellowgreen;
border-top:1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer
{
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a></li>
<li>Nieuws</li>
<li>Contact</li>
<li>Over</li>
<li>Foto's</li>
<li>Activiteiten</li>
<li>Papierwerk</li>
<li>Afspraken</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
<li>Verhuur</li>
<li>Inschrijvingen</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
One of my assignments is to create a responsive webpage. I'm running into trouble when attempting to open it on mobiles. My 'li' elements touch and look awful.
How can I stop the 'box' around each li item from touching?
HTML -
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<body>
<center>
<div id="Menubar">
<ul>
<li id="active">Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</center>
CSS -
#Menubar ul {
padding: .05em 0;
margin: 0;
list-style-type: none;
background-color: #3A3734;
color: #FFF;
width: 100%;
font-family: Oswald;
font-size: 32pt;
font-weight: bold;
text-align: center;
border-top:solid #8E7861 4px;
border-bottom:solid #8E7861 4px;
}
#Menubar ul li { display: inline; }
li a {
text-decoration: none;
margin: 0 0 3px 0;
background-color: white;
color: #6AA0CC;
padding: .1em 1em;
border: 2px solid #6AA0CC;
}
li a:hover {
background-color: #6AA0CC;
color: #fff;
border: 2px solid white;
}
.listcenter{
width:250px;
margin:0 auto;
text-align:left;
}
JSFIDDLE
Add the following code to the li a selector apart from other styles that you have applied.
li a {display:inline-block;}
Check the updated JSFIDDLE
The important thing is that for responsive webpage you should use media queries as well.
I want to center (automatically) the navbar on this site. Also, I need to have a 1px border-top and 1px border-bottom that extends roughly 70% of the nav area.
It should look like this mockup once it's done:
Remove the floats on your li tags, and on your #navigation, add text-align: center;. Your floats are making your parent have a height of 0, which will in turn not allow you to have your borders. This fixes both those issues. From there, just add border-top: 1px solid white; border-bottom: 1px solid white; to your ul to get your lines.
Take a look at this fiddle http://jsfiddle.net/qZTAt/
The key there is this piece of code:
nav {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 15%;
text-align: center;
}
Try using margin:0 auto; padding:0;
Right I'm going to come in late to this party (with an already answered question!) just to add what I would have done. It's based on this technique here
http://jsfiddle.net/rabmcnab/GSSQx/
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<style> body {
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 20px;
}
.font {
font-family: 'Poiret One', cursive;
}
header {
background-color: aqua;
padding: 40px 0px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
padding: 0 40px;
margin: 0 auto;
text-align: center;
}
nav {
border-top: thin solid white;
border-bottom: thin solid white;
width: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: -10px;
color: white;
font: 40px/0 arial;
padding: 40px 0;
}
li:hover {
color: #fff;
cursor: pointer;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>
</header>
</body>
</html>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>