Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    What am I doing wrong?

    I'm having some problems with coding a website, I have a class, that says:
    Code:
    .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?
    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.

  • #2
    New Coder
    Join Date
    Sep 2009
    Posts
    78
    Thanks
    17
    Thanked 1 Time in 1 Post
    Is this what you're trying to achieve? I couldn't figure it out from your description.


  • #3
    New Coder
    Join Date
    Oct 2009
    Location
    Netherlands
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:

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

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cpkid2 View Post
    Is this what you're trying to achieve? I couldn't figure it out from your description.

    No,what I'm trying to achieve is this:


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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello whitequill,
    Not sure #body was really needed, see 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
    Code:
    /* 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
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    whitequill (11-15-2009)

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by whitequill View Post
    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:
    Code:
    #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 -
    Code:
    #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.
    Last edited by Excavator; 11-15-2009 at 10:11 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by whitequill View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    Hello whitequill,
    Not sure #body was really needed, see ]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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •