Simple code to center text? [Archive]

View Full Version : Simple code to center text?

HeadWench

07-03-2008, 05:12 AM

our website's host went XHTML compliant, though I know some HTML - I'm slowing fixing those minor errors... but

I can't figure out how to write a simple CSS code to center the text in our header, or how to make all my pages fonts be the same text and size!

The host gives our shopping cart an "advanced css" space to add this stuff, but I'm not getting this at all.

Do I write the html with the css (or XHTML) as <html> body etc... or?? I can't seem to figure out how to put it all together, sorry to bother everyone I'm sure this is a DUH :confused:

I'm doing alot of reading up on this website about css, and maybe this is listed somewhere I haven't read yet?

Thanks for any info, direction to point me to

(btw website is www.wenchesatwork.com) hosted by godaddy

rangana

07-03-2008, 05:56 AM

To center the text, you can use:

text-align:center;

Which text do you mean? Is it "Wenches At Work Renaissance Clothing, Pirate and Wench Wear, Gypsy Glamour"?

The basic syntax for html with CSS is either of this three:
1. Inline on the head section:

<dtd>
<html>
<head><title></title>
<style type="text/css">body{background:#f00;}</style>
</head>
<body></body></html>

2. Inline in style attribute of an element:

<p style="border:1px solid #f00;">Contents</p>

3. External:

<dtd>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="sourceOFcss.css">
</head>
<body></body></html>

Hope it makes sense.

allahverdi

07-03-2008, 06:14 AM

rangana, i think you mean this:

<link rel="stylesheet" type="text/css" href="sourceOFcss.css

<link rel="stylesheet" type="text/css" href="sourceOFcss.css/>

rangana

07-03-2008, 06:18 AM

Ah, yes. Post edited.
Also, self-closing of the link tag is optional on HTML 4.01 as per time being.

allahverdi

07-03-2008, 06:25 AM

rangana

07-03-2008, 06:30 AM

Haha, done. :D

jscheuer1

07-03-2008, 06:32 AM

Ah, yes. Post edited.
Also, self-closing of the link tag is optional on HTML 4.01 as per time being.

But not in XHTML. In XHTML, it is required.

rangana

07-03-2008, 06:39 AM

But not in XHTML. In XHTML, it is required.

Indeed.

jscheuer1

07-03-2008, 10:13 AM

Indeed.

Well, it actually is not allowed in HTML 4.01 though. So this 'optional' business you were talking about is just at the behest of browser's error correcting.

Now, I know that HeadWench said that:

our website's host went XHTML compliant

So you should know that's what we are talking about, if you were reading the thread.

This makes me scratch my head though, because XHTML isn't really implemented yet in IE, so pages with that DOCTYPE can get pretty screwy in that browser, except that generally IE will parse it as error corrected HTML 4.01 strict (or maybe loose, not sure).

In fact, if truly served as xml/XHTML (via the proper prologue), IE will not display the page at all.

rangana

07-03-2008, 10:36 AM

Well, it actually is not allowed in HTML 4.01 though. So this 'optional' business you were talking about is just at the behest of browser's error correcting.

I totally disagree. :eek:

Please see link (validated):
http://h1.ripway.com/rangana/test.htm

For further reading:
http://www.w3schools.com/XHTML/xhtml_html.asp

jscheuer1

07-03-2008, 12:08 PM

Let's get this straight, when you said:

Ah, yes. Post edited.
Also, self-closing of the link tag is optional on HTML 4.01 as per time being.

and I said:

Well, it actually is not allowed in HTML 4.01 though. So this 'optional' business you were talking about is just at the behest of browser's error correcting.

Which you even quoted:

I totally disagree. :eek:

Well, it actually is not allowed in HTML 4.01 though. So this 'optional' business you were talking about is just at the behest of browser's error correcting.
Please see link (validated):
http://h1.ripway.com/rangana/test.htm

You want to prove me wrong by showing me a valid HTML page without the self closing tag?

LOL!

see:

http://codex.wordpress.org/HTML_to_XHTML#Self-closing_tags

Which, as I say, is not allowed in HTML.

rangana

07-03-2008, 12:17 PM

No. It's optional and not deliberate not allowed.

I want to give you a proof that what I replied is base upon what I experienced and have read. I'm not always good, where in fact, most of my learning were from you and a lot of members who had been showing their wits.

As I said, HTML 4.01, does'nt require a self-closing tag, which results on my decision to totally disagree on your post which I quoted.

In fact, the link you've given is a perfect example that it's not:

XHTML now emphasizes closing ALL tags, not just open tags. Items like line breaks or images which do not have closing tags in HTML, must be self-closing in XHTML.

Tags that now require self-closing include the HTML tags: <br>, <hr>, <meta>, <link>, <input>, and <img>.

Hope I made myself clear.

jscheuer1

07-03-2008, 12:31 PM

But rangana, you said it was optional in HTML. But it's not. It's simply not allowed. That's all I'm saying.

rangana

07-03-2008, 12:52 PM

But rangana, you said it was optional in HTML. But it's not. It's simply not allowed. That's all I'm saying.

The reason why I made a response, resulting into the thread's hi-jack. :eek:

And yes, that was my bad. I just got your point. I'm totally lost, I thought otherwise.

Thank you for being so patient to me John, as always, you helped me learn.

HeadWench

07-05-2008, 04:27 AM

*doing my best Renaissance Curtsy* Thank YOU all!

So I do have to write parts of the internal code in html or rather XHTML proper then add the css! Got it! Yes, you were right - it is the header line Wenches At Work and the below, what they call on the website "our slogan" that MUST be centered!!

I can't stand sloppy looking pages! Too many text sizes, fonts used - ugh not a perfect site yet....

Thank you thank you THANK YOU!!

:-Debbie aka Head Wench

HeadWench

07-05-2008, 04:41 AM

oh I also had to get over closing the paragraph's and line break tags when they "went XHTML compliant" UGH - WHAT was so wrong with the old html that I knew and loved SO well !! *sigh* and to change it from either caps OR small <p>, to almost all in small text - was this really a necessary "upgrade" to coding????

LOL - well keeps everyone on their toes learning ;-0 Like it or not one must keep up with the ever changing web (between sewing, taking care of stray cats that need "tutorting or "tabby-fayed" (aka trap, neuter/spay, release), I'm struggling with having to learn XHTML aka Html "REVED"?? (imho) just added coding!!! and some silly rules

Ahhh the life of a gypsy for me!! So much to do, so little time! Enjoy life every chance you get! whoo hooo

Thanks again - After our big opening weekend (tomorrow & Sunday) I will try this new code and work on some other glaring uglies on the new designed site!

WTG guys!! Ya'll rock

;-Debbie aka HeadWench

harryknight

07-05-2008, 06:46 AM

I am only a bit of a novice but with the link to the style sheet - shouldn't that all be in lower css with XHTML?

I hope I have this correct.

Headwench my source code starts this way:

=============
<!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:lang="en-gb">

<head>
<title>Place title here.</title>
<meta content="Description here" name="description" />
<meta content="Keywords here" name="keywords" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright © 2008
, Your name All Rights Reserved" name="copyright" />
<link href="styles/namedstyle.css" rel="stylesheet" type="text/css" />
</head>

PLEASE note the charset

harryknight

07-05-2008, 06:59 AM

HeadWench,
What are you using to write your webpage?

HeadWench

07-08-2008, 12:46 AM

Evening to all,

Harry Knight (great name for a Renaissance man!)

We can't use an html editor to write real code, though I have 1st Page by Evrsoft and Dreamweaver.

It's run on a Quick Shopping Cart from GoDaddy - after 3 years of griping, they updated everyone's cart that does allow SOME html coding in some of the pages, and now it has a tab marked "Advanced CSS". I am going in this section tonight and try the code above for the internal CSS.

The only uploading we get are in the category and product pages (also to upload our logo and "slogan". I don't think I can use external .css.

DynamicDrive ROCKS for helping everyone with questions! Thanks to all

magicyte

07-08-2008, 12:57 AM

In CSS:

<style type="text/css">body { text-align:center; }</style>

Simple.

-magicyte

HeadWench

07-08-2008, 01:03 AM

OH just to clarify...

This is what is in the tab to Customize the header of the website...

<a href="main.sc" id="logo">%QSC-SITE-LOGO%</a>
<div class="titles">
<h1 class="company-name">%QSC-SITE-COMPANYNAME%</h1>
<h3 class="slogan">%QSC-SITE-SLOGAN%</h3>
</div>
<div class="address">
<ul>
<li>%QSC-SITE-PHONE%</li>
<li>%QSC-SITE-EMAIL%</li>
</ul>
</div>

So this is where it "pulls" the site Slogan that I want to center

Thanks

magicyte

07-08-2008, 02:03 AM

HeadWench

07-09-2008, 02:41 AM

:confused:

One of the area's Quick Shopping Cart (GoDaddy) let's you edit is the Welcome Page - The header and the footer. There is now also an Advanced CSS tab - BUT it states to not put the xhtml/html there only the CSS stuff.

All I'm trying to do is to get the name of our business and the slogan to Center on the header - In this section's code, I've tried the code given to me in earlier postings but it doesn't do anything but give me coding errors - there is some kind of xhtml checker to verify your code, and it says I can't use the <p style there, so I move it to many places and still nothing.

I knew I should have switched our website when I wasn't traveling, but now it's too late - Got to work with what I'm given LOL

HELP!!

PS I also tried <text-align:center> or however it's suppose to be, but it gives me an error that I can't use that tag (I did put it right on the site, just can't think of how to type it here tonight ;-)

Thanks !! Gosh do I feel SO blonde and stupid for not getting this!! It HAS to be something easy, I just don't know what it wants.

HeadWench

07-09-2008, 02:51 AM

OH I tried this too <style type="text/css"> this style type can't be used *sigh*

In the Customize Header section - this is what is in there now, so I get my Logo (though with a white background yuck I can fix in PSP or Animation Shop & change to a transparent .gif)... Then "pulls the company name" and website slogan

<a href="main.sc" id="logo">%QSC-SITE-LOGO%</a>
<div class="titles">
<h1 class="company-name">%QSC-SITE-COMPANYNAME%</h1>
<h3 class="slogan">%QSC-SITE-SLOGAN%</h3>
</div>
<div class="address">
<ul>
<li>%QSC-SITE-PHONE%</li>
<li>%QSC-SITE-EMAIL%</li>
</ul>
</div>

it pulls using the id="logo">%QSC-SITE-LOGO%</a>

I've tried to center the text is in the <div class=titles"> and in the <h1 area, but no luck so far.

I simply want the CompanyName h1 class and h3 class Site-Slogan to center in the header of the website.

Does that make sense? LOL not to me, but I hope to some of you coders all that stuff above says something revelant!

OR I can put some css into the advanced css section to move the header stuff above if I knew that part

Thanks for keeping going!

HeadWench

07-16-2008, 01:42 AM

Still stupid

Irishcash33

07-21-2008, 07:34 PM

Hi HeadWench
In the advanced CSS tab you can only override QuickShoppingCart's, styles. You can't edit the html. Easiest way is to use firebug or Xray and find the style name they use for the title you want in the header..
then put that in the advanced section with the centering or whatever you want..and it should work.

My only problem is they have say 4 stylesheets and some of the styles are named the same on all 4 sheets. Is there a way I can specify which stylesheet I want to override??

TheJoshMan

07-21-2008, 08:38 PM

The reason why you're having such a hard time getting it to center is because the css they generated is an absolute mess. I've come up with a "hack" that works in Firebug using negative margins. Give it a shot and see if it works for you.

Center Title ONLY:

.titles {
width:54% !important;
}

.titles h1.company-name{
text-align:right !important;
}

Center Title AND Slogan:

.titles {
width:54% !important;
}

.titles h1.company-name{
text-align:right !important;
}

.titles h3.slogan {
margin-right:-85px !important;
text-align:right !important;
}

HeadWench

07-23-2008, 07:51 AM

Thanks! Working at the Renaissance Faires weekends, and on the booth and sewing so I'm sorry I am just getting back 'round to read this - GREAT INFO!!!

I'll try this later today after a bit o sleep (almost 4 am now lol)...

So ... I put that code to Center both the Company name and Slogan in the advanced CSS section, or is this where I add it to?

like below??

<a href="main.sc" id="logo">%QSC-SITE-LOGO%</a>
<div class="titles">
.titles {
width:54% !important;
}

.titles h1.company-name{
text-align:right !important;
}

.titles h3.slogan {
margin-right:-85px !important;
text-align:right !important;
}
<h1 class="company-name">%QSC-SITE-COMPANYNAME%</h1>
<h3 class="slogan">%QSC-SITE-SLOGAN%</h3>
</div>
<div class="address">
<ul>
<li>%QSC-SITE-PHONE%</li>
<li>%QSC-SITE-EMAIL%</li>
</ul>
</div>

HeadWench

07-23-2008, 07:54 AM

Hey Irish - I read on the developer blog we can link to our own outside .css style sheets - in the QSC developer blog, read the comments on how they "Think" this can work

I'd rather get REAL answers from here personally - that cart is my 3 year nightmare they are just NOW trying to fix parts of *sigh*

Good luck this forum is MORE helpful as always :-)

HeadWench

07-23-2008, 03:58 PM

:rolleyes:

WOW - using the "hack" worked - Welllllll.... I'll leave the website LIKE it is with the hack so you can see what happened ;-)

Put the code in the Advanced CSS but... it's chopping off part of the slogan

BUT - it DID center stuff YEAH

If you have a minute take a look and see

www.wenchesatwork.com

Renaissance Clothing (not whatever else ya'll are thinking :eek:

HeadWench

07-23-2008, 05:26 PM

Ok - after fiddling with the width, and negative margins...

I removed the email and phone to make it look better?!

here is what I used - hope the code is written right, but it seems to work ok?

.titles {
width:68% !important;
}

.titles h1.company-name{
text-align:center !important;
}

.titles h3.slogan {
text-align:center!important;
}

I only have IE to see if it looks right - SO if anyone see's this isn't working in any other browser, PLEASE let me know and H.E.L.P. :-)

Thanks a TON!

TheJoshMan

07-23-2008, 10:15 PM

Looks right to me in FF3! Glad it helped!

HeadWench

07-25-2008, 07:20 AM

ok, ya'll got me HOOKED on how far I can go with this Advanced CSS thing ;-)

I'm going page by page and looking at the View Source to figure out how to chance Text (can't do it globally in QSC good gawd!), but I've managed to do it many places... so far, added MORE photo's right in the products and working my way up to really screwing up MORE css code LOL

Glad to know when I get totally hosed - I can read post, or ask and like special people you are - there IS help

WTG everyone, and thanks !

TheJoshMan

07-25-2008, 10:03 PM

That's what we're here for...? I think. LOL

If you are really interested in finding out all of the CSS classes and ID's used in the generated CSS for your site, you should download FireFox 3, then search for the Plugin called "FireBug". This little addon makes it 10x easier to sift through the mountains of code to find exactly what you're looking for.:)

auntnini

07-26-2008, 12:46 AM

Your discussion of HTML vs. XHTML (“because XHTML isn't really implemented yet in IE so pages with that DOCTYPE can get pretty screwy”) blew me away as a Dreamweaver devotee who prefers “loose” to “strict” (e.g., <i>italic</i> instead of <span class=”italic”>__</span>) and bought the idea XHTML was a step towards XML.

If it is XHTML, even “empty” tags must be closed (e.g., <br /> or <link rel="stylesheet" type="text/css" href="source.css" />) with a space and slash.

"Recently, notable developers have begun to question why Web authors ever made the leap into authoring in XHTML. In October 2006, HTML inventor and W3C chair Tim Berners-Lee, explaining the motivation for the resumption of HTML (not XHTML) development, posted in his blog: 'The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work. The large HTML-generating public did not move, largely because the browsers didn't complain.' "

But did you resolve HeadWench’s CSS quandary?

CSS (Cascading Style Sheets) can be intimidating, but it is well worth the effort to learn about CSS. There are many books on CSS (get them at your public library) and online tutorials and articles.

One would think the World Wide Web Consortium http://www.w3.org/Style/CSS/learning to be a good source. The following gem is what W3.org led to:

http://www.html.net/tutorials/CSS/lesson1.asp
"What is the difference between CSS and HTML?
"HTML is used to structure content. CSS is used for formatting structured content.

"Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text … using HTML tags such as <h1> and <p>.

"As the Web gained popularity, … browser producers (at that time Netscape and Microsoft) invented new HTML tags such as <font> which differed from the original HTML tags by defining layout - and not structure. …"

HeadWench

07-29-2008, 03:47 AM

Thanks So much - Yes, Nyne got the css quandry solved and with a few tweaks to the negative margins and such, I'm a bit happier about the look for now ;-)

Loved dreamweaver and 1stPage and long for the old <i> html days as that is all I know - but learning keeps us interested/interesting? So I've been over to W3.org reading.

Now if GoDaddy can keep making improvvements to the cart system and keep up with us, that will make us all happier.

thanks

HeadWench

Medyman

07-29-2008, 12:45 PM

Now if GoDaddy can keep making improvvements to the cart system and keep up with us, that will make us all happier.

GoDaddy? Booo!!
If you're looking for an e-commerce solution, there is no better product that Magento (http://www.magentocommerce.com) at the moment, I think.