Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning a image?

    Hi.
    I need help positioning a banner at the top of a page. When I first did it, I used "text-align: center" but then I moved it around to see if it would look better another way and when I tried to put it back the way it was, it no longer worked. Here's the code
    Code:
    <HTML><HEAD><TITLE></TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><STYLE type=text/css>BODY {
    	FONT-FAMILY: eras light ITC; BACKGROUND: url(http://i62.tinypic.com/ojdldy.png) #003447 no-repeat right bottom
    }
    H{
    	TEXT-ALIGN: center;
    }
    H1 {
    	TEXT-ALIGN: center; COLOR: #00a8d7; FONT-SIZE: 25px; 
    }
    H2 {
    	BORDER-BOTTOM: #005771 4px ridge; TEXT-ALIGN: center; BORDER-LEFT: #005771 4px ridge; BACKGROUND-COLOR: #00789c; COLOR: #b3eeff; FONT-SIZE: 25px; BORDER-TOP: #005771 4px ridge; BORDER-RIGHT: #005771 4px ridge; MARGIN-LEFT: 200px; MARGIN-RIGHT: 200px; 
    }
    P {
    	TEXT-ALIGN: center; COLOR: #00a8d7; MARGIN-LEFT: 210px; FONT-SIZE: 15px; MARGIN-RIGHT: 210px
    }
    A:link {
    	COLOR: #001b22; TEXT-DECORATION: none
    }
    A:visited {
    	COLOR: #001b22; TEXT-DECORATION: none
    }
    A:hover {
    	COLOR: #b3eeff; TEXT-DECORATION: none
    }
    A:active {
    	COLOR: ; TEXT-DECORATION: none
    }</STYLE>
    <META name=description content="Created with Trellian WebPage"><META name=GENERATOR content="MSHTML 9.00.8112.16447"></HEAD><BODY>
    <H><IMG src="http://i59.tinypic.com/2ykxamt.png"></H>
    <H2><A style="COLOR: #b3eeff" href="url">Home</A>&nbsp; <A href="url">How-Tos</A>&nbsp; <A href="url">Dungeons</A>&nbsp; <A href="url">Items</A>&nbsp; <A href="url">Story Line</A>&nbsp; <A href="url">Shops</A>&nbsp; <A href="url">About/FAQ</A></H2>
    <H1>&nbsp;</H1><H1>&nbsp;</H1><H1>Welcome to the Mangata guide to Pokemon Mystery Dugeon!</H1>
    <P>NOMNOMNOMNOMNOMNOMNONMNOMNOMNOMNOMCICIPIENOMNOMNOMNOMNOMNOMNOMNOMNOM
    NOMNOMNOMNOMNOMNONMNOMNOMNOMNOMCICIPIENOMNOMNOMNOMNOMNOMNOMNOMNOMNOMNOM</P>
    </BODY></HTML>
    I'm having issues with the image
    Code:
    H{
    	TEXT-ALIGN: center;
    }
    <H><IMG src="http://i59.tinypic.com/2ykxamt.png"></H>
    I just want the banner to be centered at the top of the page. Help Please!
    Thx, cicipie

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cicipie,
    There are a few mistakes in your code that will stop your header image from centering, the biggest ones being no valid DocType and the fact that H is not an element. See the links in my signature line about DocTypes and Validation. The validators can both help you a lot.

    To center a block level element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto

    For that to work, you would need to make your image a block level element.

    For your text-align: center; to work, try this approach for some ideas -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	font-family: eras light itc;
    	background: url(http://i62.tinypic.com/ojdldy.png) #003447 no-repeat right bottom
    }
    #container {
    	width: 1000px;
    	margin: 20px auto;
    	border: 1px solid #f00;
    }
    header { text-align: center; }
    	nav {
    		background: #00f;
    		text-align: center;
    	}
    		nav a:link,
    		nav a:visited {
    			margin: 0 15px 0 0;
    			display: inline-block;
    			color: #001b22;
    			text-decoration: none
    		}
    		nav a:hover,
    		nav a:active {
    			color: #b3eeff;
    		}
    h1 {
    	text-align: center;
    	color: #00a8d7;
    	font-size: 25px;
    }
    h2 {
    	border-bottom: #005771 4px ridge;
    	text-align: center;
    	border-left: #005771 4px ridge;
    	background-color: #00789c;
    	color: #b3eeff;
    	font-size: 25px;
    	border-top: #005771 4px ridge;
    	border-right: #005771 4px ridge;
    	margin-left: 200px;
    	margin-right: 200px;
    }
    p {
    	text-align: center;
    	color: #00a8d7;
    	margin-left: 210px;
    	font-size: 15px;
    	margin-right: 210px
    }
    </style>
    </head>
    <body>
    	<div id="container">
    		<header><img src="http://i59.tinypic.com/2ykxamt.png" alt="logo image" height="300" width="750"/></header>
    			<nav>
    				<a href="#">Home</a>
    				<a href="#">How-Tos</a>
    				<a href="#">Dungeons</a>
    				<a href="#">Items</a>
    				<a href="#">Story Line</a>
    				<a href="#">Shops</a>
    				<a href="#">About/FAQ</a>
    			</nav>
    		<H1>Welcome to the Mangata guide to Pokemon Mystery Dugeon!</H1>
    		<p>
    			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    			aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    			sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    			nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    			duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    		</p>
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    While TEXT-ALIGN: center; will work, a better way is A) use a div B) put img inside it C) give div width and margins. D) always use a doctype.
    #header{
    width: 750; // this is the width of the image
    margin: 0 auto;
    }
    and
    <body>
    <div id="header"><img src="http://i59.tinypic.com/2ykxamt.png" alt=""></div>
    The img tag needs alt and you should use height and width to define the image.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You! it worked great and I see what you are saying....... Thanks for fixing it, it was starting to aggravate me.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by sunfighter View Post
    While TEXT-ALIGN: center; will work, a better way is A) use a div B) put img inside it C) give div width and margins. D) always use a doctype.
    /....
    I think, if all we're doing is centering an image, that it should not be wrapped in a div element. An image is fine on it's own and the div would just be extra. See it like this once -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 1000px;
    	margin: 20px auto;
    	padding: 0 0 300px; /*demo only*/
    	border: 1px solid #f00;
    }
    #header {
    	display: block;
    	margin: 0 auto;
    }
    </style>
    </head>
    <body>
    	<div id="container">
    		<img id="header" src="http://i59.tinypic.com/2ykxamt.png" alt="logo image" height="300" width="750" />
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Yes Excavator, You are correct. Don't need to wrap block elements in divs. Gotta stop adding un-needed code...
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •