Newbie needs help

**thrillcode** · 07-01-2012, 02:17 AM

Hey guys, I need to centre my text inside my block.. padding doesn't work it duplicates the images, maybe something with margin or padding ? idk i only started css/html a few days ago

Code:

<html>
<body>
<a class id="nav">

.nav {
display: block;
width: 203px;
height: 57px;
margin-left: auto;
margin-right: auto;
background :transparent url('ClosedButton.jpg');
font-family: 'Fredoka One', serif;
text-align: center
}

.nav:hover {

   background-image: url('HoverButton.jpg');
text-align: center
 }

<a href="movies.html" class="nav" title="Movies">Movies</a>
<a href="games.html" class="nav" title="Games">Games</a>
</body>
</html

**bernie1227** · 07-01-2012, 02:30 AM

Originally Posted by thrillcode

Hey guys, I need to centre my text inside my block.. padding doesn't work it duplicates the images, maybe something with margin or padding ? idk i only started css/html a few days ago

Code:

<html>
<body>
<a class id="nav">

.nav {
display: block;
width: 203px;
height: 57px;
margin-left: auto;
margin-right: auto;
background :transparent url('ClosedButton.jpg');
font-family: 'Fredoka One', serif;
text-align: center
}

.nav:hover {

   background-image: url('HoverButton.jpg');
text-align: center
 }

<a href="movies.html" class="nav" title="Movies">Movies</a>
<a href="games.html" class="nav" title="Games">Games</a>
</body>
</html

Ok, youve got a few problems here:
1. You're CSS needs to be in the head of the page
2. It needs to be within:

Code:

<style type="text/css">
</style>

Tags
3. You didn't end your final css rules with semicolons.
Bernie

**ApacheTech** · 07-01-2012, 02:59 AM

Originally Posted by bernie1227

3. You didn't end your final css rules with semicolons.
Bernie

The final css rule of any selector doesn't need a semi-colon. It looks a bit neater if you do, and it allows for easier expansion, but they are not strictly necessary for the final rule.

Here's a fully formed HTML5 page that should give you the effect you need:

PHP Code:


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>CSS Centre Example</title>

        <style type="text/css">

        

            .nav

            {

                display: block;

                width: 203px;

                height: 57px;

                background: url('ClosedButton.jpg') transparent;

                font-family: 'Fredoka One', serif;

                text-align: center; /* This will horizontally centre the text within the element */

                margin: auto; /* This will horizontally centre the element on the page. */

            }



            .nav:hover 

            {

                background: url('HoverButton.jpg') transparent;

            }

        

        </style>

    </head>

    <body>

        <a href="movies.html" class="nav" title="Movies">Movies</a>

    </body>

</html>

**bernie1227** · 07-01-2012, 03:00 AM

Originally Posted by ApacheTech

The final css rule of any selector doesn't need a semi-colon. It looks a bit neater if you do, and it allows for easier expansion, but they are not strictly necessary for the final rule.

Here's a fully formed HTML5 page that should give you the effect you need:

PHP Code:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CSS Centre Example</title>
        <style type="text/css">
        
            .nav
            {
                display: block;
                width: 203px;
                height: 57px;
                background: url('ClosedButton.jpg') transparent;
                font-family: 'Fredoka One', serif;
                text-align: center; /* This will horizontally centre the text within the element */
                margin: auto; /* This will horizontally centre the element on the page. */
            }

            .nav:hover 
            {
                background: url('HoverButton.jpg') transparent;
            }
        
        </style>
    </head>
    <body>
        <a href="movies.html" class="nav" title="Movies">Movies</a>
    </body>
</html>

Like you said though, it is better practice to end it with a semicolons, and it's better for them to learn good coding practices early on, before they start *shudder* capitalizing tags, or other such misdemeanors.

Like I said though thrillcode, as you can see in apaches code, the CSS needs to be in the head of the page, within script tags.

**ApacheTech** · 07-01-2012, 03:14 AM

I'll also include a fully annotated version of the page so you can understand what's happening. I hope this makes sense. I know it can be a minefield when you first start out, but you'll get the hang of it. Let me know if there's anything you don't understand and we can help fill in the gaps.

Please note:

Anything within  tags are HTML comments (annotations) and will be ignored by any browser when viewing the page. It is not a good idea to keep any annotations you use within the page on a "live" website. It increases page size and makes pages slower to load. But for demonstration purposes, use this to help you learn what things are. Within the CSS stylesheet, anything between /* */ is an annotation/comment.

HTML Code:

<!-- 
The DOCTYPE tells the browser which rules to use to display the page.
Here, we're using HTML5. This is widely becoming the industry standard.
-->
<!DOCTYPE html>

<!--
The <html></html> tag is required. This holds all the information for the page.
-->
<html>

	<!--
	The <head></head> tag is required. It holds information for the browser
	about this particular page. Any CSS and Javascripts in the head tag will
	be run as the page is first loaded.
	-->
	<head>
		
		<!-- The following line tells the browser which character set to use for the page. -->
		<meta charset="UTF-8" />
		
		<!-- The following line is the page title, displayed in the browser's title bar. -->
		<title>CSS Centre Example</title>
		
		<!--
		This is an "internal" CSS stylesheet. Internal stylesheets and links to external
		stylesheets should always be in the head of the page and should be contained
		within <style type="text/css"></style> tags.
		-->
		<style type="text/css">
		
			.nav
			{
				display: block;
				width: 203px;
				height: 57px;
				background: url('ClosedButton.jpg') transparent;
				font-family: 'Fredoka One', serif;
				text-align: center; /* This will horizontally centre the text within the element */
				margin: auto; /* This will horizontally centre the element on the page. */
			}

			.nav:hover 
			{
				background: url('HoverButton.jpg') transparent;
			}
		
		</style>
	</head>
	
	<!-- This is the body of the page; what is displayed to the user. -->
	<body>
	
		<!--
		This anchor tag creates a hyperlink to another page. It's been given
		the CssClass of "nav", relating to the .nav selector within the
		internal CSS Stylesheet in the head of the page.
		-->
		<a href="movies.html" class="nav" title="Movies">Movies</a>
	</body>
</html>

**bernie1227** · 07-01-2012, 04:12 AM

just as an after thought thrillcode,
one of the best online resources for learning html and CSS is:
http://www.tizag.com
or if you're willing to spend some money, 'head first (X)HTML & CSS' by o'reilly media, is extremely good.

**thrillcode** · 07-01-2012, 04:51 AM

Oh yes. My css is within my head and script tags i have My html5 doc type, My google fonts, my title, I have done my research and I made sure I started anything in html5.
but thank you both! you fixed up my css for me

i just assumed because I was purely asking about the css, but not to worry next time I will post my whole code not to throw anyone off like that.
you guy's read it like the machine does

thank you guys both again

also tizag.com is going to help me out alot, such a better reference than w3schools

**bernie1227** · 07-01-2012, 04:57 AM

Originally Posted by thrillcode

Oh yes. My css is within my head and script tags i have My html5 doc type, My google fonts, my title, I have done my research and I made sure I started anything in html5.
but thank you both! you fixed up my css for me

i just assumed because I was purely asking about the css, but not to worry next time I will post my whole code not to throw anyone off like that.
you guy's read it like the machine does

thank you guys both again

also tizag.com is going to help me out alot, such a better reference than w3schools

I started of with W3C as well, switching to tizag was probably my best decision as far as learning to code goes.