Member Avatar for zobadof

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; 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
  • 185 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by zobadof

Dani AI

Generated

Good call from to wrap the three social icons — that’s the right first step. Two important fixes before styling: move the header markup out of the <head> and into the <body> (the code shown is inside <head>, which breaks layout), and stop styling every image with one generic selector. Your current rule that targets all images inside .container will also affect the logo; give the logo and the social group explicit classes so you can style them separately.

A robust, modern approach is to keep the logo left and menu right using flexbox, and center the social group absolutely inside the same row so it stays visually centered regardless of logo/menu widths. Example HTML (put this inside <body>):

<div class="header-inner">
  <a href="/" class="logo"><img src="images/logos.png" alt="TeamShift"></a>
  <div class="social-group">
    <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>
  <nav class="main-menu">…</nav>
</div>

And CSS idea (keeps things simple and predictable):

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative; /* required for absolute centering below */
  max-width:1020px;
  margin:0 auto;
}
.social-group {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:8px;
}
.logo img { display:block; height:40px; }
.social-group img { display:block; height:24px; }

Quick troubleshooting checklist:

  • Replace or narrow any existing .container img rule so it doesn’t force floats on the logo or icons.
  • Use devtools to inspect computed styles and find which rule is moving images.
  • Add sensible alt text and consider media queries to stack or shrink icons on small screens.

This keeps the social images as a single controllable group, keeps the logo independent, and avoids brittle pixel nudging.

Recommended Answers

All 11 Replies

Member Avatar for pixelsoul

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.

Member Avatar for zobadof

How would I go about that, without breaking everything?

Member Avatar for pixelsoul

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>
Member Avatar for zobadof

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

Member Avatar for zobadof

Am still hoping for a possible solution.

Member Avatar for pixelsoul

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

Member Avatar for zobadof

Yes

Member Avatar for pixelsoul

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.

Member Avatar for zobadof

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

Edited by zobadof
Member Avatar for pixelsoul

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.

Member Avatar for zobadof

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.