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!!!!!!!
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
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: 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).