Logo on top of header out of alignment

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,306 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 5,374 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 784 | Replies: 8

•

Join Date: May 2007

Posts: 15

Reputation: npatel0317 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 1

npatel0317 npatel0317 is offline

Offline

Newbie Poster

Logo on top of header out of alignment

Mar 2nd, 2008

http://insanecricket.com/vision/

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

Last edited by npatel0317 : Mar 2nd, 2008 at 5:54 pm.

•

Join Date: Jan 2008

Posts: 24

Reputation: kashmir323 is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

kashmir323 kashmir323 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 2nd, 2008

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
 
<br>
 
</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>
<!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>

<br>

</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>

Last edited by kashmir323 : Mar 2nd, 2008 at 7:40 pm.

•

Join Date: May 2007

Posts: 15

Reputation: npatel0317 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 1

npatel0317 npatel0317 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 2nd, 2008

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

•

Join Date: Jan 2008

Posts: 24

Reputation: kashmir323 is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

kashmir323 kashmir323 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 2nd, 2008

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

•

Join Date: Jan 2008

Posts: 24

Reputation: kashmir323 is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

kashmir323 kashmir323 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 3rd, 2008

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.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
 
<br>
 
</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>
<!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>

<br>

</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>

Last edited by kashmir323 : Mar 3rd, 2008 at 7:45 pm.

•

Join Date: Jan 2007

Posts: 2,556

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 114

MidiMagic

Offline

Posting Maven

Re: Logo on top of header out of alignment

Mar 3rd, 2008

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

Daylight-saving time uses more gasoline

•

Join Date: May 2007

Posts: 15

Reputation: npatel0317 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 1

npatel0317 npatel0317 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 4th, 2008

thanks a lot kashmir

Last edited by npatel0317 : Mar 4th, 2008 at 5:26 pm.

•

Join Date: Jan 2008

Posts: 24

Reputation: kashmir323 is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

kashmir323 kashmir323 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 4th, 2008

yup. did you see what i did? oh and you also didnt close the last line of your css section with a } but i fixed that too for you.

•

Join Date: May 2007

Posts: 15

Reputation: npatel0317 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 1

npatel0317 npatel0317 is offline

Offline

Newbie Poster

Re: Logo on top of header out of alignment

Mar 4th, 2008

•

Originally Posted by kashmir323

yup. did you see what i did? oh and you also didnt close the last line of your css section with a } but i fixed that too for you.

yes i have learned some new stuff

thanks

•

Only community members can participate in forum threads. You must register or log in to contribute.

•

DaniWeb HTML and CSS Marketplace

•

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

•

Similar Threads

IE quirk-no images showing on my index page (HTML and CSS)

Other Threads in the HTML and CSS Forum

Previous Thread: Image divide
Next Thread: Trouble with External .css file

DaniWeb Home > Forums > Web Development > Web Design > HTML and CSS

Logo on top of header out of alignment

Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment

Re: Logo on top of header out of alignment