|
CSS szövegdoboz 2.
A kódokhoz leírás a lap alján található!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
CSS kód
<style type="text/css">
.textbox{
text-align: justify;
font-family: book antiqua;
font-size: 15px;
line-height: 20px;
color: #000000;
background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261823509_83.gif);
background-repeat: repeat;
background-attachment: scroll;
padding: 2px 5px 2px 5px;
width: 590px;
height: 150px;
overflow: auto;
}
</style>
A doboz kódja
<div align="center">
<div class="textbox">
IDE JÖN A TARTALOM. Lehet képet is beszúrni.</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
CSS kód
<style type="text/css">
.textbox1{
text-align: justify;
font-family: book antiqua;
font-size: 15px;
line-height: 20px;
color: #757575;
background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1332433501_72.jpg);
background-repeat: repeat;
background-attachment: scroll;
padding: 2px 5px 2px 5px;
width: 450px;
height: 390px;
overflow: auto;
text-shadow: 1px 1px 1px #000000;
}
</style>
A doboz kódja
<div align="center">
<div class="textbox1">
IDE JÖN A TARTALOM. Lehet képet is beszúrni.</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
CSS kód
<style type="text/css">
.textbox2{
text-align: justify;
font-family: book antiqua;
font-size: 15px;
line-height: 20px;
color: #886136;
background-color: #DECFA3;
border-width: 15px !important;
border-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1276942495_29.png) 15% repeat !important;
border: 1px solid;
padding: 2px 5px 2px 5px;
width: 450px;
height: 390px;
overflow: auto;
}
</style>
A doboz kódja
<div align="center">
<div class="textbox2">
IDE JÖN A TARTALOM. Lehet képet is beszúrni.</div>
</div>
A CSS kód leírása
text-align: justify; a szöveg sorkizárt lesz., de lehet balra vagy középre igazított is. (left, center)
font-family: book antiqua; a betűtípus
font-size: 15px; a betű mérete
line-height: 20px; sortávolság
color: #000000; szöveg színe
background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261823509_83.gif); ha háttérkép van, akkor ide kell a háttered url címét írni. Ha nem akarsz hátteret, akkor a sor törölhető a kódból.
background-repeat: repeat; folytonos legyen a háttér a szövegdobozban
background-attachment: scroll; a háttér is gördüljön a szövegdobozban, de lehet fixre is állítani (fixed)
padding: 2px 5px 2px 5px; a szöveg és a doboz kerete közötti hely
width: 590px; a szövegdoboz szélessége
height: 150px; a szövegdoboz magassága
overflow: auto; ha több a szöveg, mint ami magasságot beállítottál, akkor görgethető lesz a dobozod
background-color: #DECFA3; ha háttérszínt adsz meg és nem háttérképet, akkor ide kell írni a háttered színkódját
border-width: 15px !important; ha a keretnek szeretnél hátteret adni, akkor itt állíthatod be milyen vastag legyen a keret.
border-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1276942495_29.png) 15% repeat !important; ide jön a keret képed url címe.
| 
AJÁNLOM AZ OLDALT
Súgó
Frissítés