PDA

View Full Version : I Have Tried Possibly Everything, How Come My Layout Won't Center?



atomic el
Aug 25th, 2007, 06:22 AM
It is sorta hard to explain with out posting the code. But I have tried centering, aligning, adjusting, but nothing will work! What can I do? You can message me for part of the HTML code, I think it had something to do with the was the text boxes are, It worked fine until I put them in, but they are essential so I can't possibly take them out! Help?

felgall
Aug 25th, 2007, 08:17 AM
Here is a very basic example of how to do centered content. What part of the following code did you leave out?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#myid {margin : 0 auto; width : 200px;}
</style>
</head>
<body>
<div id="myid">Centered content 200 pixels wide</div>
</body>
</html>

ArcticFox
Aug 25th, 2007, 09:34 AM
Here's my solution since I don't know what you're talking about:



<center>Centered</center>


Why isn't your code or a link posted here for us to see? Why do we have to ask you for it? Do we have to beg to help you?

Jutlander
Aug 25th, 2007, 10:50 AM
@felgall, the type attribute is required on the style element, so it should be:


<style type="text/css">
#myid {margin : 0 auto; width : 200px;}
</style>

@Arcticfox, the center element is deprecated and should not be used. :rolleyes:

Use the code felgall provided and modify it to suit your needs.

atomic el
Aug 25th, 2007, 04:40 PM
Um... let me try..

ArcticFox
Aug 25th, 2007, 04:49 PM
Lmfao!


Atomic's original code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<CENTER>

<title>All Skate - Pacific Northwest Roller Rink History</title>

</head>

<STYLE>
BODY{
background: url(http://lab.rails2u.com/bgmaker/slash...gcolor=false);
background-attachment: fixed;
scrollbar-face-color: #800400;
scrollbar-arrow-color: #FCFBF8;
scrollbar-track-color: #FCFBF8;
scrollbar-highlight-color: #FCFBF8;
scrollbar-3dlight-color: #FCFBF8;
scrollbar-shadow-color: #FCFBF8;
scrollbar-darkshadow-color: #FCFBF8;
align: center;
}
p, body, td, standard {font: normal 11px arial; color: 000000;text-align: justify; line-height: 12px;}
A:link{font: normal 11px arial; color: #F5F0E2; line-height: 12px; text-decoration: none;}
A:active{font: normal 11px arial; color: #F5F0E2; line-height: 12px; text-decoration: none;}
A:visited{font: nornal 11px arial; color: #CDAA7D; line-height: 12px; text-decoration: none;}
A:hover{font: normal 11px arial; color: #CDAA7D; line-height: 12px; text-decoration: none; cursor: none}
b{color: #000000;}
u{color: #CDAA7D;}
i{color: #CDAA7D;}
strike{color: #CDAA7D;}
strong{color: #CDAA7D;}
input{font: normal 11px arial; color: CDAA7D; border: 1px solid #000000; background: ffffff;}
hr{width: 100px; color: #000000; height: 1px;}

<body>

<div style="text-align: left; width: px"><div style="overflow: auto; z-index: 99; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; top: 110px; left: 594px; width: 200px; height: 475px; margin-right: -200px; margin-bottom: -475px"><center>

<img src="http://img201.imageshack.us/img201/7826/updatescq4.png"><br><br>

Updates will go here.

<br><br>

<img src="http://img206.imageshack.us/img206/3771/break1lt7.png">

</center>
</div>
<div style="overflow: auto; z-index: 99; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; top: 110px; left: 7px; width: 586px; height: 474px; margin-right: -587px; margin-bottom: -474px"><center>

Main Text Box

</center>
</div>
<img src="http://img484.imageshack.us/img484/1909/allskatealtyl0.png" width="800" border="0" usemap="#imap_93" >
<map id="imap_93" name="imap_93" >
<area shape="rect" coords="10,83,75,103" alt="About" title="About" href="">
<area shape="rect" coords="90,84,242,104" alt="Roller Rink Index" title="Roller Rink Index" href="">
<area shape="rect" coords="255,84,359,102" alt="Contribute" title="Contribute" href="">
<area shape="rect" coords="373,84,472,102" alt="Snapshots" title="Snapshots" href="">
<area shape="rect" coords="484,84,557,102" alt="Credits" title="Credits" href="">
<area shape="rect" coords="568,84,655,102" alt="Contact" title="Contact" href="">
<area shape="rect" coords="668,84,792,103" alt="What's New?" title="What's New?" href="">
<area shape="rect" coords="4,4,297,81" alt="Home" title="Home" href="http://www.geocities.com/atomic_el/atomic_test.htm">
</map>

</div>

</style>
</center>
</body>
</html>

atomic el
Aug 25th, 2007, 04:57 PM
Lmfao!

What? :rolleyes: (and it did work.. I just needed to refresh the page.. thank-you felgall!)

VIPStephan
Aug 25th, 2007, 05:02 PM
Ever heard of an HTML validator (http://validator.w3.org)? Get your code straight at first and then come back an we’ll tell you what to do.

One thing the validator probably won’t complain about: Always use a complete doctype, i.e. with URL (as felgall showed), and always (X)HTML strict.

croatiankid
Aug 26th, 2007, 12:00 PM
Wikipedia (http://en.wikipedia.org/wiki/Lmao#Acronyms_and_abbreviations).

Fumigator
Aug 27th, 2007, 01:14 AM
In acronym form the foulness is filtered out so it's perfectly fine for the whole family.

atomic el
Aug 27th, 2007, 06:55 AM
Lmfao!


Please don't post the code.. I know that this sounds dumb, but I don't trust sticky hands...

and how was it funny?

BWiz
Aug 27th, 2007, 07:21 AM
@articfox, There's no need to make fun of him. So what if he's not good at coding? We all had to start somewhere. If you're just going to make fun of a newbie, keep it to yourself.

@atomic, You should learn how to set out your code schematically. On the sixth line, you're using <center> within the <head> tags. You can't do that. Also, the <center> tag is deprecated for CSS.

If you're serious about this, you should find some decent tutorials. Most of the people here don't really appreciate total newbies coming and asking for help, if they have no interest to learn.

I suggest starting at W3Schools (http://www.w3schools.com), probably one of the best tutorials to get you on you're feet.

oldcrazylegs
Aug 27th, 2007, 11:15 PM
#myid {margin : 0 auto; width : 200px;}

margin:0 auto; centers in gecko-based browsers. you also need to use text-align:center; for internet explorer.

#myid {text-align:center; margin : 0 auto; width : 200px;}

Jutlander
Aug 28th, 2007, 03:47 PM
@oldcrazylegs, it is only IE 5 that needs to be tweaked using the text-align property. If there is a full and valid doctype on, IE 6 and 7 will play along without any problems. Personally I don't design for IE 5, because no one uses it anymore.

atomic el
Aug 29th, 2007, 05:13 PM
@articfox, There's no need to make fun of him. So what if he's not good at coding? We all had to start somewhere. If you're just going to make fun of a newbie, keep it to yourself.

@atomic, You should learn how to set out your code schematically. On the sixth line, you're using <center> within the <head> tags. You can't do that. Also, the <center> tag is deprecated for CSS.

If you're serious about this, you should find some decent tutorials. Most of the people here don't really appreciate total newbies coming and asking for help, if they have no interest to learn.

I suggest starting at W3Schools (http://www.w3schools.com), probably one of the best tutorials to get you on you're feet.

Sorry.. (by the way, el, is short for Eleanor, and I'm only 15) I've just been doing small websites for a couple of years, here and there. There was just something wrong with the code. I just needed some help.

I'm not a total newbie. I just was missing what I needed to fix.. If you read something for so long you tend to miss it. The problem was in the code.

ArcticFox
Aug 30th, 2007, 08:27 PM
Sorry for my foul language. Here's the edit:

"rotflol!"

Better?

effpeetee
Aug 30th, 2007, 10:02 PM
Yes, much better, but still a little unkind from a teacher to a pupil, don't you think.

Frank (also a pupil in need of your expertise.)