ugrás a tartalomhoz

Text align - div tagon

Vrt · 2008. Jan. 19. (Szo), 17.05
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
 
1

padding

winston · 2008. Jan. 19. (Szo), 17.47
padding tulajdonság a divre. (van itten a weblaboron egy egész jó cikk a css-ről, meg magyarul is van egy csomó másik forrás, ajánlom olvasásra)
2

igaítás

Vrt · 2008. Jan. 19. (Szo), 19.58
Köszi. Elkezdem olvasni de így csak meg több kérdés jött elő, mikozben probálkozom. Ha tudnál ebben valami segítséget:

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
3

p és img

winston · 2008. Jan. 19. (Szo), 23.03
hát a float leginkább a képre kell, az is akkor, ha körül akarod "folyatni", és igen, külön a szövegre (p tag, alapesetben), és külön a képre is (img) kell css szabályokat létrehoznod. a még több kérdésre: igen, várható, hogy első körben még több lesz, de ha kicsit olvasgatsz, és kipróbálgatod, hamar bele lehet jönni
4

float

kerzo · 2008. Jan. 19. (Szo), 23.06
Ha jól értem, akkor kell egy DIV:

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

több kép

Vrt · 2008. Jan. 20. (V), 17.24
először is köszi a segítséget mindenkinek.

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
6

jobbra, balra, középre

kerzo · 2008. Jan. 20. (V), 18.23
Mivel valószínűleg több dobozban is szükség van a képek igazítására, így nem javaslom az ID-t. Helyette egyszerűbb a CLASS. Szóval a forrás valahogy így néz majd ki.

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

szovegnel is

Vrt · 2008. Jan. 21. (H), 12.32
Kerzo!

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
8

overflow

kerzo · 2008. Jan. 21. (H), 17.53
Egy kicsit megfogtál. :)
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.
9

padding

Vrt · 2008. Jan. 21. (H), 20.29
Kerzo!

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
10

Kodszínező!

sly · 2008. Jan. 21. (H), 22.19
Emberek, használjatok kódszínezőt!
11

.szoveg

Jano · 2008. Jan. 21. (H), 22.43
Figyelj, a kettő nem ugyanaz!
.box szoveg {}
és
.box .szoveg
Az első a szoveg nevű elemre vonatkozna a második minden olyan elemre aminek class-a szoveg.
12

siker;)

Vrt · 2008. Jan. 21. (H), 23.39
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;
    
}

div#cont-big_ .bemutat {

width: 345px;
height: 100px;
margin-left: 10px;
margin-right:10px;

}
A válaszaitoknak és a kisérletezgetéseknek köszönhetően csak összejött a fenti css -el. Valószínűnek tartom h. meg így is valami nem kerek, de legalább jó. Azt nem tudom h miért tolódik el jobbra ha a paddinak adok értéket...nya mind1..