0

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'),
}
2
Contributors
11
Replies
28
Views
5 Years
Discussion Span
Last Post by zobadof
Featured Replies
  • 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> Read More

0

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.

2

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>
0

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

0

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.

0

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

Edited by zobadof

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.