12 replies to this topic

[Kido]

Wasn't really sure if I should put this here or in the gfx thread but I figured more people would see it here.

Anyways. What's the code to center a webpage on your screen?

For example. All the pet pages at sunnyneo are shifted to the left but I want them to be in the center of my screen when I look at them. How would I do that? o.0

The lookup I'm editing is this one: http://sunnyneo.com/...mples.php?id=12

Which is the last one on this page: http://www.sunnyneo.com/petpages.php

Any help would be great!

[Rooshy]

< center > ... </ center >

Like that?
I feel like I'm not understanding your question, that answer seems way too generic. D:

Alternatively, http://www.sunnyneo....al.php#aligning may help.

Edited by Rooshy, 03 May 2011 - 05:49 PM.

[Neoquest]

< center > ... </ center >

Like that?
I feel like I'm not understanding your question, that answer seems way too generic. D:

Alternatively, http://www.sunnyneo....al.php#aligning may help.

That would do it, but if you are trying to get it really precise you'll need to use CSS.

[Rooshy]

That would do it, but if you are trying to get it really precise you'll need to use CSS.

Ah, he mentioned 'HTML' code in his title, so that's why I posted that.

For css, I believe you'd just edit the, 'align:left;' stuff to center.

Edited by Rooshy, 03 May 2011 - 05:53 PM.

[Neoquest]

I know, but as you said, it's such a general question I wasn't sure how he wanted it.

[Kido]

basically I just want the whole thing to be in the center of any screen I happen to be using (of varying resolution)

the < center > ... </ center > thing might work but where do I put it? Sorry. Really noob at this stuff.

[Neoquest]

If you want the <center></center> thing then just put it between all your content like this:

Spoiler

<center> Ilovecandyandmonkeysandallthethingsthatmaketheworldgoroundsothisiswherecontentgoes </center>

So it's just covering everything. If you're still confused just put a <center> tag at the top before you write anything else and it'll work.

[huevoquilmes]

Im gonna splash out a bit from what neoquest said.  Html works with tags. These are some reserved keyword inside "<keyword>
/br You have 2 type of tags. opening and closing tabs(closing have a / at the begining).  The keyword to make text bold, for example is "b" ... so, whatever part of text I have after the opening "<b> and closing "</b> will be bold.

/br For example...   The tree "<b>" is loosing "</b>" all its leaves.   The tree and all its leaves will have normal format, and is loosing will be bold. 
/br You can apply the same principle to what neoquest said, you have to use "<center>"  and "</center>"  tags.
/br  Hope it helps, any other question just ask

/p PS: you dont need to put the "" around the tags. I did because it wouldnt show if I didnt

Edited by huevoquilmes, 04 May 2011 - 04:40 AM.

[Rooshy]

Spoiler

<center>
<style>
table.items {
visibility: visible;
font: 8pt century gothic;
color: #cccccc;
margin-bottom: 25px;
width: 360px;
text-align: center;
}
table.items img {
background-color: #ffffff;
border: 3px double #535353;
}
body {
background-color: #333333;
font: 8pt century gothic;
color: #cccccc;
}
#img {
top: 0px;
left: 0px;
z-index: 0;
}
#text {
top: 72px;
left: 390px;
width: 382px;
height: 502px;
text-align: center;
z-index: 1;
overflow: auto;
}
#nav {
top: 391px;
left: 0px;
z-index: 1;
}
.nav td {
padding-bottom: 10px;
}
table.nav {
visibility: visible;
width: auto;
height: auto;
}
.nav1 {
background: url("http://sunnyneo.com/...ishlist_1b.gif");
}
.nav2 {
background: url("http://sunnyneo.com/...ishlist_2b.gif");
}
.nav3 {
background: url("http://sunnyneo.com/...ishlist_3b.gif");
}
.nav4 {
background: url("http://sunnyneo.com/...ishlist_4b.gif");
}
.nav5 {
background: url("http://sunnyneo.com/...ishlist_5b.gif");
}
.nav6 {
background: url("http://sunnyneo.com/...ishlist_6b.gif");
}
.nav7 {
background: url("http://sunnyneo.com/...ishlist_7b.gif");
}
.nav8 {
background: url("http://sunnyneo.com/...ishlist_8b.gif");
}
.nav9 {
background: url("http://sunnyneo.com/...ishlist_9b.gif");
}
a:hover div.nav1 img, a:hover div.nav2 img, a:hover div.nav3 img, a:hover div.nav4 img, a:hover div.nav5 img, a:hover div.nav6 img, a:hover div.nav7 img, a:hover div.nav8 img, a:hover div.nav9 img {
visibility: hidden;
height: auto;
width: auto;
}
h1 {
font: 20pt mistral;
color: #1eaef5;
margin-top: 0px;
margin-bottom: 0px;
text-transform: lowercase;
letter-spacing: 5px;
text-align: left;
line-height: 20px;
padding-left: 5px;
border-bottom: 1px dotted #4a4a4a;
}
h2 {
font: 8pt courier new;
color: #a6ff57;
margin-top: 0px;
margin-bottom: 0px;
text-transform: lowercase;
letter-spacing: 5px;
text-align: right;
}
b {
color: #57cbf4;
letter-spacing: 2px;
}
i {
color: #666666;
}
a {
color: #a6ff57;
}
a:hover {
text-decoration: none;
}
table {
background: none;
}
table a img, center p {
height: 0px;
width: 0px;
overflow: hidden;
}
table.nav a img {
height: auto;
width: auto;
}
</style>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<div id="img" style="position: absolute; z-index: -1;">
<img src="http://sunnyneo.com/...shlist_img.jpg" width="800" height="600">
</div>
<div id="nav" style="position: absolute;">
<table class="nav">
<tr>
<td><a href="http://www.neopets.c...unt.phtml"><div class="nav1">
<img src="http://sunnyneo.com/...ishlist_1a.gif" width="120" height="51" border="0">
</div></a></td>
<td><a href="http://www.neopets.c...ral.phtml"><div class="nav2"><img src="http://sunnyneo.com/...ishlist_2a.gif" width="120" height="51" border="0"></div></a></td>
<td><a href="http://www.neopets.c...explore.phtml">
<div class="nav3"><img src="http://sunnyneo.com/...ishlist_3a.gif" width="120" height="51" border="0"></div></a></td>
</tr>
<tr>
<td><a href="http://www.neopets.c.../arcade.phtml">
<div class="nav4"><img src="http://sunnyneo.com/...ishlist_4a.gif" width="120" height="51" border="0"></div></a></td>
<td><a href="http://www.neopets.c...s/index.phtml">
<div class="nav5"><img src="http://sunnyneo.com/...ishlist_5a.gif" width="120" height="51" border="0"></div></a></td>
<td><a href="http://www.neopets.c...objects.phtml">
<div class="nav6"><img src="http://sunnyneo.com/...ishlist_6a.gif" width="120" height="51" border="0"></div></a></td>
</tr>
<tr>
<td><a href="http://www.neopets.c....com/nf.phtml">
<div class="nav7"><img src="http://sunnyneo.com/...ishlist_7a.gif" width="120" height="51" border="0"></div></a></td>
<td><a href="http://www.neopets.c...o/index.phtml">
<div class="nav8"><img src="http://sunnyneo.com/...ishlist_8a.gif" width="120" height="51" border="0"></div></a></td>
<td><a href="http://www.neopets.c...l/index.phtml">
<div class="nav9"><img src="http://sunnyneo.com/...ishlist_9a.gif" width="120" height="51" border="0"></div></a></td>
</tr>
</table>
</div>
<div id="text" style="position: absolute;">
<h1>My Wishlist</h1>
<h2>My Wish List</h2>


<table class="items">
<tr valign="top">
<td>
<img src="http://images.neopet...i_bluesand.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...apes_green.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...i_bluesand.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...apes_green.gif" width="80" height="80"><br>Item Name
</td>
</tr>
<tr valign="top">
<td>
<img src="http://images.neopet...apes_green.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...i_bluesand.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...apes_green.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...i_bluesand.gif" width="80" height="80"><br>Item Name
</td>
</tr>
<tr valign="top">
<td>
<img src="http://images.neopet...i_bluesand.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...apes_green.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...i_bluesand.gif" width="80" height="80"><br>Item Name
</td>
<td>
<img src="http://images.neopet...apes_green.gif" width="80" height="80"><br>Item Name
</td>
</tr>
</table>
<h1>Thank You</h1>
<h2>Thank You</h2>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br>
Thanks <a href="http://www.neopets.c...rname">Name</a> (Username) for <b>Item Name</b>!<br></div>
</center>

That should center everything. Tell me if it doesn't work. D:

[Noitidart]

The usual way to do things like this is using the css margin property like mentioned above. You go style="margin:0 auto;"

[huevoquilmes]

The usual way to do things like this is using the css margin property like mentioned above. You go style="margin:0 auto;"

there's no arguing with that.. but maybe learn how to do that with CSS just for a userlookup isnt worth it.. if you do have the time to learn it though...go for it

[Backslash]

The center tag is deprecated, and is outdated. If you want validated HTML you'll need to use CSS text-align:center;

[Noitidart]

The thing with text-align center is that it centers the text as well, unless that's what you want. Or you can set text-align to center for outtermost div and set the align to left for the inner divs if you want to bypass the text centering.