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'),
}

The very first thing I would do is wrap all 3 of them in one div with their own class. You would have a much easier time controlling them after that.

How would I go about that, without breaking everything?

Something like

<div class='social'>
    <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>

I did this, I had that orginally but I was unsure of the CSS to do and where to put it :p

Am still hoping for a possible solution.

Have you wrapped them in a div? That was step number one :\

Yes

The div should only go around the social icons and not include the logo, so you can control just the position of the icons without affecting anything else.

Yeah, I've done that now, what should I do next?

Now all you have to do is to set some attributes for the class, like:

.social{
    position:relative;
    right:50px;
    top:9px;
}

Or whatever else you want.

Many thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.