|
CSS - Long Words Break Design
Hi
I'm in the middle of creating a web forum, and I've run into a little 'snafu'. Forum replys have a fixed width design so when words are used that are greater than width of the design, 500px, the word actually expands the design. All I want is for the word to stop at 500px and begin on a newline. A picture can always explain it better: Code: <table class='forum_block'> <thead> <th>mikeymike</th> </thead> <tbody> <tr> <td class='post_text' colspan='2'>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggg</td> </tr> <tr> <td class='post_date' colspan='2'>1280199359</td> </tr> </tbody> <tfoot> <tr> <td colspan='2'><a href='?edit=51'><button><img src='/_images/icons/comment_edit.png' />Edit</button></a> <a href='?post_form=17'><button><img src='/_images/icons/comment.png' />Post reply</button></a> <a href='?post_form=17,quote=51'><button><img src='/_images/icons/comment_add.png' />Quote</button></a> </td> </tr> </tfoot> </table> Code:
.forum_block {
font-family: verdana, Arial, Helvetica, sans-serif;
width: 99%;
margin: 10px auto;
}
.forum_block th {
background: #b7cade;
font-weight: bold;
color: #fffefe;
padding: 0.5em;
}
.forum_block td {
background: #efeeee;
border: solid 2px #efeeee;
padding: 0.5em;
}
.forum_block td textarea, .forum_block td input {
background: #efeeee;
width: 510px;
}
.forum_block tfoot td {
background: #b7cade;
border: none;
color: #fffefe;
font-weight: bold;
padding: 0.5em;
}
.forum_block .post_text {
font-family: Georgia, "Times New Roman", Times, serif;
}
.forum_block .post_date {
font-size: 0.7em;
text-align: right;
font-style: italic;
}
Similar TutorialsHi all, I've created a template in CSS and divs, but when someone puts a word like this_is_a_template - with no spaces in it, it breaks the left nav. Is there any way of making sure words break once they get to the width of the leftnav, even when they don't have spaces in them? Cheers. Anyone know of a good way to break up a long word from an element with a certain width? Say I have a word like wordddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd, I'd want it to show up properly. Here's the best I've come up with: Code:
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
Longworddddddddddddddddddddddddddddddddddd
</div>
</body>
</html>
As you see, just cutting off the word isn't really ideal. Is there a way to auto-break up long words or something? I'm working on a new design and looking for some general advise. I've designed/coded a couple of sites, but I'm a volunteer and truly learning as I go. My question is this: What is the "best" way to slice or break up a design in order to write efficient code? I know my way around CSS (somewhat) so I can conceive of all kinds of ways to do it, but I'm wondering if there's a standard. Case in point... here's my design: http: // www . deepwaterchurch . com / mockup . jpg Would a person make a DIV for the black header bar at the top, another DIV for the logo beside a DIV for the slider, 2 rows of DIVs, side by side for the content blocks, etc? Even so, it would seem to make sense (for the content blocks) to have 1 DIV containing the whole background image for that row (including the actual blocks) then 3 DIVs that are positioned within it to hold the actual text. Is there any standard practice? If it matters, this will be a joomla-driven site. I can take whatever standards I learn here and apply then to secondary templates. P.S. I've laid this out with the "960 Grid System" in mind, but I've never actually used it to code. Thanks in advance for any guidance. w3 css-validation tool Quote: context:html body Property word-break doesn't exist : break-all it doesnt validates ,, why?? It changes both attribute in ie and firefox,, I use it because when people choose bigger text sizes my divs mix up because of long words so I use word-break. What do you prefer me?? Live without validation look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. If I use word-break:break-all solves the problem when I enter a word without spaces (for e.g pppppppppppppppppppppppppppppppppppppppppppp), it breaks and coming in line by line like (ppppppp ppppppp ppppp) as I required. If I use word-break-cjk solves the problem when I enter a word without spaces (for e.g Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La), it breaks the word as I required. But I need both scenarios should work. Which style I need to use...? I have a div using width Code:
div.contain {
width:200px;
font-style:italic;
}
Say, I have a long word such as: Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu If i have multiple words, they will break after 200px width. Is there any CSS tag that will contain long words? Hello Devshed! I'm new to CSS and i'm having some problem with position and i think with div's as well. When i resize the browser window, move the borders, images move also. Also when i add images, as you can see i have to add really big negative values to bring them on top of each other. What am I doing wrong and how should I code in a professional matter? This is what I've worked on so far: http://www.stars.ehlo.ro/ HTML: 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="USN, United Stars, Gaming, Network,counter-strike, CS, 1.6, servers, tracker, games, community, forums" />
<meta name="description" content="USN - United Stars Network is a gaming network offering players to easily interact" />
<meta name="Revisit-After" content="2 Days" />
<meta name="robots" content="all,index" />
<meta name="author" content="Sergiu/z3rongod for www.usn.ro." />
<title> United Stars Network | Gaming Network | Home </title>
<link rel="shortcut icon" href="www.usn.ro/favicon.ico">
<link rel="icon" href="www.usn.ro/favicon.ico">
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index.css);
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
<!-- Bara de sus -->
<div id="topbar">
<img src="webimages/topbar.png" /> </div>
<div id="usnbanner">
<img src="webimages/usnbanner.png" /> </div>
<div id="topheader">
<img src="webimages/topheader.png" /></div>
<div id="navbarborder"></div>
<div id="navbarbox"> </div>
<div id="mboxborder"> </div>
<div id="mbox"> </div>
<div id="downbar">
<img src="webimages/downbar.png" /></div>
<div id="dboxborder"> </div>
<div id="dbox"> </div>
<!-- ======== Google Reclama ====== -->
<div id="gleader">
<img src="webimages/gleader.png" /> </div>
<div id="gside">
<img src="webimages/gside.png" /> </div>
</div>
<!-- Flags -->
<div id="flags">
<div id="usflag">
<img src="webimages/usflag.png" /> </div>
<div id="roflag">
<img src="webimages/roflag.png" /> </div>
</div>
<!-- Big Links -->
<div id="biglinks">
<div id="bbhome">
<img src="webimages/home.png" /> </div>
<div id="bbservers">
<img src="webimages/servers.png" /> </div>
<div id="bbforums">
<img src="webimages/forums.png" /> </div>
<div id="bbfiles">
<img src="webimages/files.png" /> </div>
<div id="bbnews">
<img src="webimages/news.png" /> </div>
<div id="bblinks">
<img src="webimages/links.png" /> </div>
</div>
<!-- Navbar -->
<div id="navbar">
<div id="nhome">
<img src="webimages/nhome.png" /> </div>
<div id="nborder1">
<img src="webimages/nborder.png" /> </div>
<div id="nforum">
<img src="webimages/nforum.png" /> </div>
<div id="nborder2">
<img src="webimages/nborder.png" /> </div>
</div>
</div>
</body>
</html>
CSS: Code:
/* ToC
1. defaults
2. structure
3. links and navigation
4. fonts
5. images
Notes
*/
/* Defaults */
/*Avoid default browser margins and padding */
* {
margin: 0;
padding: 0;
}
/* Avoid browser font resize */
html { font-size: 100%; }
/* --------- 2. structure --------- */
body {
font: 100%/2 Verdana, Arial, Helvetica, sans-serif;
background: #000000;
}
#wrapper {
font-size: 1.2em;
line-height: 1.2em;
padding: 0;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 920px;
margin: 0 auto;
}
/* ============== Layout pictures ============== */
#topbar {
position: relative;
float: middle;
}
#usnbanner {
position: relative;
float: middle;
top:-4px;
}
#topheader{
position:relative;
float: middle;
top:-8px;
}
#mboxborder{
position: relative;
float: right;
background: #c7ced6;
width:747px;
height:300px;
top:-312px;
left:-2px;
}
#mbox{
position: relative;
float: right;
background: #e9f2fb;
width:746px;
height:300px;
top:-612px;
left:-2px;
}
#navbarborder{
position: relative;
float: middle;
background: #c7ced6;
width:164px;
height:300px;
top:-12px;
left:5px;
}
#navbarbox{
position: relative;
float: left;
background: #e9f2fb;
width:162px;
height:300px;
top:-312px;
left:6px;
}
#downbar{
position: relative;
float: left;
top:-612px;
}
#dboxborder{
position: relative;
float: left;
background: #6da7e6;
width:918px;
height:214px;
top:-616px;
left:0px;
}
#dbox{
position: relative;
float: left;
background: #e9f2fb;
width:910px;
height:208px;
top:-828px;
left:4px;
}
/* Reclama Google Adsense */
#gleader{
position: relative;
float: left;
top:-1526px;
left:2px;
}
#gside{
position: relative;
float: left;
top:-1480px;
left:665px;
}
/* ======= flag icons ======= */
#roflag{
position: relative;
float: left;
top:-1840px;
left:520px;
}
#usflag{
position: relative;
float: left;
top:-1840px;
left:490px;
}
/* ======== Big Buttons ====== */
#bbhome{
position: relative;
float: left;
top:-1518px;
left:48px;
}
#bbservers{
position: relative;
float: left;
top:-1518px;
left:138px;
}
#bbforums{
position: relative;
float: left;
top:-1518px;
left:208px;
}
#bbfiles{
position: relative;
float: left;
top:-1162px;
left:-157px;
}
#bbnews{
position: relative;
float: left;
top:-1162px;
left:-60px;
}
#bblinks{
position: relative;
float: left;
top:-1162px;
left:33px;
}
/* ============= Navigation Bar =========== */
#nhome{
position: relative;
float: left;
top:-1478px;
left:-608px;
}
#nborder1{
position: relative;
float: left;
top:-1463px;
left:-698px;
}
#nforum{
position: relative;
float: left;
top:-1446px;
left:-791px;
}
#nborder2{
position: relative;
float: left;
top:-1461px;
left:-237px;
}
h1 {
font: 1.5em/1.8em Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
}
p {
margin-bottom: 1.5em;
color: #ffffff;
}
/* ---------- 3. links and navigation ---------- */
/* ---------- 4. fonts ---------- */
/* ---------- 5. images ---------- */
Yours gratefully and impatiently, Sergiu. I am trying to get some URLs to wrap within table cell which I am able to do with the CSS "word-wrap:break-word". However, when it comes to Mozilla, this CSS property does not work. I understand that the word-wrap property is specific to IE. But does anyone know of a way to make this work with Mozilla? If I have to parse the string incvolved with Javascript, so be it! (But please don't make me!!) Hi How can I wrap a long line of text inside a fixed width div? I've tried every thing possible to make the words spread out in Firefox (I don't know about IE6 or 7): Display: block; text-align: left; left: 0px... It doesn't work. PHP Code: <ul> <li style=""> <a href="http://www.....com/Merchant2/merchant.mvc" onmouseover="<?php //changeImages('index_10', 'images/index_10-over.gif'); return true;?>" onmouseout="<?php //changeImages('index_10', 'images/index_10.gif'); return true;?>"><span style="position: relative; left: 0px; text-align: left; background-color: #eeeeee; border: 1px solid #000000; width: 30px; height: 10px; display: block; padding: 10px 100px 10px 100px; font-family: Verdana, Arial, Times New Roman; text-decoration: none; font-weight: bold; font-size: 16px; color: #000000;">Online Store<?php //<img NAME="index_10" SRC="images/index_10.gif" WIDTH=167 HEIGHT=33 BORDER=0 ALT="Online Store">?></span> </a> </li> </ul> I have a series of horizontal radio buttons which are generated dynamically from a database record set. There are 3 sets on 3 different rows. The problem is the labels for the buttons are not the same length so when the page is generated the radio buttons do not line up neatly, vertically. Is there a way of getting a CSS style to put a tab at the end of a word so that the next radio button lines up. Or alternatively is there an even easier way to do this. The obvious solution is to nest a two column table with fixed length column and have this repeat, rather than a single row. But there may be a more elegant method. hi i have a page that contains a large html table. this table spans many pages (in internet explorer it spans 6 pages). however, when i view the print preview in firefox it only shows 1 of 1 page, and at the bottom of the page, where i would expect a page break to exist, the table continues on and then off the bottom of the page. basically, it seems to be attempting to render the entire table on to one page, even though it won't fit. has anyone got any ideas how i can make this table print on multiple pages? i've read somewhere that gecko based browsers have a problem with floated content, but i'm sure i've un-floated everything. thanks in advance. dave I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods ie testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something how can I make css break that up so the browser window won't scroll vertically? Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page? I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any. What am I missing here? Thanks Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - This is the line in my index.html: PHP Code: <PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> This is my PRE code in style.css: PHP Code: PRE { BORDER-RIGHT: #2f6fab 1px dashed; PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9; width: 90%; } PRE.yup { COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; text-align: left; width: 80%; margin: 12px auto; } The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas? I just can't seem to figure this out! it is driving me nuts! The page I am working on is he http://www.iskippedlunch.com/z_test/index_2.php and the style sheet is he http://www.iskippedlunch.com/z_test/styles/shfb_basic.css I am using php to import sections into the page. For some reason when I include the Client Story (blue) section on the homepage all the content in the green sidebar gets pushed way down the page in a couple versions of IE6. I have narrowed the problem down to this area of code, it is the only part that makes the page go wonky. I even rewrote the CSS, but I must be missing something. The lower levels of the site are based on this home page, and have the same problem if the main (white) content is long. You can see how some have the problem and some display correctly. Help will be greatly appreciated, my eyes are getting crossed! PS, on some of the lower level pages, the (orange)footer background creeps up the page! This is new! Hello, I posted this in the HTML forum too but didnt get any replies so maybe people in here know it. When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached? thanks in advance I've got some words that I need to show up in the margin. However, take the words and rotate them 90 degrees. That's how I need it to show up. Right now, I'm using an image and it's coming out like crap on some browsers and find on others. Is there any way to do this with css? |
|||||||