Viskas apie CSS
- Zebda
- rašytojas profesionalas
- Pranešimai:359
- Užsiregistravo:2004 06 08 18:55
- Miestas:Kaunas
- Susisiekti:
- Zebda
- rašytojas profesionalas
- Pranešimai:359
- Užsiregistravo:2004 06 08 18:55
- Miestas:Kaunas
- Susisiekti:
Re: Skirtingos nuorodų spalvos
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 ...
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>
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>
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}
Kodas: Pasirinkti visus
<a class="link_u" href="4.htm"><font color="red"><b>Raudona stambi (bold) nuoroda, uzvedus nepabraukta</b></font></a>
Kodas: Pasirinkti visus
BODY {font-family: Arial; font-size: 10pt; padding: 0; margin: 0}
Re: Skirtingos nuorodų spalvos
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.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>
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
- Zebda
- rašytojas profesionalas
- Pranešimai:359
- Užsiregistravo:2004 06 08 18:55
- Miestas:Kaunas
- Susisiekti:
Re: Skirtingos nuorodų spalvos
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. ??
- *asterisk*
- nuolatinis dalyvis
- Pranešimai:20
- Užsiregistravo:2005 08 07 18:12
- Susisiekti:
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}
Re: Skirtingos nuorodų spalvos
Na cia pati protingiausia mintis sioje temoje Teisingai, reikia atidirbti istema ir visur naudoti ta pati.Zebda rašė:Bus zymiai paprasciau, nes visada, visuose tinklalapiuose zymesiu taip pat, nereikes isradineti dviracio ir mastyti kam sis ar anas skirtas.
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;
}
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 }
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;
}
Kodas: Pasirinkti visus
/* Alignment */
.kaire {text-align: left; }
.desine {text-align: right; }
.centras {text-align: center; }
.lygu {text-align: justify; }
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 }
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.
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.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"
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.
Teoriskai imanoma padaryti, bet labai jau sudetingas dalykas. Reiktu visa sistema perkurti. Nesiparink. Daryk fiksuota sriti, pavyzdziui kad aukstis butu 600 px.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.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
Dabar prisijungę
Vartotojai naršantys šį forumą: 2 ir 0 svečių