News/Music Trivia


Quick Log In

Pages: (5) [1] 2 3 ... Last » ( Go to first unread post ) ReplyNew TopicAdd Poll

 Web Layouts, I don't know nothing bout' layouts
ZeRoRaVeN
Posted: Dec 9 2004, 08:44 PM
Quote


AKG FTW
*

Group: In Deadborder Pit
Posts: 2,004
Member No.: 161
Joined: 8-November 04



Fact:I own a website

Fact:I suck at web layouts

Well can anyone help? I am using macromedia flash (trial) and well I can't make a layout(I downloaded it hoping it would be better than my Frontpage).

Well for starters one thing common in both programs is that whenever you hit ENTER you get some extra space between the lines, werid.

Also, I can't make tables do what I want, I just want a SIMPLE layout *sobs* is that so hard?

I want it to look remotly like this(REALLY ROUGHT DRAFT)
user posted image

But it looks bad and the tables twist and turn when I type in Frontpage:What it looks now





THIS IS BETA! Very much, please don't steal anything (1 out of 100 people visitng will)

Copyright AnimeShroud.TK


--------------------
user posted image
PME-mailWebsite
Top
Capitila
Posted: Dec 10 2004, 12:23 AM
Quote


Ford, you're turning into a penguin. Stop it.
*

Group: Members
Posts: 848
Member No.: 37
Joined: 25-July 04



Frontpage.. *Shudder*
We're still made to use Frontpage for all sites made at school.. Gahh... Not that I do, but still.

Firstly, the layout stretches the screen of 800x600 because of the set width of table cells, you should probably either make it smaller and center it, or use percentages.

The best thing I've found to make Layouts is HTML and CSS. Easy to learn and you can do a lot with it. I'd strongly recommend learning it, a lot better than Frontpage, and I personally rather a nice, neat layout apposed to a spiffed up Flash layout.


--------------------
user posted image
PME-mailMSN
Top
Tilly
Posted: Dec 10 2004, 05:31 AM
Quote


Kyuu?
*

Group: Sharp Pointy Things
Posts: 4,262
Member No.: 2
Joined: 24-July 04



Frontpage table code = EVIL.

I have a layout like that that I've been poking at for a while...but I dunno how helpful my code would be to you unless you understand basic table/div/css-y stuff.

But yeah. Set the two menu tables to the width you want, leave the rest percents. Fixed widths for the entire layout is a bad idea.


--------------------
PME-mailWebsite
Top
HaTcH
Posted: Dec 10 2004, 03:26 PM
Quote


Ampersand '&' Mod
*

Group: Super Moderators
Posts: 1,698
Member No.: 14
Joined: 24-July 04



Hey.. I could let you play around with the source to the old liger's union. It looks pretty much exactly like that.

If you want to change its looks, don't do it through the html, do it through the css file.

http://www.bearcreekfire.com/old_union.zip

I dunno, its a classic layout. ;p (well as for the New Union, due to numerous negative oppinions, I'm going to re think the design... Probably add more graphics or something.


--------------------

user posted image
Strange fascination, fascinating me
Changes are taking the pace I'm going through

Ch-ch-ch-ch-Changes
PME-mailWebsite AIMMSN
Top
Wolven Zero
Posted: Dec 10 2004, 03:28 PM
Quote


Retired Administrator!
*

Group: RPG Members
Posts: 573
Member No.: 74
Joined: 30-July 04



You could also do a search on the web for free web templates, and learn from them. wink.gif


--------------------
<enter random signature here>
PM
Top
ZeRoRaVeN
Posted: Dec 10 2004, 05:42 PM
Quote


AKG FTW
*

Group: In Deadborder Pit
Posts: 2,004
Member No.: 161
Joined: 8-November 04



Hmmm so my checklist:

#1 Center width of table cells

#2 Stop. Wonder why Tilly is anti-frontpage for table cells(joke), ok I'm done.

#3 Thank HaTch for it then actualy get around to open the file and pray it'll work.

And also I tried that already Steel, all I've really learned is somehow their layouts actualy work right and mine fall apart. *stares at globs of html*


--------------------
user posted image
PME-mailWebsite
Top
Tilly
Posted: Dec 11 2004, 02:54 AM
Quote


Kyuu?
*

Group: Sharp Pointy Things
Posts: 4,262
Member No.: 2
Joined: 24-July 04



I like the new Liger's Union layout. Go boxy tables/divs!

Feel free to look at my code here, but keep in mind it's heavily under progress and it's kinda very wonky. I know I have the background for the tables all set as white, I'll fix it later. Gotta make some more classes...

http://www.creativeinsanity.net/zoids/data/testing3b.html


--------------------
PME-mailWebsite
Top
ZeRoRaVeN
Posted: Dec 11 2004, 07:58 PM
Quote


AKG FTW
*

Group: In Deadborder Pit
Posts: 2,004
Member No.: 161
Joined: 8-November 04



It looks great! (Why can't I do layouts right!? T_T) Though you could do with a banner, but ah it's the information and content that counts. (Did I mention the first impresstion made by the layouts?)

To HaTcH(edit): Yea you need graphics, I kinda liked the old layout's graphics(the menu looked nice), and plus your new layouts got a "testing" feel, alot of stuff is missing(media, jokes, so on) and you said you were testing in the posts. That was "contstructive critism".

This post has been edited by ZeRoRaVeN on Dec 11 2004, 09:52 PM


--------------------
user posted image
PME-mailWebsite
Top
Tilly
Posted: Dec 11 2004, 08:24 PM
Quote


Kyuu?
*

Group: Sharp Pointy Things
Posts: 4,262
Member No.: 2
Joined: 24-July 04



There, updated it. Users of Firefox and anything else that supports it will note that you can now change the colors...blue by default, also now with green and red. Now I just have to get motivated to do all the rest of it.

I never really bother with banners...and then I'd have to mess with the colors. Or make it a transparent png...which IE users can't see. Ack.

It takes practice to get all the tables and stuff...I'm still figuring out how the div-y stuff works. Go trial and error x_X.


--------------------
PME-mailWebsite
Top
Wolven Zero
Posted: Dec 12 2004, 06:00 AM
Quote


Retired Administrator!
*

Group: RPG Members
Posts: 573
Member No.: 74
Joined: 30-July 04



QUOTE (Tilly @ Dec 12 2004, 02:24 AM)
There, updated it. Users of Firefox and anything else that supports it will note that you can now change the colors...blue by default, also now with green and red.

*pokes Tilly* Where's the buttons/thingies to change the colours?


--------------------
<enter random signature here>
PM
Top
Tilly
Posted: Dec 12 2004, 06:15 AM
Quote


Kyuu?
*

Group: Sharp Pointy Things
Posts: 4,262
Member No.: 2
Joined: 24-July 04



Lower left in the browser window, not the site...the thing that looks like a crayon box. Or it *should* show up...


--------------------
PME-mailWebsite
Top
Colodie
Posted: Dec 12 2004, 06:28 AM
Quote


Delta/Epsilon
*

Group: Members
Posts: 355
Member No.: 3
Joined: 24-July 04



It does, at least in FireFox.

Spiffy...


--------------------
Manei Domini: Enter the Toaster.
PME-mailWebsite
Top
ZeRoRaVeN
Posted: Dec 12 2004, 12:50 PM
Quote


AKG FTW
*

Group: In Deadborder Pit
Posts: 2,004
Member No.: 161
Joined: 8-November 04



QUOTE (Steel @ Dec 12 2004, 06:00 AM)
QUOTE (Tilly @ Dec 12 2004, 02:24 AM)
There, updated it.  Users of Firefox and anything else that supports it will note that you can now change the colors...blue by default, also now with green and red.

*pokes Tilly* Where's the buttons/thingies to change the colours?

*JABS TILLY* (It's a joke between my friend he does pokes I do prods and jabs happy.gif werid no?)

Anyway don't discrimnate! It doesn't show up in IE which I use only if a site requires it, but (like right now) I normaly use Netscape, it's supposed to be a distant cousin of Firefox..... but nope I don't see.

Oh and the tables thingy you sent me like months ago HaTcH, works but falls apart if I use Frontpage to edit it.

(Oh and on a side note, interesting netscape works find when you hit space and there's no little spaces between, but I wanna use a Brand Name site editor.




The Tables File you(HaTcH) sent:
CODE

View this file in notepad with word wrap off and an inline text font such as lucida console

Here ya go shadow. Its pretty easy once you get the hang of it.
Lets start off w/ the basics.
<table> is the base tag where most of the display ops are put, and </table> is the closer, we never put stuff there.

-------
Stuff to put between the 'e' and '>':
-------

Attribute          Action
width="X%"         sets the width of the table as it would be on the page, where X is any number between 1 and 100
align="X"          tells browser what alignment the objects in the table will be placed. X can be 'left' 'center' or 'right' (no [']s of course)
valign="X"         tells the browser where the objects in the table will be located. X can be 'top' 'middle' or 'bottom'
bgcolor="#xxxxxx"  tells the browser what color to make the background, the x's are a number or letter 1-9 or A-F.

-------
Stuff to go after the '>'
-------

Tag                Action
<tr></tr>          creats a new row in the table. this is needed before you can make cells
<td></td>          creats a new cell in a row in a table.

-------
What can go inside the <tr> and <td> tags
-------

Attribute          Action
width="X%"         sets the width of the row as it would be on the page, where X is any number between 1 and 100
align="X"          tells browser what alignment the objects in the row will be placed. X can be 'left' 'center' or 'right' (no [']s of course)
valign="X"         tells the browser where the objects in the row will be located. X can be 'top' 'middle' or 'bottom' by default it is sent to middle.
bgcolor="#xxxxxx"  tells the browser what color to make the background, the x's are a number or letter 1-9 or A-F.
for <td> only:
colspan="X"        will make the cell span more than one cell, X = # of cells. Be care full here, if you have 3 cells in a row, that is how EVERY row will be, more on this later...
rowspan="X"        will make the row span more than one row vertically. -------^
 * this one is a pain in the badonk-a-donk, I personally dont use it, there is a way around it... but its the shorter way

Putting it together:
///////////EXAMPLE1
<html>
<body>
<table border="1">
<tr><td>AA</td></tr>
</table>
</body>
</html>

will produce:
________
|AA______|

///////////EXAMPLE1
<html>
<body>
<table border="1">
<tr><td align="center">AA</td></tr>
</table>
</body>
</html>

Will Produce:
________
|___AA___|

//////////EXAMPLE3

<html>
<body>
<table border"1">
<tr><td align="right">AA</td><td align="left">AB</td></tr>
</table>
</body>
</html>

Will Produce:
_______________
|_____AA|AB_____|

//////////EXAMPLE4

<html>
<body>
<table border="1">
<tr><td align="right">AA</td><td align="left">AB</td></tr>
<tr><td align="center">BA</td><td align="right">BB</td></tr>
</table>
</body>
</html>

Will Produce:
_______________
|_____AA|AB_____|
|___BA__|_____BB|

//////////EXAMPLE5

<html>
<body>
<table border="1">
<tr><td align="right">AA</td><td align="left">AB</td><td align="center">AC</td></tr>
<tr><td align="center">BA</td><td align="right">BB</td><td align="center">BC</td></tr>
<tr><td align="center">CA</td><td align="Center">CB</td><td align="center">CC</td></tr>
</table>
</body>
</html>

Will Produce:
_______________________
|_____AA|AB_____|___AC__|
|___BA__|_____BB|___BC__|
|___CA__|___CB__|___CC__|

NOW TO DO SOME Colspan ATTRIBUTES:

//////////EXAMPLE6

<html>
<body>
<table border="1">
<tr><td align="center" colspan="3">AA</td></tr>
<tr><td align="center">BA</td><td align="right">BB</td><td align="center">BC</td></tr>
</table>
</body>
</html>

Will Produce:
_______________________
|__________AA___________|
|___BA__|_____BB|___BC__|

//////////EXAMPLE7

<html>
<body>
<table border="1">
<tr><td align="center" colspan="2">AA</td><td align="left">AB</td></tr>
<tr><td align="center">BA</td><td align="right">BB</td><td align="center">BC</td></tr>
<tr><td align="center">CA</td><td align="Center" colspan="2">CB</td></tr>
</table>
</body>
</html>

Will Produce:
_______________________
|_______AA______|___AB__|
|___BA__|_____BB|___BC__|
|___CA__|_______CB______|

NOW FOR SOME rowspan ATTRIBUTES:

//////////EXAMPLE8

<html>
<body>
<table border="1">
<tr><td align="center" rowspan="2">AA</td><td align="left">AB</td></tr>
<tr><td align="center">BB</td></tr>
<tr><td align="center">CA</td><td align="Center">CB</td></tr>
</table>
</body>
</html>

Will Produce:
_______________
|   AA  |___AB__| the AA in this row would be equidistant from top to bottom
|_______|___BB__|
|___CA__|___CB__|

//////////EXAMPLE9

<html>
<body>
<table border="1">
<tr><td align="center" rowspan="2">AA</td><td align="center" rowspan="2">AB</td><td align="center">AC</td></tr>
<tr><td align="center">BC</td></tr>
<tr><td align="center">CA</td><td align="Center">CB</td><td align="center">CC</td></tr>
</table>
</body>
</html>

Will Produce:
______________________
|   AA  |   AB  |__AC__| the AA and AB in this row would be equidistant from top to bottom
|_______|_______|__BC__|
|___CA__|___CB__|__CC__|

//////////EXAMPLE10

<html>
<body>
<table border="1">
<tr><td align="center" rowspan="2" valign="top">AA</td><td align="center" rowspan="2" valign="top">AB</td><td align="center">AC</td></tr>
<tr><td align="center">BC</td></tr>
<tr><td align="center">CA</td><td align="Center">CB</td><td align="center">CC</td></tr>
</table>
</body>
</html>

Will Produce:
______________________
|   AA  |   AB  |__AC__| the AA and AB in this row would be up top as is
|_______|_______|__BC__|
|___CA__|___CB__|__CC__|

//////////EXAMPLE11

<html>
<body>
<table border="1">
<tr><td align="center" rowspan="2" valign="bottom">AA</td><td align="center" rowspan="2" valign="top">AB</td><td align="center">AC</td></tr>
<tr><td align="center">BC</td></tr>
<tr><td align="center">CA</td><td align="Center">CB</td><td align="center">CC</td></tr>
</table>
</body>
</html>

Will Produce:
______________________
|       |   AB  |__AC__| the AA and AB in this row are as is
|___AA__|_______|__BC__|
|___CA__|___CB__|__CC__|

//////////FINAL LESSON
Nesting. What is it? Well, in visual basic, it is referred to when you have 1 or more if..thens inside another. The same holds true in html codeing.
Say we wanted a page to contain a navagation cell, a main cell and a links cell on the other side. Each has more than one other cell. All nesting
must occur inside another <td> tag.

Code a table that might look like this:
____________________________________________________
|___NAV___|_____________TITLE_____________|__LINKS___|
|link     ||-----------------------------||____LU____|        
|link     ||____________NEWS_____________||____ZE____|
|link     ||_____DATE_____|_____BY_______||          |
|link     ||                             ||          |
|         ||   BLAH                      ||          |
|         ||_____________________________||          |
|_________|-------------------------------|__________|
|_____________________BOTTOM_________________________|


<html>
<body>

<style>
<!--
TD
{
   TEXT-ALIGN: center;
   BORDER-COLOR: #000000;
}
// all this does is make it so I dont have to type -->
<!-- align="center" a bunch of times -->

</style>
<table width="100%" border="1">
<tr>
<td valign="top" width="15%">
<table border="1" width="100%"><tr><td>NAV</td></tr>
      <tr><td>link</td></tr>
      <tr><td>link</td></tr>
      <tr><td>link</td></tr>
      <tr><td>link<br><br><br><br><!-- Br Tag is break, simulates a return press --></td></tr>
</table>
</td>

<td valign="top" width="70%">TITLE<br>
<table border="1" width="100%"><tr><td colspan="2">NEWS</td></tr>
      <tr><td width="50%">DATE</td><td width="50%">BY</td></tr>
      <tr><td colspan="2">BLAH<br><br><br><br><Br><br></td></tr>
</table>
</td>
<td valign="top" width="15%">
<table border="1" width="100%"><tr><td>LINKS</td></tr>
      <tr><td><a href="http://www.anzwers.org/free/zoids3d/" target="_blank">LU</a></td></tr>
      <tr><td><a href="http://zoidsevo.unidc.net" target="_blank">ZE</a></td></tr>
      <tr><td><br><BR><BR><BR><BR></td></tr>
</table>
</td>
</tr>
<tr><td colspan="3">BOTTOM</td></tr>
</table>
</body>
</html>



And thats that. you can play around with other attributes the same way, feel
free to copy and paste into another text file and view them on a page. If you
want any more examples just email me at Zoider2k@netscape.net



Earlier I talked about a way around Rowspan,
to view this in effect, view source on any
page at the union.

by HaTcH Zoider2k@netscape.net
de la: http://www.anzwers.org/free/zoids3d/


This post has been edited by HaTcH on Dec 13 2004, 04:53 PM


--------------------
user posted image
PME-mailWebsite
Top
Wolven Zero
Posted: Dec 12 2004, 01:27 PM
Quote


Retired Administrator!
*

Group: RPG Members
Posts: 573
Member No.: 74
Joined: 30-July 04



QUOTE (Tilly @ Dec 12 2004, 12:15 PM)
Lower left in the browser window, not the site...the thing that looks like a crayon box. Or it *should* show up...

Nope, doesn't show up in my version of FireFox for some reason. I'm using version 1.0 of FireFox at the moment.


--------------------
<enter random signature here>
PM
Top
ZeRoRaVeN
Posted: Dec 12 2004, 01:32 PM
Quote


AKG FTW
*

Group: In Deadborder Pit
Posts: 2,004
Member No.: 161
Joined: 8-November 04



The code's broke, you should make it work with other browsers. I mean what's the point of talioring the site to only the people who have firefox (not that big of a population) what about those people in the smoke filled (depending on were you go; I swear when I went to one I thought I would suffocate) internet cafe's with only IE?

Hmm we are a bit off subject no?


--------------------
user posted image
PME-mailWebsite
Top
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
« Next Oldest | Computers and Technology | Next Newest »


Topic OptionsPages: (5) [1] 2 3 ... Last » ReplyNew TopicAdd Poll


Affiliates: Metal Combat: Century After Next Blue Sky Generation Zi

Hosted for free by InvisionFree (Terms of Use: Updated 7/7/05) | Powered by Invision Power Board v1.3 Final © 2003 IPS, Inc.
Archive