Hello,
So I've got the TeamShift logo in the navigation bar, I've also got the three social networking site images in there too. I'm pretty impressed with myself actually, considering I'm still learning! You can see the website here; teamshift.co.uk but what I want to be able to do is "control" the three social images as a group without the TeamShift image. So I can center them in the navigation bar and maybe move them a bit away from the TeamShift logo. Any idea's on how I would go about doing this? I had tried to create a second thing, but it didn't really work.
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 href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/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">
<a href="/index.php"><img src="images/logos.png" ></a>
<a href="#"><img src="images/YouTube.png" alt="Youtube" /></a>
<a href="#"><img src="images/Twitter.png" alt="Twitter" /></a>
<a href="#"><img src="images/Facebook.png" alt="Facebook" /></a>
<div class="menu" rel="sam1">
<div><a href="/index.php">Home</a></div>
<div><a href="/Gallery.php">Gallery</a></div>
<div><a href="#">Tutorials</a></div>
<div><a href="#">Profiles</a></div>
<div><a href="#">Videos</a></div>
<div><a href="#">Contact Us</a></div>
</div>
</div>
</div>
</head>
<body>
<div id="marquee" >
<div id="marq" >
<marquee behaviour="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" ><font color="white" face="Arial"> Welcome to TeamShift's Website!</font></marquee>
</div>
</div>
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: 100%;
margin: 0px auto;
position: relative;
}
.container img {
position:relative;
top:5px;
float:right;
padding:0 10px 0 0;
}
.menu {
height: 60px;
float: left;
}
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{
}
style.css
body {
background-color:#000000;
}
a,a:visited {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ff9000;
}
p {
color: #fff;
}
.welcome {
width: 950px;
height: 310px;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.content {
width: 1020px;
height: 860px;
background-color: #282828;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 20px;
margin-bottom: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.line {
padding: 0 20px;
width: auto;
margin: 0 auto;
border-top: 3px solid #212121;
display: block;
}
#footer {
background: url(/images/footer.png) repeat-x top center;
width: 100%;
padding-top: 120px;
padding-bottom: 150px;
position: absolute;
margin-bottom: 0px;
margin-right: 15px;
margin-left: auto
bottom: 0%;
}
#marq {
border: 1px solid #000000;
background-color: #E65A2C;
width: auto;
height: 18px;
color: #ff9000;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}
#marquee {
margin: 0px 0 0px 0;
position: relative;
}
.titleFont1 {
font-size:25px;
color: #ff9000;
font-family: Skranji;
src: url('http://fonts.googleapis.com/css?family=Skranji'),
}
.titleFont2 {
font-size:25px;
color: #ffffff;
font-family: Skranji;
src: url('http://fonts.googleapis.com/css?family=Skranji'),
}
