Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS and unstable image alignment 1

Status
Not open for further replies.
janise

janise

Technical User
May 25, 2003
161
US
Hello gurus,

Please take a look at the code below.
It works well as is because it creates a header for this page.

Please take a look.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8">
<title>Menu</title>
<style type="text/css">
<!--
#menu2 {
background-color: #333333;
border: 1px solid #993333;
padding: 5px;
width:135px;
}
 table{
list-style:none;
margin:0;
padding:5px;
border:none;
width: 550px
}
td {
background: url(bon.png) left no-repeat;
}
a{
display: block;
height: 35px;
background: url(boff.png) left no-repeat;
color: #666666;
font-weight: bold;
text-decoration: none;
padding-left: 15px;
margin-top: 5px;
}
a:hover {
background: transparent;
}
-->
</style>
</head>
<body>
<div id="menu2">
<table width="85%"><tr><td>
<a href="#">&nbsp;&nbsp;&nbsp;Home</a>
</td><td>
<a href="#">&nbsp;&nbsp;&nbsp;Choir</a>
</td><td>
<a href="#">&nbsp;&nbsp;&nbsp;Register</a>
</td><td>
<a href="#">&nbsp;&nbsp;&nbsp;Roster</a>
</td><td>
<a href="#">&nbsp;&nbsp;&nbsp;Calendar</a>
</td><td>
<a href="#">&nbsp;&nbsp;&nbsp;Luncheon News</a>
</td></tr></table>
</div>
</body>
</html>

The problem is that when I try to add the same code to the web page below, the images are all over the place.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<title>AM Parishioners Organization</title>
<script language="JavaScript" src="adrotator.js">
</script>

</head>

<body leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="#F0F0E1" background="images/paper.jpg" onLoad="startTime();">

<div align="center">
  <center>
<div ID="menu" STYLE="position:absolute; left:508px; top:154px; z-index:750;">
  <table border="0" width="85%" cellspacing="0" cellpadding="0">
    <tr>
    <td>
  <!--url's used in the movie-->
  <!--text used in the movie-->
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="[URL unfurl="true"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"[/URL] width="120" height="70" id="maskingfinal" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="maskingfinal.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="maskingfinal.swf" quality="high" bgcolor="#ffffff" width="110" height="100" name="maskingfinal" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] />
  </object>
  </td>
  </tr>
  </table>
</div>
<div ID="menu1" STYLE="position:absolute; left:390px; top:0px; z-index:750;">
<a href="" onClick="clickLink(); return false;" onMouseOver="descript(); return true;" onMouseOut="window.status=''"><img src="picBanner.jpg" border=0 name="banner" width="210" height="75"></a>
</div>

  <table border="0" width="85%" cellspacing="0" cellpadding="0" background="images/topbkg.jpg">
    <tr>
      <td width="34%"><img border="0" src="images/topleft.jpg"></td>
      <td width="33%"><img border="0" src="images/logo.jpg"></td>
    </center>
    <td width="33%">
      <p align="right"><img border="0" src="images/topright.jpg"></td>
  </tr>
  </table>
</div>
<div align="center">
  <center>
  <table border="0" width="85%" cellspacing="0" cellpadding="0" background="images/linebkg.jpg">
    <tr>
      <td width="70%">
        <p align="center"><a href="index2.html"><img border="0" src="images/home1.jpg"></a><a href="choir.html"><img border="0" src="images/choir1.jpg"></a><a href="registrationForm.asp"><img border="0" src="images/member1.jpg"></a><a href="memberListings.asp"><img border="0" src="images/roster1.jpg"></a><a href="calendar/default.asp"><img border="0" src="images/schedules1.jpg"></a><a href="luncheon.asp"><img border="0" src="images/luncheon1.jpg"></a>
      </td>
  </center>
    </tr>
  </table>
</div>

<div align="center">
  <center>
  <table border="0" width="85%" cellspacing="0" cellpadding="0" background="images/white.jpg">
    <tr>
      <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td width="50%" valign="top">
              <p style="margin-left: 30"><br>
              <img border="0" src="images/welcome.jpg"></p>
              <p style="margin-left: 40"><font face="Arial" size="2">This is the
              AM Parishioners Organization Website. We are located at the St. Thomas
              The Apostle Church premises at 4300 King Spring Road, S.E Smyrna Road, Smyrna, Georgia.</font></p>
              <p style="margin-left: 40"><img border="0" src="images/aboutus.jpg"><br>
              &nbsp;</td>
            <td width="50%">
              <p align="center"><img border="0" src="images/sttsmy01.jpg" width="170" height="150"></td>
          </tr>
        </table>
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100%">
              <p style="margin-left: 40; margin-right: 40"><font face="Arial" size="2">The AM Parishioners Organization(APO) is a church affliated membership organization founded in March 2003 by Dr.Anthony Graham.
				Though currently at its infancy stage, we have a wide range of ambitious ideas that have one purpose in focus - to cater for the need of all members.
				This organization has the goal of offering its members opportunities to get to know each other better, improve networking opportunities and let the majesty of our voices be heard within the St. Thomas the Apostle Church community.
				There are no age limits for joining.
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This Organization offers the following benefits to all:
				<ul>
				 <li>A rich cultural and religious enrichment through musical expressions,
				 <li>An avenue for letting the majesties of our voices be heard with the St. Thomas Catholic Community,
				 <li>Excellent networking opportunities amongst members,
				 <li>Promote unity among all AMs,
				 <li>Come together as one to response to the needs of its members.
				</ul>
              </font>
             </td>
          </tr>
        </table>
        <p align="center">
        <font face="Arial" size="1">© COPYRIGHT 2004 ALL RIGHTS RESERVED
        Kenig Inc</font></td>
    </tr>
  </table>
  </center>
</div>
<div align="center">
  <center>
  <table border="0" width="85%" cellspacing="0" cellpadding="0" background="images/blackbar.jpg">
    <tr>
      <td width="100%"><font size="1">&nbsp;<img border="0" src="images/blackbar.jpg"></font></td>
    </tr>
  </table>
  </center>
</div>

</body>
<!--
<script>
if(screen.width==1024)
{
 document.getElementById("menu1").style.left="327px"
 //change it till it aligns...
}
</script>
-->
<script>
if(screen.width==1024)
{
 document.getElementById("menu").style.left="667px"
 //change it till it aligns...
}
</script>

</html>

For instance, I am trying to replace this part of the second code above,
Code: 
<div align="center">
  <center>
  <table border="0" width="85%" cellspacing="0" cellpadding="0" background="images/linebkg.jpg">
    <tr>
      <td width="70%">
        <p align="center"><a href="index2.html"><img border="0" src="images/home1.jpg"></a><a href="choir.html"><img border="0" src="images/choir1.jpg"></a><a href="registrationForm.asp"><img border="0" src="images/member1.jpg"></a><a href="memberListings.asp"><img border="0" src="images/roster1.jpg"></a><a href="calendar/default.asp"><img border="0" src="images/schedules1.jpg"></a><a href="luncheon.asp"><img border="0" src="images/luncheon1.jpg"></a>
      </td>
  </center>
    </tr>
  </table>
</div>

but when I run it, the header is all over the entire page.

Can you please help me.

I am truly, truly sorry for dumping this much code but I am not sure what could be causing the problem and wanted you to see it all.
 
Sort by date Sort by votes
hi,
Thanks for your response and hopefully, you can assist me.

This is the current look of this website:

websamba.com/aparish

What I need to replace here are:

Home Choir Register Roster Calendar Luncheon News.

I need to replace above headers with the same header but different design from this:


What is happening is because the css contains table, any instance of table on the page generate the same header content.

I am sure there is a workaround to it.
I just don't know.

Thanks for your help.
 
Upvote 0 Downvote
Without looking at it...

Instead of applying a style to table you could either:
[ol]
[li]set a class such as "header" and apply that to the table.[/li]
[li]put the header in a div and assign style values to tables within the header div.[/li]
[/ol]
e.g.
Code: 
.header { <style info here> }
or
Code: 
#myDiv table { <style info here> }

Personally I would use the latter as I don't like using classes if I can help it.

 
Upvote 0 Downvote
Perhaps, you can give me an example of what you mean.

The real problem is that with the type of style sheet I am using, table is being treated as a background.

So can you please take a look at where I placed the div info you suggested and help.
I know I did it wrong because the same problem is still there.

Code: 
<style type="text/css">
<!--
#menu2 {
background-color: #333333;
border: 1px solid #993333;
padding: 5px;
width:135px;
}
 #myDiv table {
list-style:none;
margin:0;
padding:5px;
border:none;
width: 550px
}
td {
background: url(bon.png) left no-repeat;
}
a{
display: block;
height: 35px;
background: url(boff.png) left no-repeat;
color: #666666;
font-weight: bold;
text-decoration: none;
padding-left: 15px;
margin-top: 5px;
}
a:hover {
background: transparent;
}
-->
</style>
 
Upvote 0 Downvote
Certainly

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Table test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
#header table {
	border: 2px solid red;
	background: blue;
	color: white;
}

table.headerClass {
	border: 2px solid green;
	background: #ccc;
	color: blue;
}
</style>
</head>

<body>

<!-- This first example is a table placed in a DIV that we have assigned a style rule to //-->

<div id="header">
	<table>
		<tr>
			<td>This is the header table, note the background and border</td>
		</tr>
		<tr>
			<td>It is placed inside a div called "header". The style sheet says to make any table inside "header" have white text, a red border and blue background</td>
		</tr>
	</table>
</div>




<!-- This table uses a CLASS //-->

<table class="headerClass">
	<tr>
		<td>This is a table that has been assigned the class "headerClass"</td>
	</tr>
	<tr>
		<td>The style sheet says to make any table assigned "headerClass" to have blue text, a green border and grey background</td>
	</tr>
</table>




<!-- This is a standard HTML table, to show the difference //-->

<table border="1">
	<tr>
		<td>This is an "ordinary" table, note, no background and a green border this time</td>
		<td rowspan="2">This is a column spanning 2 rows... just for effect</td>
	</tr>
	<tr>
		<td>I've applied an HTML border so you can see it's a table</td>
	</tr>
</table>

</body>
</html>

 
Upvote 0 Downvote
Thank you so much for sharing your expertise on this with me.
It is working the way I want it to work.
I also want to thank you for having the patience to even attempt to help given the lump of code I dumped on the forum.

There is just one little problem.
As is, it works well because of this code:

Code: 
#header table {
background-color: #ffffff;
border: 0px solid #993333;
padding: 0px;
width:135px;
list-style:none;
margin:0;
padding:5px;
border:none;
width: 662px  <-- this line set the width correctly

The width works if the screen resolution is 800/600 pixels.

Some pcs are set at 1024/768 pixels; in which case, the widht shrinks and doesn't look good.

Can you suggest a better of handling so that it doesn't matter if it is 800/600 or 1024/768, it will be the same size?

Again kudos for all the help.
 
Upvote 0 Downvote
No probs.

Hmm. I don't understand when you say the width shrinks when viewed at a higher resolution.
Do you mean that it looks too narrow and you would like it to fill the width or same proportion of the browser width?

You have also set the width to 135px and then you set it to 662px. Why?

No matter what screen size you view that on, it will be 662px wide.

Can you show me a link to the page?

 
Upvote 0 Downvote
I have fixed that.
I removed the 135px and changed the 662px to 85% which is the size of the page ( as it was set).
Everything works great now.

Again, thanks for sharing your expert knowledge.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
697
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
345
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
420
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
366
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
289
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top