Salut à tous,
Je réalise actuellement un site web (xhtml, css) pour le scolaire et j'aimerai savoir comment je pourrais intégrer un bloc d'information statique (ou je mettrais 5 informations qui seront encadrer et séparer)par un à droite de mon texte sur la page d'accueil s'il vous plaît ?
Petit exemple (sur la photo c'est un peu mal représenter mais c'est ça l'esprit) :
Voici un screenshot de mon site :
le code source de mon site (html):
Le code css :
Merci d'avance pour votre aide !
Je réalise actuellement un site web (xhtml, css) pour le scolaire et j'aimerai savoir comment je pourrais intégrer un bloc d'information statique (ou je mettrais 5 informations qui seront encadrer et séparer)par un à droite de mon texte sur la page d'accueil s'il vous plaît ?
Petit exemple (sur la photo c'est un peu mal représenter mais c'est ça l'esprit) :
Voici un screenshot de mon site :
le code source de mon site (html):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<header>
<title>AilTech - Page d'accueil</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style.css" />
</header>
<body>
<img src="logo.png" alt="Logo AilTech" align="left"/>
<table align="center" >
<tr>
<td align="center" class="orange" ><h1>AilTECH Ingénierie Informatique</h1> <h3>... Looking to the future ...</h3></td>
</tr>
</table>
<ul class="bouton">
<li><a href="index.html"title="Page accueil">Accueil</a></li>
<li><a href="connaitre.html"title="nsconnaitre">Nous connaître</a></li>
<li><a href="catalogue.html"title="catalogue">Le catalogue</a></li>
<li><a href="formations.html"title="formations">Nos formations</a></li>
<li><a href="contact.html"title="contact">Nous contacter</a></li>
</ul>
<br />
<table border="10">
<div class="table"> <p>Bonjour et bienvenue !
<br />
<br />
AilTECH est une société de services d'ingénierie informatique (SSII) installée à Petite Ile depuis 1980, Ail-TECH connaît une croissance régulière dans deux activités principales :
<br /><br />
- La formation des personnels (le développement d'applications et les réseaux informatiques), dans 3 centres (siège, St Denis, St Pierre).
- La distribution, pour les professionnels, de matériel de réseaux informatiques en partenariat avec les principaux acteurs du marché
<br /><br />pied de page css toujours en bas
Bien implantée à la Réunion, elle compte près de 100 clients répartis en deux catégories :
<br />
- les PME/PMI
- les collectivités territoriales (Conseil Général pour l'équipement des collèges et le Conseil Régional pour les lycées).
<br /><br />
AilTECH assure l'assistance technique lors de la vente auprès de ses clients. Elle les accompagne et les conseille dans leur démarche de veille technologique. Elle conserve un excellent niveau de compétences dans son domaine grâce à des plans de formation et de certification permanente des ingénieurs et des techniciens. Composée d'une équipe de 30 personnes, AilTECH privilégie la qualité de la relation avec ses clients pour les accompagner dans leurs projets.
Merci de votre visite.</p>
</td></table> </div>
<footer>Installée à Petite Ile depuis 1980 - © Lycée Pierre Poivre - BTS SIO 2014/2016</footer>
</body>
</html>Le code css :
Code:
table
{
border-collapse: collapse; /* Les bordures du tableau seront collées */
}
td.orange{
color: #FF8600;
}
html{
color: black;
background-image: url("fond.jpg"); font: 1.1em sans-serif;
}
.bouton{
display: table;
width: 1000px;
margin: 20px auto;
padding: 0;
background: #663017;
background: -webkit-linear-gradient(#52CDEF, #281766);/*Dégradé de couleur*/
background: -moz-linear-gradient(#52CDEF, #281766);
background: -ms-linear-gradient(#52CDEF, #281766);
background: -o-linear-gradient(#52CDEF, #281766);
background: linear-gradient(#52CDEF, #281766);
border-radius: 80px;
}
.bouton li{
display: table-cell;
}
.bouton li a{
display: block;
text-align: center;
color: #C5DEE5; /* police */
text-decoration: none;
padding: 8px 0px 17px 0px;
position: relative;
}
.bouton li:first-child a{
border-radius: 5px 0 0 5px;
}
.bouton li:last-child a{
border-radius: 0 5px 5px 0;
}
.bouton li a:hover,
.bouton li a:focus{
background: rgba(22, 138, 177,.2);
}
.bouton li a:active{
background: linear-gradient(rgba(22, 138, 177,.2),rgba(22, 138, 177,.1));
}
.bouton li a::before{
content: '';
position: absolute;
left: 50%;
bottom: 9px;
margin-left: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(173, 216, 230, .5);
}
.bouton li a:hover::before,
.bouton li a:focus::before{
background: #168AB1;
}
.table{border:2px solid;}Merci d'avance pour votre aide !
