Problém CSS DIV + text – CSS – Fórum – Programujte.com

Dobrý deň, mám tento CSS kód:

#faq_lava
{
background: url(images/icons/faq_lava.png) no-repeat;
display:inline-block;
width: 37px;
height: 30px;
}
#faq_stred
{
background: url(images/icons/faq_stred.png) repeat-x;
display:inline-block;
padding-top:16px;
}
#faq_prava
{
background: url(images/icons/faq_prava.png) no-repeat;
display:inline-block;
width: 53px;
height: 30px;
}

A toto v HTML:

<div id="faq_lava"></div><div id="faq_stred">Obsah DIV</div><div id="faq_prava"></div>

A výsledok je tento

Chcel by som aby ten text pasoval, tak ako by mal, ale neviem, akosi sa mi to nedarí spraviť.

Prosím o pomoc.

Ďakujem veľmi pekne.

Zo zbežného pohľadu usudzujem, že tvoj problém by sa mal vyriešiť upravením hodnoty(padding-top: 16px;) v následujúcej časti kódu.. Videl by som to tak na 9-10px, ale uvidíš sám..

#faq_stred
{
background: url(images/icons/faq_stred.png) repeat-x;
display:inline-block;
padding-top:16px;
}

No práveže to sa stane toto:

Naozaj nikto, kto by mi vedel pomôcť, ako by som to mal spraviť?

#1 Anonym
K samotnému OBSAHU DIV-u, by si mohol pridať:

display: block;
padding-bottom: 5px;

namiesto tých 5 samozrejme môže byť iné číslo, čím väčšie, tým viac hore by sa to malo posunúť.

#5 fo
no, ked sa tak na to pozerám, ti úplne stači ANV-ovo riešenie, akorát nahrat to padding-top za padding-bottom :)

Všetky hore uvedené možnosti som skúšal, buď to spravilo, to čo uvádzam v #3. príspevku, alebo to spravilo veľkú medzeru za DIVMI ale text ostal stále nízko...

#5 fo

A keď skúšam toto riešenie, tak sa to natiahne na celú plochu containera, preto tam je ten inline-block.

Ale teraz už iba strielam od boku... 
Skús vytvoriť ešte jeden div a vlož do neho vlastvost ako: text-align: center;

<div id="faq_lava"></div><div id="faq_stred"><div id="faq_obsah"Obsah DIV</div></div><div id="faq_prava"></div>

#faq_stred
{
background: url(images/icons/faq_stred.png) repeat-x;
display:inline-block;
padding-top:16px;
}

Toto ANV-ovo riešenie je správne, akurát tam zmeň to padding-top na padding-bottom.

Tak dosiahneš opačného efektu, ako ti vyšiel predtým (posunutie dole), takže sa to posunie hore.

#10 fo

#faq_stred
{
background: url(images/icons/faq_stred.png) repeat-x;
display:inline-block;
padding-bottom:16px;
}

#11 fo

Už som to skúšal viackrát, a aj teraz s týmto:

#faq_stred
{
background: url(images/icons/faq_stred.png) repeat-x;
display:inline-block;
padding-bottom:16px;
}

Ale výsledok je stále takýto:

a keď ľavú nastavím napr. takto:

#faq_lava
{
background: url(images/icons/faq_lava.png) no-repeat;
display:inline-block;
width: 37px;
height: 30px;
padding-bottom:16px;
}

tak takto vyzerá výsledok:

či to dám ako padding-top, či bottom...

Skús nastaviť padding-bottom na väčšiu hodnotu, napr. na 35 pixelov. Malo by sa to posunúť smerom nahor.

#13 fo

Výsledok sa nezmenil, stále to isté, max. to spraví medzeru, inak sa to ani len nepohne.

 Co takhle? Uzavrit to do bloku. Pak si muzes klidne nastavit u pozicovani zleva, zprava, margin stredu zleva, zprava. Inline-block ale spoustu prohlizecu moc nepouziva a muze se zachovat ruzne. Tez neresis line-height/vertical-align, mozna by to bylo lepsi misto height a nemusel bys pak resit padding. Tez muzes pouzit tabulkovy layout display:table, table-cell a pod.

<style>
.button span {
background: url(images/icons/faq_lava.png) no-repeat;
display:inline-block;
width: 37px;
height: 30px;
}
.button span.m
{
background: url(images/icons/faq_stred.png) repeat-x;
width: auto;
}
.button span.r
{
background: url(images/icons/faq_prava.png) no-repeat;
}
</style>
<span class=button>
  <span class=l><span>
  <span class=m><span>
  <span class=r><span>
</span>

#15 peter

Ďakujem za pomoc, skúsil som to a výsledok je nasledovný:

Pockej, pockej, nedekuj za pomoc, ale sam se snaz resit :) napriklad v textu jsem ti dal par tipu. Ze tys to ani necet, nezkousel?

A vysledek muzes davat klidne na jsfiddle.net/ , at si to kazdy muze prohlednout online. Tvuj obrazek je nam k nicemu, to jsme si mohli nasimulovat sami, kdybycho chteli.

http://jsfiddle.net/NwT7p/

#17 peter

Nepatrím moc k profíkom s CSS, takže skúšam to čo ako tak viem spraviť.

Prikladám ako mi to teraz vyzerá:

http://jsfiddle.net/UTs4t/

Funkčné riešenie.. ;-)

http://jsfiddle.net/UTs4t/1/

------

Problém bol v tom, že nebola presne definovaná pozícia elementu.. Stačí jednoduché nastavenie na absolútnu.. viz. riešenie hore..

#20 ANV
Je to síce riešenie, ale pokiaľ sa tam zadá dlhý text, tak to správne nefunguje

#21 Anonym
http://jsfiddle.net/UTs4t/2/

Treba sa s tým hold pohrať.. ;-)

#22 ANV

Ďakujem, už to vyzerá skvelo, ktorý atribút sa tam stará o "dĺžku slova/vety" ? Lebo ak sa tam napíše o niečo viac, znova sa to pokazí... 

#23 Anonym

Jedná sa o hodnotu v "#faq_prava" a konkrétne je to  "margin-left: 70px;" čím vyššia táto hodnota bude, tým ďalej sa ti pravá strana bloku pohne. Čiže nepracuješ s dĺžkou slova ani nič podobné, iba posúvaš "faq_prava" na pravú stranu tak, ako potrebuješ.. Nejedná sa zrovna o najelegantnejšie riešenie, ale funguje a to je základ.. ;-)

Nižšie som to aj troška pooznačoval.. :-)

#faq_lava
{
background: url(http://s15.postimg.org/…faq_lava.png) no-repeat;
display:inline-block;
width: 37px;
height: 30px;
position:relative;
}
#faq_stred
{
background: url(http://s22.postimg.org/…aq_stred.png) repeat-x;
display:inline-block;		
padding-top: 5px;		//Vnútorny okraj od hora
padding-bottom: 5px;		//Vnútorny okraj od dola
position: absolute;		//Typ pozície
}
#faq_prava
{
background: url(http://s16.postimg.org/…aq_prava.png) no-repeat;
display:inline-block;
margin-left: 70px;		//Vonkajší okraj od ľava
width: 53px;
height: 30px;
}

#23 Anonym
neviem, či som dobre pochopil, čo konkrétne potrebuješ...

kedže ten text je vlastne "block", tak by si mohol nastavit max-width, aby nebol príliš dlhý.

Alebo chceš dlhšie slovo "viac natlačiť na seba" ? - tak potom letter-spacing

#25 fo
Nesnaží sa napchať text do bloku, ale snaží sa prispôsobiť blok textu..

#26 ANV
Inak,

#faq_stred
{
background: url(http://s22.postimg.org/…aq_stred.png) repeat-x;
display:inline-block;		
padding-top: 5px;		//Vnútorny okraj od hora
padding-bottom: 5px;		//Vnútorny okraj od dola
position: absolute;	

Prečo je tu position : absolute?

Tak by sa dotyčný blok umiestnil do ľavého horného tela celého dokumentu..

Alebo je tam zase nejaký fígeľ s display: inline-block?

A prečo je zase faq_vlavo position: relative? Ospravedlňujem sa, za moje prípadné omyly/dotazy, ale tiež nie som v CSS najviac doma.
 

#24 ANV

Ďakujem veľmi pekne už to funguje skvelo, ako som aj chcel :) 

Ešte sa budem musieť nejako pohrať s automatizáciou aby sa ten margin-left posúval podľa toho aký dlhý sa načíta reťazec v PHP, keďže niekedy to môže byť dlhá veta, inokedy kratšia, tzn. pri krátkej by bola pravá strana moc ďaleko :)

#28 Anonym
Mno, objavil som vyhovujúce a osobne si myslím aj dostatočne elegantné riešenie vďaka vlastnosti "vertical-align"..

Teraz to bude fungovať bez akéhokoľvek absolútneho nastavovania, čož ti aj umožní využiť zlúčenie s PHP..

http://jsfiddle.net/UTs4t/4/

#29 ANV

Veľká,veľká vďaka, už to ide super, predtým riešenie som riešil s meraním reťazca v PHP a následným priraďovaním veľkosti margin-left. ale samozrejme toto je omnoho dokonalejšie :)