...

View Full Version : What am I doing wrong?



whitequill
11-14-2009, 08:45 PM
I'm having some problems with coding a website, I have a class, that says:

.text {
white-space: nowrap;
padding-left: 20px;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
}
and it doesn't pad the text at all; Why?:confused:
On top if that, the all the rest of the content on the page is centered with, text-align: center;.
the part that I am trying to edit should be left justified; and is in the middle of the page.

Here is a link to what the page looks like: webpage (http://one.abstractions.me).

cpkid2
11-14-2009, 09:05 PM
Is this what you're trying to achieve? I couldn't figure it out from your description.

http://img27.imageshack.us/img27/9803/capturegi.png

Electricspace
11-15-2009, 12:22 AM
The text is now left aligned, but if you resize the browsers' width, the text moves around. You'll have more control over your boxes if you give them a fixed width. Like this:


#body {
width: 720px;
margin: auto;
}

whitequill
11-15-2009, 01:08 AM
Is this what you're trying to achieve? I couldn't figure it out from your description.

http://img27.imageshack.us/img27/9803/capturegi.png
No,what I'm trying to achieve is this:
http://one.abstractions.me/images/how my site should look.jpg

But it needs to stay looking like that all the time. no matter where the browser's edges are.

Excavator
11-15-2009, 01:49 AM
Hello whitequill,
Not sure #body was really needed, see divitis (http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/), although I could be wrong and you have plans for that in a later revision.
Have a try with this version of your page:
CSS
/* Internet Explorer */
@font-face {
font-family: LucidaIE;
src: url("fonts/LCALLIG.EOT");
}

#name { font-family: LucidaIE }
#occupation { font-family: LucidaIE }
#bday { font-family: LucidaIE }

/* Other browsers */
@font-face {
font-family: Lucida;
src: url("fonts/LCALLIG.TTF") format("truetype");
}

#name { font-family: Lucida }
#occupation { font-family: Lucida }
#bday { font-family: Lucida }

/* ids */
#maincontent{
white-space: nowrap;
position: static;
}
#img{
padding-top: 7px;
}

#navmenu {
text-align: center;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline;
}
#navmenu ul li a {
white-space: nowrap;
text-decoration:none;
margin: 30px;
padding: 0px 0px 0px 0px;
color: #d7969c;
font-family: Arial, Helvetica, sans-serif;
}
#navmenu ul li a:hover {
color: #cad650;
}
#bgimage{
width: 720px;
margin: 0 auto;
padding: 7px 0 10px;
background: url(http://one.abstractions.me/images/background.gif) no-repeat;
}
#aboutme {
white-space: nowrap;
padding-top: 0px;
padding-left: 175px;
font-size: 28pt;
font-family: Times New Roman;
}
#name {
padding-top: 10px;
padding-left: 175px;
font-size: 13pt;
}
#occupation {
white-space: nowrap;
padding-top: 0px;
padding-left: 175px;
font-size: 13pt;
}
#bday {
white-space: nowrap;
padding-top: 0%;
padding-left: 175px;
font-size: 13pt;
}
#text {
white-space: nowrap;
padding-top: 15px;
padding-left: 20px;
padding-bottom: 25px;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
}
#inSL {
padding-top: 65px;
padding-left: 15px;
}
#mark{
white-space: nowrap;
font-family: Georgia;
font-size: 10pt;
text-align: center;
}
#comments {
padding-bottom: 5px;
font-family: Georgia;
font-size: 10pt;
}
#tm{
padding-top:10px;
}
#histats {
text-align: center;
}
/* Classes */
.text {
white-space: nowrap;
padding-left: 20px;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
}

img.center {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
/* tables */
table { display: table }
tr { display: table-row }
td, th { display: table-cell }

and the markup
<!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>Welcome to one.abstractions.me!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="verify-v1" content="YOdAdiSM1Z+cuVYdeXMk6SrBDg+JQjCsQJuRS6ygYag=" />
<link rel="icon" type="image/jpeg" href="../../images/favicon.jpg" />
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="../../images/iPhone-favicon.png" />
</head>
<body>
<div id="header">
<div id="img"><img alt="one.abstractions.me" src="http://one.abstractions.me/images/TitleBanner.gif" class="center" /></div>
</div>
<div id="maincontent">
<div id="navmenu">
<ul>
<li><a href="">About Me</a></li>
<li><a href="">Hobbies and Interests</a></li>
<li><a href="">Personal BLOG</a></li>
<li><a href="">Artwork</a></li>
</ul>
</div>
<div id="bgimage">
<div id="aboutme">About Me:</div>
<div id="name">Name: William Razgunas</div>
<div id="occupation">Occupation: College Student</div>
<div id="bday">Age/DOB: 26/January 22, 1983</div><br />
<div class="text">I am currently attending Washtenaw Community College, in Ann Arbor, Michigan, USA.</div>
<div class="text">I am taking classes to expand my knowledge of/about 3D graphic design.</div>
<div class="text">If you want to know more about me please look at my Hobbies and Interests.</div>
<div id="text">If you have further quiries please contact me at; <strong>bjraz</strong> at <strong>abstractions</strong> dot <strong>me</strong>.</div>
<div id="inSL"><img alt="inSL" src="http://one.abstractions.me/images/insl_logo.gif" /></div>
</div>
<div id="mark">This site is designed by William Razgunas Jr. (c) 2009
<div id="comments">If you have suggestions or comments about this site please contact: <strong>admin</strong> at <strong>abstractions</strong> dot <strong>me</strong></div>
<div id="tm">
The name Abstractions, and the logo are tradmarks of William Razgunas Jr. (my self);<br />
the inSL logo is a tradmark of Linden Labs, and is used with permission.
</div>
</div>
</div>
</body>
</html>

whitequill
11-15-2009, 08:18 AM
Thanks Excavator, that did it. This is my first website ever ( I feel I'm doing pretty well though considering). The #body tag, while not really necessary. it did make it so I could add some padding above that block of code.

Can you tell me why it was left justifying the code too though?
I don't understand that quite yet.

Excavator
11-15-2009, 10:09 AM
Can you tell me why it was left justifying the code too though?
I don't understand that quite yet.

Originally, yours was looking like this:

#bgimage{
padding: 7px 0 10px;
background: url(http://one.abstractions.me/images/background.gif) no-repeat center;
}

Add a background color to that to show what size #bgimage is and how your text fits in it. Like this -

#bgimage{
padding: 7px 0 10px;
background: #f00 url(http://one.abstractions.me/images/background.gif) no-repeat center;
}

To make it work better, we gave #bgimage a width and centered it, then positioned your text inside it.

whitequill
11-15-2009, 10:26 AM
Thank you for the tip about positioning of my background image.

But did the issue have to do with the #body tag I had, Excavator. Cause the text went to where it should after it was removed.
Why did the id #body do what it did? Why did it left justify the text?

Excavator
11-15-2009, 04:31 PM
But did the issue have to do with the #body tag I had, Excavator. Cause the text went to where it should after it was removed.
Why did the id #body do what it did? Why did it left justify the text?

No, the text went where it should as soon as we gave it's containing div a width. You can put #body back in there and it still works now that #bgimage has a width.
In fact, the first reply to your question gave #body a width and that worked fine.
I only got rid of #body in the code I gave you because it was an extra div that wasn't needed.

OGGordon
11-15-2009, 04:38 PM
Hello whitequill,
Not sure #body was really needed, see ]divitis[/B] ("http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/"[B), although I could be wrong and you have plans for that in a later revision.


ugh, I think I'm suffering under "divitis" lol



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum