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
  • 105 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by zobadof

Dani AI

Generated

A few practical fixes and a simpler, more robust way to put the logo inside the nav.

First, markup issues to fix (these will bite layout and validation): the visible navigation and wrapper belong in the document body, not inside the head, and remove the duplicate <html> tag. Browsers will try to compensate, but keeping head/body correct avoids strange CSS/DOM behavior. , move the nav markup into the body and use a semantic <nav> wrapper.

A modern approach that keeps the logo pinned to the right while keeping the menu responsive is to use flexbox for the navigation container. Place the menu items and the logo as sibling elements inside the nav; let flexbox distribute space so you do not need fragile absolute offsets. Example structure and styles:

<nav class="site-nav">
  <ul class="nav-list">
    <li><a href="/">Home</a></li>
    <li><a href="#one">Test1</a></li>
    <li><a href="#two">Test2</a></li>
  </ul>
  <a class="nav-logo" href="/">
    <img src="images/logo.png" alt="TeamShift logo">
  </a>
</nav>
.site-nav { display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 16px; }
.nav-list { display:flex; gap:12px; margin:0; padding:0; list-style:none; }
.nav-logo img { height:44px; width:auto; display:block; }

Notes and troubleshooting

  • If you need pixel-perfect placement (as suggested), absolute positioning works but requires the parent to be positioned and is less flexible across screen sizes. Use it only when necessary.
  • Use height/max-height on the image so it fits the bar; display:block removes tiny baseline gaps.
  • Optimize/crop the image and consider SVG or srcset for retina.
  • Avoid deprecated tags like <marquee> and keep accessibility: meaningful alt text and keyboard-focusable links.

For reference: the HTML5 nav element and a short flexbox guide are useful reading: nav element, Flexbox guide.

Recommended Answers

All 4 Replies

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.