Hello all, I'm just learning CSS, so pardon my stupidness I just can't seem to center one piece of text within a div tag. Here is the code. <div id="content"><h1 style="text-align: center">Kinch Designs</h1> Code (markup):
Ok I just did a test in dreamweaver and I see it just creates another Div tag with the "align" attribute. According to here, the align attribute is deprecated for the DIV tag. Any alternatives?
Ok, I have edited the code and got the effect I wanted: <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <title>Kinch Designs</title> </head> <body> <div id="content"><div style="text-align: center;"><h1>Kinch Designs</h1></div> <p>I'm a freelance graphic artist!</p></div> <div id="leftnav">Navigation Bar!</div> </body> </html> Code (markup): However I do have one more question. When I type </div> I see it ends the <div style="..."> tag. Is that the order the ending tags always work, does the </div> always apply to the last <div> I wrote?
To have well written code, each opened tag need a closed tag. The </div> always apply to the PREVIOUS <div>. Maybe indenting your code helps: <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <title>Kinch Designs</title> </head> <body> <div id="content"> <div style="text-align: center;"> <h1>Kinch Designs</h1> </div> <p>I'm a freelance graphic artist!</p> </div> <div id="leftnav">Navigation Bar!</div> </body> </html> Code (markup): Also, you can check your code online. Take a look at: http://validator.w3.org/
Do you know of any editors that will automaticly indent the code? I have dreamweaver and front page... but right now I want to edit in just text.. and I know I will be tempted to move around page elements without code if it is just right in front of me.
Notepad++ has a nifty function that you can line up the indents of your code with. It's like a ruler; draws line that you can line up your code. http://notepad-plus.sourceforge.net/commun/screenshots/scrsh_braceIndentGuideHiLiting.gif
Indenting your code should really be considered a must. It helps readability and it's much easier to understand the overall structure when you look back at it. In Dreamweaver, with each new line you make just press TAB.
You don't need an extra div if you put the text-align center in the div instead of the h1 tag. text-align:center centers content within the element not the element itself. <div id="content" style="text-align: center"><h1>Kinch Designs</h1></div> BTW, since you already have an id for the content div it would be better to simply put text-align:center in the stylesheet.