could someone please simplify this

**Anna.K** · Sep 17, 2012 10:22

hi..
i'm a beginner in html..
and i asked a friend to write me a html/css page as template,
then i was supposed to play around with colors and fonts and every thing,
he did actually, but the thing is.. i'm 100% sure that when he wrote this, he was high as &%*censored*%$

there's a lot of <div>s and <id>s and more...
i also tried to edit it in every browser extension i have but i didn't get the proper results

i keep PMing him to make the code readable but he keeps ignoring me..

please i really need this ..
one more thing: if you could just make every thing at the center of the page that would be great.

index.html

HTML Code:

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body bgColor="#003300">
<div id="text1" style="position:absolute; overflow:hidden; top:-12px; width:1145px; height:55px; z-index:0; background-color:#993300">
<div class="keit">
<div><font color="#0000FF" face="Euphemia" class="ke12"><BR></font></div>
<div><font color="#0000FF" face="Euphemia">&nbsp; News&nbsp;&nbsp;&nbsp;&nbsp; -&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp; -&nbsp;&nbsp;&nbsp;&nbsp; Developer&nbsp;&nbsp;&nbsp;&nbsp; -&nbsp;&nbsp;&nbsp;&nbsp; Contact</font></div>
</div></div>

<div id="text2" style="position:absolute; overflow:hidden; top:89px; width:580px; height:193px; z-index:1">
<div class="keit">
<div align=center><font color="#FFFF00" face="Euphemia" class="ke48">title</font></div>
<div align=center><font color="#FFFF00" face="Euphemia" class="ke9">provided for you securily and ads free</font></div>
</div></div>

<div id="text3" style="position:absolute; overflow:hidden; top:226px; width:999px; height:31px; z-index:2">
<div class="keit">
<div><font color="#FF00FF" face="Euphemia" class="ke12">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</font></div>
</div></div>

<input name="link" type="text" style="position:absolute;width:493px;top:284px;z-index:3">
<div id="text4" style="position:absolute; overflow:hidden; top:346px; width:999px; height:31px; z-index:4">
<div class="keit">
<div><font color="#FF00FF" face="Euphemia" class="ke12">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</font></div>
</div></div>

<input name="formtext2" type="text" style="position:absolute;width:493px;top:447px;z-index:5">
<div id="formradio1" style="position:absolute; top:427px; z-index:6"><input type="radio" name="formradio1" checked></div>
<div id="text5" style="position:absolute; overflow:hidden; top:428px; width:491px; height:26px; z-index:7">
<div class="keit">
<div><font color="#99CC00" face="Euphemia"><I>(should be 3 charecters long at least)</I></font></div>
</div></div>

<div id="formradio2" style="position:absolute; top:563px; z-index:8"><input type="radio" name="formradio1"></div>
<div id="text6" style="position:absolute; overflow:hidden; top:564px; width:510px; height:26px; z-index:9">
<div class="keit">
<div><font color="#99CC00" face="Euphemia"><I>or select what type of characters</I></font></div>
</div></div>

<select name="6hh66hh6" style="position:absolute;top:584px;width:493px;z-index:10">
<option value="numbers">numbers</option>
<option value="letters">letters</option>
</select>
<div id="text7" style="position:absolute; overflow:hidden; top:688px; width:999px; height:26px; z-index:11">
<div class="keit">
<div><font color="#FF00FF" face="Euphemia" class="ke12">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</font></div>
</div></div>

<div id="text8" style="position:absolute; overflow:hidden; top:684px; width:217px; height:26px; z-index:12">
<div class="keit">
<div><font color="#99CC00" face="Euphemia" class="ke9"><I>one click below</I></font></div>
</div></div>

<input name="formbutton1" type="submit" style="position:absolute;top:719px;z-index:13">
<div id="text9" style="position:absolute; overflow:hidden; left:0px; top:999px; width:1145px; height:245px; z-index:14; background-color:#993300">
<div class="keit">
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B><BR></B></font></div>
<div align=right><font color="#0000FF" face="Euphemia" class="ke9"><B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Personal Site&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  plus&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </B></font></div>
</div></div>

<div id="text10" style="position:absolute; overflow:hidden; left:195px; top:1035px; width:785px; height:90px; z-index:15">
<div class="keit">
<div><font face="Euphemia" class="ke48"><I>your copy rights here</I></font></div>
</div></div>

<div id="text11" style="position:absolute; overflow:hidden; left:590px; top:1158px; width:533px; height:41px; z-index:16">
<div class="keit">
<div><font face="Euphemia"><B>footerline1</B></font></div>
<div><font face="Euphemia"><B>footerline2</B></font></div>
<div><font face="Euphemia"><B><BR></B></font></div>
<div><font face="Euphemia"><B><BR></B></font></div>
</div></div>
</body>
</html>

default.css

HTML Code:

<style type="text/css">
/*----------Text Styles----------*/
.ke6 {font-size: 8px;}
.ke7 {font-size: 9.3px;}
.ke8 {font-size: 11px;}
.ke9 {font-size: 12px;}
.ke10 {font-size: 13px;}
.ke11 {font-size: 15px;}
.ke12 {font-size: 16px;}
.ke14 {font-size: 19px;}
.ke16 {font-size: 21px;}
.ke18 {font-size: 24px;}
.ke20 {font-size: 27px;}
.ke22 {font-size: 29px;}
.ke24 {font-size: 32px;}
.ke26 {font-size: 35px;}
.ke28 {font-size: 37px;}
.ke36 {font-size: 48px;}
.ke48 {font-size: 64px;}
.ke72 {font-size: 96px;}
.keit {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

P.S: please don't bother change any styling (other than centering all the contents), just simplify the html and the css..

Anna K.

**logic_earth** · Sep 17, 2012 10:54

Just like to point out, we are not a source of free labor...

**imillard** · Sep 17, 2012 15:37

Hello Anna;

I have simplified your code as best I can. Let me know how I can get the files to you.

**Victorinox** · Sep 17, 2012 16:01

Originally Posted by imillard

Hello Anna;

I have simplified your code as best I can. Let me know how I can get the files to you.

Post the code here so others can comment.

**imillard** · Sep 17, 2012 17:40

Several things....
First, I was doing something to help out, and wasn't really seeking input from others.
Second, judging from the comment from logic_earth, such critiques may involve some expense. After all, apparently this isn't a source of free labor.
Third, the original poster has not responded - which isn't surprising considering the first response she got - and may have lost interest in the project. If I got a snarly answer like that, I'd give up too.

I am having serious doubts about the value of these forums.......

**ralph.m** · Sep 17, 2012 22:40

Ha ha, sometimes you have to wait a while for posters to return. If you feel motivated to tidy up that code, then that's wonderful. Post your code here, and I'm sure others will learn from it besides the OP. If you are fishing for paid work, though, you are in the wrong place. logic_earth was really just cautioning the OP not to expect forums to be a way of getting free labor, which is certainly not what they are for. That doesn't stop people being generous, though.

**Anna.K** · Sep 17, 2012 23:38

hi all, sorry for taking too long, but you guessed right.
i was refreshing the post every minute then i saw the first response, and you know..
anyway now that i came back, i would like to thank every one for every response..
and yes I'm still interested in getting a simplified copy of the code

so @imillard please feel free to use any method you can..

**Victorinox** · Sep 18, 2012 02:46

Originally Posted by imillard

I am having serious doubts about the value of these forums.......

The value of these forums is that addressing topics and problems in the open enables a greater number of people to be informed. The OP clearly has no problem with posting code so, if you have something to offer, please follow suit.

**imillard** · Sep 18, 2012 07:17

A general reply...
I'm not looking for paying work. I have enough of that. Also not looking for unwarranted criticism. There's way too much of that going on everywhere. I suppose it's because criticizing is so much easier than creating....

I spend a lot of time helping other people (young people and beginners) get started in page coding. It's probably because I couldn't find any help when I was starting out in 1992. I would come into a forum like this, ask a question, and get immediately get flamed by the "experts". So, I get a little ticked when I come to a question like this, and see the first response.

I will be posting a question to this forum - it's the reason I came here. We'll see what responses I get.

**ralph.m** · Sep 18, 2012 07:25

@imillard - We aren't intending to have a go at you, truly. But it does seem a little odd that you say you have a solution but won't post it.

Anyhow, Anna, I have to say that the code you posted is about as horrid and outdated as code can get. That's just the reality, I'm afraid.

i keep PMing him to make the code readable but he keeps ignoring me

Consider yourself lucky, if that's the kind of coding he does. He is not much use to you. If you'd like us to help you tidy this up, perhaps first post a screen shot of what you are aiming for. But as mentioned above, the purpose of a forum is not for all the work to be done for you. If that's what you need (which is perfectly understandable) you are better off hiring a web designer. But if you are trying to learn this yourself, then start from scratch again, and we can help you build this up bit by bit.

**imillard** · Sep 18, 2012 09:02

Okay. Here is a simple page template with css file.

It is NOT designed to be obtuse, or show off superior coding skills. No doubt it could be done "better," but the code is is readable and easily modified.
The page contains all the same elements as the original, but is lacking in horrid colors and absolute positioning tags. I have always like using Tables to keep a page together, keep things lined up, and the layout looking neat.

As a "new guy" I seem to be unable to create separate text boxes for the files, or attach them to this message. So, here is a link to the published template: http://www.millard3.com/template

There are two files: index.htm and default2.css
NOTE: Sometimes you might get a Connection Reset error on this link. Just try again. I think it's a residual GoDaddy problem. Sorry.

**Shyflower** · Sep 18, 2012 09:18

Originally Posted by imillard

Okay. Here is a simple page template with css file.

It is NOT designed to be obtuse, or show off superior coding skills. No doubt it could be done "better," but the code is is readable and easily modified.
The page contains all the same elements as the original, but is lacking in horrid colors and absolute positioning tags. I have always like using Tables to keep a page together, keep things lined up, and the layout looking neat.

As a "new guy" I seem to be unable to create separate text boxes for the files, or attach them to this message. So, here is a link to the published template: http://www.millard3.com/template

There are two files: index.htm and default2.css

Oh ouch... your link didn't work in my browser.

Something you should know, Anna, is that most browser extensions will let you view code, but won't let you edit code even from localhost (your computer). You will need one that specifically "says" it is for editing HTML and that won't apply to the css files, which is where things like colors and fonts belong. You can also copy/paste code to a text editor like notepad (if you are using windows) and edit it from there. However, I haven't used windows for a while and the last time I did, notepad didn't highlight the syntax, which is a very handy feature. Do a web search and look for html text editors. There are quite a few good ones out there and many are free. Make sure the one you get also 'reads' css so that you can use css styling to put things where they belong.

You can also find free basic html and css templates on the web to play with. I think that may be a better solution for you than trying to find one in a forum. Here are a few links to help you on your way:
Notepad++
CoffeeCup
HTML-kit
Bluefish (the one I use)

As for centering your page content, you will do that in a css file:

Code:

body{width: 960px; 
 margin: 0 auto;}/* change the 960px to however wide you want your template to be. It's the "auto" in the  margin declaration that centers the body*/

**imillard** · Sep 18, 2012 09:32

Yup. It's another GoDaddy problem that's "currently under investigation."
If you get a "Connection Reset" error just try again.
http://www.millard3.com/template

**ralph.m** · Sep 18, 2012 17:12

Originally Posted by imillard

As a "new guy" I seem to be unable to create separate text boxes for the files, or attach them to this message.

Hm, you should just be able to post your code here without a problem. Ideally, wrap it in [code] ... [/code] tags.

Tables are not generally considered a valid way to lay out pages, now that there's good CSS support in browsers. But your code certainly is neater.

**imillard** · Sep 18, 2012 18:19

Ralph: The browser support for advance CSS - how far back does it go? Is there any possibility that older browsers are still being used that could not interpret the new code?
The pages I write have to be visible - and readable - to everybody, even if it means sacrificing style to do it. I never want a corporate customer to hear their web page is unreadable or messed up.
For example: http://www.paraflex.com
It's not really stylish, but everybody can read it, and find the products with just two clicks.

As for the [code] tags, I'll keep that in mind for the next time. But trying to attach a file was a complete failure, in FF and IE. This is one site where I wouldn't expect to find errors.

**ralph.m** · Sep 18, 2012 18:47

Originally Posted by imillard

Ralph: The browser support for advance CSS - how far back does it go? Is there any possibility that older browsers are still being used that could not interpret the new code?

Not realistically these days. Even IE6 would support those pages just fine with CSS, and it's long gone now. There are many reasons for ditching table layouts, such as them being hard to maintain and modify (a presentation is mixed with markup) and presenting non-table content in a table is confusing semantically making life difficult for those using assistive technologies, etc.)

Trust me, table layouts are long dead.

But trying to attach a file was a complete failure, in FF and IE. This is one site where I wouldn't expect to find errors.

There is a bit of a bug at the moment, but if you click Go Advanced (bottom right) while posting, then click Manage Attachments, file uploading seems to work fine.

User Tag List

Thread: could someone please simplify this

Thread Tools

Display

could someone please simplify this

Bookmarks

Bookmarks

Posting Permissions