Bonjour à tous,
quelqu'un saurait me dire comment aligner un text par rapport à une image (j'ai essayé la propriété vertical-align mais ça ne marche pas...
Le texte que je voudrais aligner est dans le pied de page, je voudrais qu'il soit centré par rapport au logo du W3C.
Merci d'avance pour vos réponses!
pour une meilleur visualisation, voici le code html de ma page:
Et le code CSS lié:
Modifié par remenems (12 Mar 2008 - 16:58)
quelqu'un saurait me dire comment aligner un text par rapport à une image (j'ai essayé la propriété vertical-align mais ça ne marche pas...
Le texte que je voudrais aligner est dans le pied de page, je voudrais qu'il soit centré par rapport au logo du W3C.
Merci d'avance pour vos réponses!
pour une meilleur visualisation, voici le code html de ma page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La Plateforme Android</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
</head>
<body>
<!-- L’entête de la page, affiché tout en haut de l’écran : -->
<div id="entete">
<h1>La Plateforme Android</h1>
<!-- Le menu principal du site, affiché horizontalement: -->
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="URLographie.html">URLographie</a></li>
<li><a href="Contacts.html">Contacts</a></li>
</ul>
</div>
<!-- La page en elle-même : -->
<div id="page">
<!-- Le sous-menu, affiché dans une colonne sur la gauche du site : -->
<div id="sous-menu">
<p class="grand_titre">La Plateforme Android</p>
<p class="sous_titre"><a href="A1_pres.html">Présentation générale</a></p>
<p class="sous_titre"><a href="A2_archi.html">Architecture</a></p>
<p class="sous_titre"><a href="A3_interf.html">Interface</a></p>
<p class="sous_titre"><a href="A4_fonct.html">Fonctionnalités</a></p>
<p class="sous_titre"><a href="A5_term.html">Terminaux</a></p>
<p class="grand_titre">Alternatives</p>
<p class="sous_titre"><a href="B1_comm.html">Communauté</a></p>
<p class="sous_titre"><a href="B2_conc.html">Concurrence</a></p>
<p class="grand_titre">Stratégie de Google</p>
<p class="sous_titre"><a href="C1_pos.html">Positionnement</a></p>
<p class="sous_titre"><a href="C2_spectre.html">Un spectre convoité</a></p>
</div>
<!-- Le contenu utile de la page : -->
<div id="contenu">
<h2>Présentation générale</h2>
<h3>Android, c’est quoi?</h3>
<p><b>Android est une plate-forme logicielle open source pour combinés mobiles (sous licence Apache version 2) qui intègre différents composants:</b></p>
<ol>
<li>Un système d’exploitation (basé sur Linux)</li>
<li>Un middleware (pour gérer les interactions entre le matériel, le système d’exploitation et les logiciels) </li>
<li>Une interface graphique </li>
<li>Un éventail d’applications (mail, agenda, etc.)</li>
</ol>
<p>Android se décline donc comme une pile logicielle pour mobiles qui comprend un système d’exploitation, un middleware et des applications clés.</p>
<h3>L’état d’esprit de Google pour le lancement (contribution au développement)</h3>
<blockquote>
<p>
"Les téléphones portables sont la clé d’un accès pour tous à l’information; c’est pourquoi nous nous sommes engagés à rendre disponibles un maximum de nos services sur les mobiles"
</p>
<p>(Communiqué officiel des dirigeants GOOGLE)</p>
</blockquote>
<p>Android est le nom du système d’exploitation open source pour smartphones, PDA et terminaux mobiles. C’est également le nom de la start-up qui l’a conçu et qui a été rachetée par Google. La plateforme a été officiellement lancée le 5 novembre 2007. Afin de promouvoir ce système d’exploitation ouvert, Google a su fédérer autour de lui une trentaine de constructeurs réunis au sein de l’Open Handset Alliance</p>
<p>Android SDK fournit les outils et les API nécessaires pour commencer à développer des applications sur la plate-forme Android utilisant le langage de programmation Java.</p>
<p>Cette plate-forme permettra notamment aux fabricants de mobiles d’intégrer facilement des applications natives.</p>
<h3>Les partenaires (développeurs, stratégie d’alliance)</h3>
<p>Android se veut surtout le point de ralliement des développeurs, des opérateurs et des fabricants de terminaux pour répondre aux besoins en constante évolution des consommateurs. Mais pour soutenir cette initiative, il faut des appuis. </p>
<p>Ce sera le rôle de l’Open Handset Alliance qui regroupe 34 sociétés chargées de développer des technologies capables d’abaisser le coût du développement et de la fabrication des mobiles.</p>
<p class="image"><img src="images/texas.gif" width="80" height="50" alt=""><img src="images/moto.gif" width="100" height="50" alt=""><img src="images/docomo.gif" width="90" height="50" alt=""><img src="images/del.jpg" width="110" height="40" alt=""><img src="images/htc.gif" width="80" height="50" alt=""><img src="images/intel.gif" width="80" height="50" alt="">
</div>
<!-- Le pied de page : -->
<div id="pied">
<img src="images/validCSS.JPG" width="66" height="23" alt="">Exposé 2008 sur la plateforme Android - Judicaël Ombaka Ekori/Rémi Garot/TELECOM Lille 1
</div>
</div>
</body>
</html>
Et le code CSS lié:
body {
background: #C4D0AD;
margin: 10px 220px;
font-family: sans-serif;
font-size: small;
}
#page {
width : 760px;
background: white;
border: 10px solid #424242;
border-top: none;
}
#entete {
width : 760px;
background: #587717;
border: 10px solid #424242;
border-bottom: none;
}
h1 {
margin:0;
text-indent: -100000px;
background: #97C024 url('images/entete.png');
color: white;
word-spacing: 1em;
letter-spacing: 3px;
width: 750px;
height: 150px;
line-height:150px;
text-align: center;
font-size: xx-large;
}
#menu {
background: #666666;
list-style: none;
margin: 0;
padding: 0;
height: 30px;
line-height:30px;
}
#menu li {
float: left;
margin: 0 10px;
}
#menu a {
text-decoration: none;
color: white;
cursor: pointer;
}
#sous-menu {
height: 500px;
background: #EEEEEE;
/*background: url("ss-menu.png") repeat-y;*/
float: left;
width: 150px;
margin-top:0;
margin-left: 0;
padding:5px;
}
#sous-menu a {
text-decoration: none;
color: #666666;
}
p.grand_titre {
margin-top: 40px;
margin-left: 4px;
margin-bottom: 5px;
color: #587717;
font-weight: bolder;
}
p.sous_titre {
padding: 0;
margin-left: 4px;
margin: 10px;
}
#menu a:hover, #sous-menu a:hover,
#menu a:focus, #sous-menu a:focus,
#menu a:active, #sous-menu a:active
{
color: black;
}
#contenu {
margin-bottom: 30px;
margin-left: 165px;
margin-right: 5px;
padding: 25px;
word-spacing: 2px;
}
p {
text-align: justify;
}
p.gras{
font-weight: bold;
}
#contenu p{
text-indent: 50px;
}
#contenu p.image{
text-indent: 0px;
text-align: center;
}
li{
text-align: justify;
}
blockquote {
font-style: italic;
text-align: justify;
margin:0;
}
#contenu h2 {
font-family: serif;
background: #DFCEA1 none; /* Fond du titre bleu (et sans image de fond) */
color: black;
padding: 0.3em;
text-align: center;
letter-spacing: 0.3em;
margin-bottom: 50px;
}
#contenu h3 {
color: black;
font-weight: bold;
border-bottom: 1px solid #804000;
margin-bottom: 20px;
margin-top: 50px;
}
#contenu h4 {
margin-left: 10px;
margin-top: 30px;
padding: 2px 10px 2px 5px;
border-left: 5px solid #804000;
color: #804000;
font-weight: bold;
}
#contenu ol {
margin-bottom: 30px;
}
#contenu ol > li{
margin-top: 20px;
}
#contenu ul li{
margin-bottom: 5px;
}
#pied {
clear:both;
background: #A2C01B;
border-top: 1px solid #454545;
vertical-align: super;
}
@media print {
#menu, #sous-menu {
display: none;
}
body {
background: none;
margin: 0;
}
#page {
background: none;
border: none;
}
h1 {
border: 1px solid black;
text-indent: 0px;
}
#entete {
border: none;
}
#contenu {
margin: 0;
padding: 0;
}
#pied {
border: 1px solid black;
}
}Modifié par remenems (12 Mar 2008 - 16:58)
