Website help - GameCreators Forum

Author

Message

Nuklear Onslaught

17

Years of Service

User Offline

Joined: 27th Jun 2007

Location: England

Posted: 21st Jul 2007 20:34

Link

I usually used pre made templates, but this time I decided to start from scratch creating my own images etc. I am using Visual Web Developer 2005.

My problem is that I want my header to be centralised, but I can't do this because it is a div tag. If I remove this then it ruins the rest of my formatting. So basically, is there a way I can centre my header?

Here's my code

+ Code Snippet

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>subPHOENIX Development</title>
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
      <div>
        <div style="width: 1107px; height: 800px; text-align: left">
            <img src="img/text.png" /><br />
            <img src="img/home.gif" /><img src="img/div.gif" /><img src="img/projects.gif" /><img
                src="img/div.gif" /><img src="img/community.gif" /><img src="img/div.gif" /><img
                    src="img/support.gif" /><img src="img/div.gif" /><img src="img/store.gif" /><img
                        src="img/div.gif" /><img src="img/right.gif" style="width: 215px; height: 26px" /><br />
        </div>
       
    
    
       </div>
            
    </form>
</body>
</html>

And a screenshot is attatched

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Nicholas Thompson

20

Years of Service

User Offline

Joined: 6th Sep 2004

Location: Bognor Regis, UK

Posted: 21st Jul 2007 22:41

Link

The header looks centralized to me...

One thing you can do which works in "most" browsers (but not IE6 or earlier... obviously... very little really "works" in IE6) is use auto margins.

If you have a block element with a fixed width inside a larger block element then setting horizontal margins to auto will centre it... For example...

+ Code Snippet

<div style="width: 1000px; background: #844;">
  <div style="width: 500px; background: #484; margin: 0px auot; "><p>I'm a fish</p><p>I'm a fish</p></div>
</div>

PS: In CSS, margin and padding (and anything else AFAIK which accepts a top, right, bottom and left set of numbers will also take less than the 4). Basically if you provide fewer than the 4 then the CSS parser will copy from the other side... example: margin: 0px 4px 8px; As there are only 3 values they will be: top=0, right=4, bottom=8, left(unset)=4 (as it inherits from right).
So in my example where I said '0px auto' that means top and bottom are 0px and left and right are auto. Its shorthand...

[center]

Back to top

Profile PM Email Website

xplosys

18

Years of Service

User Offline

Joined: 5th Jan 2006

Playing: FPSC Multiplayer Games

Posted: 21st Jul 2007 22:44

Link

Well, there are a couple of ways, but an easy way would be to center a table inside the div.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>subPHOENIX Development</title>
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
      <div>
        <div style="width: 1107px; height: 800px; text-align: left">
        <table align=center>
            <img src="img/text.png" /><br />
            <img src="img/home.gif" /><img src="img/div.gif" /><img src="img/projects.gif" /><img
                src="img/div.gif" /><img src="img/community.gif" /><img src="img/div.gif" /><img
                    src="img/support.gif" /><img src="img/div.gif" /><img src="img/store.gif" /><img
                        src="img/div.gif" /><img src="img/right.gif" style="width: 215px; height: 26px" /><br />
        </table>                
        </div>
       
    
    
       </div>
            
    </form>
</body>
</html>

+ Code Snippet

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>subPHOENIX Development</title>
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
      <div>
        <div style="width: 1107px; height: 800px; text-align: left">
        <table align=center>
            <img src="img/text.png" /><br />
            <img src="img/home.gif" /><img src="img/div.gif" /><img src="img/projects.gif" /><img
                src="img/div.gif" /><img src="img/community.gif" /><img src="img/div.gif" /><img
                    src="img/support.gif" /><img src="img/div.gif" /><img src="img/store.gif" /><img
                        src="img/div.gif" /><img src="img/right.gif" style="width: 215px; height: 26px" /><br />
        </table>                
        </div>
       
    
    
       </div>
            
    </form>
</body>
</html>

Best.

I'm sorry, my answers are limited. You must ask the right question.

Back to top

Profile PM

Jess T

Retired Moderator

21

Years of Service

User Offline

Joined: 20th Sep 2003

Location: Over There... Kablam!

Posted: 22nd Jul 2007 05:44

Link

Urg xplosys, no... No.

Don't center a table in anything.
Using what Nick said will work.

While CSS support in IE is flaky at best, you can center it using Nicks trick with a little tweaking. Just google it, there's plenty blog posts out there that deal with it.

Nintendo DS & Dominos :: DS Dominos
http://jt0.org

Back to top

Profile PM Email Website

Nuklear Onslaught

17

Years of Service

User Offline

Joined: 27th Jun 2007

Location: England

Posted: 22nd Jul 2007 12:54 Edited at: 22nd Jul 2007 14:16

Link

Ok, i'll try doing Nick said. Thanks for all your help guys.

Damn it... I works fine in IE, but not Firefox. Now i'm kinda stuck.