PDA

View Full Version : Absolute CSS/HTML Newbie here. D: Pleae don't laugh!



Plushii
Dec 23rd, 2008, 06:12 AM
Alright, please don't laugh at me, but I'm having extreme trouble with my div layout. On my computer and browser, the layout looks perfect and flawless. Yet I go on a another computer, and it looks like a train ran over it, spat on it, ate it, and then regurgitated it.

Also, again, please don't laugh at me, but because I have no idea where else to get web hosting from, I'm stuck using neopets. o_0; That or freewebs...Those are the only two web hosting places I know of that will let me host a webpage. I'm not willing to shell out money for something I'm extremely new and inexperienced with. (Okay, I'm not that new since I coded from 5th-7th grade before taking a three year hiatus).

My I babble! Anyway, onto my problem.

My layout looks fine and dandy on my browser, my resolution, and my computer. However, if any of that changes, BAM, the layout goes to absolute hell. Okay, I'm exagerating. It's alignment is off by mere pixels, which is enough to make me frustrated and want to give up.

Anyway, here is the link to the website: http://www.neopets.com/~rahmanii

and here is my coding. Please note I have extra /'s in my style tags to get passed neopet filters. Everyone has to use them on neopets, otherwise the tags will be filtered out. ._.; Yes, I know neopets is a HORRIBLE website to start designing for, but hey, it's something for now until I think of something to put on freewebs.


<style />

body{
background: #f9bbf2 url(http://i13.photobucket.com/albums/a271/Sugary_Pocky/Layouts/poundbg2.png) repeat-y;
background-position:center;

font-family: Book Antiqua;
font-size: 14px;
color: #2B4F81;
text-align: center;
text-transform: none;}
#image{position:absolute;left:335px;top:0px;z-index:0;padding:0px;margin:0px;}
#info{position:absolute;left:380px;top:390px;width:505px;overflow:none;z-index:1;padding:auto;margin:auto;}

h1{
font-family: Monotype Corsiva;
font-size: 50px;
color: #3B3178;
text-align: center;
text-transform: none;
letter-spacing: 5px;
line-height:20pt;
border-bottom: 5px double #9180cc;
}

A:link{color:#699864; text-decoration: none; }
A:visited{color:#699864; text-decoration:line-through;}
A:hover {color:#8B5A2B; text-decoration:none; text-transform: uppercase; letter-spacing: 2px;}

.sf, td {
display: none;

</style />

<center>
<img id="image" src="http://i13.photobucket.com/albums/a271/Sugary_Pocky/Layouts/poundlayout2.png">

</div>

<div id="info">

<h1>Navigation</h1>

Coming soon!

<h1>Rules</h1>

1) You must <i><u><b>NEVER</I></U></B> trade one of my foster pets for another pet under anyu circumstance! If you have intentions of trading one of my foster pets, please don't apply. <BR><BR>
2) You may pound/adopt out ONLY if you are quitting neopets. <BR><BR>
3) You may paint over my pets and/or change their gender. <BR><BR>
4) You may not however, change their personality. <BR><BR>
5) You may adopt my pets on a side account, as long as that account remains active. <BR><BR>
6) If you have four pets, do not pound one of your pets to make room for one of mine. <BR><BR>
7) No chat speak! (don't spell u for you, don't spell r for are, that sort of thing). <BR><BR>
8) I accept both neomail applications and petpage applications. I have no preferences and will not choose one over the other. It's entirely up to you which one you may choose. Premade layouts are fine for petpages, since after all, it's the content that counts. ;D <BR><BR>
9) Your account MUST be four months old or else you will not be able to adopt! I'm sorry, but this is neopet's rule, not mine. <BR><BR>
10) My pets have a name and a gender. If you call my pets, or myself, an it, you will be disqualified. Nicknames are fine! If you plan on changing my pet's gender, feel free to refer to them in the gender you want them to be. (For example, the pet is a he, you plan to make him a she, so you may call him a her in your application.)

<h1>Please do include...</h1>

The fallowing are mandatory to be put on your application: <BR><BR>
1) A bit about yourself. <BR><BR>
2) Some info on your neopets. <BR><BR>
3) Tell me your future plans for my foster pets. This includes contests, species/gender/color changes, artistic purposes, petpet attachments, and so on. :3

<h1>Please do not include</h1>
1) A 'Why Me' page. If your application is good enough, I should be able to see why I should choose you over anyone else. <BR><BR>
2) Please do not include a 'Why Not Me' page. Again, if your application is good, I should be able to see why I shouldn't choose you. <BR><BR>
3) Absolutely do not have sad/hungry/sick pets on your account! If you are waiting for the Healing Spring Faerie to heal your pet of their sickness, just let me know and you will be excused from the 'no sick pet' rule, otherwise I will assume you do not care that your pet is ill.
</div>
</center>


Oh, and I tried validating it, but a whole bunch of stuff I don't understand came up. D; Like it's telling me not to use end tags and stuff...but when I take them out, the page goes haywire...

I'm so lost. x.x;

effpeetee
Dec 23rd, 2008, 08:14 AM
I don't have time to go into your problems at present, but you can find a lot of help here (http://exitfegs.co.uk/Sources.html)

You must start your code with a valid Doctype.

Frank

Excavator
Dec 23rd, 2008, 10:38 AM
Hello Plushii,
To get your site to center you need to set left and right margins to auto. That will make it adjust to whatever screen resolution the end user is viewing it in.
You have it absolutely positioned to look right in your resolution only.

The margin:0 auto; is what does it, see this example -

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #f9bbf2 url(http://i13.photobucket.com/albums/a271/Sugary_Pocky/Layouts/poundbg2.png) repeat-y center;
text-align:center;
font: 14px "Book Antiqua";
color: #2B4F81;
}
* {
margin: 0;
padding: 0;
border: none;
}
.light {
margin: 0 auto;
}
#wrap {
width: 540px;
background: #fff;
margin: 0 auto;
}
h1 {
font: Monotype Corsiva 50px;
color: #3B3178;
text-align: center;
letter-spacing: 5px;
line-height:20pt;
border-bottom: 5px double #9180cc;
}
A:link{color:#699864; text-decoration: none; }
A:visited{color:#699864; text-decoration:line-through;}
A:hover {color:#8B5A2B; text-decoration:none; text-transform: uppercase; letter-spacing: 2px;}
</style>
</head>
<body>
<img src="http://i13.photobucket.com/albums/a271/Sugary_Pocky/Layouts/poundlayout2.png" alt="header images" width="593" height="386" class="light" />
<div id="wrap">
<h1>Navigation</h1>

Coming soon!

<h1>Rules</h1>

1) You must <i><u><b>NEVER</I></U></B> trade one of my foster pets for another pet under anyu circumstance! If you have intentions of trading one of my foster pets, please don't apply. <BR><BR>
2) You may pound/adopt out ONLY if you are quitting neopets. <BR><BR>
3) You may paint over my pets and/or change their gender. <BR><BR>
4) You may not however, change their personality. <BR><BR>
5) You may adopt my pets on a side account, as long as that account remains active. <BR><BR>
6) If you have four pets, do not pound one of your pets to make room for one of mine. <BR><BR>
7) No chat speak! (don't spell u for you, don't spell r for are, that sort of thing). <BR><BR>

8) I accept both neomail applications and petpage applications. I have no preferences and will not choose one over the other. It's entirely up to you which one you may choose. Premade layouts are fine for petpages, since after all, it's the content that counts. ;D <BR><BR>
9) Your account MUST be four months old or else you will not be able to adopt! I'm sorry, but this is neopet's rule, not mine. <BR><BR>
10) My pets have a name and a gender. If you call my pets, or myself, an it, you will be disqualified. Nicknames are fine! If you plan on changing my pet's gender, feel free to refer to them in the gender you want them to be. (For example, the pet is a he, you plan to make him a she, so you may call him a her in your application.)

<h1>Please do include...</h1>

The fallowing are mandatory to be put on your application: <BR><BR>
1) A bit about yourself. <BR><BR>
2) Some info on your neopets. <BR><BR>
3) Tell me your future plans for my foster pets. This includes contests, species/gender/color changes, artistic purposes, petpet attachments, and so on. :3

<h1>Please do not include</h1>

1) A 'Why Me' page. If your application is good enough, I should be able to see why I should choose you over anyone else. <BR><BR>
2) Please do not include a 'Why Not Me' page. Again, if your application is good, I should be able to see why I shouldn't choose you. <BR><BR>
3) Absolutely do not have sad/hungry/sick pets on your account! If you are waiting for the Healing Spring Faerie to heal your pet of their sickness, just let me know and you will be excused from the 'no sick pet' rule, otherwise I will assume you do not care that your pet is ill.
</div>
</center>
<BR><BR><BR></td></tr></table><center><P><font class=sf color=#666666>NEOPETS, characters, logos, names and all related indicia<br>
are trademarks of <a href='/aboutus.phtml'><font class=sf>Neopets, Inc.,</a><font class=sf color=#666666> &copy; 1999-2008.<br>&reg; denotes Reg. US Pat. & TM Office.
All rights reserved.</font><br><a href='/privacy.phtml' class=sf>PRIVACY POLICY</a> | <a href='/safetytips.phtml' class=sf>Safety Tips</a> | <a href='/contact.phtml' class=sf>Contact Us</a> | <a href='/aboutus.phtml' class=sf>About Us</a> | <a href='/presskit_form.phtml' class=sf>Press Kit</a>

<script language=JavaScript><!--
if(navigator.appVersion.indexOf("MSIE")>0&&parseInt(navigator.appVersion)>=4){document.write(' | <a href="javascript:window.external.AddFavorite(document.location,document.title)"><font class=sf>Bookmark Us</a>');}
//-->
</script><br><font class=sf>Use of this site signifies your acceptance of the <a href=/terms.phtml><font class=sf>Terms and Conditions</a><br clear=all><br><br>
</tr></table>
<!--end wrap--></div>
</body>
</html>

You should really have a look at a CSS text styling tutorial (http://search.live.com/results.aspx?q=css+text+styling+tutorial&mkt=*&FORM=IE8SRC&src=IE-SearchBox) and check out every link in my sig below.


...

jamesicus
Dec 23rd, 2008, 04:13 PM
.......... You must start your code with a valid Doctype.

Frank
Yes, that is so. Here are my favorite references for adopting good foundational Web page composition practices:

W3C Standards, DOCTYPES, DTDs & Validation (http://www.w3.org/QA/2002/04/Web-Quality)
W3C Tutorial - Character sets & encodings in XHTML, HTML and CSS (http://www.w3.org/International/tutorials/tutorial-char-enc/)

And here are some of my own thoughts relating to validation:

Validation enhances interoperability -- correct rendering in all user agents. However, web pages can, and do, fail validation and still display pretty much
as expected in graphical Browsers anyway due to their built-in Markup discrepancy compensation -- in other words depending on the error compensating properties of individual graphical Browsers.

Validation does catch many easily corrected Markup errors and the resultant code is consequently easy to maintain or change. Pages containing invalid Markup may not display or function correctly in Screen Readers, BRAILLE interpreters and Textual Browsers or when incorporated into other applications. As we move toward the Semantic Web, the rigors of XML will result in a greater requirement for Valid Markup.

Valid and well formed Markup also bespeaks careful craftsmanship and that appeals to many web authors.

JFP

jerry62704
Dec 23rd, 2008, 04:14 PM
Alright, please don't laugh at me, but I'm having extreme trouble with my div layout. On my computer and browser, the layout looks perfect and flawless. Yet I go on a another computer, and it looks like a train ran over it, spat on it, ate it, and then regurgitated it.

Also, again, please don't laugh at me, but because I have no idea where else to get web hosting from, I'm stuck using neopets. o_0; That or freewebs...Those are the only two web hosting places I know of that will let me host a webpage. I'm not willing to shell out money for something I'm extremely new and inexperienced with. (Okay, I'm not that new since I coded from 5th-7th grade before taking a three year hiatus).

My I babble! Anyway, onto my problem.

My layout looks fine and dandy on my browser, my resolution, and my computer. However, if any of that changes, BAM, the layout goes to absolute hell. Okay, I'm exagerating. It's alignment is off by mere pixels, which is enough to make me frustrated and want to give up.

Anyway, here is the link to the website: http://www.neopets.com/~rahmanii

and here is my coding. Please note I have extra /'s in my style tags to get passed neopet filters. Everyone has to use them on neopets, otherwise the tags will be filtered out. ._.; Yes, I know neopets is a HORRIBLE website to start designing for, but hey, it's something for now until I think of something to put on freewebs.


<style />

body{
background: #f9bbf2 url(http://i13.photobucket.com/albums/a271/Sugary_Pocky/Layouts/poundbg2.png) repeat-y;
background-position:center;

font-family: Book Antiqua;
font-size: 14px;
color: #2B4F81;
text-align: center;
text-transform: none;}
#image{position:absolute;left:335px;top:0px;z-index:0;padding:0px;margin:0px;}
#info{position:absolute;left:380px;top:390px;width:505px;overflow:none;z-index:1;padding:auto;margin:auto;}

h1{
font-family: Monotype Corsiva;
font-size: 50px;
color: #3B3178;
text-align: center;
text-transform: none;
letter-spacing: 5px;
line-height:20pt;
border-bottom: 5px double #9180cc;
}

A:link{color:#699864; text-decoration: none; }
A:visited{color:#699864; text-decoration:line-through;}
A:hover {color:#8B5A2B; text-decoration:none; text-transform: uppercase; letter-spacing: 2px;}

.sf, td {
display: none;

</style />

<center>
<img id="image" src="http://i13.photobucket.com/albums/a271/Sugary_Pocky/Layouts/poundlayout2.png">

</div>

<div id="info">

<h1>Navigation</h1>

Coming soon!

<h1>Rules</h1>

1) You must <i><u><b>NEVER</I></U></B> trade one of my foster pets for another pet under anyu circumstance! If you have intentions of trading one of my foster pets, please don't apply. <BR><BR>
2) You may pound/adopt out ONLY if you are quitting neopets. <BR><BR>
3) You may paint over my pets and/or change their gender. <BR><BR>
4) You may not however, change their personality. <BR><BR>
5) You may adopt my pets on a side account, as long as that account remains active. <BR><BR>
6) If you have four pets, do not pound one of your pets to make room for one of mine. <BR><BR>
7) No chat speak! (don't spell u for you, don't spell r for are, that sort of thing). <BR><BR>
8) I accept both neomail applications and petpage applications. I have no preferences and will not choose one over the other. It's entirely up to you which one you may choose. Premade layouts are fine for petpages, since after all, it's the content that counts. ;D <BR><BR>
9) Your account MUST be four months old or else you will not be able to adopt! I'm sorry, but this is neopet's rule, not mine. <BR><BR>
10) My pets have a name and a gender. If you call my pets, or myself, an it, you will be disqualified. Nicknames are fine! If you plan on changing my pet's gender, feel free to refer to them in the gender you want them to be. (For example, the pet is a he, you plan to make him a she, so you may call him a her in your application.)

<h1>Please do include...</h1>

The fallowing are mandatory to be put on your application: <BR><BR>
1) A bit about yourself. <BR><BR>
2) Some info on your neopets. <BR><BR>
3) Tell me your future plans for my foster pets. This includes contests, species/gender/color changes, artistic purposes, petpet attachments, and so on. :3

<h1>Please do not include</h1>
1) A 'Why Me' page. If your application is good enough, I should be able to see why I should choose you over anyone else. <BR><BR>
2) Please do not include a 'Why Not Me' page. Again, if your application is good, I should be able to see why I shouldn't choose you. <BR><BR>
3) Absolutely do not have sad/hungry/sick pets on your account! If you are waiting for the Healing Spring Faerie to heal your pet of their sickness, just let me know and you will be excused from the 'no sick pet' rule, otherwise I will assume you do not care that your pet is ill.
</div>
</center>


Oh, and I tried validating it, but a whole bunch of stuff I don't understand came up. D; Like it's telling me not to use end tags and stuff...but when I take them out, the page goes haywire...

I'm so lost. x.x;

First, make the style like this:
<style type="text/css">
(without the close and with the type)
End it with this:
</style>
(without the extra "/")

Second, add the universal reset to your css like this:
* {border:0; padding:0;}

This makes all browsers start from the same place as these values will differ in different browsers.

In your css, change the font-family to add commas between the choices. If any of them are like "Times Roman" (with the space), you have to put them in quotes.

Everything below the </style> has to be in the body tag. You have a closing div, but no opening at the top of it.

That should get you started. Make sure you run it through the free html validator (http://validator.w3.org/) and the free css valiator (http://jigsaw.w3.org/css-validator/)

jamesicus
Dec 23rd, 2008, 04:40 PM
Alright, please don't laugh at me ..........

Plushii:

I should have stated in my previous response that I, and I am sure other responders here, will never laugh at you -- composing Web pages is an ongoing and never ending learning process -- for all of us!

I do suggest, that after you are familiar with the jargon and fundemental concepts, you carefully read and study the following references ..........

W3C Standards, DOCTYPES, DTDs & Validation (http://www.w3.org/QA/2002/04/Web-Quality)
W3C Tutorial - Character sets & encodings in XHTML, HTML and CSS (http://www.w3.org/International/tutorials/tutorial-char-enc/)

.......... if you do that, you will be light years ahead of most beginning Web authors.

JFP

Plushii
Dec 24th, 2008, 01:10 AM
Well I figured out my problem! After playing around with the margin: 0 auto; code, as well as reading the pitfalls of using absolute positioning, I changed absolute positioning to static positioning, which I've never even heard of until now! I've always used absolute positioning without a problem, but this is the first time I'm actually coding for two browsers...so that could be why. When I was younger, I always thought everyone used the same things as I did.

I also found out why my code had so many errors with it went through the validation thing. It turns out I used an HTML validation instead of a CSS one! When I ran it through a CSS validation source, there were no errors 'cept for the one that I need in order to get past neopet HTML/CSS filters.

Thank you everyone for your help! I bookmarked most of the links you guys sent me, especially the ones on doctypes. While neopets provides me with one, if/when I decide to build a website from scratch, I think it'll be good to know. c:

Again, thank you so much for the patients, help, and links. ^^

Excavator
Dec 24th, 2008, 01:24 AM
I also found out why my code had so many errors with it went through the validation thing. It turns out I used an HTML validation instead of a CSS one! When I ran it through a CSS validation source, there were no errors 'cept for the one that I need in order to get past neopet HTML/CSS filters.

CSS validation checks your CSS. Pretty easy to pass that one.

HTML validation checks your markup. All those errors the validator found? They're still there.

Plushii
Dec 24th, 2008, 06:01 AM
Oh man, really? D: I thought I fixed it!

Ah well...time to figure out how to fix all those errors. x__x...