Poglavje 5 D1.5 Ločitev slogov od vsebine strani

D1.5

5.1 Uvod

Prekrivni slogi26 CSS so tehnologija, potrjena s strani organizacije W3C, ki nam omogoča opredelitev izgleda elementov na spletni strani (npr. pisave, razmiki, velikosti, barve, položaj na strani idr.) ločeno od strukture in vsebine elementov (npr. besedila naslovov, vsebina odstavkov, povezav idr.). To ločevanje strukture od izgleda močno poenostavi vzdrževanje in spreminjanje spletnih strani, še posebej večjih.

Do tega trenutka smo stile opredelili neposredno, kot vsebino atributa style pri izbranem HTML gradniku. Ker uporaba neposredno opredeljenih slogov dejansko ne loči predstavitve od vsebine, zato takšna praksa ni priporočljiva. Namesto neposredno opredeljenih slogov bomo raje uporabili zunanje sloge.

Zunanji slogi27 so CSS slogovna pravila, opredeljena v svojih, ločenih datotekah. Na ta način lahko zunanje sloge v CSS datoteka ponovno uporabimo v več spletnih HTML dokumentih (npr. v primeru spletnega mesta, kjer vse strani uporabljajo enotni slog). Na ta način lahko v primeru prenove spletnega mesta preprosto zamenjamo zgolj CSS datoteko z opredeljenim slogom, medtem ko vse ostale strani ostanejo nespremenjene.

5.2 Začetna stran

Najprej se bomo preoblikovanja lotili na začetni strani tako, da bomo kreirali novo datoteko stil.css, kamor bomo prenesli vse slogovne opredelitve naših HTML elementov. V obstoječi HTML datoteki index.html bomo preprosto dodali zgolj referenco na to novo datoteko (glej vrstico 8).

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
    <link rel="stylesheet" href="stili.css">
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div class="glava" style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div class="levi" style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" class="veliki-logo" width="200px" />
        </a>
      </div>  
      <div class="desni" style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div class="srednji-del" style="width: 100%; align-items: center; justify-content: center;">

      <div class="pasica" style="background: url('slike/ozadje1.jpg') top left repeat; height: 200px; font-size: 42px; color: white; text-shadow: 0 0 4px black; display: flex; align-items: center; justify-content: center; text-align: center;">
        Restavracija izvrstnih okusov <br /> in dobrih ljudi
      </div>

      <div class="vsebina tretjina" style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td>
              <img src="slike/hrana/hrana1.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana2.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana3.jpg" style="width: 320px;" />
            </td>
          </tr>
          <tr>
            <td>
              <img src="slike/hrana/hrana4.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana5.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana6.jpg" style="width: 320px;" />
            </td>
          </tr>
          <tr>
            <td>
              <img src="slike/hrana/hrana7.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana8.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana9.jpg" style="width: 320px;" />
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div class="glava noga" style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div class="levi">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" class="mali-logo" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div class="srednji" style="width: 300px;">
        <p class="levi-odmik" style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div class="desni" style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

Najprej odstranimo opredelitev sloga HTML elementa <body> (glej vrstico 11 v datoteki index.html) in stilske opredelitve prenesemo v datoteko stil.css (glej vrstice 1 - 4).

Slog lahko opredelimo tudi za razrede (skupine več elementov) gradnikov, ki so HTML gradnikom nastavljeni preko atributa class.

Krovnemu elementu <div>, ki opredeljuje glavo (glej vrstico 14 v datoteki index.html) nastavimo razred glava in ga stilsko opredelimo v datoteki stil.css (glej vrstice 8 - 15).

Podobno naredimo tudi s preostalimi elementi in jim opredelimo razrede glava, levi, veliki-logo, desni, srednji-del, pasica, vsebina, tretjina, noga, mali-logo, srednji in levi-odmik.

stil.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

body {
  margin: 0px; 
  background: url('slike/ozadje.jpg') top left repeat;
}


/* GLAVA in NOGA */
.glava {
  background-color: black; 
  color: white; 
  width: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.noga {
  font-size: smaller; 
  padding-top: 20px;
}

.glava a {
  color: white; 
  text-decoration: none;
}

.glava span {
  margin-left: 30px;
}

.glava span:last-child {
  margin-right: 30px;
}

.glava .desni {
  width: 800px; 
  text-align: right;
}

.glava .levi, .veliki-logo {
  width: 200px;
}

.mali-logo {
  width: 150px;
}

.noga .srednji {
  width: 300px;
}

.noga .desni {
  width: 500px; 
  text-align: right;
}


/* SREDNJI DEL */
.srednji-del {
  width: 100%; 
  align-items: center; 
  justify-content: center;
}

.srednji-del > .vsebina {
  width: 1000px; 
  margin-left: auto; 
  margin-right: auto;
}

.srednji-del table {
  margin-top: 30px; 
  margin-bottom: 30px;
  border-spacing: 10px;
  border-collapse: separate;
}

.pasica {
  background: url('slike/ozadje1.jpg') top left repeat; 
  height: 200px; 
  width: 100%;
  font-size: 42px; 
  color: white; 
  text-shadow: 0 0 4px black; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}

.tretjina img {
  width: 320px;
}

.dogodki img {
  width: 800px;
}

/* SPLOŠNO */
.levi-odmik {
  padding-left: 150px;
}

.velik-tekst {
  font-size: x-large;
}

.sredina {
  text-align: center;
}

5.3 Stran z menijem

Na strani z menijem lahko vse spremembe v glavi in nogi prenesemo kar iz začetne strani. Dodatno pa moramo poskrbeti za osrednji del z vsebino, kjer so predstavljeni meniji.

meni.html

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

<!-- CENTER -->
<div class="srednji-del" style="width: 100%; align-items: center; justify-content: center;">

  <div class="vsebina" style="width: 1000px; margin-left: auto; margin-right: auto;">
    <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
      <tr>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/hladne_predjedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Hladne predjedi
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Tatarski biftek</li>
            <li>Kraški pršut</li>
            <li>Fini narezek</li>
            <li>Francoska solata</li>
            <li>Šunka s hrenom</li>
            <li>Govedina v solati</li>
            <li>Polenovka - namaz</li>
            <li>Ribja solata</li>
            <li>Hobotnica v solati</li>
          </ul>
        </td>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/juhe.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Juhe
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Ribja juha</li>
            <li>Goveja juha</li>
            <li>Zelenjavna juha</li>
            <li>Enolončnice</li>
          </ul>
        </td>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/tople_predjedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Tople predjedi
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Špageti</li>
            <li>Testenine z jurčki</li>
            <li>Ocvrti sir</li>
            <li>Njoki razni</li>
            <li>Pastičo mesni</li>
            <li>Kaneloni razni</li>
            <li>Rižota</li>
            <li>Rižota z jurčki</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/jedi_po_narocilu.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Jedi po naročilu
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Mešano meso na žaru</li>
            <li>Svinjska zarebrnica na žaru</li>
            <li>Svinjska ribica - medaljoni</li>
            <li>Pleskavica</li>
            <li>Zrezki na žaru,</li>
            <li>Ramstek na žaru</li>
            <li>Ljubljanski zrezek</li>
            <li>Puranov file na žaru</li>
            <li>Piščančji file z na žaru</li>
            <li>Goveji file na žaru</li>
            <li>Telečja rolada</li>
            <li>Telečji zrezki</li>
            <li>Telečja rebrca</li>
            <li>Pečena jagnjetina</li>
            <li>Mladi sir na žaru</li>
          </ul>
        </td>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/gotove_jedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Gotove jedi
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Nadevana paprika</li>
            <li>Sarma</li>
            <li>Musaka</li>
            <li>Zelenjavni krožnik</li>
            <li>Goveji golaž</li>
            <li>Svinjska pečenka</li>
            <li>Kuhana govedina</li>
            <li>Paslij z rebrci</li>
            <li>Pečenice (par)</li>
            <li>Kranjske klobase</li>
            <li>Pečeni piščanec</li>
            <li>Vampi po tržaško</li>
          </ul>
        </td>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/ribe_in_raki.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Ribe in raki
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Orada, Brancin na žaru</li>
            <li>Lignji s tatarsko omako</li>
            <li>Lignji nadevani</li>
            <li>Losos, na žaru</li>
            <li>Hobotnica na žaru</li>
            <li>Ribji file na žaru</li>
            <li>Postrv na žaru</li>
            <li>Polenovka po primorsko</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/priloge_in_prikuhe.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Priloge in prikuhe
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Dušeni riž</li>
            <li>Korenček na maslu</li>
            <li>Grah na maslu</li>
            <li>Zelje ali ohrovt</li>
            <li>Šampinjoni na žaru</li>
            <li>Špinača na maslu</li>
            <li>Krompir na različne načine</li>
          </ul>
        </td>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/solate.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Solate
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Zelena solata</li>
            <li>Paradižnikova solata</li>
            <li>Radič</li>
            <li>Zeljnata solata</li>
            <li>Mešana solata</li>
            <li>Solata Vrtnica</li>
          </ul>
        </td>
        <td class="meni-razdelek" style="vertical-align: top; width: 320px;">
          <div style="width: 100%; background: url('slike/hrana/sladice.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Sladice
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>Jabolčni zavitek</li>
            <li>Skutni zavitek</li>
            <li>Sadne pite</li>
            <li>Gibanica</li>
            <li>Torte (razne)</li>
            <li>Gratinirane palačinke</li>
            <li>Tiramisu</li>
            <li>Kremna rezina</li>
            <li>Sadne solate</li>
            <li>Sadna kupa s prelivom</li>
            <li>Ananasov kompot</li>
            <li>Kompot</li>
          </ul>
        </td>
      </tr>
    </table>
  </div>

</div>

Iz datoteke meni.html odstranimo opredelitev stila in v datoteki stil.css vpeljemo nov razred meni-razdelek. Med opredelitvijo stila lahko uporabljamo tudi napredne nastavitve, kjer nastavimo slog podrejenih elementov (npr. .meni-razdelek > div:first-child v vrstici 119 datoteke stil.css).

stil.css

114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

/* MENI */
.meni-razdelek {
  vertical-align: top; 
  width: 320px;
}
.meni-razdelek > div:first-child {
  width: 100%; 
  height: 107px; 
  color: white; 
  text-shadow: 0 0 4px black; 
  font-weight: bold; 
  font-size: large; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}
.meni-razdelek > ul, .vino-razdelek > ul {
  list-style: none; 
  align-content: center; 
  text-align: center; 
  padding: 20px;
}

5.4 Stran z vinsko karto

Na strani z menijem lahko vse spremembe v glavi in nogi prenesemo kar iz začetne strani. Dodatno pa moramo poskrbeti za osrednji del z vsebino, kjer je predstavljena vinska karta.

vinska-karta.html

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<!-- CENTER -->
<div class="srednji-del" style="width: 100%; align-items: center; justify-content: center;">

  <div class="vsebina" style="width: 1000px; margin-left: auto; margin-right: auto;">
    <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
      <tr>
        <td class="vino-razdelek" style="vertical-align: top; width: 490px;">
          <div style="width: 100%; background: url('slike/vina/odprta.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Odprta vina
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>
              <b>FRIZZANTINO, suho, V. K. Goriška Brda (1 l)</b><br />
              Prijetno sveže in iskrivo biser vino pridelano po charmat metodi, sort Prossecco, Rebula in Chardonnay.
            </li>
            <li style="margin-top: 10px;">
              <b>MEŠANO BELO, suho, V. K. Goriška Brda (1 l)</b><br />
              Zvrst avtohtone sorte Goriških Brd, Rebule in svetovno znanega Chardonnay.
            </li>
          </ul>
        </td>
        <td class="vino-razdelek" style="vertical-align: top; width: 490px;">
          <div style="width: 100%; background: url('slike/vina/kakovostna.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Kakovostna vina
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>
              <b>VRTOVČAN, suho, Vinska klet Vipava 1894 (1 l)</b><br />
              Mlado vino vipavskih sort Malvazija, Zelen, Sauvignon.
            </li>      
            <li style="margin-top: 10px;">
              <b>MERLOT, suho, V. K. Goriška Brda (1 l)</b><br />
              Kakovostno vino rubinaste rdeče barve granatnega odtenka.
            </li>
            <li style="margin-top: 10px;">
              <b>REFOŠK, Vinakoper (1 l)</b><br />
              Robustno vino, s prijetno kislostjo in primerno široki paleti jedi.
            </li>
          </ul>
        </td>
      </tr>
      <tr>
        <td class="vino-razdelek" style="vertical-align: top; width: 490px;">
          <div style="width: 100%; background: url('slike/vina/peneca.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Peneča vina
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>
              <b>PENINA Quercus,  suho, V. K. Goriška Brda (0,75 l)</b><br />
              Penina pridelana iz zvrsti Rebule in Chardonnay po charmat metodi.
            </li>
          </ul>
        </td>
        <td class="vino-razdelek" style="vertical-align: top; width: 490px;">
          <div style="width: 100%; background: url('slike/vina/buteljcna_bela.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Buteljčna bela vina
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>
              <b>REBULA Quercus, suho,  V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, zmerno polnega okusa, ki daje značilno svežino.
            </li>
            <li style="margin-top: 10px;">
              <b>CUVÉE BELI Quercus, suho, V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino polnega okusa, prijetne svežine. Vonj spominja na jabolko, hrušk in citruse. Sorta: Chardonnay, Rbula, Sauvignonasse
            </li>
            <li style="margin-top: 10px;">
              <b>SAUVIGNONASSE Belica, suho, Medana (0,75 l)</b><br />
              Zelenkasto-rumene barve, sadnega okusa z izrazitim okusom mandljev. Sortna sestava je 100% grozdje Sauvignonasse.
            </li>
            <li style="margin-top: 10px;">
              <b>CHARDONNAY Bagueri, suho, V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, izredno polnega okusa. Spominja na citruse, zrele breskve, melono, maslo, vanilijo in lešnike. Dopolnjen z izraženo aromo po kruhovi skorji.
            </li>
          </ul>           
        </td>
      </tr>
      <tr>
        <td class="vino-razdelek" style="vertical-align: top; width: 490px;">
          <div style="width: 100%; background: url('slike/vina/kakovostna.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
            Buteljčna rdeča vina
          </div>
          <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
            <li>
              <b>REBULA Quercus, suho,  V. K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, zmerno polnega okusa, ki daje značilno svežino.
            </li>
            <li style="margin-top: 10px;">
              <b>CUVÉE BELI Quercus, suho, V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino polnega okusa, prijetne svežine. Vonj spominja na jabolko, hrušk in citruse. Sorta: Chardonnay, Rbula, Sauvignonasse
            </li>
            <li style="margin-top: 10px;">
              <b>SAUVIGNONASSE Belica, suho, Medana (0,75 l)</b><br />
              Zelenkasto-rumene barve, sadnega okusa z izrazitim okusom mandljev. Sortna sestava je 100% grozdje Sauvignonasse.
            </li>
            <li style="margin-top: 10px;">
              <b>CHARDONNAY Bagueri, suho, V. K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, izredno polnega okusa. Spominja na citruse, zrele breskve, melono, maslo, vanilijo in lešnike. Dopolnjen z izraženo aromo po kruhovi skorji.
            </li>
          </ul>
        </td>
        <td>
          &nbsp;
        </td>
      </tr>
    </table>
  </div>

</div>

Iz datoteke meni.html odstranimo opredelitev stila in v datoteki stil.css vpeljemo nov razred vino-razdelek.

stil.css

139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

/* VINO */
.vino-razdelek {
  vertical-align: top; 
  width: 490px;
}
.vino-razdelek > div:first-child {
  width: 100%; 
  height: 120px; 
  color: white; 
  text-shadow: 0 0 4px black; 
  font-weight: bold; 
  font-size: large; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}
.vino-razdelek > ul > li {
  margin-top: 10px;
}
.vino-razdelek > ul > li:first-child {
  margin-top: 0px;
}

5.5 Stran z dogodki

Podoben prenos oblike v datoteko stil.css izvedemo tudi na strani z dogodki.

dogodki.html

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!-- CENTER -->
<div class="srednji-del" style="width: 100%; align-items: center; justify-content: center;">

  <div class="vsebina" style="width: 1000px; margin-left: auto; margin-right: auto;">
    <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
        <tr class="dogodek">
          <td>
            <h2>Zaključna poletna zabava</h2>
            <h5>Ob Ljubljanici | Vsak petek v septembru</h5>
            <center>
              <img src="slike/dogodki/melanie.png" style="width: 800px;" />
            </center>                  
            <p>
              Vsak petek zvečer od 19. ure dalje lepo vabljeni na koncert mlade pevke Melanie Öesch, ki poje v ansamblu Die Dritten. 
              Ansambel se imenuje po njej in hkrati pomeni, da predstavlja tretjo generacijo glasbenikov v svoji družini. 
              Melanie je bila večkrat nagrajena za najboljše jodlanje in je zelo prepoznana v svoji domači Švici, Nemčiji in Avstriji. Prepoznavnost ji raste in zato ves čas prireja zelo obiskane koncerte po celi Evropi, zato smo zelo veseli, da jo bomo lahko gostili med nami.
            </p>
          </td>
        </tr>
        <tr class="dogodek">
          <td>
            <h2>Čarodej Jani</h2>
            <h5>Dvorišče naše restavracije | 1. oktober 2018</h5>
            <center>
              <iframe width="560" height="315" src="https://www.youtube.com/embed/aIQN9rSqrW0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </center>
            <p>
              Ob začetku novega študijskega leta za vse študente organiziramo poseben družaben program s Čarodejem Janijem. Dogodek je primeren še posebej za vse študente, ki 
              se ne želijo udeležiti tradicionalnega brucovanja, saj na dogodku ne bomo stregli alkohola. Na voljo bo le hrana in pijača, ki je priporočena za otroke do 5. 
              leta starosti.
            </p>
          </td>
        </tr>
        <tr class="dogodek">
            <td>
              <h2>Premiera filma Mirko i Slavko</h2>
              <h5>Velika soba | 31. oktober 2018</h5>
              <center>
                <img src="slike/dogodki/mirkoslavko.jpg" style="width: 800px;" />
              </center>
              <p>
                V spomin na zgodovinske trenutke in osvajanja ozemelj, se bomo s ponovno premiero spomnili junakov Slavka in Mirka,
                ki sta zaslužna za osvoboditev naših predhodnih republik.
              </p>
            </td>
          </tr>
    </table>
  </div>

</div>

5.6 Stran s kontakti

Podoben prenos oblike v datoteko stil.css izvedemo tudi na strani s kontakti.

kontakt.html

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<!-- CENTER -->
<div class="srednji-del" style="width: 100%; align-items: center; justify-content: center;">

  <div class="vsebina" style="width: 1000px; margin-left: auto; margin-right: auto;">
    <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
      <tr>
        <td>
          <img src="slike/lokacija.png" style="width: 450px;" />
        </td>
        <td class="levi-odmik velik-test" style="padding-left: 150px; font-size: x-large;">
          <p>
              Restavracija Dobrojed <br />
              Slovenska cesta 222 B <br />
              SI-1000 Ljubljana <br /><br />
              tel. 01 / 286 31 45 <br />
              <a href="mailto:info@dobrojed.si" style="color: black;">info@dobrojed.si</a>
          </p>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="velik-test sredina" style="text-align: center; font-size: x-large;">
          <p><b>Odpiralni čas</b></p>
          <p>ponedeljek - petek <br /> 7:00 - 18:00</p>
          <p>sobote, nedelje, prazniki <br /> ZAPRTO</p>
        </td>
      </tr>
    </table>
  </div>

</div>

Delno rešitev spletne strani do te točke je na voljo na spletnem naslovu ali v obliki ZIP datoteke.

  1. angl. Cascading Style Sheets↩

  2. angl. external style sheets↩

Obrazec za komentarje

Tip komentarja*
v okviru " "
       
Komentar*
Predlog rešitve*
Ime in priimek
Elektronski naslov