Container Img x2?

Question

zobadof -7 Junior Poster

11 Years Ago

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

web-design

2 Contributors
11 Replies
173 Views
22 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by zobadof

All 11 Replies

pixelsoul 272 Red Pill

11 Years Ago

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.

pixelsoul 272 Red Pill

11 Years Ago

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>

pixelsoul 272 Red Pill

11 Years Ago

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

Reply to this topic

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.

zobadof -7 Junior Poster · Answer 1 · 2013-03-20T23:18:28+00:00

How would I go about that, without breaking everything?

zobadof -7 Junior Poster · Answer 2 · 2013-03-20T23:23:05+00:00

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

zobadof -7 Junior Poster · Answer 3 · 2013-03-21T19:12:20+00:00

zobadof -7 Junior Poster

11 Years Ago

Am still hoping for a possible solution.

zobadof -7 Junior Poster · Answer 4 · 2013-03-21T21:02:39+00:00

zobadof -7 Junior Poster

11 Years Ago

Yes

pixelsoul 272 Red Pill Featured Poster · Answer 5 · 2013-03-21T21:51:27+00:00

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.

zobadof -7 Junior Poster · Answer 6 · 2013-03-21T21:53:23+00:00

zobadof -7 Junior Poster

11 Years Ago

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

Edited 11 Years Ago by zobadof

pixelsoul 272 Red Pill Featured Poster · Answer 7 · 2013-03-21T22:01:52+00:00

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.

zobadof -7 Junior Poster · Answer 8 · 2013-03-21T22:09:12+00:00

zobadof -7 Junior Poster

11 Years Ago

Many thanks!

Container Img x2?

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers