Text align - div tagon
Sziasztok!
Adott egy oldalon egy div tag. A text-align a boxon belül justify-re van allítva. Azt szeretném valahogy állítani hogy a div tagon belül levő szöveg ne fusson ki a széléig. Valahogy állíthatom a div tag belső margóit?
Köszi.
Krisztián
■ Adott egy oldalon egy div tag. A text-align a boxon belül justify-re van allítva. Azt szeretném valahogy állítani hogy a div tagon belül levő szöveg ne fusson ki a széléig. Valahogy állíthatom a div tag belső margóit?
Köszi.
Krisztián
padding
igaítás
Hogyan tudom megoladni, azt ha a div tartalmazni fog szöveget és képet is. Egy diven belül hogyan lehet mondjuk a képet jobbra rendezni a szöveget meg a kép bal oldalára. Probálkozam itt sok mindennel de nem áll össze. A képet is meg szöveget is el kellene nevezni és float parancsal játszani? Kicsit elvesztem a választ keresgélve.
Előre is köszi
Kriszitán
p és img
float
<div class="box">
</div>
Azt szeretnéd, hogy legyen benne kép és szöveg is:
<div class="box">
<img src="forras" />
sok-sok szöveg
</div>
Akkor kellene neki valamilyen formázás. Ez megy a stíluslapba:
.box {
width: 400px;
border: 1px solid #eaeaea;
padding: 20px;
text-align: left;
}
A padding csinál 20 pixeles belső margót, a text-align pedig balra igazítja a tartalmat.
Ebből a tartalomból kellene jobbra igazítani a képet:
.box IMG {
width: 50px;
height: 50px;
margin-bottom: 20px;
margin-left: 20px;
border: 1px solid #eaeaea;
float: right;
}
Float-tal jobbra igazítod, a borderral adsz neki keretet, a margin-bottom és margin-left megadja, hogy mekkora legyen a kép alsó, illetve bal margója (hogy ne fusson neki a szöveg), a width a szélesség, a height pedig a magasság.
több kép
Kerzo!
Úgy tűnik teljes a siker a leírásod alapján. Abban az esetben ha több képet szeretnék beszúrni ugyanebbe a div be, és szeretném ha az egyik bal, másik jobb, harmadik teszemfel középen kéne hogy legyen, akkor hogyan paraméterezzek? Mert most minden képet jobbra tesz ugye. Az <img src="forras" /> sort kellene kiegészítenem egy ID val majd a CSS fájlban .box IMG ID -val megadni képenként a formázást?
Vagy minden szakaszt külön divekbe rakjam bele és azt formázzam?
Üdv
Kriszitán
jobbra, balra, középre
<div class="box">
<img src="forras" class="right" />
sok sok szöveg. sok sok szöveg.
<img src="forras" class="center" />
sok sok szöveg. sok sok szöveg.
<img src="forras" class="left" />
sok sok szöveg. sok sok szöveg.
</div>
És ennek megfelelően át kell alakítani a stíluslapot is:
.box IMG.right {
width: 50px;
height: 50px;
margin: 10px 0 10px 10px;
border: 1px solid #eaeaea;
float: right;
}
.box IMG.center {
width: 50px;
height: 50px;
margin: 10px auto;
border: 1px solid #eaeaea;
display: block;
}
.box IMG.left {
width: 50px;
height: 50px;
margin: 10px 10px 10px 0;
border: 1px solid #eaeaea;
float: left;
}
A balra igazításnál csak annyi a különbség, hogy a float értéke left lett.
A középre igazításánál egy kicsit más a helyzet. Ugye ott nincs értelme, hogy a szöveg két oldalt megjelenjen, mert akkor olvashatatlan lesz. Ezért meg kell oldani, hogy elkülönüljön az előtte és az utána lévő szövegtől. Erre van a display: block. Ez annyit csinál, hogy a képet úgy jeleníti meg, mint a block típusú elemeket (h1, p stb). Persze ezzel még nem lesz középen. Ehhez be kell állítani a margót. Ha megnézed, akkor az előbbihez képest másként írtam. Most egy sorban van: margin: 10px auto; Ezt mindig az óramutató járásával megegyező irányban kell értelmezni. Tehát ebben az esetben 10px felül, jobb oldalon automatikus, alul 10 px, és balra is automatikus. Az auto beállítás azt jelenti, hogy a két oldalon lévő szabad távolságot egyenlő részben ossza el, így kerül az elem középre.
szovegnel is
Hihetelen de mindegyik pont úgy működik ahogy kell:)))
Még egy kérdés a témához engedj meg. Lehet h már totál összekutyultam a forráskódom és azért nem jó de...
Ugyan ebben a divben annyi szöveget és képet helyezek el h scroll ra van szükségem. Ez idáig rendben. De nem tudom rábírni h. a szöveg ne fusson neki a scroll bárnak. Próbálkoztam a marginokkal de valami gondolom nem csinálok jól. .box IMG.center analógiára próbáltam meg szöveggel is.. vagy itt hiába adom meg a <p class="szoveg"> tartalom </p>, valamint a css-ben a .box szoveg {... margin-right:10px} -t?
Kriszitán
overflow
Nem tudom, hogy mi lehet a probléma, mert nálam működik az alábbi beállításokkal:
.box {
width: 400px;
height: 100px;
border: 1px solid #eaeaea;
padding: 20px;
text-align: left;
overflow: auto;
}
A változás összesen annyi, hogy megadtam egy fix magasságot (height: 100px;), illetve magadtam az overflow: auto; tulajdonságot. Ezekkel a beállításokkal megy a scroll és nem ér ki a csúszkáig a szöveg, mert a padding a csúszka belső szélétől van.
padding
Lehet h. neked pont a padding miatt jó:)
A konténer css-kódja a következő nálam.
div#cont-big_ {
background: url(images/cont_big.gif);
overflow: auto;
font-size:11px;
color:#a8680a;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
position:absolute;
left:305px;
top:235px;
width:387px;
height:302px;
padding:0px;
text-align:justify;
line-height: 14pt;
}
Ebben az esetben frankó a scroll minden korrekt. De ha a paddingot mondjuk 20 ra rakom akkor a scroll megszűnik és a szöveg elmegy jobbra.
Kriszitán
Kodszínező!
.szoveg
siker;)