Browse Source

new rules for signalisation which room is active in gallery

T. Meissner 7 years ago
parent
commit
e09f757a8e
2 changed files with 62 additions and 38 deletions
  1. 17
    4
      css/style.css
  2. 45
    34
      wohnung.html

+ 17
- 4
css/style.css View File

@@ -35,6 +35,7 @@ span.cursive {
35 35
     font-size: larger;
36 36
 }
37 37
 
38
+
38 39
 /* page area styles */
39 40
 
40 41
 #wrapper {
@@ -59,8 +60,6 @@ span.cursive {
59 60
     left: 10px;
60 61
     bottom: 10px;
61 62
     color: #fff;
62
-    /*text-shadow: -0.06em -0.06em 0.06em black,
63
-                  0.04em 0.04em 0.06em white;*/
64 63
     text-shadow: .05em .05em .05em #000;
65 64
 }
66 65
 
@@ -148,7 +147,7 @@ span.cursive {
148 147
 }
149 148
 
150 149
 #content #index-img {
151
-    margin 0 auto;
150
+    margin: 0 auto;
152 151
     padding-left: 10px;
153 152
 }
154 153
 
@@ -185,10 +184,24 @@ span.cursive {
185 184
 
186 185
 #content #content-right ul {
187 186
     padding-left: 1em;
188
-    margin: 0.5em 0;
187
+    margin: 0.4em 0;
189 188
     list-style-type: square;
190 189
 }
191 190
 
191
+#content-right div {
192
+    margin-top: 1em;
193
+}
194
+
195
+#content-right div h3 {
196
+    padding-top: 0;
197
+}
198
+
199
+#content-right div.active {
200
+    background-color: #eee;
201
+    border: solid 0px #eee;
202
+    box-shadow: 0px 0px 6px 2px #eee;
203
+}
204
+
192 205
 #img-gallery {
193 206
     float: left;
194 207
     width: 540px;

+ 45
- 34
wohnung.html View File

@@ -44,28 +44,28 @@
44 44
                 </p>
45 45
                 <div id="img-gallery">
46 46
                     <img id="gallery-big"   src="images/wohnung1.jpg" alt="" width="530" height="398">
47
-                    <a id="wohnung0"><img class="gallery-small gallery-left" src="images/wohnung1.jpg" alt="" width="125" height="100">
47
+                    <a id="wohnung0"><img class="gallery-small gallery-left kueche-img" src="images/wohnung1.jpg" alt="" width="125" height="100">
48 48
                         <span></span>
49 49
                     </a>
50
-                    <a id="wohnung1"><img class="gallery-small" src="images/wohnung2.jpg" alt="" width="125" height="100">
50
+                    <a id="wohnung1"><img class="gallery-small kueche-img" src="images/wohnung2.jpg" alt="" width="125" height="100">
51 51
                         <span></span>
52 52
                     </a>
53
-                    <a id="wohnung2"><img class="gallery-small" src="images/wohnung3.jpg" alt="" width="125" height="100">
53
+                    <a id="wohnung2"><img class="gallery-small wohnung-img" src="images/wohnung3.jpg" alt="" width="125" height="100">
54 54
                         <span></span>
55 55
                     </a>
56
-                    <a id="wohnung3"><img class="gallery-small" src="images/wohnung4.jpg" alt="" width="125" height="100">
56
+                    <a id="wohnung3"><img class="gallery-small wohnung-img" src="images/wohnung4.jpg" alt="" width="125" height="100">
57 57
                         <span></span>
58 58
                     </a>
59
-                    <a id="wohnung4"><img class="gallery-small gallery-left" src="images/wohnung5.jpg" alt="" width="125" height="100">
59
+                    <a id="wohnung4"><img class="gallery-small gallery-left wohnung-img" src="images/wohnung5.jpg" alt="" width="125" height="100">
60 60
                         <span></span>
61 61
                     </a>
62
-                    <a id="wohnung5"><img class="gallery-small" src="images/wohnung6.jpg" alt="" width="125" height="100">
62
+                    <a id="wohnung5"><img class="gallery-small bad-img" src="images/wohnung6.jpg" alt="" width="125" height="100">
63 63
                         <span></span>
64 64
                     </a>
65
-                    <a id="wohnung6"><img class="gallery-small" src="images/wohnung7.jpg" alt="" width="125" height="100">
65
+                    <a id="wohnung6"><img class="gallery-small bad-img" src="images/wohnung7.jpg" alt="" width="125" height="100">
66 66
                         <span></span>
67 67
                     </a>
68
-                    <a id="wohnung7"><img class="gallery-small" src="images/wohnung8.jpg" alt="" width="125" height="100">
68
+                    <a id="wohnung7"><img class="gallery-small bad-img" src="images/wohnung8.jpg" alt="" width="125" height="100">
69 69
                         <span></span>
70 70
                     </a>
71 71
                 </div>
@@ -78,33 +78,41 @@
78 78
                 <p>
79 79
                     Sie befindet sich im 1. OG unseres Hauses und eignet sich für bis zu 3 Personen (plus einem Kleinkind).
80 80
                 </p>
81
+                <div id="kueche">
81 82
                 <h3>Küche</h3>
82
-                <ul>
83
-                    <li>Einbauküche</li>
84
-                    <li>Herd, Kühlschrank, Toaster</li>
85
-                    <li>Kaffeemaschine, Wasserkocher</li>
86
-                    <li>Sitzecke zum Verweilen</li>
87
-                </ul>
88
-                <h3>Wohn- & Schlafzimmer</h3>
89
-                <ul>
90
-                    <li>Doppelbett, Schlafsofa</li>
91
-                    <li>Stubentisch mit Sitzen</li>
92
-                    <li>Kommoden zum Verstauen</li>
93
-                    <li>LCD-Fernseher, Musikanlage</li>
94
-                </ul>
95
-                <h3>Bad & Flur</h3>
96
-                <ul>
97
-                    <li>Dusche</li>
98
-                    <li>beleuchteter Badspiegel</li>
99
-                    <li>Kleider- & Schuhschrank</li>
100
-                    <li>Garderobe mit Spiegel</li>
101
-                </ul>
102
-                <h3>Allgemein</h3>
103
-                <ul>
104
-                    <li>Internet über WLAN</li>
105
-                    <li>PKW-Stellplatz</li>
106
-                    <li>Garten mit Gartenmöbeln</li>
107
-                </ul>
83
+                    <ul>
84
+                        <li>Einbauküche</li>
85
+                        <li>Herd, Kühlschrank, Toaster</li>
86
+                        <li>Kaffeemaschine, Wasserkocher</li>
87
+                        <li>Sitzecke zum Verweilen</li>
88
+                    </ul>
89
+                </div>
90
+                <div id="wohnung">
91
+                    <h3>Wohn- & Schlafzimmer</h3>
92
+                    <ul>
93
+                        <li>Doppelbett, Schlafsofa</li>
94
+                        <li>Stubentisch mit Sitzen</li>
95
+                        <li>Kommoden zum Verstauen</li>
96
+                        <li>LCD-Fernseher, Musikanlage</li>
97
+                    </ul>
98
+                </div>
99
+                <div id="bad">
100
+                    <h3>Bad & Flur</h3>
101
+                    <ul>
102
+                        <li>Dusche</li>
103
+                        <li>beleuchteter Badspiegel</li>
104
+                        <li>Kleider- & Schuhschrank</li>
105
+                        <li>Garderobe mit Spiegel</li>
106
+                    </ul>
107
+                </div>
108
+                <div id="allgemein">
109
+                    <h3>Allgemein</h3>
110
+                    <ul>
111
+                        <li>Internet über WLAN</li>
112
+                        <li>PKW-Stellplatz</li>
113
+                        <li>Garten mit Gartenmöbeln</li>
114
+                    </ul>
115
+                </div>
108 116
             </div>
109 117
         </div>
110 118
 
@@ -115,6 +123,9 @@
115 123
 
116 124
     </div>
117 125
 
126
+    <script src="js/classList.min.js"></script>
127
+    <script src="js/meissner-wohnen.js"></script>
128
+
118 129
 </body>
119 130
 
120 131
 </html>