Website Length or Width Locked?

Forum Moderators: open

Message Too Old, No Replies

Website Length or Width Locked?

Formatting move when I add anything

toyutah

1:53 pm on Apr 10, 2009 (gmt 0)

Hi all, this is my first post here. I am trying to figure out if my web page is locked in length for its height, or if I may have to adjust it. I was asked to do a few things to a website like add keywords, and register with search engines, and anytime I enter anything extra in the html code, the images move around. I am wondering if I have to make the page longer for it to accept the changes. Even if I enter a <b> in html, or a space on the page and then look at it, the images have moved like they are being squeezed. Thanks for any help and sorry if my post is lengthy or incoherent.

CSS_Kidd

2:25 pm on Apr 10, 2009 (gmt 0)

Well if you are adding META information that isn't going to mess with the page layout. And with out seeing the actual HTML or CSS I really couldn't tell you anything. So Please post the HTML and the CSS and we will get to the bottom of the issue.

toyutah

2:37 pm on Apr 10, 2009 (gmt 0)

Ok, here is the html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Title text text</title>
<link rel="stylesheet" href="testcss.css" type="text/css" charset="utf-8" />


<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Top <strong>Headline</strong> Words</h1>
<div id="top-nav"></div>
<div id="mmagic"></div>
<div id="header"></div>
<div id="spacer"></div>
<div id="body">
<div id="left">
<div id="nav">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li class="drk"><a href="http://www.example.com/index.html">Home</a></li>
<li><a href="http://www.example.com/about.html">About Us</a></li>
<li><a href="http://www.example.com/services.html">Services</a>
<ul>
<li><a href="http://www.example.com/office.html">Office Support</a></li>
<li><a href="http://www.example.com/bookkeeping.html">Bookkeeping</a></li>
<li><a href="http://www.example.com/computer.html">Computer Tech</a></li>
<li><a href="http://www.example.com/webdesign.html">Web Design</a></li>
<li><a href="http://www.example.com/rental.html">Facilities</a></li>
</ul>
</li>
<li><a href="http://www.example.com/contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="visit">
<h2>Section Headline</h2>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text. <strong>"Text text text text text text text text text text text text."</strong></p>
</div>
<div id="subs-left">
<h3>Section Headline</h3>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text..</p>
<p style="text-align: right;" class="more"><a href="http://www.example.com/about.html">more...</a></p>
</div>
</div>
<div id="right">
<div id="right-i">
<h2>Services</h2>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text..</p>
<h3>Section Headline</h3>
<img width="103" src="testimages/typing.jpg" alt="Image description" height="79" class="left" />
<p>Text text text text text text text text text text text text text text text text text text text text text text text</p>
<p class="more"><a href="http://www.example.com/office.html">more...</a></p>
<h3>Section Headline</h3>
<img width="103" src="testimages/accounting.jpg" alt="Image description" height="79" class="left" />
<p>Text text text text text.</p>
<p class="more"><a href="http://www.exec-services.com/bookkeeping.html">more...</a></p>
<h3>Section Headline</h3>
<img width="103" src="testimages/computer.jpg" alt="Image description" height="79" class="left" />
<p>Text text text text text text text text text text text text text text text text text text text text text text text.</p>
<p class="more"><a href="http://www.example.com/computer.html">more...</a></p>
<h3>Section Headline</h3>
<img width="103" src="testimages/conf_room.jpg" alt="Image description" height="79" class="left" />
<p>Text text text text text text text text text text text text text text text text text text text.</p>
<p class="more"><a href="http://www.example.com/rental.html">more...</a></p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="copyright">
<p>Copyright © This business. All rights reserved</p>
<p>Address 1</p>
<p>Address 2</p>
<p>Phone</p>
</div>
</div>
</body>
</html>

and here is the CSS:

html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #fff url(testimages/page_bg.gif) repeat-x;
text-align: center;
font: 12px arial, sans-serif;
color: #464544;
}
/** layout **/
#wrapper {
text-align: left;
margin: auto;
width: 728px;
position: relative;
}
h1 {
position: absolute;
top: 46px;
left: 0;
height: 43px;
padding-top: 8px;
width: 414px;
text-align: center;
background: #7A808C;
color: #ffffff;
font: 24px "Times new roman", serif;
font-weight: normal;
}
h1 strong {
font-weight: normal;
color: #0E1520;
}
#top-nav {
position: absolute;
top: 15px;
left: 414px;
width: 313px;/*414px;*/
height: 269px;
background: #6D7481 bottom left url(testimages/header.jpg) no-repeat;
}
#top-nav ul {
text-align: center;
line-height: 32px;
}
#top-nav li {
display: inline;
font-size: 12px;
color: #fff;
}
#top-nav a {
text-decoration: none;
font-weight: normal;
color: #fff;
}
#top-nav a:hover {
text-decoration: underline;
}
#mmagic {
position: absolute;
top: 46px;
left: 680px;
width: 48px;
height: 238px;
}
#header {
background: url(testimages/bizcard.jpg) no-repeat;
position: absolute;
top: 89px;
left: 0px;
width: 414px;
height: 195px;
}
/** body **/
#spacer {
height: 285px;
}
#body {
background: url(testimages/body_bg.gif) repeat-y;
width: 100%;
}
#left {
float: left;
width: 412px;
}
#right {
float: right;
width: 312px;
}
#nav ul {
}
#nav li {
float: left;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: url(testimages/tab_lit.gif) repeat-x;
border-left: 1px solid white;
list-style: none;
}
#nav a {
font: 16px "Times new roman", serif;
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
text-decoration: underline;
}
/*#nav li.drk {
background: url(testimages/tab_drk.gif) repeat-x;
border-left: none;
padding-left: 1px;
}*/
#visit {
background: #EEEEEE;
padding: 15px 40px 14px 36px;
}
#visit h2 {
font: 24px "Times new roman", serif;
}
#visit a {
text-decoration: none;
}
#visit a:hover {
text-decoration: underline;
}
#subs-left {
float: left;
width: 340px;
padding-left: 35px;
padding-bottom: 10px;
margin-top: 22px;
}
#subs-left a {
color: #fff;
}
#subs-left {
color: #fff;
}
#subs-left h3 {
color: #000000;
font: 20px "Times new roman", serif;
}
#subs-left p {
text-align: left;
}
#right-i {
padding: 4px 25px 0 20px;
}
#right h2 {
color: #323E51;
font: 22px "Times new roman", serif;
margin-bottom: 12px;
}
#right h3 {
color: #000000;
font: 14px "Times new roman", serif;
margin-bottom: 5px;
}
#right p {
margin-top: 0;
color: #163348;
}
#right .left {
margin-right: 4px;
}
#right a {
color: #163348;
font-weight: bold;
text-decoration: none;
}
#right a:hover {
text-decoration: underline;
}
/** footer **/
#copyright {
background: #6D7481;
color: #fff;
text-align: center;
font-size: 11px;
float: right;
width: 315px;
padding: 10px 0;
margin-bottom: 20px;
}
#copyright p {
margin: 0;
padding: 0;
}

[edited by: tedster at 5:48 pm (utc) on April 10, 2009]
[edit reason] switch to example.com [/edit]

toyutah

3:06 pm on Apr 10, 2009 (gmt 0)

Sorry about the long post, I just read that we should only post the basic framework of code for easier workability.