pretekanie textu

beginner · Napísal **beginner**: 05.08.2008 15:50

Caute,potrebujem poradit ako nastavit div aby mi v nom zobrazeny obsah nepretekal za okraj...existuje na to nejaka css finta ?

suchy · Napísal **suchy**: 05.08.2008 15:54

overflow:hidden; pripadne auto

beginner · Napísal autor témy **beginner**: 05.08.2008 16:00

ta funkcia overflow mi nejak neriesi problem neviem preco...skusal som to s hodnotou hidden aj auto a nepomohlo to

GoodWill · Napísal **GoodWill**: 05.08.2008 16:10

daj link, asi tam mas iny problem nez popisujes

beginner · Napísal autor témy **beginner**: 05.08.2008 16:12

tu mozte vidiet to pretekanie: http://flaber.fl.funpic.de/index.php
no takze takto...v istom dive kde sa mi zobrazuje obsah stranky mam priradeny identifikator #content a ten mam nastaveny takto:
#content
{
width: 100%;
margin:10px;
overflow:auto;
}

cely css kod:

Kód:

body
{
margin: 0;
font-family: "Verdana";
font-size: 11px;
}

#container
{
text-align: left;
width: 760px;
height: 100%;
margin: auto;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}

#header
{
width: 100%;
height: 80px;
background: url('images/header_bg.png');
}

img.logo
{
margin-left: 15px;
}

#headerbar
{
width: 100%;
height: 3px;
background: url('images/headerbar.png');
}

#navigation
{
width: 100%;
height: 20px;
background: url('images/nav_bg.png');
border-bottom: 1px solid #CCCCCC;
}

a.navlink
{
float: left;
display: block;
height: 20px;
width: 80px;
text-decoration: none;
color: #999999;
font-weight: bold;
line-height: 20px;
text-align: center;
border-right: 1px solid #CCCCCC;
}

a.navlink:hover
{
background: #EFEFEF;
border-top: 2px solid #999999;
height: 19px;
}

#content
{
width: 100%;
margin:10px;
overflow:auto;
}

h1.areatitle
{
font-size: 18px;
font-weight: normal;
color: #330033;
font-weight: bold;
border-bottom: 1px dashed #CCCCCC;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding: 0;
}

.areatext
{
margin: 0;
padding: 0;
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}

#footer
{
width: 100%;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #999999;
height: 30px;
margin-top: 30px;
background:url(images/footer_bg.png);
}


.html_val
{
text-decoration:none;
line-height:30px;
float:right;
color: #999999;
}

.css_val
{
text-decoration:none;
line-height:30px;
color: #999999;
float:right;
margin-right:10px;
margin-left:5px;
}

pepek92 · Napísal **pepek92**: 05.08.2008 16:51

Toto by malo pomôcť:

Kód:

#content
{
width: 99%;
margin: 1%;
}

beginner · Napísal autor témy **beginner**: 05.08.2008 16:59

no ani to nepomohlo,lebo ked tam dopisem nejaky text,ktory je dlhi tak o5 to preteka,potrebujem to nejak vyriesit ze ked to je uz pri pravom okraji aby to zalomilo riadky

suchy · Napísal **suchy**: 05.08.2008 17:08

sak ono v html, ak je text dlhsi ako velkost bloku, sa zalamuje automaticky

beginner · Napísal autor témy **beginner**: 05.08.2008 17:40

#content
{
width: 99%;
margin: 1%;
}

tento zapis funguje dobre,moze mi ho niekto vysvetlit,ze co presne znamenaju tie percenta,neviem ze z coho sa to pocita,napr. ten margin 1% znamena co,nechapem

neutronmind · Napísal **neutronmind**: 05.08.2008 17:54

width:99%; znamena, ze sirka elementu je 99% z nadradeneho elementu (v tvojom pripade je to asi body, cize 99% obrazovky).
margin: 1%; znamena, ze vzdialenost od borderu elemntu az k dalsiemu elementu je 1% nadradeneho elementu.

beginner · Napísal autor témy **beginner**: 05.08.2008 17:57

jaaj,dik,a ten nadradeny element nie je nahodou div s id #container ?
no ale aj napriek tomu nemam rovnaky okraj od laveho a praveho borderu.

neutronmind · Napísal **neutronmind**: 05.08.2008 18:05

Hej, je, som si nekukal zdrojak. Skus tam dat

Kód:

#content 
{ 
width: 98%; 
margin-left: 1%;
margin-right: 1%; 
text-align: justify;
}

Mozno pomoze.

beginner · Napísal autor témy **beginner**: 05.08.2008 18:14

teraz to je kvalitka:D...diki,ale nerozumiem tomu cssku sakra,neviem preco to treba pisat margin -left a right ked samostatne margin by mal zasiahnut do vsetky 4och stran-top,right,bottom,left.

a este sa ta chcem nieco opytat ohladom tych %,to s tou sirkou width som pochopil,ale to s tym marginom tam je vlastne co ten nadradeny element ?

neutronmind · Napísal **neutronmind**: 05.08.2008 18:55

Takze to ide? Nedaval som tomu moc velku nadej.

Tak, treba skusat. Myslim, ze by to islo, aj keby tam das margin: 1%; , ale muselo by tam byt witdh: 98%;, ne 99. Aj ked nie som si celkom isty. Asi tam to jedno percento sa muselo rozdelit na 0.5 percenta pre pravy margin a dalsich 0.5 percenta pre lavy. Mozno to bol problem. A inak text-align: justify; sposobi, ze text nie je zarovnany dolava, ale do bloku.

A vzdy ked nastavujes percentualnu hodnotu, tak sa tie napr. sirka vypocita z nadradeneho elementu. Napr.

Kód:

<body style="width: 100%;">           <!-- sirka body je 100%, cize na celu obrazovku" -->

  <div style="width: 80%;">             <!--sirka tohto divu je 80% tela (body), cize 80% sirky obrazovky -->

    <div style="width: 50%;">          <!-- sirka tohto divu je 50% nadradeneho elemntu, cize toho divu nad nim... Takze ten prvy div ma 80 % obrazovky a tento je z neho polovica (50%) -->

    </div>

  </div>

</body>

Takto isto je to aj s marginmi.

beginner · Napísal autor témy **beginner**: 05.08.2008 19:03

dik za rady, a ked davam zarovnat text do bloku tak musim mat aj v danom dive funkciu display:block ?

neutronmind · Napísal **neutronmind**: 05.08.2008 19:07

Nie, to s tym nesuvisi. Inak som si teraz vsimol, preco ti tam ten text pretekal. Mal si tam

Kód:

#content 
{ 
width: 100%; 
margin:10px; 
overflow:auto; 
}

A spravne malo byt

Kód:

#content 
{ 
width: 100%; 
padding:10px; 
overflow:auto; 
}

(namiesto marginu padding). Tieto dve vlastnosti by si si nemal mylit. S tym paddingom ti to uz pojde. To len tak podotykam, aj ked uz je to zbytocne

beginner · Napísal autor témy **beginner**: 05.08.2008 19:17

ja som to tak skusal a aj tak to nefungovalo,ved padding je nieco take ako okraj ale z vnutra elementu nie ?
a naco je ta funkcia display ?

neutronmind · Napísal **neutronmind**: 05.08.2008 19:34

Ano, da sa to tak povedat, ale dosiahol by si tym v podstate rovnaky efekt ako v tomto pripade, kedze nemas nastaveny ziadny border. Ale to uz je vedlajsie.
Inak display nie je funkcia, ale vlastnost. Sluzi na nastavenie sposobu zobrazovania elementov. Moze nadpobudnut tieto hodnoty:
:inline - vtedy su vsetky elementy zobrazene pri sebe, na jednom riadku
:block - za kazdym elementom je odriadkovanie, ako keby tam bolo <br>
:none - element je neviditelny
To len tak strucne.

//Inak pre podrobnejsie informacie navstiv stranku www.jakpsatweb.cz, tam to mas vysvetlene podrobnejsie. Aj ked na ucenie je najlepsie si kupit nejaku dobru knizku.

beginner · Napísal autor témy **beginner**: 05.08.2008 19:50

no tak dik za rady,no to hej,knizka by bodla a tak isto aj nejaka o php

neutronmind · Napísal **neutronmind**: 05.08.2008 20:13

Z vlastnej skusenosti ti mozem odporucit knihu DHTML a CSS pro WWW. S tej som sa naucil kaskadove styly, aj ked nie je tam uplne vsetko. Ale imho lepsia kniha je Mistrovství v CSS, ktora sa mi dostala do ruk pred niekolkymi dnami. Tu by som ti na CSS doporucil najviac.
Na PHP by ti mala pomoct kniha PHP a MySQL: Rozvoj webových aplikací, na ktoru som pocul pozitivne ohlasy od viacerych ludi.

pretekanie textu

Podobné témy