8 Replies - 9807 Views - Last Post: 04 January 2011 - 08:20 AM

#1 mr370   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 23-April 10

I don't know how to align the webpage

Posted 01 January 2011 - 11:06 PM

Ive been trying extremely hard to align everything on the right side and i wanted to but the blogger next to the picture of the bishop any help would be appreciated thanks.Here is my code




Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Society of the Body of Christ</title>
<script language="Javascript">

} // mmLoadMenus()
//-->
</script>
<script language="Javascript" src="mm_menu.js"></script>
</head>

<body>
<script language="Javascript1.2">mmLoadMenus();</script>
<center>
<table width="958">
  <div>

	
	
	<tr>
	  <td height="161"><div align="right">
	    <p><img src="Images/tn_bishop_mulvey.png" width="156" height="141" /></p>
	    
	  </div></td>
	  </tr>
	  <tr><td align="right"><object data=http://thesociteyofthebodyofchrist.blogspot.com/ width="600" height="400"> 
	  <embed src=http://thesociteyofthebodyofchrist.blogspot.com/ width="600" height="400"> </embed> 
	  Error: Embedded data could not be displayed please install the plugins on top. </object></td></tr>
  </div>
</table>

</center>

</body>


</html>



There was more code but i cut some out so it was easier to read

Thank you sorry about all the code

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: I don't know how to align the webpage

#2 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: I don't know how to align the webpage

Posted 01 January 2011 - 11:21 PM

First of all tables shouldn't be used in this scenario. You should use divs.

Second of all, center has been deprecated and shouldn't be used.

Third, and lastly you should use an iframe, not embed.

If you need any help with any of these steps - just let me know and I'll give you examples.
Was This Post Helpful? 1
  • +
  • -

#3 mr370   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 23-April 10

Re: I don't know how to align the webpage

Posted 01 January 2011 - 11:39 PM

well im not to concerned about switching from embed to iframes just please tell me how i can align these properly
and i do need help with the other two

Thank you
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: I don't know how to align the webpage

Posted 02 January 2011 - 02:02 AM

When you say that want align it all on the right do you mean on the right of the screen or the right of the of the parent container.
Was This Post Helpful? 0
  • +
  • -

#5 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: I don't know how to align the webpage

Posted 02 January 2011 - 09:00 AM

EWW tables. I hate seeing tables. Are you using CSS? From the code that you're showing us I don't see an internal or external style sheet. You can use the position property of CSS. You can learn more about it here. You will want to get rid of those tables. In stead use divs which define a division in a HTML document. You're doing you script declaration wrong it should be: <script type="text/javascript">. w3schools offer tutorials for every web scripting/markup language you need. You should use them or check the wonderful tutorials on DIC.

EDIT: I also see that you used your div incorrectly. If you're going to use a div you must give it a class or id.

This post has been edited by EnvXOwner: 02 January 2011 - 02:29 PM

Was This Post Helpful? 0
  • +
  • -

#6 mr370   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 23-April 10

Re: I don't know how to align the webpage

Posted 02 January 2011 - 02:34 PM

well here is my new code sorry it isn't very neat but i used div tags and attempted to use absoulute positioning but it is strange when i try to make the window smaller the pictures move. Any tips would help.

<script language="Javascript" src="mm_menu.js"></script>

<style type="text/css">
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}

.bishop
{
position:absolute;
right:440px;
width:100px
}

.blogger
{
position:absolute;
right:1170px;
width:100px

}

</style>


</head>







<body>
<script language="Javascript1.2">mmLoadMenus();</script>
<center>

  <div class="container">  
      <img src="bluebarontop2 button copy.jpg" 

name="image1"border="0"usemap="#Map"id="image1"/>
        <map name="Map" id="Map">
          <area shape="rect" coords="733,306,895,451" 

href="http://www.diocesecc.org/about/mulvey/" target="_self" />
          <area shape="rect" coords="267,185,326,200" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1022224958_0,194,190,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="408,184,485,203" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1022231955_0,332,196,null,'image1');MM_showMenu

(window.mm_menu_1022234150_0,333,194,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="568,184,626,203" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1023000232_0,561,191,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="714,184,755,201" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1022235012_0,736,189,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="842,183,908,205" href="About

%20us/About%20us.html" />
          <area shape="rect" coords="40,182,182,199" href="#" 

onmouseover="MM_showMenu(window.mm_menu_1023003120_0,28,191,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="711,220,914,294" href="&lt;a 

href=&quot;mailto:[email protected]&quot;&gt;" />
        </map>      
	</div>
	</div>
   
	
	
	<div class="bishop">  
	  <div class="container">
	    <p><img src="Images/tn_bishop_mulvey.png" width="156" 

height="141" /></p>
	    
	  </div></div>
	    <div class="container">
	  <div class="blogger"><object 

data=http://thesociteyofthebodyofchrist.blogspot.com/ width="600" 

height="400"> 
	  <iframe src=http://thesociteyofthebodyofchrist.blogspot.com/ 

width="600" height="400"> </iframe> </object></div>
  </div>
</table>

</center>

</body>


</html>

Was This Post Helpful? 0
  • +
  • -

#7 mhollis   User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 61
  • Joined: 10-April 10

Re: I don't know how to align the webpage

Posted 02 January 2011 - 03:20 PM

View Postmr370, on 02 January 2011 - 03:34 PM, said:

well here is my new code sorry it isn't very neat but i used div tags and attempted to use absoulute positioning but it is strange when i try to make the window smaller the pictures move. Any tips would help.

AAUGH!

OK, let's call this "strike two."

First, don't use tables. Second, don't use Absolute Positioned <div> tags.

OK, here is something simple to look at, which is a three-column layout below a header

http://www.firstfinancialcredit.net/

Look at it in Firefox with the Firebug plugin and you will see how I placed the <div> tags and how I set up the CSS. That should help you in positioning for multi-column.

If what you need is an object that floats, you need to use the float command in your CSS. This will have text flow around the object:

http://www.cawp.net/eboard.html

The particular CSS style I am talking about will be on the top of the HTML, as I was using special styles that I did not want included in my Style Sheet. I defined and used two classes, .imgLeft and .imgRight to style images that float left and right and have a surround border. Where I needed a caption, I used an ID, #imgEboard to define that.

Try your website again by positioning <div> spaces that are columns where you need that and classes that will define where objects need to go and have text (and other objects) flow around them.
Was This Post Helpful? 0
  • +
  • -

#8 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: I don't know how to align the webpage

Posted 02 January 2011 - 03:35 PM

View Postmr370, on 02 January 2011 - 03:34 PM, said:

well here is my new code sorry it isn't very neat but i used div tags and attempted to use absoulute positioning but it is strange when i try to make the window smaller the pictures move. Any tips would help.

<script language="Javascript" src="mm_menu.js"></script>

<style type="text/css">
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}

.bishop
{
position:absolute;
right:440px;
width:100px
}

.blogger
{
position:absolute;
right:1170px;
width:100px

}

</style>


</head>







<body>
<script language="Javascript1.2">mmLoadMenus();</script>
<center>

  <div class="container">  
      <img src="bluebarontop2 button copy.jpg" 

name="image1"border="0"usemap="#Map"id="image1"/>
        <map name="Map" id="Map">
          <area shape="rect" coords="733,306,895,451" 

href="http://www.diocesecc.org/about/mulvey/" target="_self" />
          <area shape="rect" coords="267,185,326,200" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1022224958_0,194,190,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="408,184,485,203" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1022231955_0,332,196,null,'image1');MM_showMenu

(window.mm_menu_1022234150_0,333,194,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="568,184,626,203" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1023000232_0,561,191,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="714,184,755,201" href="#" 

onmouseover="MM_showMenu

(window.mm_menu_1022235012_0,736,189,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="842,183,908,205" href="About

%20us/About%20us.html" />
          <area shape="rect" coords="40,182,182,199" href="#" 

onmouseover="MM_showMenu(window.mm_menu_1023003120_0,28,191,null,'image1')" 

onmouseout="MM_startTimeout();" />
          <area shape="rect" coords="711,220,914,294" href="&lt;a 

href=&quot;mailto:[email protected]&quot;&gt;" />
        </map>      
	</div>
	</div>
   
	
	
	<div class="bishop">  
	  <div class="container">
	    <p><img src="Images/tn_bishop_mulvey.png" width="156" 

height="141" /></p>
	    
	  </div></div>
	    <div class="container">
	  <div class="blogger"><object 

data=http://thesociteyofthebodyofchrist.blogspot.com/ width="600" 

height="400"> 
	  <iframe src=http://thesociteyofthebodyofchrist.blogspot.com/ 

width="600" height="400"> </iframe> </object></div>
  </div>
</table>

</center>

</body>


</html>

Can you also provide the images and Javascript.
Was This Post Helpful? 0
  • +
  • -

#9 Sadin56   User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: I don't know how to align the webpage

Posted 04 January 2011 - 08:20 AM

Dont use absolute position.

try to add this to the CSS of what you want to align right

.bishop{
float:right;
}



Using the float property would be your best bet.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1