Problém CSS DIV + text – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Anonym
~ Anonymní uživatel
429 příspěvků
24. 5. 2013   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 95.105.210.–
Reklama
Reklama
ANV+1
Návštěvník
25. 5. 2013   #2
-
0
-

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;
}
Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
Anonym
~ Anonymní uživatel
429 příspěvků
25. 5. 2013   #3
-
0
-

No práveže to sa stane toto:

Nahlásit jako SPAM
IP: 95.105.210.–
Anonym
~ Anonymní uživatel
429 příspěvků
25. 5. 2013   #4
-
0
-

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

Nahlásit jako SPAM
IP: 95.105.210.–
fo
~ Anonymní uživatel
37 příspěvků
26. 5. 2013   #5
-
0
-

#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úť.

Nahlásit jako SPAM
IP: 188.167.34.–
fo
~ Anonymní uživatel
37 příspěvků
26. 5. 2013   #6
-
0
-

#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 :)

Nahlásit jako SPAM
IP: 188.167.34.–
Anonym
~ Anonymní uživatel
429 příspěvků
26. 5. 2013   #7
-
0
-

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...

Nahlásit jako SPAM
IP: 95.105.210.–
Anonym
~ Anonymní uživatel
429 příspěvků
26. 5. 2013   #8
-
0
-

#5 fo

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

Nahlásit jako SPAM
IP: 95.105.210.–
ANV+1
Návštěvník
26. 5. 2013   #9
-
0
-

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>
Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
fo
~ Anonymní uživatel
37 příspěvků
26. 5. 2013   #10
-
0
-

   

#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.

Nahlásit jako SPAM
IP: 188.167.34.–
fo
~ Anonymní uživatel
37 příspěvků
26. 5. 2013   #11
-
0
-

#10 fo

#faq_stred
{
background: url(images/icons/faq_stred.png) repeat-x;
display:inline-block;
padding-bottom:16px;
}
Nahlásit jako SPAM
IP: 188.167.34.–
Anonym
~ Anonymní uživatel
429 příspěvků
26. 5. 2013   #12
-
0
-

#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...

Nahlásit jako SPAM
IP: 95.105.210.–
fo
~ Anonymní uživatel
37 příspěvků
26. 5. 2013   #13
-
0
-

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

Nahlásit jako SPAM
IP: 188.167.34.–
Anonym
~ Anonymní uživatel
429 příspěvků
26. 5. 2013   #14
-
0
-

#13 fo

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

Nahlásit jako SPAM
IP: 95.105.210.–
peter
~ Anonymní uživatel
2532 příspěvků
27. 5. 2013   #15
-
0
-

 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>
Nahlásit jako SPAM
IP: 193.84.207.–
Anonym
~ Anonymní uživatel
429 příspěvků
27. 5. 2013   #16
-
0
-

#15 peter

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

Nahlásit jako SPAM
IP: 95.105.210.–
peter
~ Anonymní uživatel
2532 příspěvků
27. 5. 2013   #17
-
+1
-
Zajímavé

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.

Nahlásit jako SPAM
IP: 193.84.207.–
peter
~ Anonymní uživatel
2532 příspěvků
27. 5. 2013   #18
-
0
-
Nahlásit jako SPAM
IP: 193.84.207.–
Anonym
~ Anonymní uživatel
429 příspěvků
27. 5. 2013   #19
-
0
-

#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/

Nahlásit jako SPAM
IP: 95.105.210.–
ANV+1
Návštěvník
27. 5. 2013   #20
-
0
-

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..

Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
Anonym
~ Anonymní uživatel
429 příspěvků
27. 5. 2013   #21
-
0
-

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

Nahlásit jako SPAM
IP: 95.105.210.–
ANV+1
Návštěvník
27. 5. 2013   #22
-
0
-
Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
Anonym
~ Anonymní uživatel
429 příspěvků
27. 5. 2013   #23
-
0
-

#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í... 

Nahlásit jako SPAM
IP: 95.105.210.–
ANV+1
Návštěvník
27. 5. 2013   #24
-
0
-

#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;
}
Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
fo
~ Anonymní uživatel
37 příspěvků
27. 5. 2013   #25
-
0
-

#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

Nahlásit jako SPAM
IP: 188.167.34.–
ANV+1
Návštěvník
27. 5. 2013   #26
-
0
-

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

Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
fo
~ Anonymní uživatel
37 příspěvků
27. 5. 2013   #27
-
0
-

#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.
 

Nahlásit jako SPAM
IP: 188.167.34.–
Anonym
~ Anonymní uživatel
429 příspěvků
27. 5. 2013   #28
-
0
-

#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 :)

Nahlásit jako SPAM
IP: 95.105.210.–
ANV+1
Návštěvník
27. 5. 2013   #29
-
0
-

#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/

Nahlásit jako SPAM
IP: 62.197.220.–
"Bez činu zostávajú aj tie najkrajšie myšlienky bezcenné."
M.K. Gándhí
Anonym
~ Anonymní uživatel
429 příspěvků
27. 5. 2013   #30
-
+1
-
Zajímavé

#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 :) 

Nahlásit jako SPAM
IP: 95.105.210.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

[CSS] 4x Div vedle sebe — založil Martin M.

CSS - Text sharp — založil Cashis

CSS text menenie farieb — založil Anonym

G Chrome a bold text přes CSS — založil Doomista

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý