Jump to content

Aligning a text box to center


likwidmonster

Recommended Posts

...or not. <center> tags are deprecated.

 

OP: Add a left and top margin to the textbox, and adjust the amount of margin until it's positioned where you want. Make sure you test it on multiple browsers though, as it's the kind of thing that can go a little funky in other browsers.

Link to comment
Share on other sites

Look at their code:

body {
margin:0px auto;
padding:0px;
font: 70%/160% Verdana, Arial, Helvetica, sans-serif;
width: 770px;
color: #333333;
position: relative;
background: #181A2F url(images/home-bg.jpg) no-repeat center top;
}

Look at their bg image directly and you'll understand what they did: http://www.ndesign-studio.com/wp-content/themes/phoenix/images/home-bg.jpg

 

They have an image of ~770px in width and have the page background color match the image background color.  They center the image to the body of the page, and enclose the rest of their main content with a div to keep it within the boundaries of their image:

#body_wrap {
width:743px;
margin: 0 auto 0 -1px;
padding: 10px 12px 40px 15px;
background: #FFFFFF url(images/content-corner-bg.gif) no-repeat left bottom;
clear:both;
}

 

Pretty cool I might add.

Link to comment
Share on other sites

So are you saying by using

 

#body_wrap {
   width:743px;
   margin: 0 auto 0 -1px;
   padding: 10px 12px 40px 15px;
   background: #FFFFFF url(images/content-corner-bg.gif) no-repeat left bottom;
   clear:both;
}

I can have a centered text box. (I, am not trying to sarcastic).

Thanks for all your help I really appreciate it.  :) :) :)

Link to comment
Share on other sites

No.

 

They have the BODY element style with a background picture that is place RELATIVE TO THE PAGE BODY in the center, top; and it does not repeat.

 

Then they have a DIV that is 770px in width (similar to the picture size above) that is centered so that it APPEARS to be inside the background image (which is shaped like a container).

 

[i am not going to code this for you.]

Link to comment
Share on other sites

This is my HTML

<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Language" content="en-us">
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Untitled - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="style_menu.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
<!--
body {
background-image: url(home-bg.jpg);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
background-color: #000000;
background-position:top
}
#Layer1 {
position:absolute;
width:681px;
height:630px;
z-index:1;
left: 288px;
top: 311px;
}
#Layer2 {
position:absolute;
width:257px;
height:31px;
z-index:2;
left: 83px;
top: 197px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
} 
#wrap {
    width: 800px;
    margin: auto auto;
}
.style27 {color: #FFFFFF}
-->
</style>
</head>

<div class="body_wrap" id="Layer1">Content for  class "body_wrap" id "Layer1" Goes Here</div>
</body>

</html>

 

This is my CSS

/* Global Styles */

body {
margin:0px;
}
#body_wrap {
width:743px;
margin: 0 auto 0 -1px;
padding: 10px 12px 40px 15px;
background: #FFFFFF;
clear:both;
}
td {
font:11px Arial, Helvetica, sans-serif;
color:#000000;
}

a {
color: #CC0000;
font-weight:bold;
text-decoration:none;
}

a:hover {
color: #990000;
}

/* ID Styles */

#navigation a {
font:10px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
letter-spacing:0.1em;
line-height:16px;
display:block;
padding: 0px 10px;
border-right:1px solid #CC0000;
}

#navigation a:hover {
color:#ffffff;
background: #CC0000;
}

#background td {
background:url("mm_bg_header.gif");
}

#padding {
padding:14px;
}

.box  {
background: #FFFFFF url(../images/mainboxes-bg2.jpg) repeat-x top left;
border: 1px solid #F4F4F4;
min-height: 150px;
max-width: 660px;
left: 126px;
top: 311px;
width: 696px;
height: 507px;
}
/* Calendar Styles */

#calendar td {
border: 1px solid #26354A; 
}

#noborder td {
border: 0px;
}

#calheader td {
font-weight:bold;
color: #ffffff;
}

/* Class Styles */

.logo {
font:24px Times New Roman, Times, serif;
color: #CC0000;
letter-spacing:0.3em;
line-height:26px;
}

.tagline {
font: 11px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:16px;
}

.bodyText {
font:11px Arial, Helvetica, sans-serif;
line-height:22px;
color:#FFFFFF;
letter-spacing:0.1em;
}

.detailText {
font:11px Arial, Helvetica, sans-serif;
line-height:16px;
color:#26354A;
letter-spacing:.1em;
}

.pageName {
font:24px Arial, Helvetica, sans-serif;
color: #CC0000;
letter-spacing:0.2em;
line-height:32px;
}

.subHeader {
font:bold 12px Arial, Helvetica, sans-serif;
color: #2D374D;
font-weight:bold;
line-height:20px;
letter-spacing:.1em;
}

.body_wrap {
margin-right:auto;
margin-left:auto;
}

 

Thank you very much for your patience... I really appreciate it.

Link to comment
Share on other sites

I think I figured out a way...

<table cellpadding="0" cellspacing="0" width="663" height="515" align=center>>
<tr>
	<td height="515" width="663">
	 <p> </p>
	<p> </p>
	<p> </p>
	<p> </p>
	<p> </p>
	<p>hi</td>
</tr>
</table>

 

If this is a good way could you tell me how to make cell padding at the top.

Link to comment
Share on other sites

I realized that this isn't a good way. I figured out how to center a text box but I don't know how to make it so that it scrolls down the page. Instead I wish that it would scroll down the page.

 

My Code

<!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"><head>




<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS Centering: Auto-width Margins</title>
<style type="text/css" media="screen">
@import "general.css"; /* Mostly just text styling. */

body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}

#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
</style>
</head><body>

<div id="Content">
<h1>Centering: Auto-width Margins</h1>

<p>This
box is horizontally centered by setting its right and left margin
widths to "auto". This is the preferred way to accomplish horizontal
centering with CSS, and works very well in most browsers with CSS2
support. Unfortunately, IE5/Win does not respond to this method - a
shortcoming of that browser, not the technique.</p>
<p>There is a simple <em>workaround</em>.
(A pause while you fight back the nausea induced by that word.) Ready?
IE5/Win incorrectly applies the CSS "text-align" attribute to
block-level elements. Declaring "text-align:center" for the containing
block-level element (often the BODY element) horizontally centers the
box in IE5/Win. There is a side effect of this workaround: the CSS
"text-align" attribute is inherited, centering inline content. It is
often necessary to explicitly set the "text-align" attribute for the
centered box, counteracting the effects of the IE5/Win workaround. The
relevant CSS follows.</p>
<pre>body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
</pre>
</div>

<!-- BlueRobot was here. -->

</body></html>

 

Thanks for all of your help!  :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.