Member Avatar for zobadof

Hello Daniweb users!

I'm currently coding a new website for a group and I've literally just started coding the site so do not expect anything amazing at the moment. Though, I am trying to get the image of the logo to go into the Navigation Bar. Ideally I will have this on the right hand side of the navigation bar, I'm curious to know if anyone is aware of how I could go about doing this?

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: auto;
    margin: 0px auto;
}

.menu {
    height: 60px;
    float: center;
}
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
{

}

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 rel="stylesheet" type="text/css" media="all" href="css/960.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"><div class="menu" rel="sam1">  
                 <div><a href="/index.php">Home</a></div>  
                 <div><a href="#"></a>Test1</div>  
                 <div><a href="#"></a>Test2</div>  
                 <div><a href="#"></a>Test3</div>
                 <div><a href="#"></a>Test4</div> 
                 <div><a href="#"></a>Test5</div>
                 <div><a href="#"></a>Test6</div> 

          </div>  
         </div>
         </div>


</head>
<body>



<div class="bg">


<marquee bgcolor="black"></marquee>
    <div class="container_12">
        <div class="grid_6"><a href="/index.php"><img src="images/logo.png" alt="" /></a></div>
        <div class="grid_6">

        </div>


        <div class="clear"></div>
        <div class="grid_12" id="content">
            <div class="content-spacer">

You can see the website at teamshift.co.uk, as explained it's no-where near done but I would quite like to get this image inside of the navigation bar. I'm fully aware I'll need to rezie and crop it first, as the image has a lot of padding but I know how to do this with height and width in the code and then cropping in a photo program.

Many thanks and I look forward to your replies,
Jadon

  • 2 Contributors
  • 4 Replies
  • 97 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by zobadof
Member Avatar for JorgeM

Which image are you trying to get up in the navigation bar...the team shift image?

Once you get hte proper size image, you can place it after the div that currently has the class of "container", and simply assign an abosolute position with top and left values. however, this will require that you set the position of "container" to relative for this to work. This will allow you to precisely position the image in your navigation bar.

Member Avatar for zobadof

Hi,

So it's now in the navigation bar but I'm really confused on how to move it across to the right and maybe push it down a bit? Could you maybe tell me the code?

Member Avatar for JorgeM

Ok so you can do something like this in your CSS file...

.container img {position:absolute;top:##px;left:##px;}

Just put in the correct values in place of "##"

Member Avatar for zobadof

Thank you! I've got it working now.

Many thanks,
Jadon

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.