image problem

SniperElite · #1 Aug 24th, 2007, 11:00

hey i have an image in my site and i want to center it but i cant do it what is the right tag to center a image please help???

karinne · #2 Aug 24th, 2007, 11:36

You'll have to give us more to go on.

Is this image within the content? Like a logo? Or is this an image that could be put in as a background?

A link to what you have and a better explanation of what you are trying to achieve will get you more responses.

SniperElite · #3 Aug 24th, 2007, 11:48

ok sorry i ahve no link the image is a gif i don't want it as a background just on a page the image is form a print screen sys rq

dab42pat · #4 Aug 24th, 2007, 12:00

are you using CSS, Tables or what, are you trying to centre it to the centre of a page,column left,right. Some code might be useful.

SniperElite · #5 Aug 24th, 2007, 12:19

yeah css for the layout and html for the design. yeag i want to center it to a center column.

here is the code

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>[KWG]. Kids With Guns</title>

<style type="text/css">
    @import url(all.css);
    
    body {
        margin:10px 10px 0 10px;
        padding: 0;
        background-color: #66CCFF;
}
    #header {
        background:#FFF url(nfbanner.gif) no-repeat center top;
        padding-top:150px;
        border:1px solid #E0E0E0;
        border-bottom:0;
        
}
    
    #leftcontent {
        position: absolute;
        left:10px;
        top:181px;
        width:192px;
        background:#E0E0E0;
        border:1px solid #E0E0E0;
        }

    #centercontent {
        background:#E0E0E0;
           margin-left: 199px;
           margin-right:199px;
        border:1px solid #E0E0E0;
    
        voice-family: "\"}\"";
        voice-family: inherit;
           margin-left: 201px;
           margin-right:201px;
        }
    html>body #centercontent {
           margin-left: 201px;
           margin-right:201px;
        }

    #rightcontent {
        position: absolute;
        right:10px;
        top:181px;
        width:192px;
        background:#E0E0E0;
        border:1px solid #E0E0E0;
        }
    
    #banner {
        background:#fff url(nfbanner.gif);
        height:40px;
        border-top:1px solid #000;
        border-right:1px solid #000;
        border-left:1px solid #000;
        voice-family: "\"}\"";
        voice-family: inherit;
        height:39px;
        }
    html>body #banner {
        height:39px;
        }
        
    p,h1,pre {
        margin:0px 10px 10px 10px;
        }
        
    h1 {
        font-size:14px;
        padding-top:10px;
        }
        
    #banner h1 {
        font-size:14px;
        padding:10px 10px 0px 10px;
        margin:0px;
        }
        
    
    #rightcontent p {
        font-size:14px
        }
    
</style>


<body>

<div id="header">
  <a href="#">Home</a> | <a href="#">GuestBook</a> | <a href="#">Blog</a> | <a href="#">Forum</a> | <a href="#">Links</a> | <a href="#">Clan Members</a> | <a href="#">Downloads</a> | <a href="#">Enemies and Allies</a> | <a href="#">Rules</a> | <a href="#">Chat Room</a> |
</div>

<div id="leftcontent">
    <h3>Scrims</h3>
    <p>Scrim Results</p>
    <p>Organize to scrim with [KWG].<p>
</div>

<div id="centercontent">
    <BR>
    <img src="kwg shots.gif" />
    <BR>
    <BR>
    
    
<h3 style="width: 100%; padding-botton: 10px; border-bottom: solid black 1px;" ><font color="#FF9900">Welcome</font></h3>
    
<p> Hey and welcome to [KWG]. nightfire clan site please enjoy the site.
Our clan is new  and we hope to be successful so can all members please follow all rules we have and enjoy being in our clan.
[KWG]. Clan leaders are Jewou and SniperElite so if you have any problems please speak to them :) </p>

<h3 style="width: 100%; padding-botton: 10px; border-bottom: solid black 1px;" ><font color="#FF9900">News</font></h3>

<p> [KWG].Clan is now running try outs to recruit there members.
The try outs will take place in CTF_Romania.
Jewou will be organizing the try outs  so if you would  like  to join [KWG]. Please speak to Jewou in GSA, in game or post in our blog or forum to arrange a time for a try out with him. <p>


    
    
<div id="rightcontent">
    
    <h3 align="center">GSA</h3>
    <p></p>
    <h3>The Site<h3/>
    <p>This site was created by: [KWG]SniperElite{NC}<p>
    
</div>

</body>
</html>

Lchad · #6 Aug 24th, 2007, 12:39

adding code to the image will center it:

Code: Select all

margin: 0 auto;

SniperElite · #7 Aug 24th, 2007, 12:47

ok thanks how do i add it in like where about to i put it in the image?

Lchad · #8 Aug 24th, 2007, 12:57

This image is going to go into the center div? Is that correct?

Code: Select all

cssCode: Select all
.imagecenter {
margin: 0 auto;
}See red below.  Don't forget to close the center div.


<div id="centercontent">
    <BR>
    <img src="kwg shots.gif" class="imagecenter"/>
    <BR>
    <BR>
    
    
<h3 style="width: 100%; padding-botton: 10px; border-bottom: solid black 1px;" ><font color="#FF9900">Welcome</font></h3>
    
<p> Hey and welcome to [KWG]. nightfire clan site please enjoy the site.
Our clan is new  and we hope to be successful so can all members please follow all rules we have and enjoy being in our clan.
[KWG]. Clan leaders are Jewou and SniperElite so if you have any problems please speak to them :) </p>

<h3 style="width: 100%; padding-botton: 10px; border-bottom: solid black 1px;" ><font color="#FF9900">News</font></h3>

<p> [KWG].Clan is now running try outs to recruit there members.
The try outs will take place in CTF_Romania.
Jewou will be organizing the try outs  so if you would  like  to join [KWG]. Please speak to Jewou in GSA, in game or post in our blog or forum to arrange a time for a try out with him. <p>
</div>

SniperElite · #9 Aug 24th, 2007, 13:03

ok where abouts do i need to put this code ?
.imagecenter {
margin: 0 auto;
}

karinne · #10 Aug 24th, 2007, 13:04

In your CSS ... you already have some in your document!

SniperElite · #11 Aug 24th, 2007, 13:06

but does it matter where about on the page???

dab42pat · #12 Aug 24th, 2007, 13:08

HTML: Select all

<h3 style="width: 100%; padding-botton: 10px;

you may want to change padding-botton to bottom in your h3 headings

karinne · #13 Aug 24th, 2007, 13:22

Quote:

Originally Posted by SniperElite

but does it matter where about on the page???

Yes ... put it with the rest of your css

And PLEASE!!! Loose the <font> tags!

SniperElite · #14 Aug 24th, 2007, 14:11

when i take out the font tags the words on the right column go big.

ok i have added all that in and it still didn't center it

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>[KWG]. Kids With Guns</title>

<style type="text/css">
    @import url(all.css);
    
    
    body {
        margin:10px 10px 0 10px;
        padding: 0;
        background-color: #66CCFF;
}
    #header {
        background:#FFF url(nfbanner.gif) no-repeat center top;
        padding-top:140px;
        border:1px solid #E0E0E0;
        border-bottom:0;
        
}
    
    #leftcontent {
        position: absolute;
        left:10px;
        top:189px;
        width:192px;
        background:#E0E0E0;
        border:1px solid #E0E0E0;
        }

    #centercontent {
        background:#E0E0E0;
           margin-left: 199px;
           margin-right:199px;
        border:1px solid #E0E0E0;
    
        voice-family: "\"}\"";
        voice-family: inherit;
           margin-left: 201px;
           margin-right:201px;
        }
    html>body #centercontent {
           margin-left: 201px;
           margin-right:201px;
        }

    #rightcontent {
        position: absolute;
        right:10px;
        top:189px;
        width:192px;
        background:#E0E0E0;
        border:1px solid #E0E0E0;
        }
    
    #banner {
        background:#fff url(nfbanner.gif);
        height:40px;
        border-top:1px solid #000;
        border-right:1px solid #000;
        border-left:1px solid #000;
        voice-family: "\"}\"";
        voice-family: inherit;
        height:39px;
        }
    html>body #banner {
        height:39px;
        }
        
    p,h1,pre {
        margin:0px 10px 10px 10px;
        }
        
    h1 {
        font-size:14px;
        padding-top:10px;
        }
        
    #banner h1 {
        font-size:14px;
        padding:10px 10px 0px 10px;
        margin:0px;
        }
        
    
    #rightcontent p {
        font-size:14px
        }
        
        .imagecenter {
margin: 0 auto;
}
    
</style>


<body>

<div id="header">
 <hr /><a href="#">Home</a> | <a href="#">GuestBook</a> | <a href="#">Blog</a> | <a href="#">Forum</a> | <a href="#">Links</a> | <a href="#">Clan Members</a> | <a href="#">Downloads</a> | <a href="#">Enemies and Allies</a> | <a href="#">Rules</a> | <a href="#">Chat Room</a> |
</div>

<div id="leftcontent">
    <h3>Scrims</h3>
    <p>Scrim Results</p>
    <p>Organize to scrim with [KWG].<p>
</div>

<div id="centercontent">
    <BR>
    <img src="kwg shots.gif" class="imagecenter"/>
    <BR>
    
    
<h3 style="width: 100%; padding-botton: 10px; border-bottom: solid black 1px;" ><font color="#FF9900">Welcome</font></h3>
    
<p> Hey and welcome to [KWG]. nightfire clan site please enjoy the site.
Our clan is new  and we hope to be successful so can all members please follow all rules we have and enjoy being in our clan.
[KWG]. Clan leaders are Jewou and SniperElite so if you have any problems please speak to them :) </p>

<h3 style="width: 100%; padding-botton: 10px; border-bottom: solid black 1px;" ><font color="#FF9900">News</font></h3>

<p> [KWG].Clan is now running try outs to recruit there members.
The try outs will take place in CTF_Romania.
Jewou will be organizing the try outs  so if you would  like  to join [KWG]. Please speak to Jewou in GSA, in game or post in our blog or forum to arrange a time for a try out with him. <p>

</div>
    
    
<div id="rightcontent">
    
    <h3 align="center">GSA</h3>
    <p></p>
    <h3>The Site<h3/>
    <p>This site was created by: [KWG]SniperElite{NC}<p>
    
</div>

</body>
</html>

karinne · #15 Aug 24th, 2007, 14:24

This why a link is better ... we need to see this in action with the images! Then we can play with it in Firebug and give a solution.

The are plenty of free hosting out there!

SniperElite · #16 Aug 24th, 2007, 14:34

here http://i14.tinypic.com/62of8ma.jpg

its the pic in the center column.

Lchad · #17 Aug 24th, 2007, 18:12

Can you upload the site to a free host? It's hard to help you without seeing it live.

SniperElite · #18 Aug 24th, 2007, 22:05

http://www.kwg-clan.6x.to/ here ya go

Lchad · #19 Aug 24th, 2007, 22:22

I don't know.. I played with the code for about 10 minutes and I can't find anything obvious.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
image problem