Member Avatar for Farhad.idrees

Hi my problem is that logo is showing but behing the header..i want to show logo ofcourse in front of header...
my css is

#Container
{
	width:1024px;
	margin-left:10%;
	margin-right:10%;
	
}

#Header
{
	
}

#Top_Menu
{
	margin-top:-160px;
}

#Logo
{
	float:left;
	margin-top:-120px;
	margin-left:5px;
}

my html code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bahria University Karachi Campus</title>
<link href="Style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="Container">

<div id="Header">
<img src="Images2/Header.jpg" />


<div id="Top_Menu">
 
<div id="Logo">
<img src="Images2/Logo.jpg" />
</div>

</div>
</div>


</div>

</body>
</html>

i hope, will get responce..regards....
Farhad

  • 4 Contributors
  • 3 Replies
  • 292 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by carrieathomer

Dani AI

Generated

Your logo is being overlapped by the header because the page relies on negative margins and floats to force the logo into place. Negative margins can work briefly, but they make overlap and stacking order unpredictable. is right to flag the negative margins; and were also on the right track with centering and the idea of using positioned elements instead of pulling things with offsets.

A reliable fix is to make the header a positioned container and place the logo absolutely inside it with a higher stacking order. This anchors the logo to the header so it sits visually on top, regardless of document flow:

#Header {
  position: relative;
}

#Logo {
  position: absolute;
  top: 20px;
  left: 8px;
  z-index: 999;
}

Notes and troubleshooting checklist:

  • z-index only works for positioned elements (relative/absolute/fixed/sticky). If the header or another ancestor has a transform/opacity/filter, it creates a new stacking context — check the computed styles in DevTools.
  • Remove the large negative top margins that currently push elements on top of each other; absolute positioning replaces that need and is easier to control across screen sizes.
  • Ensure the header image is not itself given a higher z-index or positioned in a way that keeps it above the logo. If it is, lower that z-index or increase the logo’s.
  • Verify image paths and add alt text for accessibility. Use the browser inspector to confirm the logo element exists and its computed top/left/z-index values.

If the page still looks wrong, post a minimal runnable example (HTML + the updated CSS) or a screenshot of your Elements panel so the specific stacking context can be diagnosed.

Recommended Answers

All 3 Replies

Member Avatar for godflea

First...
Use automatically generated margins. It will center the container.

#Container
{
	width:1024px;
	margin-left:auto;
	margin-right:auto;
	
}

Your logo might not be showing because of your location. Could you please upload the files on any hosting, so we can clearly review what are you doing wrong?

Member Avatar for scepanmali

You can use this line of CSS:

margin: 0 auto;

Zero is for top and bottom, and auto is left and right.

As for picture, give us some file and I will help you.
You can give header DIV tag a relative attribute in CSS and Logo div absolute.
Just give it index of 5 and coordinates and it would be ok, I think.

Edited by scepanmali because: n/a
Member Avatar for carrieathomer 
#Top_Menu
{
	margin-top:-160px;
}

#Logo
{
	float:left;
	margin-top:-120px;
	margin-left:5px;
}

you have to remove negative margin for header and logo

so use

for header margin-top:10px;

for logo use margin-top:20px;

see the output and tweak the margin.

setting -120px in the margin top will move the header and logo out of the browser.

so it is not showing up.

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.