Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating 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
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Quick and dirty...
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.
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.
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.
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;
}
Premium Content
You need an Expert Office subscription to comment.Start Free Trial