Hello Daniweb users!
I'm currently coding a new website for a group and I've literally just started coding the site so do not expect anything amazing at the moment. Though, I am trying to get the image of the logo to go into the Navigation Bar. Ideally I will have this on the right hand side of the navigation bar, I'm curious to know if anyone is aware of how I could go about doing this?
menu.css
.wrapper {
width: 100%;
height: 60px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
border-top: 2px solid rgb(90, 90, 90);
position: relative;
margin-left: auto;
margin-right: auto;
}
.container {
width: auto;
margin: 0px auto;
}
.menu {
height: 60px;
float: center;
}
div.menu {
height: 60px;
}
div.menu a:first-child {
border-right: 0;
border-left: 0;
}
div.menu div {
list-style: none outside none;
float: left;
height: 60px;
text-align: center;
}
div.menu a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 60px;
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
div.menu a:hover {
background: transparent none;
}
div.active a{
}
div.menu p:first
{
}
header.php
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>TeamShift - Parkour</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="#" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="menu.css"/>
<div class="wrapper">
<div class="container"><div class="menu" rel="sam1">
<div><a href="/index.php">Home</a></div>
<div><a href="#"></a>Test1</div>
<div><a href="#"></a>Test2</div>
<div><a href="#"></a>Test3</div>
<div><a href="#"></a>Test4</div>
<div><a href="#"></a>Test5</div>
<div><a href="#"></a>Test6</div>
</div>
</div>
</div>
</head>
<body>
<div class="bg">
<marquee bgcolor="black"></marquee>
<div class="container_12">
<div class="grid_6"><a href="/index.php"><img src="images/logo.png" alt="" /></a></div>
<div class="grid_6">
</div>
<div class="clear"></div>
<div class="grid_12" id="content">
<div class="content-spacer">
You can see the website at teamshift.co.uk, as explained it's no-where near done but I would quite like to get this image inside of the navigation bar. I'm fully aware I'll need to rezie and crop it first, as the image has a lot of padding but I know how to do this with height and width in the code and then cropping in a photo program.
Many thanks and I look forward to your replies,
Jadon