Bonjour,
Je conçois actuellement une template pour un site personnel. Le site en lui même est composé de deux parties, l'une contient un menu qui se trouve à gauche et l'autre qui contient les informations à droite. Lorsque la partie de droite reçois trop d'information le texte dépasse et déforme donc ma page.
Voici mon code source html:
Et voila mon code source html:
Je vous remercis d'avançe d'avoir pris le temps de lire mon message et eventuellement de me répondre.
Modifié par BenjaminMosse (17 Sep 2006 - 11:07)
Je conçois actuellement une template pour un site personnel. Le site en lui même est composé de deux parties, l'une contient un menu qui se trouve à gauche et l'autre qui contient les informations à droite. Lorsque la partie de droite reçois trop d'information le texte dépasse et déforme donc ma page.
Voici mon code source html:
/* Structure de la page
----------------------------------------------- */
#container{
border-top:1px solid #230;
border-right: 1px solid #230;
width:760px;
margin: 0px;
padding: 0px;
background: transparent url(images/topbg.gif) repeat-x;
}
#footer{
position:absolute;
left:0;
top:230px;
font: 10px verdana, arial, sans serif;
color:#fff;
margin:0 30px 0 400px;
width:340px;
text-align:right;
}
#quickSummary{
margin: 0 0 0 355px;
width:332px;
height: 200px;
background: #ABBC47 url(images/quicksumbg.gif);
border-right:1px solid #ABBC47;
border-top:1px solid #ABBC47;
}
#quickSummary p.p1 {
font: bold 11px/14px arial,verdana, sans serif;
color:#fff;
padding:100px 30px 2px 30px;
}
#quickSummary p.p2{
position:absolute;
left:0;
top:230px;
font: 10px verdana, arial, sans serif;
color:#fff;
margin:0 30px;
}
#quickSummary p.p2 a, #footer a{ color:#fff; }
#quickSummary p.p2 a:hover, #footer a:hover{ color:#230; background-color:#fff;text-decoration:none; }
#quickSummary .p1{ margin-top:0; }
#preamble{
padding:50px 30px 30px 30px;
margin:30px 0 0 355px;
border-width:0 0 1px 1px;
border-color:#fff #ddd;
border-style:solid;
text-align:left;
background: transparent url(images/endsection.gif) no-repeat bottom center;
width:343px;
}
#preamble p { text-align:justify; }
#preamble h3{
background: transparent url(h3preamble.gif) no-repeat bottom left;
margin: 0px;
width: 270px;
height: 36px;
border-bottom:1px solid #ddd;
}
#preamble h3 span{ display:none; }
#preamble p.p1{ width: 270px; }
#supportingText {
border-width:0 0 1px 1px;
border-color:#fff #ddd;
border-style:solid;
margin:0px 0px 0px 355px;
padding:50px 30px 0 30px;
width:405px;
voice-family: "\"}\"";
voice-family: inherit;
width:343px;
height: auto;
}
#Contents {
padding:0 0 20px 0;
margin-bottom:20px;
text-align:left;
background: transparent url(images/endsection.gif) no-repeat bottom center;
}
#Contents h3 { margin: 0px; min-width: 200px; height: 36px; border-bottom:1px solid #ddd; }
#Contents h3 span { display:none; }
Et voila mon code source html:
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>Cité Scolaire de Nérac</span></h1>
<h2></h2>
</div>
<div id="quickSummary">
<p class="p1">Bienvenue sur le site de la cité scolaire de Nérac. Vous trouverez ici toutes les informations sur notre établissement ainsi que diverses ressources mises à votre disposition.</p>
<p class="p2"></p>
</div>
<div id="preamble">
<h3>Présentation</h3>
<p class="p1"><span>blablablablablablablablablablablablablablablablablablablabla</span></p>
</div>
</div>
<div id="supportingText">
<div id="Contents">
<h3>Les dernières nouvelles :</h3>
<p class="p1"><span>blablablablablablablablablablablablablablablablabla</span></p>
</div>
</div>
<div id="linkList">
<div id="linkList2">
<div id="lselect">
<h3 class="select"></h3>
<ul>
<li><a href="#">Actualités</a><div class="c">Les nouvelles</div></li>
<li><a href="#">Connection</a><div class="c">Se logger</div></li>
<li><a href="#">Enseignants</a><div class="c">Listes des professeurs</div></li>
<li><a href="#">Contact</a><div class="c">Nous contacter</div></li>
</ul>
</div>
<div id="lressources">
<div id="lressources">
<h3 class="ressources"></h3>
<ul>
<li>Cours de SVT</li>
<li>Cours de Physique</li>
<li>Cours de Gestion</li>
</ul>
</div>
</div>
<div id="liens">
<h3 class="links"></h3>
<ul>
<li><a href="http://redkod.byethost7.com/">Redkod</a></li>
<li>Chez Jeannot.com</li>
</ul>
</div>
</div>
</div>
</div>
Je vous remercis d'avançe d'avoir pris le temps de lire mon message et eventuellement de me répondre.
Modifié par BenjaminMosse (17 Sep 2006 - 11:07)
