ďťż

[XHTML+CSS] Zbyt długie słowa wychodzą poza diva

Podstrony

telcocafe

Wiem, pytanie głupie ;).
Na poczatek zrzucik.
Plik css:
body { font-family: tahoma, helvetica, arial, sans-serif; font-size: 11px; text-align: center; background: #DEDEDE; color: #000000; } img { border: 0; } #wrapper { margin: auto; text-align: justify; width: 784px; position: relative; background: url(images/body_bg.gif) repeat-y; } #body { background: url(images/body_b.gif) no-repeat bottom; } h1, h2, div, ul, li { padding: 0; margin: 0; list-style: none; } h1 { color: #000000; text-align: left; } h2 { color: #000000; font-weight: normal; } h3 { font-size: 10px; } a { color: #000000; text-decoration: none; font-weight: bold; } a:hover { color: #e38b00; } .clear { clear: both; } #left { margin: 0; padding-top: 54px; background: url(images/menu_t.gif) no-repeat; float: left; width: 165px; } #left h3 { font-size: 10px; color: white; margin: 1em 0; padding: 0; } #left p { margin: 1em 0; padding: 0; } #nav { background: url(images/menu_bg.gif) repeat-y; } .menu {margin-top: 10px;} .menu_head { background: url(images/menu_head.gif) no-repeat; height: 20px; padding-top: 4px; text-align: center; font-weight: bold; text-transform: uppercase; } .menu_text { background: url(images/menu_bottom.gif) bottom no-repeat; padding: 5px; } .buttons { text-align: center; } img.buttons { border: 0px; margin:1px; } #logo { position: absolute; left: 165px; top: 0; } #content .inner { float: left; padding-top: 48px; margin: 20px 0 10px 30px; width: 550px; } #footer { margin-top: 10px; padding: 20px 0; text-align: center; color: #fff; } #footer a { text-decoration: underline; } textarea.paste { width: 550px; height: 200px; border: solid 2px; font-family: Courier, monospace; font-size: 13px; } .form_info { border: solid 2px; } p.newest { text-align: left; } a.newest { font-weight: normal; } .pasted { width: 550px; background: #DEDEDE; border: solid 2px; padding: 4px; } .pasted_info { width: 544px; background: #DEDEDE; border-bottom: solid 2px; margin-left: auto; margin-right: auto; } .pasted_text { width: 544px; }
I plik html odpowiadający temu zrzutowi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>PastePlace - strona g�na</title> <link href="skins/default/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="body"> <div id="left"> <div id="nav"> <div class="menu"><div class="menu_head">Menu</div><div class="menu_text"><a href="index.php">Wklej</a> <a href="coding.php">Kodowanie</a> </div></div><div class="menu"><div class="menu_head">NAJNOWSZE</div><div class="menu_text"><a href="index.php?show=7PxJiR1" class="newest">Przez Anonymous o 20:47:17 15.12.2005</a> <a href="index.php?show=5LuLqC7" class="newest">Przez Anonymous o 20:07:46 15.12.2005</a> <a href="index.php?show=8CiAxB7" class="newest">Przez v o 20:03:32 15.12.2005</a> <a href="index.php?show=1MhBsX0" class="newest">Przez Anonymous o 20:02:37 15.12.2005</a> <a href="index.php?show=9QgRcD1" class="newest">Przez dodek o 20:00:37 15.12.2005</a> </div></div><div class="menu"><div class="menu_head">BUTTONY</div><div class="menu_text"><div class="buttons"> <a href="http://validator.w3.org/check?uri=referer"><img src="skins/default/images/button_xhtml.png" class="buttons" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/"><img src="skins/default/images/button_css.png" class="buttons" alt="Valid CSS" /></a> <a href="http://www.kernel.org"><img src="skins/default/images/button-linux.png" class="buttons" alt="Linux powered" /></a> <a href="http://www.nosoftwarepatents.com/"><img src="skins/default/images/button_free.png" class="buttons" alt="No software patents" /></a> <a href="http://www.bykom-stop.avx.pl/"><img src="skins/default/images/bykom_stop.png" class="buttons" alt="Bykom stop!" /></a> </div></div></div> </div> </div> <div id="content"> <h1 id="logo"><a href="/"><img src="skins/default/images/logo.gif" width="619" height="54" alt="Logo" /></a></h1> <div class="inner"> <div class="pasted"><div class="pasted_info"> wklejone przez Anonymous o 20:47:17 15.12.2005</div><div class="pasted_text"><div class="perl">#!/usr/local/bin/perl ###################################################################### #  BEFORE TRYING TO EDIT THIS SCRIPT, READ THE README FILE ###################################################################### # #     Dream Catchers CGI Scripts               Feel free to modify #     Book of Guests 2.0                       this script to your #     Created by Seth Leonard                  needs, but please #     for Dream Catchers Technologies, Inc.    keep this portion so #                                              that I get credit.  #     http://dreamcatchersweb.com/scripts      The same goes for #                                              distribution. # #     ©1996/1997 Dream Catchers Technologies, Inc., #     All Rights Reserved # ###################################################################### # ONLY EDIT THIS PART OF THE SCRIPT!!!! $guestlocation = "http://www.something.com/~you/guestbook.htm"; $guestpath = "/home/you/public_html/guestbook.htm"; $cgilocation = "http://www.something.com/cgi-bin/you/guestbook.cgi"; $mailprog = '/usr/bin/sendmail'; $youmail = 'you@something.com'; $yourname = "Your Name Here"; $getdate = "/bin/date"; # DO NOT EDIT BELOW THIS LINE!!!! ##################################################################### <a href="http://www.perldoc.com/perl5.6/pod/func/read.html">read</a>(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); @pairs = <a href="http://www.perldoc.com/perl5.6/pod/func/split.html">split</a>(/&/, $buffer); foreach $pair (@pairs) {         ($name, $value) = <a href="http://www.perldoc.com/perl5.6/pod/func/split.html">split</a>(/=/, $pair);         $value =~ <a href="http://www.perldoc.com/perl5.6/pod/func/tr.html">tr</a>/+/ /;         $value =~ <a href="http://www.perldoc.com/perl5.6/pod/func/s.html">s</a>/%([a-fA-F0-9][a-fA-F0-9])/<a href="http://www.perldoc.com/perl5.6/pod/func/pack.html">pack</a>("C", <a href="http://www.perldoc.com/perl5.6/pod/func/hex.html">hex</a>($1))/eg;         $value =~ <a href="http://www.perldoc.com/perl5.6/pod/func/s.html">s</a>///g;         $value =~ <a href="http://www.perldoc.com/perl5.6/pod/func/s.html">s</a>/<([^>]|\n)*>//g;         $INPUT{$name} = $value; } $date = `$getdate +"%A, %B %d, %Y at %T (%Z)"`; <a href="http://www.perldoc.com/perl5.6/pod/func/chop.html">chop</a>($date); &noname unless $INPUT{'name'}; <a href="http://www.perldoc.com/perl5.6/pod/func/open.html">open</a> (FILE,"$guestpath"); @lines = <FILE>; <a href="http://www.perldoc.com/perl5.6/pod/func/close.html">close</a>(FILE); <a href="http://www.perldoc.com/perl5.6/pod/func/open.html">open</a> (GUEST,">$guestpath");</div></div></div> </div>   </div> <div class="clear"></div> <div id="footer"> © Copyright by Dodek. All rights reserved. </div> </div> </div> </body> </html>
Co zrobić, by zbyt długie słowa nie wychodziły poza diva?

Próbowałem wordwrap(), ale nie działa tak, jak bym chciał.
Użytkownik dodek edytował ten post 15 grudzień 2005, 20:49

skróć to co wyjrzdrza albo usuj te ######## one nie są potrzebne

skróć to co wyjrzdrza albo usuj te ######## one nie są potrzebne

OMG, zmodyfikuj tak aby to nie wyjezdrzało to proste obetnik troszke i jusz

OMG, zmodyfikuj tak aby to nie wyjezdrzało to proste obetnik troszke i jusz

jedyne co mi przychodzi do głowy, to skorzystanie z parametru w CSS z-index, ale nie wiem czy przyniesie to porządany skutek :)

> http://kurshtml.boo.pl - tu możesz sobie o tym przeczytać

try ustawić clear na both

try ustawić clear na both

Żadnego efektu, ale dzięki.
Ktoś jeszcze ma jakieś pomysły?

style="overflow:auto"?

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL