AMIA ARCHIVE • View topic

Liking the new front page guys. Little bit of a welcome to anyone viewing the site. Nice work.

Type in: www.Amiaworld.net

Though one suggestion. Add some floats or padding for the left, to centre the entire thing. Being right aligned makes it look weird. You should only need to place a div with properties of padding-left: ??em or px.

What, no sparkle flair?

Oh my god, that was really hot! :shock:

The page, I mean. Not Selvie's post.

Can you imagine my surprise to open the address today and find that nice, lovely vista?

Very nice! And very welcoming too!

If you want to bypass, just go:
http://www.amiaworld.net/phpBB2

Pfft, bypassing...

Blasphemy! Let's burn Yurell!

Do you think there could be a way to insert Amia's map(s) (the ones made by Jaq and Disco) as a background to the text?

BlackDahlya wrote:

Blasphemy! Let's burn Yurell!

*Drags out the gnomish mechanical everflowing alchemists fire contraption and begins pumping furiously, looking for someone to flame*

But really, very good work. Kudos to the team.

Selvec Darkon wrote:

Liking the new front page guys. Little bit of a welcome to anyone viewing the site. Nice work.

Type in: www.Amiaworld.net

Though one suggestion. Add some floats or padding for the left, to centre the entire thing. Being right aligned makes it look weird. You should only need to place a div with properties of padding-left: ??em or px.

Not sure if that works in this case. I did this with absolute positioning, so I guess padding does zit. Even then... people have different screen sizes. The only option I can think of is a frame page on top of this one, but yuks... frames.

Well I did it on my website with some pictures and it seem's to stay centered in all browsers, even the ones that don't have the frame to the left. I'll take a gander at the code when I'm at my computer. Think what I did was I dived the entire set up of boxes then typed in "padding-left: 5 em" maybe....or was it margin command...crap. I'll take a look anyway.

Well, even better: download the front page and see if you can let it behave that way?

Dev Disco wrote:

Not sure if that works in this case. I did this with absolute positioning, so I guess padding does zit. Even then... people have different screen sizes. The only option I can think of is a frame page on top of this one, but yuks... frames.

Culdn't you just have a single table as the "body" and dump a load of CSS code to a style sheet that will work for all browsers? Y'know, like the pros.

Dev Disco wrote:

Well, even better: download the front page and see if you can let it behave that way?

This is true. Hope you don't use an external css style sheet.

I do, should come along. If not:

http://www.amiaworld.net/intro.css

You also need the images, though. i think "Save page as.." gives the option to download everything in most browsers, though.

Okay so I took a look. I used a the following tags

Code:

   width: 780px;/* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

   margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

In it's own container div, however. However, when I try to replicate this in the intro page nothing happens. Obviously this means there's a confliction some place.

Only two things really stand out from what I can see. I used a

Code:

[Body class="thrcolfix"]

tag followed by

Code:

[div id="container"][/div]

div tag. I used ID's instead of classes for my div's. When I try to contain the entire setup within' my own div, it seems to ignore the code I've put in for it, using the same class format you used for your other div's.

Seem's like a confliction. Though I'm a bit drunk at the moment due to coming from my sister's cocktail party so I can't see what's conflicting. There is numerous margin tag's, but they shouldn't conflict given they are in there own div. Though saying that they may conflict. Confusing.

I'll take a second look in the morning. It's probably staring me right in the face.

Oh, this is my CSS sheet

Code:

@charset "UTF-8";
/* CSS Document */

<style type="text/css"> 
 
body  {
   font: 100% Verdana, Arial, Helvetica, sans-serif;
   background-image: url(background.gif);
   background-repeat: repeat;
   margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
   padding: 0;
   text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
   color: #CCC;
}
.thrColFix #container { 
   width: 780px;/* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
   height: 500px;
   background-image:url(Container.png);
   background-repeat:no-repeat;
   filter:alpha(opacity=75);
   -moz-opacity:.75;
   opacity:.75; 
   margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
   text-align: center; /* this overrides the text-align: center on the body element. */
} 

.thrColFix #MusicPlayer {
   color: #999;
   padding-left:.8em;
   filter:alpha(opacity=100);
   -moz-opacity:1.0;
   opacity:1.0;
}
.thrColFix #mainContent {
   filter:alpha(opacity=100);
   -moz-opacity:1.0;
   opacity:1.0;
   margin: 0 20px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
   padding: 15px 10px 15px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
   font-family: Verdana, Arial, Helvetica, sans-serif;
}
.thrColFix #textArea {
   padding-left:4em;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
   float: right;
   margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
   float: left;
   margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
   clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

h1{
   color:#CCC;
}
 
</style>.thrColFix #container #mainContent div #textArea {
   font-size: 70%;
}

It's probably not all professional format or WC3 compatiable, but it does work in all the latest browsers and such.

Way too complicated.

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>Amia: A persistent Neverwinter Nights world.</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
   img
   {
   border:0px;
   }
</style>
</head>

<body style="background-color: #000000">
<p style="text-align:center"><br />

### INSERT FANCY STUFF HERE ###

</p>

</body>
</html>

*blink*

What?

If that was a solution, it doesn't work. If it was what you see, it's not what I see at all.

Um Disco...was this done in Frontpage? because the code looks god aweful. Each image for that table is postioned individually, painfully, and looking at it makes my eyes scream.

I dunno why you didn't just make it all as one big image, and then made the image clickable, taking you to the forums.

Mr Mago wrote:

I dunno why you didn't just make it all as one big image, and then made the image clickable, taking you to the forums.

Well that's one solution, but it then relies on the quality of the entire image, as opposed to each image having different quality and resolution attached to it. Also, it makes changing the images on the fly a right pain the ass.

Did it all by hand! I loathe Frontpage, Dreamweaver, Word, or any other code generating shite. Used a lot of Copy/paste, of course.

I kinda picked up "all about divs, lesson 1" and went forward. I just had the little puzzle pieces and no clue what I wanted to make yet.

The only (negative?) thing I have to say about the new page is that I can't read the picture texts on some of the pictures very well. Particularly the bottom right, where I have to squint and squint and still can't quite make out what it says because the faded background to the text doesn't quite offest it to the white of the picture enough that it's legible. Perhaps make it a darker strip for the background of the picture text?

Otherwise, it looks great!

Dev Disco wrote:

Did it all by hand! I loathe Frontpage, Dreamweaver, Word, or any other code generating (censored). Used a lot of Copy/paste, of course.

I kinda picked up "all about divs, lesson 1" and went forward. I just had the little puzzle pieces and no clue what I wanted to make yet.

Well basically all those little widths and extra seem to be cause behind why it won't centre. Jan agree's that the postioning and such is what's causing some major issues.

A good way to solve this, and probably the easiest way best done for webdesign, is to use photoshop to edit the entire image into one gigantic image like Mago said. Likely a PNG file to keep a high quality. Then just use a hot spot to mark where you want people to click for the link.

It would also reduce loading time and make the code cleaner.

Though bloody good job honestly, I could never have the patience to put it together like that.

Edit: If you need someone to do the edit for you, just send all the pieces my way and I'll shove them together.

Though I can keep fiddling with it tomorrow and see if I can set it to move...maybe...

Selvec Darkon wrote:

A good way to solve this, and probably the easiest way best done for webdesign, is to use photoshop to edit the entire image into one gigantic image like Mago said. Likely a PNG file to keep a high quality. Then just use a hot spot to mark where you want people to click for the link.

Oh dear gods above no... :<

Well he has all the postioning set for absolutes, and that's causing issues with it centering or doing anything else that involves postioning. Also the widths and heights are causing issues to.

I know however that there is a way to do it. A mate of mine did it when he was edited his gaiaonline account. Which involved putting pieces everywhere.

He used a float or something....

The text, it does not fit in the frame.

I am using floats. That's the whole idea behind it. Normally I'd make little tables etc, but I decided it was time to try something new.

GOT IT!!!!

Code:

body { 
margin: 0 auto 0 auto;
width: 960px;
float: none;
position:relative;
text-align: center; 
vertical-align: middle; 
background-color: black; }

Add that to your CSS file. Replace the body code with it.

margin-left:auto;
margin-right:auto;

Selvec's correct, it's shorthand for

margin-ltop:0;
margin-left:auto;
margin-bottom:0;
margin-left:auto;

I set the width to 1050, that's about the width of the panels combined. Seems to work!

Mhmm, that.

Though the rest seem's to help to.

Also of note, your opacity isn't showing up in IE 8.

You need these commands for opacity in IE 8

Code:

-moz-opacity:.75;

Respective numbers being changed of course.

Next, we'll just need a fancy background to make the intro page complete.

Let me make a moving background gif!

*Runs from the flying objects*

Actually, a nice dark, yet subtle tiled texture would probably do nicely, something arabic since the Amia logo always looked arabic to me.

Now of course I want to move it down a bit, so it is actually centered heh.

If you feel the wish Disco, to add space from the top.

Code:

body { 
margin: 0 auto 0 auto;
width: 960px;
[b]top: 20px;[/b]
float: none;
position:relative;
text-align: center; vertical-align: middle; background-color: black; }

I guess someone could go snap a few great screenshots of Amia's best sights, either to replace or occasionally rotate with the current ones? Some of them look awesome, but others are a bit meh.

Last edited by Dev Disco on Sat, Oct 10 2009, 7:47 AM, edited 1 time in total.

IronAngel wrote:

I guess someone could go snap a few great screenshots of Amia's best sights, either to replace or occasionally rotate with the current ones? Some of them look awesome, but others are a bit meh.

That wouldn't be too hard, as long as I get the pictures in those dimensions.

May I suggest trying that pattern?

I couldn't find an easy stone wall pattern (thus far), so I kind of went with a wooden one.

I tried it with the design already. Looked good.

As a page background? I use a darkened parchment, seemed pretty suitable.

Behind the images. To replace the pure black we're seeing now.

No chance of using that map made by Jaq and the one you made as part of the rotating pictures or maybe a background to something, Disco?

I dig it, it looks good. I have really good eyes but, yeah, I can imagine it would be hard to read the text on the images for those with not so good eyes though.

I think you should stick with something dark, otherwise it will be inconsistant with the rest of the website. Which looks amateurish and just plain yuck.

As for the words, that's easy, he just needs to change the opacity from 40 to something like 75.

only suggestion i can make is that it could have a few more screen shots and randomly display them along the 6 open slots. I dont know how much work thatll take, but I would find it interesting. As of now, there is no underdark represented, and its beautiful.

Personally, I don't mind its alignment (although I do agree centred would look better), but I love the suggestion of random pictures.

Dev Disco wrote:

IronAngel wrote:

I guess someone could go snap a few great screenshots of Amia's best sights, either to replace or occasionally rotate with the current ones? Some of them look awesome, but others are a bit meh.

That wouldn't be too hard, as long as I get the pictures in those dimensions.

This should answer your questions?

yes it does, I'll try and find some shots of the new UD as I work my rebuild...

I think I know just the place I am going to choose.

I agree fully with those who have posted as to the look of the new front page being frankly eye-catching and beautiful.

Now I would perhaps one of the DM or player base spruce up the wording. It's informative but (IMHO) it also feels as dry as 10 day old turkey. Yes, it tells a fair bit about the server but upon reading it, there isn't the impression that someone is stepping into a world rich with history, intrigue and ongoing life. It's just....dunno...there.

I'd offer but as some of the DM and players know...#>.<# ...I can't write anything less than a bloody novel. Also as many things, it's just my opinion so might differ radically from others. If I can restrain myself, I'll offer a re-wording of what's there for Chicken approval as a suggestion.

However, other forum/IG things to write up for some folks.

colanah wrote:

Now I would perhaps one of the DM or player base spruce up the wording. It's informative but (IMHO) it also feels as dry as 10 day old turkey. Yes, it tells a fair bit about the server but upon reading it, there isn't the impression that someone is stepping into a world rich with history, intrigue and ongoing life. It's just....dunno...there.

I'd offer but as some of the DM and players know...#>.<# ...I can't write anything less than a bloody novel. Also as many things, it's just my opinion so might differ radically from others. If I can restrain myself, I'll offer a re-wording of what's there for Chicken approval as a suggestion.[/color]

Dry as a ten day old turkey? It wasn't even originally intended to be a front page opening when I wrote it, but just a very small blurb that was "just the facts, ma'am" as part of an advertising effort for something completely unrelated. And what you see isn't even everything I wrote for that, but rather a parsed down, edited version that can easily be read on one page without the need for scrolling.

You want a different wording, I can give you an infinite number of them and do so in less than a novel because "less is more" is one of the reluctant mantras of contemporary writing.

But it is up to what Disco thinks is appropriate, really.

I think it's good. Except for the "this is forbidden" bit, that kinda puts a damper on the introduction. Maybe a link to the Rules in entirety would be more appropriate.

Very nice work.

Considering I host / dev alot of websites, that's coming from a pro.

Regards,

That looks great! Awesome work!

Yossarin wrote:

colanah wrote:

Now I would perhaps one of the DM or player base spruce up the wording. It's informative but (IMHO) it also feels as dry as 10 day old turkey. Yes, it tells a fair bit about the server but upon reading it, there isn't the impression that someone is stepping into a world rich with history, intrigue and ongoing life. It's just....dunno...there.

I'd offer but as some of the DM and players know...#>.<# ...I can't write anything less than a bloody novel. Also as many things, it's just my opinion so might differ radically from others. If I can restrain myself, I'll offer a re-wording of what's there for Chicken approval as a suggestion.[/color]

Dry as a ten day old turkey? It wasn't even originally intended to be a front page opening when I wrote it, but just a very small blurb that was "just the facts, ma'am" as part of an advertising effort for something completely unrelated. And what you see isn't even everything I wrote for that, but rather a parsed down, edited version that can easily be read on one page without the need for scrolling.

You want a different wording, I can give you an infinite number of them and do so in less than a novel because "less is more" is one of the reluctant mantras of contemporary writing.

But it is up to what Disco thinks is appropriate, really.

It isn't intended for daily consumption. It's a bit of info for somebody who comes in here and doesn't have a clue what's going on. I actually cut out a lot of Yossi's fluff.

The introductory text should be as short and informative as possible, yeah.

New Front Page!

Who is online