CSS un HTML koda piemēri

Oktobris 8, 2010

Atsevišķs CSS fails IE pārlūkiem (IE-only stylesheet)

Filed under: CSS — Tagi:, — doctypes @ 5:54 priekšpusdienā

Kāpēc to izmantot?

  • Bieži lapas izskats uz dažādiem pārlūkiem atšķiras, it sevišķi tas attiecas uz Internet Explorer
  • Saglabā pamata CSS failu tīru
  • Pilnīgi pieņemams Microsoft sankcionēts paņēmiens

<!--[if IE]>
    <LINK href="css/style-ie.css" rel="stylesheet" type="text/css">
<![endif]-->

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Septembris 4, 2010

DIV elementa izlīdzināšana pēc apakšējās malas ar CSS (Bottom align with CSS)

Filed under: CSS — Tagi:, , , — doctypes @ 10:56 priekšpusdienā


<DIV id="bigbox">
<DIV id="smallbox"></DIV>
</DIV>


CSS inline elementu vertikālā pozicionēšana (CSS Vertical-align)

Filed under: CSS, HTML — Tagi:, , — doctypes @ 8:44 priekšpusdienā

vertical-align izmanto lai vertikāli pozicionētu inline elementu, relatīvi tā vecāku elementiem vai elementa līnijai. Inline elementi ir elementi, kam nav līnijas pārneses pirms un pēc elementa, piemēram, elementi EM, A, I, INPUT, SELECT, SPAN, TEXTAREA, IMG un citi. Sarakstu ar HTML 4.0 inline elementiem var skatīt šeit: http://htmlhelp.com/reference/html40/inline.html

Sintakse:

vertical-align:baseline;

Vērtība baseline tiek lietota pēc noklusējuma. Novieto elementus uz pamat-līnijas vienādās pozīcijās.

Vērtības var tikt uzdotas procentos (vertical-align:50%), relatīvi elementa līnijas augstumam (line-height). Procentu vērtība paaugstinās elementa pamat-līniju virs vecāku pamat-līnijas, par dotu procentu skaitu.

Vērtības var uzdot CSS mērvienībās, piemēram: vertical-align:5px;

Var izmantot negatīvas vērtības: vertical-align:-5px;

http://htmlhelp.com/reference/css/text/vertical-align.html

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

Septembris 3, 2010

CSS gradient poga ar apaļiem stūriem (CSS button with gradient and rounded corners)

Filed under: CSS — Tagi:, , , , — doctypes @ 4:22 pēcpusdienā

Poga sastāv no trim elementiem – pamata div’s ar gradientu fonā un apaļiem stūriem. Elementu pozicionēšanai izmantotas negatīvas margin-top vērtības.

Darbojas uz Firefox 3.6+, IE8 (bez apaļiem stūriem, bet ar gradientu),  Google Chrome.

Kods:

<head>
<style>
body {
background-color:black;
font-family: Verdana;
font-size: 11px;
font-weight:bold;
}
#div1 {
width: 200px;
height: 40px;
margin-bottom: 30px;
}
#div2 {
width: 198px;
height: 15px;
background-color:#FFE680;
margin-bottom: 30px;
margin-left:1px;
}
#div3 {
width: 200px;
height: 40px;
margin-bottom: 30px;
}
#div4 {
width: 198px;
height: 15px;
background-color:#FFE680;
margin-left:1px;
margin-top:-69px;
}
#divText1 {
width: 198px;
margin-bottom: 30px;
text-align:center;
color:white;
}
#divText2 {
width: 198px;
margin-bottom: 30px;
text-align:center;
color:black;
margin-top:-4px;
}
.rounded-top {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
}
.rounded {
border-radius: 7px;
-moz-border-radius: 7px;
}
.gradient {
background: -moz-linear-gradient(top, #FED32A, #816700);
background: -webkit-gradient(linear, left top, left bottom, from(#FED32A), to(#816700));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FED32A', endColorstr='#816700');
}
</style>
</head>
<body>
<div id="div1" class="gradient rounded"></div>
<div id="div2" class="rounded-top"></div>
<div id="divText1">This is text for the button</div>
<div id="div3" class="gradient rounded"></div>
<div id="div4" class="rounded-top"></div>
<div id="divText2">This is text on the button</div>
<body>

Septembris 1, 2010

IE nosacījuma komentāri (IE conditional comments)

Filed under: CSS, HTML, Javascript — Tagi:, — doctypes @ 10:48 priekšpusdienā

IE nosacījuma komentāri. Var izmantot lai specifiski IE saimes pārlūkiem norādītu atsevišķu stilu.


<!--[if IE]>
<style type="text/css">
a    { color:#fff; }
</style>
<![endif]-->

Lai iekļautu saiti uz specifiski IE pārlūkiem izveidotu CSS vai Javascript  failu.

<!–[if lt IE 8]>

<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js&#8221; type=”text/javascript”>

</script>

<![endif]–>

http://davidwalsh.name/ie-conditional-comment

Augusts 31, 2010

Teksts kursīvā ar CSS (CSS font italic)

Filed under: CSS — Tagi:, , — doctypes @ 10:09 priekšpusdienā

font-style:italic

DIV elementa centrēšana lapā ar CSS (Centering DIV element)

Filed under: CSS — Tagi:, , — doctypes @ 9:35 priekšpusdienā

Dinamiska izmēra div elements – mainās atkarībā no pārlūka loga izmēra. Centrēšana izmantojot absolūto pozicionēšanu.

div.centered {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}

Tikai jāpārliecinās lai visu elementu un to malu summa gan platumā, gan augstumā sastāda 100%. IE pārlūkiem vēl speciāli jāuzstāda:

body {
height: 100%;
padding: 0;
margin: 0;
}

Augusts 22, 2010

CSS gradienti Chrome, Safari, Firefox, IE pārlūkiem (CSS gradients for Chrome, Safari, Firefox, IE browsers)

Filed under: CSS — Tagi:, , — doctypes @ 7:55 pēcpusdienā

Webkit pārlūkiem (Chrome, Safari u.c.)


background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Firefox 3.6+


background: -moz-linear-gradient(top, #ccc, #000);

Internet Explorer


filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient

The Silver is the New Black Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.