Log in

View Full Version : Any tips for my layout?


Sashiro
May 16th, 2005, 09:59 pm
I was wondering if you guys could tell me if this works okay in your browser and you have any tips on how to inprove it~
Clicky~~ (http://www.romarketplace.com/ForeverNight/)

And yeah, spoonpuppet said I could ask :D

It works fine for me, but I'm using IE and have a 1280x1024 resolution...^^'
Dark Bring
May 16th, 2005, 10:24 pm
You might want to raise the "Navigation" tab, perhaps up to the similar tab below the girl's waist.

I've not much else to add, as it simply looks good to me. ^_^
Sashiro
May 16th, 2005, 10:27 pm
They arent even? o.o
Sondagger
May 16th, 2005, 10:30 pm
They look even to me. The big space above the navagation menu looks kinda akward to me, but that's just me.

You did do a very nice job with it.
Dark Bring
May 16th, 2005, 11:47 pm
Wupz, silly me, I was using Firefox. *switches to IE* Ah, I guess it's just a browser thing.
Sashiro
May 16th, 2005, 11:53 pm
Originally posted by Red Stone@May 16 2005, 07:47 PM
Wupz, silly me, I was using Firefox. *switches to IE* Ah, I guess it's just a browser thing.
Can you show me a screen for firefox? I want it to work in all browsers ^^
Dark Bring
May 16th, 2005, 11:58 pm
Here we go:

http://img141.echo.cx/img141/5329/s8jq.png
Sashiro
May 17th, 2005, 03:18 am
Odd. o.o Thanks for posting the screen, I'll go get firefox and see how I can fix it
RD
May 17th, 2005, 03:25 am
its cool! um just fade more of the girl because the bird isnt a must, but her face is, and move the tool bar up unless it is level with the fade bar, in that case just move it up more! lol, i love it!
Sashiro
May 17th, 2005, 04:10 am
Originally posted by Red Stone@May 16 2005, 07:58 PM
Here we go:

http://img141.echo.cx/img141/5329/s8jq.png
Waaahhhrrrg! I can't figure out why it's doing that! I've been staring at the html for half an hour and I don't see anything wrong with it!
Neko Koneko
May 17th, 2005, 06:57 am
@Sashiro: maybe you could post the code here?

@Dreams-creation: what on Earth are you on about?
Spoonpuppet
May 17th, 2005, 12:54 pm
Personally.. I find the top left corner to be a bit distracting cos it's empty. :heh: Maybe you could make the header take up the whole width of the layout. You could bring the menu up, but I don't think that would look very good. X_X
Neko Koneko
May 17th, 2005, 01:31 pm
I just realised it's not too hard to get a code for a web page, lol



<html>
<head>
<meta name="keywords" content="Graphics,anime,japanese animation,anime reviews,manga,manga reviews,good anime,anime pictures,photoshop tutorials,photoshop brushes,fonts,web design,webdesign">
<title> ::.Forever Night::. Main</title>
<link rel=stylesheet href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<center>
<body background="bg.gif">
<div id="Layer3" style="position:absolute; left:346px; top:14px; width:501px; height:796px; z-index:5"><img src="topandback.gif" width="500" height="753" align="top"><img src="bg3.gif" width="500" height="200"><img src="bg3.gif" width="500" height="200"></div>
<center></div>

</center>
<div id="Layer1" style="position:absolute; width:478px; height:328px; z-index:5; visibility: visible; left: 359px; top: 304px;">
<p align="center"><br>
<font color="#000000" size="1">Welcome to Forever Night!</font></p>
<p align="center"><font color="#000000" size="1">Blah blah blah text here!!</font></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>

<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
</div>
<div align="top" style="width: 1154; height: 949">
<div id="Layer2" style="position:absolute; width:150px; height:589px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 0px none #000000; left:166px; top:268px; z-index: 6;" class="nob">
<p align="left">
<html>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="Layer1" style="position:absolute; left:0px; top:-2px; width:145px; height:795px; z-index:1; visibility: visible;">
<p align="top"><img src="nav.gif" width="150" height="30"> <font color="#000000">
- Home<br>
- Rules & TOS<br>

- Contact/Feedback<br>
- News & Updates</font></p>
<p align="top"><font color="#000000"><img src="animemanga.gif" width="150" height="30"><br>
- Reviews<br>
- My Picks<br>
- Hall Of Shame<br>

- Unlicensed Anime Guide</font></p>
<p align="top"><font color="#000000"><img src="Graphics.gif" width="150" height="30"><br>
- RULES - READ<br>
- Wallpapers<br>
- Avatars<br>
- Buddy Icons<br>

- Signatures<br>
- Photoshop Tutorials<br>
- Fonts & Other Goodies<br>
- Links To Helpful Stuff</font></p>
<p align="top"><font color="#000000"><img src="interactive.gif" width="150" height="30"><br>
- Forums<br>

- Poll<br>
- Feedback Form ^^</font></p>
<p align="top"><font color="#000000"><img src="links.gif" width="150" height="30"><br>
- None at this time.<br>
- Fill out the feedback form<br>
if you wish to be an affiliate!</font></p>

</div>
</body>
</html>
</p>
</div>
<br>
<br>
<br>
</div>
</div>

</body>
</html>

I would personally scrap the div layers and work with tables instead.
Dark Bring
May 17th, 2005, 09:05 pm
Try changing


<div id="Layer1" style="position: absolute; left: 0px; top: -2px; width: 145px; height: 795px; z-index: 1; visibility: visible;">
<p align="top">ForeverNight2_files/nav.gif <font color="#000000">
- Home

- Rules &amp; TOS

- Contact/Feedback

- News &amp; Updates</font></p>

To this


<div id="Layer1" style="position: absolute; left: 0px; top: -2px; width: 145px; height: 795px; z-index: 1; visibility: visible;">
ForeverNight2_files/nav.gif
<p align="top"><font color="#000000">
- Home

- Rules &amp; TOS

- Contact/Feedback

- News &amp; Updates</font></p>


Originally posted by galapagos29
I haven&#39;t really tested this that much but it appears to solve the glitch minimally. Let me know if it doesn&#39;t fix the error, frankly I wouldn&#39;t be surprised, my CSS has been at rest for many months...

As a general rule of thumb in the future, banners and other large images that are as wide or wider than the div around it need not be placed into p tags. Often times in different browsers this will force unnecessary whitespace, such as is the case with CSS tables and IE...

Also, after digging around your source a bit, you&#39;re just a little bit too conservative with your CSS tags. For example, you don&#39;t need to define borders around divs if you want none to appear, the CSS 4.0 standard disables them by default. I would reccomend ditching the absolute placement of your divs, it&#39;s a pain in the neck for those with small resolutions. Try centering your entire page in a wrapper div instead with a text-align: center; command.

Good luck with your site&#33;

Yeah, I got a friend, galapagos29, from another forum to have a look at it. ^_^; (Forum name witheld due to Ichigo&#39;s rules). Hope it works for you&#33; Needless to say, keep us posted on your website status. ^_^
Sashiro
May 17th, 2005, 11:57 pm
Thanks&#33; ^^ ....cept the code doesn&#39;t change anything, plus SOMEHOW you had the source for the image wrong XD
The 2nd code is the same as the original o.O
Dark Bring
May 18th, 2005, 12:07 am
XD I need to get galapagos29 to increase the amount of blood in his caffeine system. XD I&#39;ll bug him to have another look after I shoot him with this tranquiliser dart. <_<;;;
RD
May 18th, 2005, 12:35 am
@Dreams-creation: what on Earth are you on about?

Oh, the fade bar, or what ever you would like to call it, is at the girls wast, just move it up untill the birds head isnt faded, but ther est it, it wont leave that weird gap at the top (actualy, it will just make it smaller.........)
Spoonpuppet
May 18th, 2005, 02:24 pm
Instead of having "site works best..." on the actual layout, you&#39;re better off having a splash page and having that info on there. ~
Laeluu
May 19th, 2005, 12:53 am
I think it&#39;s great, minus all the extra space due to my 600x800 setting. :D Am I the only one with that resolution...? ^^;; Oh well. EITHER WAY...I really like the art. :D Then again, I&#39;m just an art whore. If you didn&#39;t do it, you should at least have credit given to whoever did... v.v Stolen art ish not fun.
Sashiro
May 19th, 2005, 08:51 pm
I didn&#39;t make the picture of the girl, but I did make some modifications to it before using it in the layout. I have no idea who made it. It was probably from some artbook or something they put out for the World&#39;s End series.