Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

HTML-CSS(Oefensite, pagina inbouwen).ik loop vast, wie helpt

Pagina: 1
Acties:
  • 270 views

donderdag 12 december 2013 14:32

Acties:

Verwijderd

Topicstarter
Beste Leden,

Ik ben aan het oefenen met deze website-template...

http://members.ziggo.nl/webweb/g/index.html

Nu wil ik er 1 pagina bij/tussen hebben. Ik heb al wat dingen geprobeerd, maar het is me tot nu toe niet gelukt. Daarom heb ik het in de originele staat terug gezet....

Onderstaand zien jullie de stukjes code`s...

Hopelijk kan iemand mij een uitleggen wat ik ongeveer moet doen, in de index.html en de style.css

Dat ik de main_nav.png op/in de index moet aan gaan passen weet ik. En dat ik in de css, de #content>dta moet aanpassen en er een }#content>.dt6 a { bij moet maken ook.... maar dan, loop ik even vast...wie helpt?

Alvast hartelijk dank.

Mvg, Rich

PS. Onderstaand kan ik niet korter maken, dit ivm dat ik de pagina`s laat zien, en dat ik de css code laat zien van de pagina`s en de indeling etc...


Stukje HTML code van de pagina`s:

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
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

<div id="main"> 
  <!-- header start -->
  <header>
     <a href="index.html" id="logo"><h1><span class="color_orange">LoB</span><span class="color_white">SigN</span></h1></a>
     <h2 class="slogan color_white">The best in lob-design</h2>
  </header>
  <!-- header end-->
  
  <!-- content start-->
  <dl id="content">
          
        <!-- main tab start-->
        <dt class="dt1"><a href="#"></a></dt>
        <dd id="page1">
          <div class="inner">
            <div id="slider">
                <img src="images/slider/img01.jpg" alt=""  title="<h1>Clean & Modern Design</h1><p>Nam convallis imperdiet pretium.</p>">
                <img src="images/slider/img02.jpg" alt=""  title="<h1>Elegant Looks</h1><p>Nam convallis imperdiet pretium.</p>">
                <img src="images/slider/img03.jpg" alt=""  title="<h1>Unique Collection</h1><p>Nam convallis imperdiet pretium.</p>">
                <img src="images/slider/img04.jpg" alt=""  title="<h1>Inspiring Idea's</h1><p>Nam convallis imperdiet pretium.</p>">            </div>
          </div>
        </dd>
        <!-- main tab end-->
        
        <!-- about us tab end-->
        <dt class="dt2"><a href="#"></a></dt>
        <dd id="page2">
          <div class="inner">
            <article>
                  <h1 class="color_orange">about us</h1>
                 <div id="pane1" class="scroll-pane about" >
                 <img src="images/about/img01.jpg" class="alignright20 pic">
                 <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur vel illum qui dolorem fugiat quo voluptas nulla pariatur voluptatibus maiores alias consequatur perferendis doloribus asperiores.</p>
                 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident, pariatur voluptatibus maiores alias consequatur perferendis.</p>
                        
                        <h3>Why Choose Us?</h3>
                        <ul>
                          <li><span class="dropcapspot2">1</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
excepteur sint occaecat cupidatat </li>
                         <li><span class="dropcapspot2">2</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
excepteur sint occaecat cupidatat </li>
                         <li><span class="dropcapspot2">3</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
excepteur sint occaecat cupidatat </li>
                         
                        </ul>
                   <h3>Our Team</h3>
                   <div class="col_left">
                        <img src="images/about/team01.jpg" class="alignleft20 pic">
                     <h5><span class="color_black">John Keith</span> - Project Director</h5>
                    
                     <p>Nam interdum nisl id neque placerat hendrerit. Morbi ligula sapien, bibendum sagittis congue, Aliquam erat volutpat. Sed condimentum, velit accumsan venenatis dapibus</p>
                 
                   </div>
               
                   <div class="col_right">
                   
                            <img src="images/about/team02.jpg" class="alignleft20 pic">
                     <h5><span class="color_black">Shelly Roger</span> - Art Director</h5>
                    
                     <p>Nam interdum nisl id neque placerat hendrerit. Morbi ligula sapien, bibendum sagittis congue, Aliquam erat volutpat. Sed condimentum, velit accumsan venenatis dapibus</p>
                     
                    
                   </div>
                      <div class="clear"></div> 
                       
                   <div class="col_left">
                                      
                      <img src="images/about/team03.jpg" class="alignleft20 pic">
                     <h5><span class="color_black">Peter Woods</span> - Manager</h5>
                    
                     <p>Nam interdum nisl id neque placerat hendrerit. Morbi ligula sapien, bibendum sagittis congue, Aliquam erat volutpat. Sed condimentum, velit accumsan venenatis dapibus</p>
                   </div>
                       
                    <div class="col_right">
                  
                      <img src="images/about/team04.jpg" class="alignleft20 pic">
                     <h5><span class="color_black">Steven Finn</span> - Designer</h5>
                    
                     <p>Nam interdum nisl id neque placerat hendrerit. Morbi ligula sapien, bibendum sagittis congue, Aliquam erat volutpat. Sed condimentum, velit accumsan venenatis dapibus</p>
                    
                   </div>   
                     <div class="clear" style="height:40px;"></div>  
                       
                       
            </div>
               
             </article>
          </div>
        </dd>
        <!-- about us tab end-->       
        
        <!-- work tab start-->
        <dt class="dt3"><a href="#"></a></dt>
        <dd id="page3">
          <div class="inner">
            <article>
                  <h1 class="color_orange">our work</h1>
                  <h6>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
                  </h6>
                  <div id="gallery">
                    <div class="viewport">
                    
                      <ul class="overview" id="firstGallery">
                        <li>
                        <a rel="prettyPhoto" href="images/work/big01.jpg" >
                        <img src="images/work/thm01.jpg" alt="" title="<h4>Work 01</h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur autodit aufugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."></a>
                        </li>
                        <li>
                        <a rel="prettyPhoto" href="images/work/big02.jpg"  >
                        <img src="images/work/thm02.jpg" alt="" title="<h4>Work 02</h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur autodit aufugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."></a>
                        </li>
                        <li>
                        <a rel="prettyPhoto" href="images/work/big03.jpg" >
                        <img src="images/work/thm03.jpg" alt="" title="<h4>Work 03</h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur autodit aufugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."></a>
                        </li>
                        <li>
                        <a rel="prettyPhoto" href="images/work/big04.jpg" >
                        <img src="images/work/thm04.jpg" alt="" title="<h4 4>Work 04</h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur autodit aufugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."></a>
                        </li>
                        <li>
                        <a rel="prettyPhoto" href="images/work/big05.jpg" >
                        <img src="images/work/thm05.jpg" alt="" title="<h4>Work 05</h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur autodit aufugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."></a>
                        </li>
                        <li>
                        <a rel="prettyPhoto" href="images/work/big05.jpg" >
                        <img src="images/work/thm05.jpg" alt="" title="<h4>Work 05</h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur autodit aufugit sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."></a>
                       </li>                    
                      </ul>
                    </div>
                    <div class="gallery_nav"><a class="buttons prev" href="#">left</a><a class="buttons next" href="#">right</a></div>
                  </div>
            </article>
          </div>
        </dd>
        <!-- work tab end-->
    
        <!-- services tab start-->
        <dt class="dt4"><a href="#"></a></dt>
        <dd id="page4">
          <div class="inner">
            <article>
                    <h1 class="color_orange">services</h1>
                     
                     <div id="pane2" class="scroll-pane" >
                     
                     <h6>Quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.</h6>                    
                   
                    
                    <div class="services">
                    <div class="col_left">
                        <img src="images/icons/01.png" class="alignleft_pic" alt="" >
                        <h4 class="color_black">Design Consultant</h4>
                        <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur auodit.</p>
                            
                            <div class="clear"></div>
                            
                       <img src="images/icons/02.png" class="alignleft_pic" alt="" >
                        <h4 class="color_black">Branding & Marketing</h4>
                        <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur auodit.</p>   
                        
                         <div class="clear"></div>
                         
                         <img src="images/icons/03.png" class="alignleft_pic" alt="" >
                        <h4 class="color_black">Project Management</h4>
                        <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur auodit.</p>


                    </div>
                             
                             
                      <div class="col_right">
                        
                       <img src="images/icons/04.png" class="alignleft_pic" alt="" >
                        <h4 class="color_black">Quality Control</h4>
                        <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur auodit.</p>  
                        
                        <div class="clear"></div>
                            
                       <img src="images/icons/05.png" class="alignleft_pic" alt="" >
                        <h4 class="color_black">Document Report</h4>
                        <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur auodit.</p> 
                        
                         <div class="clear"></div>
                            
                       <img src="images/icons/06.png" class="alignleft_pic" alt="" >
                        <h4 class="color_black">Online Support</h4>
                        <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit aspernatur auodit.</p>


                    </div>


                </div>  
                </div>
                            
            </article>
          </div>
        </dd>
        <!-- services tab end-->
    
        <!-- contact tab start-->     
        <dt class="dt5"><a href="#"></a></dt>
        <dd id="page5">
          <div class="inner" >
            <article>
              <h1 class="color_orange">contact us</h1>
               <h6>consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h6>
<form id="contact_form" name="contactform" method="post" action="" > 
            <span id="success_message" style="display:none;" class="msg">Your message is sent</span>    
                    
                 <div class="clearfix"></div>
        <div class="clearfix">
                  <input name="name" type="text" id="contact_name" value="NAME" onFocus="MM_setTextOfTextfield('name','','')" />
          <span id="name_msg" class="msg "></span>
            <span class="clear"></span> </div>
        <div class="clearfix">
                  <input name="email" type="text"  id="contact_email" value="E-MAIL" onFocus="MM_setTextOfTextfield('email','','')" />
                   <span id="email_msg" class="msg "></span>
                <span class="clear"></span> </div>
         <div class="clearfix">
                 <textarea name="message" cols="5" rows="10"  id="contact_message" onFocus="MM_setTextOfTextfield('message','','')">MESSAGE</textarea>
                <span id="message_msg" class="msg "></span>
                <span class="clear"></span> </div>
          <div class="buttons"><input  class="button"  type="reset"  value="Clear" /> <input name="submit" class="button"  type="submit"  id="submit_btn" value="Send" />
                </div>
                
              </form>
              <div class="contact" >
                <ul>
                  <li>Lorem ipsum dolor sit 
                    consectetur adipisicing 
                    eiusmod tempor.<br>
                    PO BOX 1234</li>                
                    <li>Email : info@lobsign.com</li>
                    <li>Phone : +123 00012345</li>
                    <li>Fax : +123 00012345</li><br>             
                    <li><a href="#" title="Facebook"><img src="images/icons/fb.png" alt="Faceboook"  /></a></li>
                    <li><a href="#" title="Twitter"><img src="images/icons/tw.png" alt="Twitter"  /></a></li>
                    <li><a href="#" title="linkedin"><img src="images/icons/in.png" alt="linkedin"  /></a></li>                   
                  </ul>
              </div>
            </article>
          </div>
        </dd>
        <!-- contact tab end-->    
   <!-- content end-->


En dit is het stukje css wat te maken heeft met de pagina`s en indeling:

Cascading Stylesheet:
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
117
118
119
120
121
122
123

.button, input[type="submit"], input[type="text"], textarea {
    font-size:16px;
    color:#333333;
    box-shadow:inset 0 0 0px #aaaaaa, 2px 2px 1px #aaaaaa;
    -khtml-box-shadow:inset 0 0 0px #aaaaaa, 2px 2px 1px #aaaaaa;
    -moz-box-shadow:inset 0 0 0px #aaaaaa, 2px 2px 1px #aaaaaa;
    -ms-box-shadow:inset 0 0 0px #aaaaaa, 2px 2px 1px #aaaaaa;
    -o-box-shadow:inset 0 0 0px #aaaaaa, 2px 2px 1px #aaaaaa;
    -webkit-box-shadow:inset 0 0 0px #aaaaaa, 2px 2px 1px #aaaaaa;
    padding:12px 20px 12px 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color:#eeeeee;
    font-family:'ArimoRegular';
    -moz-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    transition:all 0.3s linear;
    cursor:pointer;
}
.button:hover, input[type="submit"]:hover, input[type="text"]:hover, textarea:hover {
    box-shadow:inset 0 0 15px #666666, 2px 2px 1px #aaaaaa;
    -khtml-box-shadow:inset 0 0 15px #666666, 2px 2px 1px #aaaaaa;
    -moz-box-shadow:inset 0 0 15px #666666, 2px 2px 1px #aaaaaa;
    -ms-box-shadow:inset 0 0 15px #666666, 2px 2px 1px #aaaaaa;
    -o-box-shadow:inset 0 0 15px #666666, 2px 2px 1px #aaaaaa;
    -webkit-box-shadow:inset 0 0 15px #666666, 2px 2px 1px #aaaaaa;
    background-color:#ffffff;
    -moz-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    transition:all 0.3s linear;
    color:#000000;
}
.button a {
    font-size:16px;
    color:#333333;
    text-decoration:none;
}
.button a:hover {
    color:#000000;
}
/* ========================= Global properties END =============================== */

/* ============================= container START =================================== */
#content {
    position:absolute;
    left:316px;
    top:20px;
    overflow:hidden;
    height:459px;
    padding-left:4px;
}
#content>dd, #content>dt {
    float:left;
    margin:0 1px 0 0;
    height:459px;
    position:relative;
}
#content>dt {
    z-index:5;
    width:59px;
    background:url(../images/main_nav.png) no-repeat;
}
#content>dd {
    width:680px;
    overflow:hidden;
    position:relative;
    z-index:1;
}
#content>dt a {
    width:59px;
    height:459px;
    background:url(../images/main_nav.png) no-repeat;
    display:block;
}
#content>.dt1 {
    background-position:0 0;
}
#content>.dt1 a {
    background-position:0 -459px;
}
#content>.dt2 {
    background-position:-60px 0;
}
#content>.dt2 a {
    background-position:-60px -459px;
}
#content>.dt3 {
    background-position:-120px 0;
}
#content>.dt3 a {
    background-position:-120px -459px;
}
#content>.dt4 {
    background-position:-180px 0;
}
#content>.dt4 a {
    background-position:-180px -459px;
}
#content>.dt5 {
    background-position:-240px 0;
}
#content>.dt5 a {
    background-position:-240px -459px;
}
#content .inner {
    background-color:#FFFFFF;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    height:459px;
    position:relative;
}
article {
    padding:20px 30px;
    width:610px;
    max-width:610px;
}
/* ============================== container END ==================================== */

donderdag 12 december 2013 14:36

Acties:
  • TERW_DAN
  • Registratie: Juni 2001
  • Niet online

TERW_DAN

Met een hamer past alles.

om te beginnen, je kunt wel een .dt6 maken, maar die staat niet in je CSS, dat gaat dus weinig opschieten.

Maar wat heb je nu precies geprobeerd dan? Want honderden regels code doorzoeken naar wat er mogelijk wel of niet klopt is niet heel praktisch. Waar gaat het precies fout?

donderdag 12 december 2013 14:37

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Was RobIII in "HTML-CSS(Oefensite, pagina inbouwen).ik loop vast, wie helpt" niet duidelijk genoeg :?

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Dit topic is gesloten.

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq