Box készítés

[Складной нож]

backgroun-position

Sajnos nem megy... de lehet én csinálom rosszul... ennyit módosítottam rajta:

Kód: [Kijelölés]

.doboz-belso { background: url('doboz/box-middle.png')  repeat-y;  background-position: 0px 500px; }az első azt adja meg, hogy balról hány px-re legyen, a második meg hogy fentről, de nem veszi figyelembe...

[Keveqiah]

backgroun-position

[Складной нож]

http://ebookz.hu/video.php?alkat=XHTML%20%E9s%20CSS (regelni kell!)


Ez a videó sorozat bemutatja hogyan lehet egy olyan dobozt csinálni ami neked kell:)

Helló... Ez nekem nem jó, mert ilyet én is tudok, a webpult-on így is csináltam, de... [kb]

Most kaptam 3sb képet...

Az egyiken a doboz teteje van, ami 344px magas, (azért ekkora, mert világosodik a doboz... domborodik úgy mint a webpult-on...)
Van egy csíkom, ami a közepétől jó és kb a közepétől kellene ismétlődjön...
és van az alja...

Ha én nem akarom ezeket még darabolgatni, az alsó módszer tökéletes, csak az a gond, hogy: a csík a doboz tetején is látszódik, kicsit csúnya a teteje... ha megtudnám adni hol kezdődjön a középső csík, akkor nem lenne gond...

[Metts]

http://ebookz.hu/video.php?alkat=XHTML%20%E9s%20CSS (regelni kell!)


Ez a videó sorozat bemutatja hogyan lehet egy olyan dobozt csinálni ami neked kell:)

[Складной нож]

Csak személyesen utálom. Mind1

Megnéztem a képeket, szerintem ezekre tökéletesen működik a doboz. Mi a problémád?

http://webpult.com/ezBaj.png
Ez a bajom vele...

így jó:

Kód: [Kijelölés]

<style type="text/css">
.doboz, .doboz-belso, .doboz-belso-tartalom { display: block; color: #fff; }
.doboz { background: url('box-bottom.png') no-repeat bottom; width: 721px; padding-bottom: 21px; }
.doboz-belso { background: url('box-middle.png') repeat-y; }
.doboz-belso-tartalom { background: url('box-top.png') no-repeat; padding: 20px 20px 0px 20px; }
</style>

Kód: [Kijelölés]

<div class="doboz">
<div class="doboz-belso">
<div class="doboz-belso-tartalom">
Ez itt a minta szöveg <br/>


</div>
</div>
</div>
(nem az én megoldásom, de jó...) [azaz a felső sarkai nem tökéletesek]

[Suttogó]

Mi a baj a rar-ral?

Csak személyesen utálom. Mind1

Megnéztem a képeket, szerintem ezekre tökéletesen működik a doboz. Mi a problémád?

[Складной нож]

Az osztályokért bocs, elnéztem.
A rar-t nem tudom (akarom) most megnyitni, ha feltöltöd őket vagy bezippeled megnézem.

Mi a baj a rar-ral?

[Suttogó]

CSS-ben class-ot hoztál létre, nem ID-t..


Mellesleg nekem ezek a képek vannak hozzá: http://webpult.com/doboz.rar
Így ez a megoldás nem jó...

Az osztályokért bocs, elnéztem.
A rar-t nem tudom (akarom) most megnyitni, ha feltöltöd őket vagy bezippeled megnézem.

[Складной нож]

CSS-ben class-ot hoztál létre, nem ID-t..


Mellesleg nekem ezek a képek vannak hozzá: http://webpult.com/doboz.rar
Így ez a megoldás nem jó...

[Suttogó]

Kód: HTML

1. <div id="doboz">
2. <div id="doboz_teteje">Doboz teteje</div>
3. <div id="doboz_szoveg">Doboz szövege</div>
4. <div id="doboz_alja">Doboz alja</div>
5. </div>
6.  

Kód: CSS

1. .doboz{
2. padding: 0px;
3. margin: 0px;
4. width: dobozszelesseg;
5. }
6. .doboz_teteje{
7. background: url('tetejekep.png') no-repeat;
8. height: kepmagassaga;
9. overflow: hidden;
10. text-align: center;
11. }
12. .doboz_alja{
13. background: url('aljakep.png') no-repeat;
14. height: kepmagassaga;
15. overflow: hidden;
16. text-align: center;
17. }
18. .doboz_szoveg{
19. background: #kozepeszin; /* De lehet kep is, de csak akkor lesz szep ha 1 px magas */
20. padding-left: 5px; /* Csak hogy ne folyjon ki egész a szélekig a szöveg */
21. padding-right: 5px;
22. }

[Складной нож]

...

Nekem van három db képem...
1.: doboz tetejétől kb a közepéig [a tetejétől a közepéig világosodik]
2.: doboz közepe [itt már egyszínű]
3.: doboz alja

Olyat már csináltam CSS-ben, hogy megadtam a doboz tetejét háttérnek, alá pedig azt a hátteret tettem amivel folytatódik a doboz, csak az a gond, hogy ehhez fel kell darabolni a dobozt jobban. (bal és jobb szélek)

Nem lehet egy div-nek több hátteret adni? ... mármint úgy, hogy az egyik a másik alatt legyen és az csak X-től kezdve + ismétlődjön?

Most így próbáltam de nem jó:

Kód: [Kijelölés]

<div class="doboz">
<div class="doboz_benne">
</div>
</div>


Kód: [Kijelölés]

.doboz
{
margin-top:13px;
background-image:url(doboz/box-top.png); background-repeat:no-repeat;
width:721px;
margin-bottom:0px;
}
.doboz_benne
{
margin:0px;
background: url(doboz/box-middle.png) repeat 0px 344px;
}344px lenne a felső darabja..

[Suttogó]

Sajnos cssből nem lehet html kódot módosítani. Úgyhogy erre a kérésedre nem nagyon lehet választ adni.

[DaniNet]

Forráskód szépség szempontjából szeretném, ha segítenétek megoldani ezt a problémám:

Jelenleg ahhoz, hogy behívjak egy dobozt, ezzel a szép kinézettel, több div indítására van szükség, mert ugye, alsó,felső,oldal, sarkok, stb..
Nem lehet azt megoldani, hogy 1, max 3 divvel ugyan ezt?

Én valami olyanra gondoltam, hogy csinálni a css-ben egy új classot, amiben összefűzni az értékeket, meghívni azokat amiket kell sorrendbe.. vagy ez hülyeség?
itt a html kód:

Kód: HTML

1. <div class="menu_box">
2.                 <div class="border_right_box">
3.                         <div class="border_top_box">
4.  
5.                                 <div class="corner_top_left_box"></div><div class="corner_top_right_box"></div>
6.  
7.                         </div>
8.                         <div class="box">
9. <div class="title">Idézet</div>
10.                              <p class="testimonial">
11. Dolgozni csak pontosan, szépen, ahogy a csillag megy az égen, úgy érdemes.<br>
12. <strong>József Attila</strong>
13.                              
14.                              </p>
15.  
16.                         </div>
17.                         <div class="border_bottom_box">
18.                                 <div class="corner_bottom_left_box"></div><div class="corner_bottom_right_box"></div>
19.                         </div>
20.  
21.                 </div> 

itt pedig a css:

Kód: CSS

1. .menu_box {
2.         width:          288px; /* A CSS Box szélessége, tetszőlegesen állítható */
3.         background:     url(images/box/left_border.gif) repeat-y left; /* Bal oldali keret képe */
4.  
5. }
6.  
7. .border_right_box {
8.   background:   url(images/box/right_border.gif) repeat-y right; /* Jobb oldali keret képe */
9. }
10.  
11.  
12.  
13. .border_top_box {
14.         height:         12px;
15.         background:     url(images/box/top.gif) repeat-x top; /* Felső keret képe */
16. }
17.  
18. .border_bottom_box {
19.         height:         12px;
20.         background:     url(images/box/bottom.gif) repeat-x bottom; /* Alsó keret képe */
21. }
22.  
23. .corner_top_left_box { /* Jobb felső sarok képe  */
24.         float:          left;
25.         width:          12px;
26.         height:         12px;
27.         background:     url(images/box/left_top.gif) no-repeat left top;
28. }
29.  
30. .corner_top_right_box { /* Bal felső sarok képe */
31.         float:          right;
32.         width:          12px;
33.         height:         12px;
34.         background:     url(images/box/right_top.gif) no-repeat right top;
35. }
36.  
37. .corner_bottom_left_box { /* Bal alsó  sarok képe  */
38.         float:          left;
39.         width:          12px;
40.         height:         12px;
41.         background:     url(images/box/left_bottom.gif) no-repeat left bottom;
42. }
43.  
44. .corner_bottom_right_box { /* Jobb alsó  sarok képe  */
45.         float:          right;
46.         width:          12px;
47.         height:         12px;
48.         background:     url(images/box/right_bottom.gif) no-repeat right bottom;       
49. }
50.  
51.  
52.  
53. .box {
54.         background:     url(images/box/bg.gif) repeat; 
55.         padding: 5px;
56.         margin:         0px 0px 0px 0px;
57.         color:          #555;
58.         font-family:Arial, Times, serif;
59.         height: 125px;
60.  
61. }

[DaniNet]

Megoldottam.. köszi!

[DaniNet]

[ A vendégek nem tekinthetik meg a csatolmányokat ]

Jelenleg ilyen.. sajnos a bal oldali csík valamiért a jobb oldali csíkra hivatkozik, ez szerintem azért van mert nem tudom hogy hova kell tenni a jobb és a bal csíkot tartalmazó div-et.
Itt a kód:

Kód: HTML

1. <style>
2. /******************************************************************/
3. /*      CSS Box tutorial                                                                           */
4. /*      Made by: ViziUbi                                                                           */
5. /*      Date: 2008.12.09                                                                           */
6. /*      Tutorial: http://www.tutorial.hu/meretezheto-css-doboz-keszitese/          */
7. /*      Email: viziubi@gmail.com                                                           */
8. /*      GNU GENERAL PUBLIC LICENSE                                                 */
9. /******************************************************************/
10.  
11. .menu_container {
12.         width:          300px; /* A CSS Box szélessége, tetszőlegesen állítható */
13. }
14.  
15. .border_left {
16.         background:     url(bal.jpg) repeat left; /* Bal oldali keret képe */
17. }
18.  
19. .border_right {
20.         background:     url(jobb.jpg) repeat right; /* Jobb oldali keret képe */
21. }
22.  
23. .border_top {
24.         height:         29px;
25.         background:     url(felso.jpg) repeat-x top; /* Felső keret képe */
26. }
27.  
28. .border_bottom {
29.         height:         29px;
30.         background:     url(also.jpg) repeat-x bottom; /* Alsó keret képe */
31. }
32.  
33. .corner_top_left { /* Jobb felső sarok képe  */
34.         float:          left;
35.         width:          30px;
36.         height:         29px;
37.         background:     url(bal_sarok_felso.jpg) no-repeat left top;
38. }
39.  
40. .corner_top_right { /* Bal felső sarok képe */
41.         float:          right;
42.         width:          30px;
43.         height:         29px;
44.         background:     url(jobb_sarok_felso.jpg) no-repeat right top;
45. }
46.  
47. .corner_bottom_left { /* Bal alsó  sarok képe  */
48.         float:          left;
49.         width:          30px;
50.         height:         29px;
51.         background:     url(bal_sarok_also.jpg) no-repeat left bottom;
52. }
53.  
54. .corner_bottom_right { /* Jobb alsó  sarok képe  */
55.         float:          right;
56.         width:          30px;
57.         height:         29px;
58.         background:     url(jobb_sarok_also.jpg) no-repeat right bottom;       
59. }
60.  
61. .header_text {
62.         padding:        9px 21px 0px 21px; /* A szöveg igazításánál figyelembe vesszük a corner_top_left és corner_top_right szélességét */
63.         color:          #fff;
64.         font-family:Arial, Times, serif;
65.         font-size:      1.2em;
66.         text-align:     center;
67. }
68.  
69. .content {
70.         background:     url(bg.jpg) repeat right bottom;       
71.         position:       relative;
72.         margin:         0px 21px 0px 21px; /* A szöveg igazításánál figyelembe vesszük a menu_container jobb és bal oldali keretének szélességét */
73.         padding:        10px;
74.         color:          #555;
75.         font-family:Arial, Times, serif;
76.         line-height:1.3em;
77.         /* A CSS Box magassága opcionálisan állítható. Ha ki van kommentezve a "height: 400px;" akkor tartalomhoz igazodik a CSS Box mérete */
78.         /* Ha a kommentezést eltávolítod akkor fix magasság adható meg. FIGYELEM! Ebben az esetben a szöveg túlfuthat a doboz területén,       */
79.         /* ezt leginkább fix tartalomnál (pl.: kép)  használd, az alsó és felső keret nagysága pedig ebben az értékben nincs benne */
80.         /* height: 400px; */
81. }
82.  
83. </style>
84.  
85.  
86.         <div class="menu_container">
87.                
88.                         <div class="border_left">
89.                         <div class="corner_top_left"></div>
90.                         <div class="border_right">
91.                         <div class="corner_top_right"></div>
92.                         <div class="border_top"></div>
93.  
94.                        
95.                         <div class="content">
96.                                 <p>Vitae nostro appetere ne mea, id ferri augue sea, clita appareat eu vix. In est choro nusquam eligendi, sea ut malorum bonorum sensibus. Has ne atomorum facilisis prodesset, vim in ponderum perfecto, cu dicit vocent torquatos sea. Ea mel iusto dolorum admodum, ei omnes tantas persecuti cum. Ei tation iriure sapientem has, ea regione posidonium vim, quas reque labores in mei. Odio adipisci scripserit qui no, nobis legere liberavisse mel ex. Ei qui solum explicari concludaturque, consul dolorem argumentum sea ea, ex per minim viris omittam.</p>
97.                         </div>
98.                         <div class="border_bottom">
99.  
100.                                 <div class="corner_bottom_left"></div><div class="corner_bottom_right"></div> <!-- A CSS Box alsó két sarkának grafikája -->
101.                         </div>
102.                         </div> 
103.                 </div> 
104.         </div> <!-- end menu _container -->
105.  
106.  
107.  

[Suttogó]

Elkezdtem írni hogy hogy kell, de minek? Ez a leírás még jobban el is magyarázza mint én. Ha elakadsz segítünk
http://www.tutorial.hu/meretezheto-css-doboz-keszitese/#more-2087
/Elolvastam: Én kevesebbre szoktam darabolni, de az enyém nem szereti a régi (IE5.5 v. Netescape) böngészőket, ez meg igen/

[DaniNet]

Kivágtam a képeket, ahogy mondtad suttogó.

A css-t hogyan csináljam meg?

[Rimelek]

Átneveztema  témát, mert  az "Egy képből több kép css-el" nem igazán utalt a tárgyra.

[Suttogó]

A lehetőség: Div: 1 kép a felső sáv (a kerekítéssel) 1 kép a háttér (1px magassággal) és 1 kép az alja:
Hiba: Nem tudsz a felső kb 10px-re szöveget tenni
B lehetőség: Táblázat:
4 kép a 4 sarok + 2 kép a két oldal + 1-1 kép a top-bottom.

[DaniNet]

Van egy kép, aminek a szélessége és magassága fix.

Ennek jelenleg így néz ki a css kódja:

Kód: CSS

1. .welcome_box{
2. width:496px;
3. height:202px;
4. background:url(images/welcome_box.gif) no-repeat center;
5. padding:0px;
6. }

Ha most 202px nél "magasabb" szöveget írok bele, akkor a szöveg az kifut a dobozból, de én azt szeretném, hogy a doboz szélessége és magassága igazodjon a szöveghez.
Ehhez szerintem 4, vagy 5 részre kéne darabolni a welcome_box.gif-et, de a css kódja ennek hogy nézne ki?
Csatoltam a darabolt képeket.

Valószínű, hogy amit szétdaraboltam képeket, abból nem lehet megcsinálni a css kódot, de ha lehet akkor jó.
Nem nagyon csináltam még ilyet, nincs tapasztalatom ez ügyben..