CSS not controlling width for my text...

Discussion in 'CSS' started by drewtoby, Jun 1, 2011.

  1. #1
    Hello, I have tried many ways to get css to control the width of my text. Here is the current code:

    
    <html>
    <STYLE TYPE="text/css">
    <!--
    .text {
    background-image:url('txt.png');
    top:320px; 
    	left:191px;
    	width:920px; 
    	length: 700px;
    	z-index: 8;
    	border:none;
    STYLE="TEXT-DECORATION: NONE";
    position:relative;
    border:2px solid black; 
    margin:0px; padding:0px; border:2px;
    } 
    
    
    .banner {
    background-image:url('banner.jpg');
    top:0px; 
    	left:410px;
    	z-index: 3;
    	border:none;
    STYLE="TEXT-DECORATION: NONE";
    position:absolute;
    margin:0px; padding:0px
    } 
    
    .nav {
    background-image:url('nav.png');
      background-repeat: repeat-y;
      background-position: left;
    top:209px; 
    	left:200px;
    	z-index: 4;
    	border:none;
    STYLE="TEXT-DECORATION: NONE";
    position:absolute;
    margin:0px; padding:0px
    
    }
    
    h2 {     position: absolute;     top: 296px;     left: 450;     z-index: 9;   font-size:14px;  }
    
    p.h1 {color: white; position: absolute; top: 364px;  left: 250; z-index: 8;   font-size:14px;  }
    
    
    
    -->
    </STYLE>
    <image class="text" src="txt.png"></image>
    <image class="banner" src="banner.jpg"></image>
    <image class="nav" src="nav.png"></image>
    <h2><body link="black" alink="black" vlink="black"><A HREF="http://elvenprog.com/"><big><big>   Home</big></big></A><A HREF="http://elvenprog.com/projects.html"><big><big>   Projects</big></big></A><A HREF="http://elvenprog.com/websites.html"><big><big>    Websites</big></big></A><A HREF="http://elvenprog.com/downloads"><big><big>   Downloads   </big></big></A></h2> 
     <p style="max-width:400px;" class="h1"> 
    Hello....................................................................................................................................................................................................................................................................................................</p>
    </html>
    
    Code (markup):
    I have tried floats, css width, p width, ect. I have IE8. Please let me know how I can control the width of my css text!!!!!!!
     
    drewtoby, Jun 1, 2011 IP
  2. dakshhmehta

    dakshhmehta Active Member

    Messages:
    220
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    85
    #2
    because, CSS and HTML is absolutely wrong as per W3C validation..
    Use <link> tag to attach CSS in html webpage and follow W3C compatibility guide @ www.w3c.org.

    Normally it looks like,
    <!DOCTYPE....>
    <html>
    <head>
    <link...>
    <title></title>
    </head>
    <body>

    </body>
    </html>

    Another thing that,
    <image> tag is not there. its <img src="" alt="" />
    and <big> is not there i think, you can use either <strong> or <b> to bold text.

    You might use block level tag like <div class="h1">..</div>

    Just a cent opinion, hope it will help you...

    thanks,
    daksh
     
    dakshhmehta, Jun 1, 2011 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Refer basics at w3Schools.
     
    radiant_luv, Jun 2, 2011 IP
  4. designmonkey

    designmonkey Peon

    Messages:
    70
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The core problem is lies on your example
    <p style="max-width:400px;" class="h1"> 
    Hello....................................................................................................................................................................................................................................................................................................</p>
    Code (markup):
    Your "Hello.....etc " will be viewed as 1 word, and there's no such word with that length. CSS can't break words, you need php ( or maybe javascript ) to do that ( by calculating numbers of character per-line ).

    Also i suggest you learn Semantic HTML :) , i.e if you want to define a heading use h1 , don't use p with h1 class.

    Happy learning :)
     
    designmonkey, Jun 2, 2011 IP
  5. drewtoby

    drewtoby Well-Known Member

    Messages:
    763
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #5
    thanks everyone! Its working with paragraphs!!!
     
    drewtoby, Jun 2, 2011 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    @designMonkey: Uhm, CSS can now break words -- IE's been able to do it since IE 5.0, and now their way of handling it is CSS3 legal so all the other browsers can break-word too.

    word-wrap:break-word;

    Add that, and now words will be broken if they end up too wide to fit on a line by themselves. One of the few bits of CSS3 I consider real world deployable in the here and now! Works IE 5+, FF 3.5+, Opera 10+, and while I'm not sure on older versions, I know it works on the latest flavors of webkit browsers (Safari and Chrome).
     
    deathshadow, Jun 3, 2011 IP