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
  • 283 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by carrieathomer

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.