Viskas apie CSS

Diskusijos apie WWW svetainių kūrimą.
Žinutė
Autorius
Vartotojo avataras
Zebda
rašytojas profesionalas
rašytojas profesionalas
Pranešimai: 359
Užsiregistravo: 2004 06 08 18:55
Miestas: Kaunas
Susisiekti:

Viskas apie CSS

#1 Standartinė Zebda » 2005 08 07 11:58

Ar imanoma padaryti skirtingas nuorodas viename tinklalapyje. Galite paklausti kam to reikia? Mano kuriamame tinklalapyje nuorodos yra ant sviesaus ir ant tamsaus pavirsiaus, del to iskyla problemele - jei matosi ant vieno fono, tai ant kito vos iziurimas. Nesiulykite pasirinkti universalia spalva, nes tai gali netikti prie dizaino. Ar yra technines galimybes tai padaryti ar vis delto teks susitaikyti su galvos skausmu?
Gyvenimas yra gražus ! ! !

Vartotojo avataras
Zebda
rašytojas profesionalas
rašytojas profesionalas
Pranešimai: 359
Užsiregistravo: 2004 06 08 18:55
Miestas: Kaunas
Susisiekti:

Re: Skirtingos nuorodų spalvos

#2 Standartinė Zebda » 2005 08 07 16:55

Kagi. Atsakyma jau turiu. :lol: - dekings.

Kadangi pas mane yra atskiras stiliu failas, jame jau yra aprasyti linko parametrai:
a:link,
a:visited,
a:active
{
background: transparent;
color: #000;
text-decoration: none;
}

a:hover
{
background: transparent;
color: #FF9900;
}

Taigi; Norint pakeisti kitu linku spalvas reikia siuo atveju CSS faile yrasyti kito linko duomenis. Jie tegul buna tokie:
a.second:link,
a.second:visited,
a.second:active
{
background: transparent;
color: #FFF;
text-decoration: none;
}

a.second:hover
{
background: transparent;
color: #FF9900;
}

Po "a" parasiau .second o i tinklalapi irasiau -
<a href="#" class="second">tekstas</a>

Vietoje "second" galima trasyti kita teksta ir kurti kita linka ...
Gyvenimas yra gražus ! ! !

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#3 Standartinė Laurynas » 2005 08 07 17:30

Norint kurti spalvotas nuorodas, reikia naudoti stilius (CSS).

Apacioje pateikto budo minusas yra tame, kad kiekvienai spalvai reikia kurti po atskira stiliu is 4-turiu sudetiniu daliu.

Kodas: Pasirinkti visus

<style type="text/css">

a.white:LINK	{ text-decoration: none; color: white }
a.whitek:ACTIVE	{ text-decoration: none; color: white }
a.white:VISITED	{ text-decoration: none; color: white }
a.white:HOVER	{ text-decoration: none; color: white }

a.black_u:LINK	{ text-decoration: none; color: black }
a.black_u:ACTIVE	{ text-decoration: none; color: black }
a.black_u:VISITED	{ text-decoration: none; color: black }
a.black_u:HOVER	{ text-decoration: underline; color: black }

a.red_u:LINK	{ text-decoration: none; color: red }
a.red_u:ACTIVE 	{ text-decoration: none; color: red }
a.red_u:VISITED        { text-decoration: none; color: red }
a.red_u:HOVER 	{ text-decoration: underline; color: red }

</style>

<a class="white" href="1.htm">Balta nuoroda</a>
<a class="black_u" href="2.htm">Juoda nuoroda, uzvedus pabraukta</a>
<a class="red_u" href="3.htm">Raudona nuoroda, uzvedus pabraukta</a>
Nors geriau svetaineje is viso naudoti tik 3 nuorodu stilius:

Kodas: Pasirinkti visus

<style type="text/css">

a.link:LINK		{ text-decoration: none }
a.link:ACTIVE	{ text-decoration: none }
a.link:VISITED	{ text-decoration: none }
a.link:HOVER	{ text-decoration: none }

a.link_over:LINK	{ text-decoration: none }
a.link_over:ACTIVE	{ text-decoration: none }
a.link_over:VISITED 	{ text-decoration: none }
a.link_over:HOVER 	{ text-decoration: underline }

a.link_u:LINK	{ text-decoration: underline }
a.link_u:ACTIVE	{ text-decoration: underline }
a.link_u:VISITED 	{ text-decoration: underline }
a.link_u:HOVER 	{ text-decoration: none }

</style>

<a class="link" href="1.htm"><font color="red">Raudona nuoroda</font></a>
<a class="link_over" href="2.htm"><font color="red">Raudona nuoroda, uzvedus pabraukta</font></a>
<a class="link_u" href="3.htm"><font color="red">Raudona nuoroda, uzvedus nepabraukta</font></a>

<a class="link" href="1.htm"><font color="white">Balta nuoroda</font></a>
<a class="link_over" href="2.htm"><font color="white">Balta nuoroda, uzvedus pabraukta</font></a>
<a class="link_u" href="3.htm"><font color="white">Balta nuoroda, uzvedus nepabraukta</font></a>

<a class="link" href="1.htm"><font color="black">Juoda nuoroda</font></a>
<a class="link_over" href="2.htm"><font color="black">Juoda nuoroda, uzvedus pabraukta</font></a>
<a class="link_u" href="3.htm"><font color="black">Juoda nuoroda, uzvedus nepabraukta</font></a>
Siuo atveju uzsidedi spalva kokia nori pvz.: <font color="#FF33CC"> - bus ryskiai aki rezianti violetine. Taip viename puslapyje gali padaryti nors ir simta skirtingu spalvu nuorodu. Geresnio budo uz si - NERA.

Tiesa naudoji dar viena papildoma globalu stiliu visoms puslapio nuorodoms (kurioms papildomo spalvos fonto nebededi):

Kodas: Pasirinkti visus

A:link {color: #310873; TEXT-DECORATION: none}
A:visited {color: #310873; text-decoration: none}
A:active {color: #310873; text-decoration: none} 
A:hover {color: #310873; text-decoration: underline}
p.s Tiesa dar nepaminejau ka daryti, jei nori, kad nuoroda butu bold:

Kodas: Pasirinkti visus

<a class="link_u" href="4.htm"><font color="red"><b>Raudona stambi (bold) nuoroda, uzvedus nepabraukta</b></font></a>
p.s.s Ir dar tikriausiai paklausite o kaip uzdeti srifto dydi nuorodoms ir kodel tu dydziu nesimato siuose stiliuose. Todel, kad siuo atveju uzdedamas globalus fontu stilius:

Kodas: Pasirinkti visus

BODY {font-family: Arial; font-size: 10pt; padding: 0; margin: 0}
vadinasi fontu stiliu deti nebereikia, nes visos nuorodos ir tekstas visoje svetaineje bus Arial 10pt.
Paskutinį kartą redagavo Laurynas 2005 08 07 18:12, redaguota 1 kartą(us).

Vartotojo avataras
Zebda
rašytojas profesionalas
rašytojas profesionalas
Pranešimai: 359
Užsiregistravo: 2004 06 08 18:55
Miestas: Kaunas
Susisiekti:

#4 Standartinė Zebda » 2005 08 07 17:50

Praktiskai visus tavo patarimus Laurynai kuriuos tu duodi as galima sakyti rasau i enciklopedia - "Visa teisybe apie tinklalapiu kurima". :) Cia beveik rimtai. O siaip dekingas uz gera patarima.
Gyvenimas yra gražus ! ! !

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

Re: Skirtingos nuorodų spalvos

#5 Standartinė Laurynas » 2005 08 07 17:55

Zebda rašė: a.second:link,
a.second:visited,
a.second:active
{
background: transparent;
color: #FFF;
text-decoration: none;
}

a.second:hover
{
background: transparent;
color: #FF9900;
}

Po "a" parasiau .second o i tinklalapi irasiau -
<a href="#" class="second">tekstas</a>
Galima ir taip, bet jei bus desimt spalvotu nuorodu, tai CSS stiliu gausis ganetinai daug. O kuo daugiau CSS - tuo leciau kraunasi puslapis. Ir siaip nereikia niekad numeruoti one, two, three - nes taip pasimesi. Nors cia manau tik siaip second parasei. Ir stilius turi turet prasme.

Pavyzdziui
jei nuoroda, tai prefiksas: link_
jei tekstas: font_
jei mygtukas: button_

.link_news
.link_comments
.link_poll
.font_comments
.font_news
.font_news_title
.font_comments_title
.button_news
.button_comments
.button_poll

Vartotojo avataras
Zebda
rašytojas profesionalas
rašytojas profesionalas
Pranešimai: 359
Užsiregistravo: 2004 06 08 18:55
Miestas: Kaunas
Susisiekti:

Re: Skirtingos nuorodų spalvos

#6 Standartinė Zebda » 2005 08 07 18:34

Teisybe sakai. Ne per seniausiai pamaciau kad pradejau po CSS'a kapstytis vien tam, kad issiaiskinciau kas yra kas. tai nuo to karto pradejau ivedineti tvarka tenai. Gerai kad paminejai tuos pvz, kaip reiketu css'e daryti zymejimus (.link_news, ...) tai manau pradzioje susirasysiu kaip zymeti viena ar kita dalyka ir tik po to pradesiu tolesne kuryba. Bus zymiai paprasciau, nes visada, visuose tinklalapiuose zymesiu taip pat, nereikes isradineti dviracio ir mastyti kam sis ar anas skirtas.

Beje. Norejau paklausti apie tavo pirma paaiskinima.
Ten kur kalbi apie "...dar viena papildoma globalu stiliu visoms puslapio nuorodoms...". jei teisingai supratau tai jei bus globalus nustatymas tarkim .CSS faile tai visuose puslapiuose kuriuose bus nuoroda i si faila, visuose tuose puslapiuose bus vienodas nuorodu atvaizdavimas. Isskyrus tas nuorodas kurioms bus priskirti kiti duomenis. ??
Gyvenimas yra gražus ! ! !

Vartotojo avataras
*asterisk*
nuolatinis dalyvis
nuolatinis dalyvis
Pranešimai: 20
Užsiregistravo: 2005 08 07 18:12
Susisiekti:

#7 Standartinė *asterisk* » 2005 08 07 18:59

Taip. pvz.:

Kodas: Pasirinkti visus

a:link { color: #kodas; text-decoration: none} 
a:visited { color: #kodas; text-decoration: none} 
a:active{ color: #kodas; text-decoration: none} 
a:hover {color: #kodas; text-decoration: underline}
Bus naudojama visur, kur nebus nustatyta kitaip.

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

Re: Skirtingos nuorodų spalvos

#8 Standartinė Laurynas » 2005 08 07 22:02

Zebda rašė:Bus zymiai paprasciau, nes visada, visuose tinklalapiuose zymesiu taip pat, nereikes isradineti dviracio ir mastyti kam sis ar anas skirtas.
Na cia pati protingiausia mintis sioje temoje :) Teisingai, reikia atidirbti istema ir visur naudoti ta pati.

Del stiliu galimi du variantai:

1. Stabilus nelieciami stiliai
2. Kintami stiliai, susieti pagal paskirti.

Abu budai vienodai naudojami.

1 budas, kai nelabai jau dideles svetaines su 50-100 stiliu.

Siuo atveju padarai *.CSS faila su reikalingiausiais stiliais ir daugiau niekada tu stiliu beveik nebereikia kurti. Siuo atveju jei reikia pakeisti stiliu, uzdedi kita stiliu programiniame kode.

2 budas, kai numatoma kada nors keisti dizaina, ar padaryti papildomus dizaino sablonus.

Siuo atveju stiliu pakeiti *.CSS faile ir niekada nelendi i programini koda.

1 variante be mano paminetu linku stiliu ir global linko stiliaus idedi:

Global body - fontai, skrolas, padingas:

Kodas: Pasirinkti visus

body {
font-family: Arial; font-size: 10pt; padding: 0; margin: 0
scrollbar-face-color: #kodas; 
scrollbar-shadow-color: #kodas;
scrollbar-highlight-color: #kodas; 
scrollbar-3dlight-color: #kodas; 
scrollbar-darkshadow-color: #kodas; 
scrollbar-track-color: #kodas; 
scrollbar-arrow-color: #kodas; 
}
Inputai ir selektai:

Kodas: Pasirinkti visus

INPUT.input {font-family: Verdana, Arial; background-color: #kodas; border : 1px solid #666666; font : 8pt }
SELECT.select {font-family: Verdana, Arial; background-color: #kodas; border : 1px solid #666666; font : 8pt }
Tekstines dezutes laukelis:

Kodas: Pasirinkti visus

/* TEXTAREA */
.textarea 
{
border-top: solid 1px #000000;
border-right: solid 1px #000000;
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border: 1px solid #000000; 
font-family: Arial; 
font-size: 11; 
}
Lygiavimo stiliai:

Kodas: Pasirinkti visus

/* Alignment */
.kaire		{text-align: left; }
.desine		{text-align: right; }
.centras		{text-align: center; }
.lygu		{text-align: justify; }
Bei reikalingiausi fontai:

Kodas: Pasirinkti visus

.arial1		{ font-family: Arial;	font-size: 1px }
.arial2		{ font-family: Arial;	font-size: 2px }
.arial3		{ font-family: Arial;	font-size: 3px }
.arial4		{ font-family: Arial;	font-size: 4px }
.arial5		{ font-family: Arial;	font-size: 5px }
.arial6		{ font-family: Arial;	font-size: 6px }
.arial7		{ font-family: Arial;	font-size: 7px }
.arial8		{ font-family: Arial;	font-size: 8px }
.arial8u		{ font-family: Arial;	font-size: 8px; text-decoration: underline }
.arial8b		{ font-family: Arial;	font-size: 8px; font-weight: bold }
.arial8ub		{ font-family: Arial;	font-size: 8px; text-decoration: underline; font-weight: bold }
.arial9		{ font-family: Arial;	font-size: 9px }
.arial9u		{ font-family: Arial;	font-size: 9px; text-decoration: underline }
.arial9b		{ font-family: Arial;	font-size: 9px; font-weight: bold }
.arial9ub		{ font-family: Arial;	font-size: 9px; text-decoration: underline; font-weight: bold }
.arial10		{ font-family: Arial;	font-size:10px }
.arial10u		{ font-family: Arial;	font-size:10px; text-decoration: underline }
.arial10b		{ font-family: Arial;	font-size:10px; font-weight: bold }
.arial10ub	{ font-family: Arial;	font-size:10px; text-decoration: underline; font-weight: bold }
.arial11		{ font-family: Arial;	font-size:11px }
.arial11u		{ font-family: Arial;	font-size:11px; text-decoration: underline }
.arial11b		{ font-family: Arial;	font-size:11px; font-weight: bold }
.arial11ub	{ font-family: Arial;	font-size:11px; text-decoration: underline; font-weight: bold }
.arial11nb	{ font-family: Arial;	font-size:11px; text-decoration: none; font-weight: bold }
.arial12		{ font-family: Arial;	font-size:12px }
.arial12u		{ font-family: Arial;	font-size:12px; text-decoration: underline;}
.arial12b		{ font-family: Arial;	font-size:12px; font-weight: bold; color : #006DC5 }
.arial12ub	{ font-family: Arial;	font-size:12px; text-decoration: underline; font-weight: bold; color : #006DC5 }
.arial13		{ font-family: Arial;	font-size:13px }
.arial13u		{ font-family: Arial;	font-size:13px; text-decoration: underline }
.arial13b		{ font-family: Arial;	font-size:13px; font-weight: bold }
.arial13ub	{ font-family: Arial;	font-size:13px; text-decoration: underline; font-weight: bold }
.arial14		{ font-family: Arial;	font-size:14px }
.arial14u		{ font-family: Arial;	font-size:14px; text-decoration: underline }
.arial14b		{ font-family: Arial;	font-size:14px; font-weight: bold }
.arial14ub	{ font-family: Arial;	font-size:14px; text-decoration: underline; font-weight: bold }
.arial15		{ font-family: Arial;	font-size:15px }
.arial15u		{ font-family: Arial;	font-size:15px; text-decoration: underline }
.arial15b		{ font-family: Arial;	font-size:15px; font-weight: bold }
.arial15ub	{ font-family: Arial;	font-size:15px; text-decoration: underline; font-weight: bold }
.arial16		{ font-family: Arial;	font-size:16px }
.arial16u		{ font-family: Arial;	font-size:16px; text-decoration: underline }
.arial16b		{ font-family: Arial;	font-size:16px; font-weight: bold }
.arial16ub	{ font-family: Arial;	font-size:16px; text-decoration: underline; font-weight: bold }
.arial19		{ font-family: Arial;	font-size:19px }
.arial19u		{ font-family: Arial;	font-size:19px; text-decoration: underline }
.arial19b		{ font-family: Arial;	font-size:19px; font-weight: bold }
.arial19ub	{ font-family: Arial;	font-size:19px; text-decoration: underline; font-weight: bold }
.arial24		{ font-family: Arial;	font-size:24px }
.arial24u		{ font-family: Arial;	font-size:24px; text-decoration: underline }
.arial24b		{ font-family: Arial;	font-size:24px; font-weight: bold }
.arial24ub	{ font-family: Arial;	font-size:24px; text-decoration: underline; font-weight: bold }
.verdana8	{ font-family: Verdana;       font-size: 8px }
.verdana8u	{ font-family: Verdana;       font-size: 8px; text-decoration: underline }
.verdana8b	{ font-family: Verdana;       font-size: 8px; font-weight: bold }
.verdana8ub	{ font-family: Verdana;       font-size: 8px; text-decoration: underline; font-weight: bold }
.verdana9	{ font-family: Verdana;       font-size: 9px }
.verdana9u	{ font-family: Verdana;       font-size: 9px; text-decoration: underline }
.verdana9b	{ font-family: Verdana;       font-size: 9px; font-weight: bold }
.verdana9ub	{ font-family: Verdana;       font-size: 9px; text-decoration: underline; font-weight: bold }
.verdana10	{ font-family: Verdana;       font-size:10px }
.verdana10u	{ font-family: Verdana;       font-size:10px; text-decoration: underline }
.verdana10n	{ font-family: Verdana;       font-size:10px; text-decoration: none }
.verdana10b	{ font-family: Verdana;       font-size:10px; font-weight: bold }
.verdana10bn	{ font-family: Verdana;       font-size:10px; text-decoration: none; font-weight: bold }
.verdana10ub	{ font-family: Verdana;       font-size:10px; text-decoration: underline; font-weight: bold }
.verdana11	{ font-family: Verdana;       font-size: 11px }
.verdana11u	{ font-family: Verdana;       font-size: 11px; text-decoration: underline }
.verdana11b	{ font-family: Verdana;       font-size: 11px; font-weight: bold }
.verdana11ub	{ font-family: Verdana;       font-size: 11px; text-decoration: underline; font-weight: bold }
.verdana12	{ font-family: Verdana;       font-size:12px }
.verdana12u	{ font-family: Verdana;       font-size:12px; text-decoration: underline }
.verdana12b	{ font-family: Verdana;       font-size:12px; font-weight: bold }
.verdana12ub	{ font-family: Verdana;       font-size:12px; text-decoration: underline; font-weight: bold }
.verdana13	{ font-family: Verdana;       font-size: 13px }
.verdana13u	{ font-family: Verdana;       font-size: 13px; text-decoration: underline }
.verdana13b	{ font-family: Verdana;       font-size: 13px; font-weight: bold }
.verdana13ub	{ font-family: Verdana;       font-size: 13px; text-decoration: underline; font-weight: bold }
.verdana14	{ font-family: Verdana;       font-size:14px }
.verdana14u	{ font-family: Verdana;       font-size:14px; text-decoration: underline }
.verdana14b	{ font-family: Verdana;       font-size:14px; font-weight: bold }
.verdana14ub	{ font-family: Verdana;       font-size:14px; text-decoration: underline; font-weight: bold }
.verdana15	{ font-family: Verdana;       font-size: 15px }
.verdana15u	{ font-family: Verdana;       font-size: 15px; text-decoration: underline }
.verdana15b	{ font-family: Verdana;       font-size: 15px; font-weight: bold }
.verdana15ub	{ font-family: Verdana;       font-size: 15px; text-decoration: underline; font-weight: bold }
.verdana16	{ font-family: Verdana;       font-size:16px }
.verdana16u	{ font-family: Verdana;       font-size:16px; text-decoration: underline }
.verdana16b	{ font-family: Verdana;       font-size:16px; font-weight: bold }
.verdana16ub	{ font-family: Verdana;       font-size:16px; text-decoration: underline; font-weight: bold }
Ir viskas - to pilnai uztenka kad sukurtum koki nori stiliu:

pvz: Verdana 11 pabrauktas boldas spalvos kaip dangus tik zalios

<font class="verdana11ub"><font color="#01607E">ABCDE</font></font>

Verdana ir Arial palaiko visos narsykles, jei noresi fontu ala AmerTypeMdBt ar kokio Garamond LT cia jau tavo problema. Galima pilnai kieta desinga padaryt zaidziant tik su Verdana ir Arial fontu skirtingais dydziais.

O jei koks dizaineris ir sumano papuosti meniu kokiais turbo montais - tai jis tam daro paveiksliukus.

Antras budas. Darai specifinius CSS stilius:

.news_title { font-family: Arial; font-size: 11pt; color:#kodas }
.news_text { font-family: Arial; font-size: 10pt; color:#kodas }
.commets_title { font-family: Arial; font-size: 11pt ; color:#kodas }
.commet_text { font-family: Arial; font-size: 10pt; color:#kodas }
.poll_title { font-family: Arial; font-size: 11pt; color:#kodas }
.poll_text { font-family: Arial; font-size: 10pt; color:#kodas }

Antru budu darant stilius draudziama stiliaus pavadinime naudoti svalvos apibudinima:

pvz.:

.news_antraste_red { font-family: Arial; font-size: 11pt; color:red }

Nes jei kada sumanysi pakeisti spalva? Taip pat nerekomenduotini ir lietuviski pavadinimai - programuotojo neprestizas

Taip pat blogi pavyzdziai ir cia:

.body_8_b { font-family: Verdana, Arial; font-size: 8pt; font-weight: bold; margin-bottom:0; margin-top:0 }
.body_8_b_3_3 { font-family: Verdana, Arial; font-size: 8pt; font-weight: bold; margin-bottom:5 }

Antras budas geriausiai tinka tada kai kuri atskirus stilius pavyzdziui kiekvienai rubrikai, kitokius. Taip pat ir patogiau keisti, pakoreguoji *.CSS ir viskas.

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#9 Standartinė Laurynas » 2005 11 19 00:03

Zebda rašė: Kodel daugiau nei 1 CSS failas tinklalapyje
PVZ.:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="print.css" type="text/css" media="print">
<link rel="stylesheet" href="naujienos_screen.css" type="text/css" media="screen">

Kaip matote auksciau pateiktame pavyzdyje, viename tinklalapyje ( www.top.lt ) yra 3 CSS failai:
1) screen.css;
2) print.css;
3) naujienos_screen.css.

Man kaip pradedanciajam CSS mokiniui iskilo klausimas; o kodel vienam tinklalapiui reikia keliu failu, kai bendras ju "svoris" 11 KB. Cia gal kazkokiu budu bandoma optimizuoti tinklalapio atsivertimo laika ar cia kitam tikslui yra tai sukurta?

... ir kas tai per dalykas:
media="print"
media="screen"
Jokio skirtumo ar stiliai bus keliuose css failuose ar viename, taciau didesniuose tinklapiuose kuriami keli css failai. Cia del patogumo ir tolimesniu perspektyvu. Pvz. gamezone.lt ir straipsniai.lt turi po du css failus, viename faile fontu stiliai, kitame - spalviniai stiliai ir nuorodos.

Taip pat buvo padaryta ir ankstesneje takas.lt svetaineje. Jei sukuriama kokia kitokia rubrika, su kitom spalvom, naudojamas tas pats failas fonts.css, o spalvinis css failas idedamas kitas. Jei bendrame faile detu visu rubriku stilius, tai taip css stiliu butu daug daugiau. print.css stiliu faila irgi reikia kurti atskira, juk puslapio informacine versija spausdinimui bus naudojama tik kelis kartus, tai kam deti tuos stilius i bendra kruva, juk galima sukurti atskira print.css faila, kuris bus panaudotas tik kelis kartus. Optimaliausia, jei puslapis neina per vieninteli index.php ir jei yra galimybe, ir nenaudojami sablonai - kurti netgi atskirus rubriku css failus, kurie skirti tik konkreciai vienai rubrikai. Nors labai daug css failu naudoti negerai - nes pas ka letas Internetas, puslapis gali buti rodomas kelias sekundes brokuotai, kol uzkraus antra ar trecia css faila. Taciau iki 3 failu - normalu.

Visokie media="print" - yra identifikatorius, puikiai galima apseiti ir be jo.
Zymos naudojamos dinaminiam stiliu keitimui ir pan. Galima net suprogramuoti, kad JavaScript nustato kokia rezoliucija lankytojo kompiuteryje ir uzkrauna toki stiliu kuris skirtas konkreciai rezoliucijai. Tokiame stiliuje pvz. nurodoma, kad svetaines lenteles ilgis 800, 1024 ar daugiau px.

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#10 Standartinė Laurynas » 2006 05 03 13:12

Zebda rašė:Kaip su CSS padaryti, kad svetaine butu 100 proc horizontaliai issitempusi (nuo virsaus iki apacios?
Va kaip sita - http://www.forumland.lt/css/bordo/forumas.htm ... nes kai turinio nera daug, tada vaizdelis yra daug maz toks - http://www.forumland.lt/css/bordo/naujiena.htm ... jeigu ziureti su 1280x960 rezoliucija.

Patarkite.
Teoriskai imanoma padaryti, bet labai jau sudetingas dalykas. Reiktu visa sistema perkurti. Nesiparink. Daryk fiksuota sriti, pavyzdziui kad aukstis butu 600 px.

Arba studijuok zemiau pateiktus budus:

1. Pamoka

Stiliai musu DIV'ams:

Kodas: Pasirinkti visus

<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
top: 100px;
  left: 0px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 700px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>
HTML kodas:

Kodas: Pasirinkti visus

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
Pilnas uzbaigtas kodas:

Kodas: Pasirinkti visus

<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 100px;
left: 0px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 650px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Rezultatas:

Paveikslėlis

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#11 Standartinė Laurynas » 2006 05 03 13:15

Antra pamoka.

Stiliai:

Kodas: Pasirinkti visus

<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 100px;
left: 0px;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  position: absolute;
  top: 100px;
left: 650px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>
HTML kodas:

Kodas: Pasirinkti visus

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
Pilnas kodas:

Kodas: Pasirinkti visus

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 100px;
  left: 0px;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  position: absolute;
  left: 650px;
  top: 100px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Rezultatas:

Paveikslėlis

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#12 Standartinė Laurynas » 2006 05 03 13:17

Trecia pamoka.

Stilius:

Kodas: Pasirinkti visus

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 650px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: both;
  width: 800px;
  height: 100px;
}
-->
</style>
HTML kodas:

Kodas: Pasirinkti visus

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
Pilnas kodas:

Kodas: Pasirinkti visus

<html>
<head>
<title>TWO-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 650px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Rezultatas:

Paveikslėlis

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#13 Standartinė Laurynas » 2006 05 03 13:20

Ketvirta pamoka.

Stilius:

Kodas: Pasirinkti visus

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  width: 800px;
  height: 100px;
}
-->
</style>
HTML kodas:

Kodas: Pasirinkti visus

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>
Pilnas kodas:

Kodas: Pasirinkti visus

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Rezultatas:

Paveikslėlis

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#14 Standartinė Laurynas » 2006 05 03 13:22

Penkta pamoka.

Stilius:

Kodas: Pasirinkti visus

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 100%;
}
#leftcol {
  background: #f00;
  float: left;
  width: 19%;
  height: 500px;
}
#content {
  background: #fff;
  float: right;
  width: 80%;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: both;
  width: 100%;
}
-->
</style>
HTML kodas:

Kodas: Pasirinkti visus

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
Pilnas kodas:

Kodas: Pasirinkti visus

<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 100%;
}
#leftcol {
  background: #f00;
  float: left;
  width: 19%;
  height: 500px;
}
#content {
  background: #fff;
  float: right;
  width: 80%;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: both;
  width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Rezultatas:

Paveikslėlis

Vartotojo avataras
Laurynas
administratorius
administratorius
Pranešimai: 2011
Užsiregistravo: 2001 12 06 09:51
Miestas: Vilnius

#15 Standartinė Laurynas » 2006 05 03 13:28

Sesta pamoka.

Stilius:

Kodas: Pasirinkti visus

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 100%;
}
#leftcol {
  background: #f00;
  float: left;
  width: 20%;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: right;
  width: 20%;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 59%;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: both;
  width: 100%;
}
-->
</style>
HTML kodas:

Kodas: Pasirinkti visus

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
Pilnas kodas:

Kodas: Pasirinkti visus

<html>
<head>
<title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 100%;
}
#leftcol {
  background: #f00;
  float: left;
  width: 20%;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: right;
  width: 20%;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 59%;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: both;
  width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Rezultatas:

Paveikslėlis
Paskutinį kartą redagavo Laurynas 2006 05 03 13:35, redaguota 1 kartą(us).

Skelbti atsakymą

Grįžti į

Dabar prisijungę

Vartotojai naršantys šį forumą: 1 ir 0 svečias(ių)