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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<html>
<head>
<meta keywords="mapage, mon autre page">
<title> ma page </title>
<script type="text/javascript">
function montrer(element,lien)
{
var les_elements=new Array("apropos","inscription","liens-utiles","contact");
for (var i=0; i<les_elements.length;i++)
{
document.getElementById(les_elements[i]).style.display='none';
document.getElementById(i+1).className='liens-noactif';
}
document.getElementById(element).style.display='block';
document.getElementById(lien).className='liens-actif';
}
</script>
<style type="text/css">
body
{
font-family:arial;
font-size:14px;
}
#conteneur
{
width:804px;
margin:auto;
}
#haut{
height:100px;
font-size:18px;
padding:10px;
}
#liens{
height:24px;
padding-top:6px,
}
#milieu{
height:400px;
background:#ddc;
padding-top:30px;
}
#bas
{height:20px;
background:#999;
}
#liens a
{
display: block;
background:#ddd;
margin-right: 1px;
padding: 5px;
float: left;
width: 190px;
text-align:center;
color: #333;
}
#liens a:hover
{
}
.liens-actif
{
display: block;
background:#ddd;
margin-right: 1px;
padding: 5px;
float: left;
width: 190px;
text-align:center;
color: #333;
border-top: 3px solid #999;
background:grey;
}
.liens-noactif
{
display: block;
background:#ddd;
margin-right: 1px;
padding: 5px;
float: left;
width: 190px;
text-align:center;
color: #333;
}
#apropos,
#inscription,
#liens-utiles,
#contact{
display:none;
height:400px;
overflow:auto;
text-align:justify;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="haut">
<img src="img/logo.jpg" width="128" height="96" alt="logo"/>
NUMERIC CONCEPT
</div>
<div id="liens">
<a id="1" href="javascript:montrer('apropos',1)">A propos de Numeric Concept</a>
<a id="2"href="javascript:montrer('inscription',2)">S'inscrire</a>
<a id="3" href="javascript:montrer('liens-utiles',3)">Liens-utiles</a>
<a id="4" href="javascript:montrer('contact',4)">Contact</a>
</div>
<div id="milieu">
<div id="apropos">
<h3>A propos</h3>
Bonjour
<br/>
Site d'étude des systèmes industrielles
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, tellus non posuere ultricies, dui ligula interdum orci, in cursus orci orci non massa. Praesent mi risus, varius non porttitor quis, laoreet ut sapien. Morbi sit amet erat vel elit pretium vehicula in ut nunc. Quisque molestie vulputate sagittis. Nullam sed euismod leo. Nam mollis rutrum lectus et ornare. Aenean eget tellus elit, quis scelerisque diam. Aenean quis orci odio. Maecenas sed lacus ipsum, ac egestas diam. Donec bibendum, justo a commodo sollicitudin, ante augue elementum libero, vel mollis magna ligula sit amet orci. In hac habitasse platea dictumst.
Nam vel enim ac tortor malesuada suscipit. Pellentesque in velit orci, sit amet elementum sem. Nulla ac quam eget nulla tincidunt viverra ut in purus. In mauris nunc, semper id sodales vel, fringilla eu massa. Proin tincidunt metus pretium augue mattis non feugiat tellus ornare. Ut et diam orci. Cras bibendum tincidunt condimentum. Cras sed mauris a nibh hendrerit elementum eget eu massa. Nullam sed nisi et lorem tempus scelerisque a quis urna. Duis tempor malesuada consectetur. Maecenas consectetur augue id augue pretium sed laoreet lectus accumsan.
Donec orci mi, rhoncus condimentum ullamcorper vel, condimentum vel elit. Donec sollicitudin rhoncus lectus, nec pretium est semper ut. Pellentesque mollis dui vel ligula tristique eu dapibus neque tincidunt. Aliquam quis quam eu nisl dignissim lacinia vitae ac dui. Cras tincidunt justo varius purus ultrices sit amet tempor nisl fermentum. Nullam sodales nibh a felis consequat cursus. Pellentesque hendrerit mauris at nisl viverra mollis. Mauris cursus tellus non lorem scelerisque rutrum. Phasellus in libero magna. Proin sed scelerisque augue. Suspendisse potenti. Pellentesque lacinia, nisi sed blandit pulvinar, elit mauris suscipit nisi, eu lobortis odio massa a turpis.
Nullam tellus erat, fermentum laoreet tincidunt molestie, hendrerit quis massa. Ut euismod nunc et metus iaculis eget fermentum nibh tincidunt. Etiam ac congue massa. In commodo congue interdum. In consectetur lectus ac nisl malesuada eu sagittis metus scelerisque. Morbi fermentum enim eu justo eleifend pellentesque. Sed commodo auctor nisl ac semper. In ullamcorper varius libero a interdum. Sed ac turpis sapien. Vestibulum iaculis egestas orci, sit amet pulvinar dolor ullamcorper quis. Aliquam id massa augue. Morbi vitae eros sed dolor porta ultrices at sed odio. Phasellus tristique pulvinar mi, ac vulputate magna luctus a. Vivamus ac magna varius augue rhoncus ullamcorper. Integer sollicitudin elit sed leo viverra eget bibendum purus sodales. Cras sapien urna, malesuada ac mattis a, adipiscing id quam. Praesent volutpat est eu nibh ultricies id feugiat mauris dapibus.
Proin ultricies mi pharetra sapien auctor vehicula nec eget velit. Donec nibh turpis, tempus non convallis non, dapibus molestie mi. Nunc feugiat mauris at est porta ac aliquet arcu sodales. Suspendisse sollicitudin eleifend dapibus. Fusce mollis mauris non massa ullamcorper feugiat. Quisque in purus nunc, a auctor justo. Mauris tempor, est in dapibus tristique, lectus ante rutrum urna, tempor adipiscing tortor nisi eu ante. Nunc vulputate, velit at gravida accumsan, turpis ipsum aliquet mauris, at tempor justo ligula vel eros. Fusce quis mauris elit. Ut imperdiet tempus est viverra consectetur. Integer et blandit ante. Mauris vel metus ut leo mollis tempor. Nunc eget eros et dolor malesuada aliquam. Aenean nec justo erat. Fusce eget mi eu odio vulputate tristique in vitae mi. Donec volutpat tincidunt vehicula. Nullam est leo, facilisis quis rhoncus mattis, elementum in felis. Nulla mauris nisl, pellentesque vel hendrerit nec, tempor vitae est.
</div>
<div id="inscription">
<form>
Pseudo: <br/>
<input type="text" name="pseudo"/>
<br/><br/>
Pass:<br/>
<input type="password" name="pass"/>
<br/><br/>
E-Mail:<br/>
<input type="text" name="email"/>
<br/><br/>
<input type="submit" value="S'inscrire" />
</form>
</div>
<div id="liens-utiles">
</div>
<div id="contact">
Jean Pierre Bayard
</div>
</div>
<div id="bas">
le bas de page
</div>
</div>
</body>
</html> |
Problème de débordement d'un texte hors d'un conteneur
Répondre avec citation
, 
et 
Envoyé par toutounesan
Partager