PDA

View Full Version : Can someone help me with my Layout?



Goldyoshi
26th May 2006, 1:30 PM
http://www.freewebs.com/crittercryptics/NEWLAYOUT.html

I made a new layout, I'm not using it, of course, and I'd like to get some opinion on it, the colors, etc.

It uses an overflow, which worries me because the scrollbar on IE is purple but in other browsers, I.E, Opera and Firefox, it is the regular color of white and grey, and I wonder if that will hurt someone's eyes too much.

Sooo, if you could help me with this new layout, that would be great! Please? *big, Pichu eyes*

Savage X
26th May 2006, 2:04 PM
that's nice. that's what i'm tryin to do

Goldyoshi
26th May 2006, 2:15 PM
Thanks. I have a few questions, though:
a)Is the color scheme readable?
b)Is this scrollbar in the content eye-hurting?
c)Should I ditch the scrollbar altogether in browsers other than IE?

Virtual Headache
26th May 2006, 2:19 PM
Well, it's actually quite nice IMO.
The link font is probably a little too dark and I'm not sure if the color is a good color to use for the site (I myself like it).
Well, you should probably change the colors of the scrollbars, since they don't really match with the rest of the style.
Or just leave the scrollbars how they are since they'll only work on IE.
You should also consider making a banner for your site.

chaos on the internet
26th May 2006, 10:24 PM
You shouldn't use scrollbars other than the main one on your browser. It's beyond annoying :[

Magma Leader Maxie
27th May 2006, 1:12 AM
In my opinion, just a slightly lighter shade of purple for the background would be nice.

Add a few images and ditch the scrollbar. Then it will be really good!

Goldyoshi
27th May 2006, 1:39 AM
Hmm... I changed a few things now.

More help needed... *shot* You know how when you hover a link, an image appears on top, like, for example, a list of affies:

SPACE!

link
link
link

When you hover over the links, the space changes to said affie's button. I KNOW it's possible to do it with pure CSS, since Dragonfree did it...

Magma Leader Maxie
27th May 2006, 1:49 AM
Here's where Dragonfree explained how to get that effect: http://www.serebiiforums.com/showthread.php?t=106128

You can do more things with JavaScript, though. However, I recommend neither. Especially if you use too much of it. It gets confusing for visitors.

Goldyoshi
27th May 2006, 4:52 AM
Well, I copied and pasted it from the source... and I got it to do the effect. Fwee. Not fwee: It won't stay inside the box, and appears besides this text i don't want it to...

Example: http://g.1asphost.com/dnnquiz/layouttesting2.html

If IO could move the thing inside the box, I'd probably stay happy. The code is confuzzling. I've tried to put it in the boix, messing with the divs, and only managed to mess it up more. And yes, images will be there. It's just 1asphost and Frontpage are being *******s. <_<

Pokemon Element
28th May 2006, 1:04 AM
I guess i can help, just PM me with details and i will make you a wonderful layout

Goldyoshi
28th May 2006, 3:31 AM
No, I dont' want you to make me a layout... I just need help on moving the stuff inside the box. the stuff on the right Can you do that? ;-;

Pokemon Element
28th May 2006, 4:08 AM
done and it looks good
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Title Here</title>

<style type="text/css">

body {
color:#e7cdfa;
font-family:verdana, sans-serif;
font-size:10pt;
background:#4F2F83;
margin:5;
padding:5;
}

a:link, a:visited {
text-decoration:underline;
color:#8866C0;
}

a:active {
text-decoration:underline;
color:#8C70BA;
}

img {
border:0px;
}

#header {
text-align:center;
height:170px;
}

#header img {
margin:auto;
}

#container {
position:relative;
width:100%;
}

#content {
margin-left:145px;
margin-right:145px;
padding:7px;
border:1px solid #6e1593;
}

#leftmenu {
position:absolute;
left:2px;
top:3px;
width:189px;
padding:5px;
border:1px solid #6e1593;
text-align:left;
background-image:http://www.dragonflycave.com/forums/imagehosting/3544778953393ed.png;
background-repeat:repeat-y;
height: 66px;
}

#leftmenu a:hover {
text-decoration:underline overline;
background-color:#b087cd;
color:#342252;
}

#rightmenu {
position:absolute;
right:8px;
top:3px;
width:130px;
padding:5px;
border:1px solid #6e1593;
background-image:http://www.dragonflycave.com/forums/imagehosting/3544778953393ed.png;
background-repeat:repeat-y;
text-align:right;
}

.quote {
border:1px solid #6e1593;
background-color:#b087cd;
color:#742ea4;
padding:5px;
}

h3 {
color:#d1a2e4;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
}





#menu {
position:absolute;
top:100px;
left:10px;
width:206px;
}

#menu a {
display:block !important;
width:180px;
}

#menu a span {
display:none;
}

#menu a:hover span {
display:block;
position:absolute;
top:0px;
left:211px;
width:200px;
color:#888888;
font-size:8pt;
font-family:verdana, sans-serif;
border:3px solid #555555;
background-color:#404040;
padding:5px;
}


#affiliates a {
width:180px;
}

#affiliates {
padding:0;
padding-top:31px;
list-style-type:none;
position:absolute;
right:-28px;
top:240px;
}

#affiliates li {
margin:0;
padding:0;
}

#affiliates li a img {
height:0;
width:0;
position:absolute;
top:-33px;
right:81px;
}

#affiliates li a:hover img {
height:31px;
width:88px;
}

.top {
height:10px;
width:200px;
}
</style>

</head>
<body>
<p>
<div id="header">
<img src="http://img99.imageshack.us/img99/640/shadowqueenbanner1pm.png" alt="Critter Cryptics" /></a>
</div>

<div id="container">
<div id="content">
<p>Err... Don't look at me or anything... I was just supposed to deliver you a
message of upcomming doom that you can help prevent... Even though I am supposed
to be evil and doing this is just the opposite of what I need because alone the
Pikmin are easy to crush so I obviously would want to convince to get as far
away from this planet as soon as possible so you won't further danger my plans
though I do need you to destroy some others which are getting in my way by
luring you there with junk that you think is treasure so you can kill them all
off one by one leaving just one guy in charge of everything and by then would I
want to drive you out of here so I could conquer the planet to my own desires
and start a new TV series where the people will laugh and cry and gasp and laugh
some more and then I will pass pointless laws disabling people to trade food,
supplies, and other necessary things and I will laugh at those who try to get in
my way as I mercilessly crush them one by one and show their futile attempts to
Hocotate's Funniest Home videos and make 10,000 Pokos and maybe tell someone to
buy out most of the stocks for your company and drive it into the ground leaving
you and your family unemployed forced to live with rats and eat cats and bats
and become their hero and then to realise that I ruined your life so you will
come back to the planet from where I am telling you this right at this moment
and you will find me and we will tell each other dramatic stuff and I'll
stupidly reveal to you my plan to conquer the world and you'll run off like a
pansy and then tell your friends and family, though you won't have any friends
because you'll have stolen all of their stuff, and then they will come back here
with you and you'll find a band of rebel Pikmin and they'll join you in your
fight against me and you will instead of facing me one on one go and kill all of
my high-ranking officials to help liberate more-</p>
<p><blockquote class="quote">Cheesecakes. This has a spiffy border. Why? It has the class "Quote". And that just makes it really cool.</blockquote></p><br>
<blockquote>Sharpie sniffers. This doesn't. WTF? It DOESN'T have the class "QUOTE"? *cries*</blockquote><p>
<textarea class="quote">This ALSO has the class quote.</textarea></p>
<p><a href="unsaved:///crittercryptics.com" target="_blank"><img src="http://i13.photobucket.com/albums/a299/panzeleche/burrowsnagret.gif" alt="test" title="Burrowing Snagret"></a>
This image is a link.</p>
<p><img src="http://i13.photobucket.com/albums/a299/panzeleche/burrowsnagret.gif" alt="Test" title="Burrowing Snagret">
This image is NOT a link.</p>
<p><h3>HI!</h3></p>
</div>

<div id="leftmenu" align="justify">
<table width="141" height="338" border="1">
<tr>
<td>Section 1 </td>
</tr>
<tr>
<td height="89"><center>&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br></center></td>
</tr>
<tr>
<td>Section 2 </td>
</tr>
<tr>
<td height="78"><center>&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br></center></td>
</tr>
<tr>
<td height="22">Section 3 </td>
</tr>
<tr>
<td height="93"><center>&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br>
&nbsp; <a href="http://link.com">link</a><br></center></td>
</tr>
</table>

</div>

<div id="rightmenu" align="justify">
<table width="136" height="133" border="1">
<tr>
<td height="21">Affiliates</td>
</tr>
<tr>
<td height="84"><center>&nbsp; <a href="http://link.com">Affiliate</a><br>
&nbsp; <a href="http://link.com">Affiliate</a><br>
&nbsp; <a href="http://link.com">Affiliate</a><br>
&nbsp; <a href="http://link.com">Affiliate</a><br></center></td>
</tr>
</table>
</div>
</body>
</html><!-- Inserted by 1ASPHost.com - Advertisement -->
<iframe src="http://ads.1asphost.com/default.htm" width="0" height="0" scrolling="auto" frameborder="0">
</iframe>
<!-- Inserted by 1ASPHost.com - Advertisement -->