HTML - Layout Alignment Problem.

i have uploaded my website. i m facing a problem. my website appears differently in different computers. its like changing alignment, table spreading so so. i used table to develop the site. how can i fix this problem.

Can anyone help me?

I am practicing code from a file and I am having issues. Specifically, I the geogebra applet is supposed to be framed in the right side, where the "buttons" are the left. I can't figure out why the file is not on the right side in its own section.

Any suggestions?

I am attaching the code using a word document... I highlighted what I feel is the problem.


Nick

On my website, www.JKRfan.com , the alignment on the layout is a little bit off and I can't figure out why. The problem with the alignment also changes from page to page. Will somebody please help?

Thanks,
Kristen

I am having trouble aligning a photo dead-center in a div.

Here's a simple breakdown to avoid confusion...

<div class="div1">
<div class = "div2"><img src="image.jpg"></div>
</div>


What I am trying to do is get that image right in the middle of div 1, both vertically and horizontally. Just to give a bit more of an illustration, for argument's sake, let's go by a standard 800px wide and 600px high for div1. The image size could be 400px by 300px. Div2 could be 75% W&H of Div1.

I've tried everything I know using CSS and HTML, but I am missing something.

All help is appreciated.

Thanks,
Jake

Hi all,

Newbie here.

So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment.

I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window".

This is the table instantiation:

<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise.

Has anyone encountered this before and can you help?

The site is http://www.thechapelstudios.co.uk

OK well This workse perfectly with a .html document, but when I use .php it all goes bad,

http://rapid-hook.com/script-2/index.php

The arrows ar suppose to be aligned with each other, but theres a gap between the table, for the bottom only, not sure how to fix this.

Hi,

I am having dramas with a template and it lining up with the Backgroung Image.

The template has the same background image as the page background but its like a mesh effect so its a real pain in the butt to line up. And its not working because different screen resolutions and browser widths move the template on the page background.
See he http://www.superiorshine.com.au/new
If you load the page and the make your browser width smaller you will see the template move along the background image this is why it never lines up cause its floating all over it.
Is there anyway i can stop this?
I have spent a total of 7 hours fiddling with the background and i still cant get it to work.
My last resort is to go into the .PSD and make the website width and height bigger then peoples resolution and save for web and make the bits outside the template (background image) a picture in a cell so the page doesnt see images and expands the scroll bars.

Here is the template overlapping: www.superiorshine.com.au/sample/overlap.jpg

Any other idea's as this is really getting to me LOL..

Cheers

Hi,
I can usually troubleshoot basic html issues, but don't have much knowledge of frames. The page design is a basic 2-frame horizontal format with body content files that swap in and out from a header menu bar.

Both header and body files are centered, and should be visually seamless.

The problem is when the main body frame is set to scrolling="yes", the scroll bar in the browser window offsets the center of the frame, and the two frames appear out of alignment.

If the main body frame is set to scrolling="no" then they line up properly (but obviously cannot scroll down through the page). You can view the issue he
http://www.sequentz.com/menutest/index.htm

I would greatly appreciate some help sorting this out, so that the two files align seamlessly and the bottom file can scroll. Thank you.

Hi all, my first post...

I'm having troubles when i try to add a table after a left aligned table. When i add the second table it goes just at right of the previous table, not at bottom as i want.


Example:
HTML Code:

<table width="60%" border="1" align="left" >
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<table width="60%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Any sugestions about placing the second table at bottom of first one are welcome.

Hi All,

I am creating a new website using html frames (I know, using the html frames are a bad idea but my client wants this). The website have a header, content panel and footer. Html frameset have 1px border. I need frames align centered in the webpage. could somebody help me to short it out.

Frameset code is here

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vvaves</title>
</head>
<frameset border="1" bordercolor="#CCCCCC" frameborder="0" rows="330,800,150" style="height:1180px">
<frame src="top_panel.html" frameborder="0" scrolling="no" noresize="noresize" />
<frame src="content_panel.html" frameborder="0" scrolling="no" noresize="noresize" />
<frame src="bottom_panel.html" frameborder="0" scrolling="no" noresize="noresize" />
</frameset><noframes></noframes>
<body>
<div align="center"></div>
</body>
</html>


Please help me.

Thanks in advance.

Sunil Saini

Hello there,
I am in serious need of help. I am working on a site where I could update the navbar at any time and not have to change the code on numerous pages. After some reading, I concluded that the use of an SSI would be a suitable solution. With that being said, my headache ensues.

I have developed an outline in dreamweaver for my website, and have created a div where the ssi will be placed. The navbar was created in Fireworks.

In IE, i can get the menu to appear where I want it, which is below the flash image below the header, however, when I run the mouse over the dropdown, the drop down appears some 50 pixels above the navbar. I am thinking that this might be a css problem.

In Firefox, the div tag appears off to the left and when the mouseover is done, the dropdown appears in the same place as they have in IE.

In both instances, the dropdown menu is in line with the image used in the navbar.

I would really appreciate any help someone could offer. If someone could send me a working solution, I would be even more grateful. I think my eyes are tired of viewing the code.

the site can be viewed at the following url: http://www.prestigeinteractive.com/wmems2/

I would greatly appreciate any help you can offer.

Thanks,

Greg
ps. if you would like the source files, email me at gwhite@prestigeinteractive.com

Hi,

There may be an easy solution but ive spent over 3 hours trying to correct this now.

Basically i have 3 pages, each of which i 'saved as' to ensure the basic layout was identical.

When the pages are aligned left they are all perfectly aligned, however as soon as i align them centrally, the heating and plumbing pages, for some reason indent themseleves slightly right compared to the bathrooms page.

This is so frustrating. Can anyone see why and offer a solution to get them all aligned perfectly central?

Thanks!!

P.S. I think i may have wittled this down to a problem with the main content area, it seems when i apply the css h2 tag or remove the image it suddenly jumps. I have got them all aligned perfectly centrally before with no css in the main content area.

any ideas?

I have a content alignment issue in IE and I can not find the problem anywhere. In FF it looks perfect but in IE the content is at the bottom of the page and I do not know what or what I am overlooking and missing. I don't know if it is the php throwing it off. I wouldn't think so though.

Here is the page:

http://www.mesquitechristmas.com/local/display.php?id=2

Here is the code:

PHP Code:
<?php

include ('db_connect.php');

if (isset($_GET['id'])) {
  $id = mysql_real_escape_string($_GET['id']);
  $sql = "SELECT * FROM users WHERE id = $id;";
  if ($result = mysql_query($sql)) {
    if (mysql_num_rows($result)) {
      $row = mysql_fetch_array($result);
      $displayname = $row["displayname"];
      $displaytype = $row["displaytype"];
      $address = $row["address"];
      $city = $row["city"];
      $state = $row["state"]; 
      $postal = $row["postal"];
      $country = $row["country"];
      $rating = $row['rating'];
      $votes = $row['votes'];
      $imgurl = $row['imgurl'];
      $comments = $row['comments'];
    } else {
      die("No user found");
    }
  } else {
    die(mysql_error());
  }
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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" />
<meta name="description" content="Mesquite Texas Country Christmas" />
<meta name="keywords" content="Mesquite, Texas, Country Christmas" />
<meta name="author" content="NA" />
<link rel="stylesheet" type="text/css" href="/stylesheet.css" media="screen" title="FBC" />
<script type="text/javascript" src="drop_down.js"></script>
<title>A Mesquite Country Christmas</title>
</head>
<body>

 <div id="wrap">

<a href="/index.html">
<img id="frontphoto" src="/images/header.png" width="760" height="237" alt="Mesquite Country Christmas" border="0"></a>

<div id="menu">

<h2 class="hide">Menu:</h2>

<ul id="avmenu">
<li><a href="/index.html">Home</a></li>
<li><a href="/christmasstory.html">The Christmas Story</a></li>
<li><a href="/directions.html">Directions</a></li>
<li><a href="#">Information</a><ul>
      <li><a href="/information.html">Display Facts & Info</a></li>
      <li><a href="/faq.html">FAQ</a></li>
      <li><a href="/playlist.html">2008 Playlist</a></li>
      <li><a href="#">Christmas History</a></li>
  </ul></li>
<li><a href="#">Photos</a>
  <ul>
      <li><a href="/2007photos.html">2007</a></li>
  </ul></li>
<li><a href="#">Videos</a>
  <ul>
      <li><a href="/2007videos.html">2007</a></li>
  </ul></li>
<li><a href="/guestbook.php">Guestbook</a></li>
<li><a href="/webcam.html">Web Cam</a></li>
<li><a href="/webradio.html">Internet Radio</a></li>
<li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li>
<li><a href="/projects.html">Projects & How Tos</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/contact_us.html">Contact Us</a></li>
</ul>
 
<center><a href="http://www.toysfortots.org/" TARGET="_blank"><img src="/images/toys_for_tots.jpg" border="0" width="110" height="153" vspace="10"></a></center>

<center><a href="http://christmas.bronners.com/2007/house/534.html"><img src="http://christmas.bronners.com/voteforme/vote.jpg" border="0" width="110" height="153" alt="christmas decorations" vspace="10"></a></center>

</div>

<div id="content">

 <div class="fadebox">

<h2><? echo $row['displayname']; ?></h2>

<hr />

<table border="0" cellpadding="0" cellspacing="0" width="100%">
     <tr>
        <td align="center"><img src="<? echo $row['imgurl']; ?>" class="border" height="345" width="460"></td>
     </tr>
      <tr>
<td>
<table align="center"><tr><td>Rated 0 from 0 people | <b>Rate This</b>: <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=1">1</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=2">2</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=3">3</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=4">4</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=5">5</a>
</td><td>&nbsp;</td></tr></table></td></tr></table>

<table align="center" style="border-top: 1px solid rgb(51, 102, 51);" border="0" cellpadding="4" cellspacing="0" width="100%">

<span class="title">About this Display...</span>
<tr><td class="bg2" width="100"><b>Display Name</b>:</td><td class="bg2"><? echo $row['displayname']; ?></td></tr><tr><td class="bg1"><b>Display Type</b>:</td><td class="bg1"><? echo $row['displaytype']; ?></td></tr><tr><td class="bg2"><b>Description</b>:</td><td class="bg2"><? echo $row['description']; ?></td></tr><tr><td class="bg1"><b>Address</b>:</td><td class="bg1"><? echo $row['address']; ?><br><? echo $row['city']. "," . $row['state']. " " . $row['postal']; ?><br><? echo $row['country']; ?><br><a href="http://www.mapquest.com/maps/map.adp?searchtype=address&amp;formtype=search&amp;countryid=US&amp;addtohistory=&amp;country=US&amp;address=<? echo $row['address']; ?>&amp;city=<? echo $row['city']; ?>&amp;zipcode=<? echo $row['postal']; ?>&amp;historyid=&amp;submit=Get+Map" target="_NEW"><b>Get Directions</b></a></td></tr><tr><td class="bg2"><b>Website</b>:</td><td class="bg2"><a href="<? echo $row['website']; ?>" target="_blank"><? echo $row['website']; ?></a></td></tr><tr><td class="bg1"><b>Sponsor Links</b>:</td><td class="bg1">
<script type="text/javascript"><!--
google_ad_client = "pub-8048181801684156";
//displays
google_ad_slot = "4239948836";
google_ad_width = 234;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
        </td></tr></table>

</div>

   </div>
 </div>

<div id="footer">
&copy; 2007 Mesquite Country Christmas

<br />
<br />

<script type="text/javascript"><!--
google_ad_client = "pub-8048181801684156";
//468x60, created 1/8/08
google_ad_slot = "0360766123";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</div>

</div>
</body>
</html>

If anyone can help me with this that would be great!

-Thanks

Hey



Can someone please tell me how I can cushion the object on the right to the content in the center? I can't use fixed widths, since the width of the central content differs. If I remove 'float: right;' from .css, the object goes behind the central content.

HTML:

Code:

<div class="breadcrumbs-container">
	<div class="breadcrumbs-left"></div>
	    <span class="breadcrumbs">
		<a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>
		<!-- BEGIN navlinks -->
		<img src="{T_THEME_PATH}/images/breadcrumb_arrow.gif" width="8" height="9" alt=">" /> 
		<a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a>
		<!-- END navlinks -->
		</span>
	<div class="breadcrumbs-right"></div>
	</div><!-- /breadcrumbs container -->

CSS:

Code:

.breadcrumbs-container {
    background: transparent;
	margin: 0;
	padding: 0;
	height: 30px;
        width: 100%;
}

.breadcrumbs {
    background: url("{T_THEME_PATH}/images/breadcrumb-bg.png") repeat-x;
	height: 30px;
	float: left;
	vertical-align: middle;
	line-height: 30px;

}

.breadcrumbs-left {
    background: url("{T_THEME_PATH}/images/breadcrumb-bg-left.png") left no-repeat;
	width: 50px; height: 30px;
	float: left;
}

.breadcrumbs-right {
    background: url("{T_THEME_PATH}/images/breadcrumb-bg-right.png") right no-repeat;
	width: 50px; height: 30px;
	float: right;
}

Thanks

Can someone please help me and shed light on this? TIA!!
I'm building an ecommerce site and there are 4 thumbnails that you can click on, then the main image swaps to the thumbnail you just clicked on (like how most ecommerce sites work). But I won't have 4 thumbnails all the time, maybe 2 or 3 but maximum of 4. When I test the page with 4 thumbnails, it works fine. But if I have only 2 or 3 thumbnails, the spacing looks odd on Firefox. (Looks perfect on Safari) I want them to be always left justified but they look like they are forced to be centered in the space given. What am I doing wrong? I appreciate any help!
The following code is for the thumbnail:
Code:

<tr>            <td width="60" align="left"><a href="#" onClick="javascript:image_click(1);return false;"><img border="0" src="thumbnail.asp?file=[image1]&maxx=60&maxy=0" name="pimage1"></a> </td>
                <td width="5" align="center"></td>
                <td width="60" align="left"><a href="#" onClick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=60&maxy=0" name="pimage2"></a> </td>
                <td width="5" align="center"></td>
                <!--END: image2-->
                <!--START: image3-->
                <td width="60" align="left"><a href="#" onClick="javascript:image_click(3);return false;"><img border="0" src="thumbnail.asp?file=[image3]&maxx=60&maxy=0" name="pimage3"></a> </td>
                <td width="5" align="center"></td>
                <!--END: image3-->
                <!--START: image4-->
                <td width="60" align="left"><a href="#" onClick="javascript:image_click(4);return false;"><img border="0" src="thumbnail.asp?file=[image4]&maxx=60&maxy=0" name="pimage4"></a> </td>
                <td width="5" align="center"></td>
                <td width="60" align="left"></td></tr>
                <!--END: image4-->