Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.
HTML header image not same width of content.
I am working on an outdated html website, http://thelegalprocessgroup.com/index.htm It is an expandable website and with wider screens the content ends up getting wider than the header. The header image is currently 1260 wide.
Is there a way to stop the content from spreading farther right than the image?
PI.JPG
Is there a way to stop the content from spreading farther right than the image?
PI.JPG
Asked:
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with premium.
Start your 7-day free trial.
I wear a lot of hats...
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
I would also redesign the whole thing for responsive design if given time to, but otherwise
I reckon add a <div class="container"> to wrap the whole content(including the header image). Then add to css
.container{
max-width:1260px;
margin-left:auto;
margin-right:auto;
}
This way if the page is viewed on a larger screen the content(including the header image) will be centered and at the same time stop the content from spreading out. hope it helps.
I reckon add a <div class="container"> to wrap the whole content(including the header image). Then add to css
.container{
max-width:1260px;
margin-left:auto;
margin-right:auto;
}
This way if the page is viewed on a larger screen the content(including the header image) will be centered and at the same time stop the content from spreading out. hope it helps.
Experts Exchange Solution brought to you by
Your issues matter to us.
Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.
Start your 7-day free trial
Thanks for the info. I used the container max width.
A couple problems I have now is:
1. The masthead bottom border drops down below the masthead
2. The footer is missing. Not sure if I changed something to mess up the footer when I was trying to fix the border issue.
Here is the master page code:
A couple problems I have now is:
1. The masthead bottom border drops down below the masthead
2. The footer is missing. Not sure if I changed something to mess up the footer when I was trying to fix the border issue.
Here is the master page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title></title>
<!-- #EndEditable -->
<link href="styles/style2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {
font-size: medium;
color: #000000;
}
.style2 {
font-size: small;
color: #C0C0C0;
}
.style3 {
font-size: medium;
color: #FBAA33;
text-align: center;
}
.style4 {
color: #000000;
}
.style7 {
text-align: center;
}
.auto-style1 {
font-size: small;
color: #000066;
}
</style>
</head>
<script type="text/javascript" src="https://s3.amazonaws.com/static.dudamobile.com/DM_redirect.js"></script>
<script type="text/javascript">DM_redirect("http://mobile.dudamobile.com/site/thelegalprocessgroup1");</script>
<body>
<!-- Begin Container -->
<div class="container">
<div id="container">
<!-- Begin Masthead -->
<div id="masthead" class="style7">
<img alt="Private Investigations" height="236" src="headernew4.jpg" width="1260" />
<p> </p>
</div>
<!-- End Masthead -->
<!-- Begin Page Content -->
<div id="page_content" style="left: 0px; top: 4px; height: 166px">
<!-- Begin Sidebar -->
<div id="sidebar" style="left: -1px; top: 64px; width: 225px; height: 738px;">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="services/services.htm">PI Services</a></li>
<li><a href="processserving/processserving.htm">Process Serving</a></li>
<li><a href="infidelity/infidelity.htm">Infidelity</a></li>
<li><a href="locate/locate.htm">Locate People</a></li>
<li><a href="about/about.htm">About Us</a></li>
<li><a href="contact/contact.htm">Contact Us</a></li>
</ul>
</div>
<!-- End Sidebar -->
<!-- Begin Content -->
<div id="content">
<!-- #BeginEditable "content" -->
<h2>
<br />
Headline 2</h2>
<p>insert content here</p>
<!-- #EndEditable --></div>
<!-- End Content --></div>
<div class="style7">
<!-- End Page Content -->
<span class="style4">Website designed and hosted by
</span><a href="http://www.lakecountywebsites.com" target="_blank">
<img alt="Lake County Websites" height="35" longdesc="web design and hosting in Lake County California" src="logo791400_mdcrop.jpg" width="227" /></a><!-- Begin Footer --></div>
<div id="footer" class="style3" style="height: 151px">
<a href="default.htm"><span class="style1">Home</span></a><span class="style1"> |
</span>
<a href="services/services.htm"><span class="style1">PI Services</span></a><span class="style1"> |
</span>
<a href="processserving/processserving.htm"><span class="style1">Process Serving</span></a><span class="style1"> |
</span>
<a href="infidelity/infidelity.htm"><span class="style1">Infidelity-Cheating</span></a><span class="style1"> |
</span>
<a href="locate/locate.htm"><span class="style1">Locate People</span></a><span class="style1"> |
</span>
<a href="about/about.htm"><span class="style1">About Us</span></a><span class="style1"> |
</span>
<a href="contact/contact.htm"><span class="style1">Contact Us</span></a><span class="style1"> |
<a href="http://www.thelegalprocessgroup.com/site_map/site_map.htm" class="style1">Site Map</a></span><br class="style1" />
<span class="auto-style1">Copyright © 2009 TheLegalProcessGroup. All Rights Reserved.<br />
</span></div>
</div>
<!-- End Footer --></div>
<!-- End Container -->
</body>
<!-- #EndTemplate -->
</html>
Your masthead bottom is too tall because you have an extra HTML element in there.
<p> </p>
Delete that and it will look fine.
I'm looking at the footer now...
<p> </p>
Delete that and it will look fine.
I'm looking at the footer now...
Your footer isn't missing. It's just positioned wrong. Move your footer so it's inside the content div and it should look roughly correct.
This site really could use some help with its layout but it looks a heck of a lot better now than when you started.
This site really could use some help with its layout but it looks a heck of a lot better now than when you started.
Thanks Russ,
I tried moving it but it didn't seem to work. I seem to have some pages that show the footer and others including the home page that are getting cut off at the bottom. I have included the css in case something there is causing it.
@import url("layout.css");
body {
background: #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #C0C0C0;
background-color: #808080;
}
#container {
background-color: #A9A9A9;
border-left: thin #000000 solid;
border-right: thin #000000 solid;
background: #A9A9A9;
width: 100%;
overflow:hidden
}
#masthead {
border-bottom: medium #FBAA33 ridge;
overflow: auto;
text-align: right;
background-color: #A9A9A9;
border-top-color: #FBAA33;
border-top-style: ridge;
border-top-width: medium;
}
.container{
max-width:1260px;
margin-left:auto;
margin-right:auto;
}
#page_content {
position: relative;
}
#sidebar {
position: relative;
float: left;
width: 200px;
background-color: #516272;
top: 45px;
}
#content {
margin-left: 220px;
padding: 10px;
background-color: #A9A9A9;
min-height: 1px;
color: #000000;
}
#footer {
background-color: #A9A9A9;
background: #A9A9A9;
font: medium serif;
clear: both;
width: 99%;
overflow: auto;
padding-top: 1%;
padding-right: 0;
padding-bottom: 1%;
padding-left: 1%;
}
#masthead img {
float: left;
}
#masthead p {
font-size: small;
margin: 0;
margin-right: 1%;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
/* Styles for Navigation */
#sidebar ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#sidebar li {
display: block;
border: thin #FBAA33 solid;
}
#sidebar a {
font-weight: bold;
font-size: x-large;
color: #FBAA35;
padding: 15%;
display: block;
border-bottom: thin #441D16 solid;
}
#sidebar a:hover {
font-weight: bold;
font-size: x-large;
color: #393939;
border-bottom: thin #441D16 solid;
background-color: #FBAA33;
}
/* Styles for Footer */
#footer p {
font-size: medium;
}
#footer a {
color: #000000;
text-decoration: underline;
}
#footer a:hover {
color: #393939;
text-decoration: none;
}
a {
color: #000066;
text-decoration: underline;
}
a:hover {
color: #78a;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
I tried moving it but it didn't seem to work. I seem to have some pages that show the footer and others including the home page that are getting cut off at the bottom. I have included the css in case something there is causing it.
@import url("layout.css");
body {
background: #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #C0C0C0;
background-color: #808080;
}
#container {
background-color: #A9A9A9;
border-left: thin #000000 solid;
border-right: thin #000000 solid;
background: #A9A9A9;
width: 100%;
overflow:hidden
}
#masthead {
border-bottom: medium #FBAA33 ridge;
overflow: auto;
text-align: right;
background-color: #A9A9A9;
border-top-color: #FBAA33;
border-top-style: ridge;
border-top-width: medium;
}
.container{
max-width:1260px;
margin-left:auto;
margin-right:auto;
}
#page_content {
position: relative;
}
#sidebar {
position: relative;
float: left;
width: 200px;
background-color: #516272;
top: 45px;
}
#content {
margin-left: 220px;
padding: 10px;
background-color: #A9A9A9;
min-height: 1px;
color: #000000;
}
#footer {
background-color: #A9A9A9;
background: #A9A9A9;
font: medium serif;
clear: both;
width: 99%;
overflow: auto;
padding-top: 1%;
padding-right: 0;
padding-bottom: 1%;
padding-left: 1%;
}
#masthead img {
float: left;
}
#masthead p {
font-size: small;
margin: 0;
margin-right: 1%;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
/* Styles for Navigation */
#sidebar ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#sidebar li {
display: block;
border: thin #FBAA33 solid;
}
#sidebar a {
font-weight: bold;
font-size: x-large;
color: #FBAA35;
padding: 15%;
display: block;
border-bottom: thin #441D16 solid;
}
#sidebar a:hover {
font-weight: bold;
font-size: x-large;
color: #393939;
border-bottom: thin #441D16 solid;
background-color: #FBAA33;
}
/* Styles for Footer */
#footer p {
font-size: medium;
}
#footer a {
color: #000000;
text-decoration: underline;
}
#footer a:hover {
color: #393939;
text-decoration: none;
}
a {
color: #000066;
text-decoration: underline;
}
a:hover {
color: #78a;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
@import url("layout.css");
body {
background: #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #C0C0C0;
background-color: #808080;
}
#container {
background-color: #A9A9A9;
border-left: thin #000000 solid;
border-right: thin #000000 solid;
background: #A9A9A9;
width: 100%;
overflow:hidden
}
#masthead {
border-bottom: medium #FBAA33 ridge;
overflow: auto;
text-align: right;
background-color: #A9A9A9;
border-top-color: #FBAA33;
border-top-style: ridge;
border-top-width: medium;
}
.container{
max-width:1260px;
margin-left:auto;
margin-right:auto;
}
#page_content {
position: relative;
}
#sidebar {
position: relative;
float: left;
width: 200px;
background-color: #516272;
top: 45px;
}
#content {
margin-left: 220px;
padding: 10px;
background-color: #A9A9A9;
min-height: 1px;
color: #000000;
}
#footer {
background-color: #A9A9A9;
background: #A9A9A9;
font: medium serif;
clear: both;
width: 99%;
overflow: auto;
padding-top: 1%;
padding-right: 0;
padding-bottom: 1%;
padding-left: 1%;
}
#masthead img {
float: left;
}
#masthead p {
font-size: small;
margin: 0;
margin-right: 1%;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
/* Styles for Navigation */
#sidebar ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#sidebar li {
display: block;
border: thin #FBAA33 solid;
}
#sidebar a {
font-weight: bold;
font-size: x-large;
color: #FBAA35;
padding: 15%;
display: block;
border-bottom: thin #441D16 solid;
}
#sidebar a:hover {
font-weight: bold;
font-size: x-large;
color: #393939;
border-bottom: thin #441D16 solid;
background-color: #FBAA33;
}
/* Styles for Footer */
#footer p {
font-size: medium;
}
#footer a {
color: #000000;
text-decoration: underline;
}
#footer a:hover {
color: #393939;
text-decoration: none;
}
a {
color: #000066;
text-decoration: underline;
}
a:hover {
color: #78a;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML
From novice to tech pro — start learning today.
-
Microsoft ApplicationsCertification: MOS Microsoft Office Specialist - PowerPoint 2013… 150 lessons
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with premium.
Start your 7-day free trial.
You could add style="max-width: 1260px;" to the <div id="page_content"> element.
That would fix your immediate issue. If it were me working on this website I'd redesign the whole thing with a responsive design methodology.