Logo on top of header out of alignment

Please look at the site.

I would like to insert the logo (E-vision) on top of header but when I position it on top of header the logo is out out of alignment of the header different browsers different screen size messes up the logo on header. I would like to have logo and some text on top of header with fixed position on top of header without getting out of alignment.

Please help me out with this problem. I really appreciate your help.

Thanks
NPatel

npatel0317

Newbie Poster

15 posts since May 2007

Reputation Points: 10

Solved Threads: 1

4 Years Ago

i think this should do it. i didnt test it out but this is just by experienced guessing =)

<!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=iso-8859-1" />
<title>CSS Test 2/22/08</title>
<style type=text/css>
#container
{
max-width: 800px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
background: #FFF url('headergraident.gif') bottom repeat-x;
height: 165px;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}



#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#leftnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
		
#leftnav li {
border-bottom: 1px solid #90bade;
margin: 0;
}


#leftnav li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #leftnav li a {
width: auto;
}

#leftnav li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}



#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 46em;
}

#clip
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}

#crew
{
float: left;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 1px solid #666;
padding: 2px;
}

#farmad
{
text-align: center;
}



#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background: #FFF url('navbar.gif') bottom repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
border-top: 1px solid gray;
text-align: center;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; 


</style>
</head>
<body>
<div id="container">
<div id="top">
<img src="logo.gif" width="259" height="67" alt="E-Vision Emporia, KS"/>
</div>
<div id="leftnav">
<p>
<ul>

<li><a href="index.htm" title="Vist Our Homepage">Home</a></li>
<li><a href="sports.htm" title="E-Vision Sports">Sports</a></li>
<li><a href="lineup.htm" title="E-Vision Student Show">The Line-Up</a></li>
<li><a href="orderdvd.htm" title="Order Copy of Broadcast">Order DVD</a></li>
<li><a href="bonus.htm" title="About E-Vision">Bonus Content</a></li>
<li><a href="sponsers.htm" title="E-Vision Sponsers">Sponsors</a></li>
<li><a href="About.htm" title="About E-Vision">About</a></li>
<li><a href="Contact.htm" title="Contact E-Vision">Contact</a></li>
</ul>



</p>
</div>
<div id="content">
<h2><img src="logo.gif" width="259" height="67" alt="E-Vision Emporia, KS"></h2>
<p>
<div id="clip">
<embed src="http://www.usd253.org/evision/flvplayer.swf" width="320" height="240" allowfullscreen="true" allowscriptaccess="always" flashvars="&displayheight=240&file=http://www.usd253.org/evision/who.flv&height=240&image=http://www.usd253.org/evision/preview.jpg&width=320" />
</div>
The E-Vision crew is employed by Emporia High School students and their supervising instructors. 
E-Vision exists to serve the students and staff of Emporia High School by providing programming of events, activities, academics, sports student concerns, staff concerns, entrainment and any other topic appealing to the interests of this audience. 
However, E-Vision programming, will at all times, enhance and promote the well being of it's audience. 
The crew at E-Vision will promote what is right and best for it's audience even if what is morally or ethically wrong is legal. 
The crew at E-Vision, will follow at all times, the code and policies set forth by Emporia High School, USD #253, and it's administrators and instructors.
<div id="crew">
<img src=crew2007.2008.jpg alt="" width="320" height="240">
</div>

</p>
<p>


</p>
</div>

<div id="footer">
Copyright &copy; 2008 E-Vision
</div>
</div>


</body>
</html>

kashmir323

Light Poster

28 posts since Jan 2008

Reputation Points: 31

Solved Threads: 0

4 Years Ago

I did that and logo came on top of the bad i would like to be on the bar without moving even if you resize the window or bigger screen of monitor.

Check out this link

www.insanecricket.com/vision/picture.png

npatel0317

Newbie Poster

15 posts since May 2007

Reputation Points: 10

Solved Threads: 1

4 Years Ago

oh like that? ok easy fix. on the image line i added b4 add the tag valign="top". i think atleast.

kashmir323

Light Poster

28 posts since Jan 2008

Reputation Points: 31

Solved Threads: 0

4 Years Ago

unless you probly mean you want the header image to be ontop the background and not aligned above it. in that case use this code.

<!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=iso-8859-1" />
<title>CSS Test 2/22/08</title>
<style type=text/css>
#container
{
max-width: 800px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
background: #FFF url('headergraident.gif') bottom repeat-x;
height: 165px;
border-bottom: 1px solid gray;
}

#logogo
{
background: url('logo.gif') bottom no-repeat;
height: 165px;
}

#top h1
{
padding: 0;
margin: 0;
}



#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#leftnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
		
#leftnav li {
border-bottom: 1px solid #90bade;
margin: 0;
}


#leftnav li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #leftnav li a {
width: auto;
}

#leftnav li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}



#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 46em;
}

#clip
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}

#crew
{
float: left;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 1px solid #666;
padding: 2px;
}

#farmad
{
text-align: center;
}



#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background: #FFF url('navbar.gif') bottom repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
border-top: 1px solid gray;
text-align: center;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="logogo"/>
</div>
<div id="leftnav">
<p>
<ul>

<li><a href="index.htm" title="Vist Our Homepage">Home</a></li>
<li><a href="sports.htm" title="E-Vision Sports">Sports</a></li>
<li><a href="lineup.htm" title="E-Vision Student Show">The Line-Up</a></li>
<li><a href="orderdvd.htm" title="Order Copy of Broadcast">Order DVD</a></li>
<li><a href="bonus.htm" title="About E-Vision">Bonus Content</a></li>
<li><a href="sponsers.htm" title="E-Vision Sponsers">Sponsors</a></li>
<li><a href="About.htm" title="About E-Vision">About</a></li>
<li><a href="Contact.htm" title="Contact E-Vision">Contact</a></li>
</ul>



</p>
</div>
<div id="content">
<h2><img src="logo.gif" width="259" height="67" alt="E-Vision Emporia, KS"></h2>
<p>
<div id="clip">
<embed src="http://www.usd253.org/evision/flvplayer.swf" width="320" height="240" allowfullscreen="true" allowscriptaccess="always" flashvars="&displayheight=240&file=http://www.usd253.org/evision/who.flv&height=240&image=http://www.usd253.org/evision/preview.jpg&width=320" />
</div>
The E-Vision crew is employed by Emporia High School students and their supervising instructors. 
E-Vision exists to serve the students and staff of Emporia High School by providing programming of events, activities, academics, sports student concerns, staff concerns, entrainment and any other topic appealing to the interests of this audience. 
However, E-Vision programming, will at all times, enhance and promote the well being of it's audience. 
The crew at E-Vision will promote what is right and best for it's audience even if what is morally or ethically wrong is legal. 
The crew at E-Vision, will follow at all times, the code and policies set forth by Emporia High School, USD #253, and it's administrators and instructors.
<div id="crew">
<img src=crew2007.2008.jpg alt="" width="320" height="240">
</div>

</p>
<p>


</p>
</div>

<div id="footer">
Copyright &copy; 2008 E-Vision
</div>
</div>


</body>
</html>

kashmir323

Light Poster

28 posts since Jan 2008

Reputation Points: 31

Solved Threads: 0

4 Years Ago

Why not make one image with the logo and the bars in it?

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182