Center troubles

HTML & CSS
1

[EDIT: This thread has been split off from Can someone actually explain why the <center> tag is deprecated? - Mittineague]

hey, i just kinda want to be able to center easily yes horizontally and

.myButton input {
background:url(http://taoofyouth.atsis.com/graphics/genesis-additional-graphics/return-image.png) no-repeat;
cursor:pointer;
width: 22px;
height: 22px;
border: none;
}
	
		
.centerme{ text-align:center;
vertical-align: middle;
align: middle;
}

and then even that doesn’t really work

<tr class="centerme">

      <td align=center><span class="centerme">
        <input type=text name="fields_email" size="20"><span class="myButton"><INPUT type="submit" name="" value=""></span></span>
      </td>
    </tr>

it’s like i’m just centering and centering and rt and left border auto ing and

i just want to center…

2

Anyone who read the start of this thread wouldn’t be asking the question but for those who don’t bother reading the treads through properly from the start:

Say something centered.

Centering is an aspect of appearance and so is done using CSS.

text-align:center will center text and margin:0 auto will center other content provided it has been given a width to center within.

A ltaking web browser cannot make any sense out of <center> or <div align=center"> as it doesn’t know how to speak centered.

3

A <span> will only be as wide as its content, so having alignment on a <span> doesn’t make any sense.

Have you set a width anywhere on the table? If not, the table will only be as wide as it needs to be, and so the contents of the cell will fill the width of the cell - so again, it doesn’t make any sense to talk about it being centred.

If you can give a link to the whole page, we might be able to offer some more suggestions.

4

Huh? Who’s talking about talking centred?

5

Well that’s what you are telling web readers to do when they see a <center> tag. So if you expect them to do it then you should be able to do it yourself.

6

Seeking cross-browser compatible code that centers and valigns elements (form elements, graphics, text)

How to center text, graphics and form elements both horizontally (center) and vertically (valign=middle) either in a table cell or not…but within defined boundaries:

can you share functional code that will work “everywhere?”

7

here’s the specific situation and site I’m working on, though a “general call for functional code” seems to be in order :slight_smile:

http://screencast.com/t/CNoCWndSB

Site: http://www.taoofyouth.atsis.com/
Will be www.taoofyouth.com very soon…

Best,
Dainis

8

No.

Reason#1: Yours should be a functional code first. Work on it to make it so: no tables, no ridiculous <span>s. If your page has to be that way, make and post a code snipset to present your specific problem instead of linking the page.

Reason#2: Either in a table cell or not… it’s not the same. Two different situations may ask for two different approaches.

Reason#3: Before asking for help on a page, you should always validate your code, as there may be that those errors are the reason your page behave badly: here are the errors on your page.

Reason #4: Yours it’s a CSS problem rather than a HTML problem. Use the proper forum. Use search on the proper forum, maybe you already have the answer waiting for you there.

Reason#5: SP is a place to improve your self, not to get free work done for you. Do your homework, and some more.

First Aid

Mistakes:
<style> element present in <body> It should be in <head>: The STYLE element allows authors to put style sheet rules in the head of the document.

Improvements:
You need to work on this, as it is a long, long, long, long, long, …, long, long way from being functional:

<div class="widget-area"><div id="text-9" class="widget widget_text"><div class="widget-wrap">			<div class="textwidget"><style> 
.link,
.link a,
.signupframe
{
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	}
	.link,
	.link a {
		text-decoration: none;
		}
	.signupframe {
	
		}
.signupframe .required {
	font-size: 10px;
	}
</style> 
<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup931" accept-charset="UTF-8" onsubmit="return verifyRequired931();" > 
<input type=hidden name=redirect value="http://www.icontact.com/www/signup/thanks.html" /> 
<input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" /> 
 
<div id="SignUp"> 
<table width="291" class="signupframe" border="0" cellspacing="0" cellpadding="0"> 
	<tr class="centerme"> 
 
      <td align=center><span class="centerme"> 
        <input type=text name="fields_email" size="20"><span class="myButton"><INPUT type="submit" name="" value=""></span></span> 
      </td> 
    </tr> 
    <input type=hidden name="listid" value="16322"> 
    <input type=hidden name="specialid:16322" value="JYHG"> 
 
    <input type=hidden name=clientid value="782612"> 
    <input type=hidden name=formid value="931"> 
    <input type=hidden name=reallistid value="1"> 
    <input type=hidden name=doubleopt value="0"> 
   
 
    </table> 
</div> 
</form> 
<script type="text/javascript"> 
 
var icpForm931 = document.getElementById('icpsignup931');
 
if (document.location.protocol === "https:")
 
	icpForm931.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired931() {
  if (icpForm931["fields_email"].value == "") {
    icpForm931["fields_email"].focus();
    alert("The Email field is required.");
    return false;
  }
 
 
return true;
}
</script></div> 
		</div></div>
9

thank you noonnope, your reply takes me a few steps further <snip/>

who would i like to work with in either paid or unpaid environments?

  • people who are active and willing code-sharers
  • people who teach by sharing and posting code examples, not by invading personal space

the result of such cooperation is that:

Beginning: We get functional code that works
Middle: We get references to learn more and do our homework
End: We understand functional code that works to the degree which we personally decide is appropriate for us

For me, that is the way to teach and be taught. <snip/>

I wonder what takes longer: posting appropriate code, or posting justifications as to why one is unwilling to do so.

I’m pretty sure that I might meet some folks here who can resolve these types of issues very quickly either by posting functional code, booking a live video skype session with me and we make the code work properly <snip/> or some other alternative…

In the end, we are talking about centering horizontally and aligning middle vertically…and how big of a deal is that really?

10

Posting working code takes MUCH MUCH longer. i.e. the old “give a man a fish teach a man to fish” thing. What often happens is that (not that I’m saying you would) the questioner doesn’t learn and keeps coming back with other similar problems whereas if they had learned they would not need to ask. So answering many questions takes longer than answering one well.

noonnope made some valid observations so you really should try his suggestions.

Some Good news is the number of mark-up errors is somewhat exaggerated. Often one simple-to-fix error will cause several error messages. So once you start fixing them you’ll see the number drop quickly.

And the chances are better than good that once the mark-up is well-formed and valid browsers will know what to do a lot better than the current best guessing.

I agree that ultimately CSS is what you’ll need, but until the mark-up is clean this forum is a bit better place for this thread. i.e. IMHO learning HTML comes before learning CSS

11

[OT]you know, i didn’t even place this post here…a moderator did.

you’re talking with a seasoned vet online…and no, i don’t know everything…and i’ve managed, coordinated, co-built…some pretty dern complex sites…and what we do…is rely on experts.

sometimes it’s not appropriate to teach the ship’s navigator how to fish. but the navigator…needs to eat

we hit upon theory and practice here: and on one level, how on earth is it legit for centering horizontally and valigning middle to be “hard?” why is it legit at all for me to need to do 40+ hrs of “homework” just to do simple alignment of text, images, and form elements?

my stance is: it’s just not legit. no one should “make money” off of such microsoftesque ridiculousness. code, people, help, teaching, learning, and online communities are here to help us become more effective, faster, happier, etc.

<snip/> what i would likely do is make a video, post the code, and give people what i had to pay for…why? because I am not a code-hog. I like enabling people, processes, efficiency, business, and happiness.

code, music, language, poetry, these things are rivers…they are like wind. they also change. centering today is different than it was just a few years ago…and yes…i used my fair share of 1x1 pixel transparent gifs…and what…now i need to go through another round of working through the most current workarounds?

i really, honestly, don’t feel like it…i need to go where code is shared, not theoretically discussed.

if we had working code on hand to talk about, we’d be getting somewhere, otherwise, we are just fish flopping on the shore seeking reentry into the water.

for this purpose: code is water.

<snip/>

and that’s a real cultural issue: it takes HARD WORK to come up with elegant simple solutions for things. and then what, some dude comes and you’re just supposed to plop your hard work out onto some forum, so everyone can benefit? what about the rent? (cuz, folks, the rent is too d*mn high – check that out on youtube for a real gas – it’s autotuned!)[/OT]

back on topic, regardless of my “level,” if merely centering text, images, and form elements is “that hard,” then the system itself is to be improved. it is already doing so by itself, but the people i want to work with are actively sharing code.

[OT]i am perfectly fine with the potential percentage of coders, stylers, programmers, etc., who are willing to work in such a manner being something like .1% or less…i’m happy with that…no probs. <snip/>

i’ve been on enough projects to know that in environments of such code sharing…amazing things happen…[/OT]

the technical documentation topic i’m looking for is pretty clear, i’m happy to write the procedure and create the video, what i’m looking for is the subject matter expert willing to share code <snip/>

12

Interesting my response didn’t get split out with the rest…

Though seeing the full site explains a hell of a lot – Wordpress; A blight upon the Internet so far as markup is concerned what with all the pointless classes, endless nested DIV for nothing, etc, etc…

It does confirm my initial suspicion though – what the devil are you even using a table on that for in the first place?

Where you have:


<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup931" accept-charset="UTF-8" onsubmit="return verifyRequired931();" >
<input type=hidden name=redirect value="http://www.icontact.com/www/signup/thanks.html" />
<input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" />

<div id="SignUp">
<table width="291" class="signupframe" border="0" cellspacing="0" cellpadding="0">
	<tr class="centerme">

      <td align=center><span class="centerme">
        <input type=text name="fields_email" size="20"><span class="myButton"><INPUT type="submit" name="" value=""></span></span>
      </td>
    </tr>
    <input type=hidden name="listid" value="16322">
    <input type=hidden name="specialid:16322" value="JYHG">

    <input type=hidden name=clientid value="782612">
    <input type=hidden name=formid value="931">
    <input type=hidden name=reallistid value="1">
    <input type=hidden name=doubleopt value="0">
   

    </table>
</div>
</form>

I would have something more like:


<form method="post" action="https://app.icontact.com/icp/signup.php"
	id="icpsignup931"
	accept-charset="UTF-8"
	onsubmit="return verifyRequired931();"
>
	<fieldset>
    <input type="text" name="fields_email" id="fields_email" size="20">
    <input type="image" src="images/return-image.png" alt="go" width="22" height="22" />
    <input type="hidden" name="listid" value="16322">
    <input type="hidden" name="specialid:16322" value="JYHG">
    <input type="hidden" name="clientid" value="782612">
    <input type="hidden" name="formid" value="931">
    <input type="hidden" name="reallistid" value="1">
    <input type="hidden" name="doubleopt" value="0">
		<input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html" />
		<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
	</fieldset>
</form>

There is NO reason for the extra table, div, spans, etc… Form, fieldset, inputs. Set text-align:center on the fieldset or the form, and done. (side note, I also would question the need for that many hiddens – you need to pass that much info through the form when there’s only one user input, there’s something screwy with the form handler)

The whole page is filled with wasteful non-semantic markup like that – the typical train wreck I’ve come to expect from turdpress templates; as evidenced by the 323k of markup used to deliver 181k of plaintext… NOT that I would EVER put 181k of plaintext on a single page (since that’s larger than I usually allow for an entire page of markup+CSS+scripting+images) – time to divide that stuff up.

Of course at 1.3 megabytes in fifty files total it’s not even a viable website for most people to visit. (hence why it takes about 30 seconds to load here on a 22mbps downstream)

13

thanks for bringing us somewhere real…

14

I would like to remind everyone of what they should have read and remember having read in the FAQ
Respect yourself and others

Be courteous and polite at all times, even if you disagree with someone.

* Keep your language family-friendly. Some words are censored to enforce this requirement.
* Do not make personal attacks against another member.

Think before you hit submit.

If someone annoys you, don’t respond – report the post to a moderator.

Disputes are not forum fodder

Friendly debate is fun and helpful,. Disputes aren’t, and should kept private. If you think that someone is being disrespectful to you, or that others may be affected, please report the offensive post.

Report offensive posts

If you think that someone is being disrespectful to you, or that others may be affected, use the ‘flag post’ button.

report This button is located beside every post. When you report a post, the moderators of the forum will be notified.

Moderators deal with reported posts based on the information that is available to them. Sometimes a decision may not be exactly what you were hoping for, but it will have been made for a good reason. Please note that a moderator’s decision is final and may be based on information that is not available to you.

Consider the thread Reported and Please play nice. If you don’t like someone’s suggestion, don’t take it - no need for a snippy comeback. If you don’t like someone’s attitude, ignore it - no need to pass judgement.

@Dainis: Fortunately for you, you are not a Moderator and don’t need to make calls as to what kind of help other members offer, nor issue or revoke “invitations”. You don’t need to accept anyone’s advice anymoreso than anyone has to give what you ask.

I suggest everyone take a breather and try to take the higher road.

I am a Moderator - please don’t push me to <snip/>ing posts in this thread and start issuing thread crapping Warnings.

TIA

15

I was wondering how to match center troubles with code is water, code is wind.

I came up with the following: how rain, water and wind help you center. Enjoy.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language" content="en">

  <style type="text/css"> 

    div.column {
      float:left;
    }
    
    h2 {
      padding-top:100px;
      clear:left;
    }
    
    h3 {
      margin-top:25px;
      padding-left:100px;
    }
    
    td, div.example {
      width:464px;
      height:300px;
      border:1px solid black;
      }
    
    .rain {
      background:url("rain.png");
    }
    
    .rain span {
      position:relative;
      top:100px;
    }
    
    .water {
      background:url("sunny.png");
    }
    div.water, div.wind, div.end {
      line-height:300px;
    }
    
    .wind {
      background:url("wind.png");
    }
    
    .wind span {
      font-style:italic;
      padding-left:100px;
    }
    
    .end {
      text-align:center;
      background:url("sunny.png");
    }
    
  </style>

</head><body>

  <h1>Code is water. Code is wind.</h1>

  <h2>In the begining</h2>
  
  <div class="column">
    <h3>Table cell</h3>
      <table>
        <tr><td class="calm"><span>The begining. No wind. No water.</span></td></tr>
      </table>
  </div>
  <div class="column">
    <h3>Div</h3>
      <div class="example"><span>The begining. No wind. No water.</span></div>
  </div>
 
 
  <h2>Rain</h2>
  
  <div class="column">
    <h3>Table cell</h3>
      <table>
        <tr><td class="rain"><span>Rain. No wind.</span></td></tr>
      </table>
  </div>
  <div class="column">
    <h3>Div</h3>
      <div class="example rain"><span>Rain. No wind.</span></div>
  </div>


  
  <h2>Water</h2>

  <div class="column">  
    <h3>Table cell</h3>
      <table>
        <tr><td class="water"><span>Water. No wind.</span></td></tr>
      </table>  
  </div>
  <div class="column">      
    <h3>Div</h3> 
      <div class="example water"><span>Water. No wind.</span></div>
  </div>  
    

  <h2>Wind</h2>

  <div class="column">  
    <h3>Table cell</h3>
      <table>
        <tr><td class="wind"><span>Water. Wind.</span></td></tr>
      </table>  
  </div>
  <div class="column">
    <h3>Div</h3> 
      <div class="example wind"><span>Water. Wind.</span></div>
  </div>
    
    
  <h2>In the end</h2>

  <div class="column">  
    <h3>Table cell</h3>
      <table>
        <tr><td class="end"><span>The end. Water. No wind.</span></td></tr>
      </table>  
  </div>
  <div class="column">
    <h3>Div</h3> 
      <div class="example end"><span>The end. Water. No wind.</span></div>
  </div>
    
</body></html>

For those wanting a full visual experience, here are the sunny, [URL=“http://i1202.photobucket.com/albums/bb365/noonnope/rain.png”]rain and [URL=“http://i1202.photobucket.com/albums/bb365/noonnope/wind.png”]wind backgrounds.

For those just wanting a quick visual, here it is.

16

deathshadow,

this is what your code looks like…

http://screencast.com/t/r0yCQzRFuW

the code is obviously cleaner, haven’t checked if the form works, and it adds a border…

do i need to

i guess i’m looking for the cleanest way to center images, form elements, and text horizontally…while valigning all of those items middle.

here it is with the proper url for the submit button:

http://screencast.com/t/oA3pSnFZe

at least we can see that the elements are not valigned middle (or an equivalent is not there)

eventually, one or two buttons will replace such “troubles” (which is not how i titled this thread…that was done by an admin…)

17

ok, well, i’ll work on this again tomorrow, however, i had to set it back to my ridiculous code because it displays better:

http://screencast.com/t/ArRjykW6h9

you mentioned

Set text-align:center on the fieldset or the form, and done.

and i will try that…
i might need to adjust the image itself if vertical align either doesn’t work or i can’t get it to work…

18

WAIT, is the text around that form in the background image and NOT the markup? Mistake #1, get that in the markup!

Though yes, you’d also need vertical align:middle on the INPUTS, not the elements AROUND the inputs in addition to the text-align:center on an element AROUND the inputs.

form { text-align:center; }
input { vertical-align:middle; }

Should center the inputs horizontally, and make them appear next to each-other vertically aligned… then you don’t need any of those extra tags.

19

WAIT, is the text around that form in the background image and NOT the markup? Mistake #1, get that in the markup!

+with all the goofiness, and font selection, and line breaks and how the browser will display it…as much as i think it would be “cool” to have the text actually be “text,” right now, it’s hard enough just to have the silly text field and submit graphic line up the way I would like them to…

so, i just added the form text to the background image.

i mean…that’s one extra thing…and i was actually surprised that when i did it with text, it wasn’t as readable…which usually doesn’t happen, but maybe that has to do with the size of the text…dunno…

anyway: i’d love to have that be text, but can you or anyone here give me 100% confidence that it won’t display improperly somewhere (pushing the menu down…overlapping…all that kind of goofy unprofessional looking stuff)?

so…i’m very happy to talk about the code for the complete form…however…for now, i’m just going to concentrate on this one itty bitty question and, frankly, just the button and the email text field.

once that’s working…i’ll happily test text versions…sound good?

Though yes, you’d also need vertical align:middle on the INPUTS, not the elements AROUND the inputs in addition to the text-align:center on an element AROUND the inputs.

ok, i am going to go work on your suggestions.

basically it’s this

<valign middle and halign center>TextField Space Image</valign middle and halign center>

so, both elements together need to be centered horizontally
and i’d like the middles of the elements to be lined up vertically

i understand that halign is not a tag/property, and that i am just making it up…but right now, it’s just “align,” which is not as specific as valign and halign.

also, text-align:center is “confusing” because i want to center a form field and an image…with no text involved…so i’m not aligning text, i’m aligning whatever i happen to place in that style.

so, yes, the semantics of the code needs to be improved, and i trust that “humanity” will move things in a more “clear” direction…

now i will work on your code suggestions and run a few cross browser compatibility checks…

best and thanks,
Dainis

20 

<form method="post" action="https://app.icontact.com/icp/signup.php"
	id="icpsignup931"
	accept-charset="UTF-8"
	onsubmit="return verifyRequired931();"
>
	<fieldset id="optin"><span class="centerme"><input type="text" name="fields_email" id="optin" size="20"><input id="optin" type="image" src="http://taoofyouth.atsis.com/graphics/genesis-additional-graphics/return-image.png" alt="go" width="22" height="22" border="0" /></span>
    <input type="hidden" name="listid" value="16322">
    <input type="hidden" name="specialid:16322" value="JYHG">
    <input type="hidden" name="clientid" value="782612">
    <input type="hidden" name="formid" value="931">
    <input type="hidden" name="reallistid" value="1">
    <input type="hidden" name="doubleopt" value="0">
		<input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html" />
		<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
	</fieldset>
</form>


.centerme { text-align:center;
vertical-align: middle;
align: middle;
}

#optin 
{
border:none;
text-align:center; 
vertical-align:middle; 
}

is working in the browsers i’ve tested thus far, if you can help make it cleaner and better, please do so.