[]résolu] Problème simple d'alignement d'images dans des div
7 messages
• Page 1 sur 1
- insanecricri
- Nouveau WRInaute
- Messages: 30
- Inscription: 6 Jan 2007
[]résolu] Problème simple d'alignement d'images dans des div
le Dim Avr 15, 2007 9:39
Bonjour,
Je serai vraiment reconnaissant à celui qui pourra m'aider, car je vais bientôt commencer à me manger les mains.
Je souhaite faire quelque chose vraiment très simple, et pourtant, je n'y arrive pas !
Je voudrais que mon petit texte clignotant (image en haut à droite) "Site animé par la team A.A." soit aligné avec la banniere (verticalement). Rien n'y fait, l'image se met plus bas.
Le problème est présent sur toutes les pages du site :
http://www.airsofteur.com/
Voici l'url du css : http://www.airsofteur.com/css/style.css
Contrainte : il est vrai que je pourrais simplement faire un tabeau, mais j'utilise des div afin de faire correspondre les colonnes des bannières/images avec le reste de la page.
Contrainte 2 : j'aimerais par la suite, placer une troisième image en haut à gauche.
Merci pour toute idée.
Je serai vraiment reconnaissant à celui qui pourra m'aider, car je vais bientôt commencer à me manger les mains.
Je souhaite faire quelque chose vraiment très simple, et pourtant, je n'y arrive pas !
Je voudrais que mon petit texte clignotant (image en haut à droite) "Site animé par la team A.A." soit aligné avec la banniere (verticalement). Rien n'y fait, l'image se met plus bas.
Le problème est présent sur toutes les pages du site :
http://www.airsofteur.com/
Voici l'url du css : http://www.airsofteur.com/css/style.css
Contrainte : il est vrai que je pourrais simplement faire un tabeau, mais j'utilise des div afin de faire correspondre les colonnes des bannières/images avec le reste de la page.
Contrainte 2 : j'aimerais par la suite, placer une troisième image en haut à gauche.
Merci pour toute idée.
Dernière édition par insanecricri le Dim Avr 15, 2007 11:17, édité 1 fois.
- insanecricri
- Nouveau WRInaute
- Messages: 30
- Inscription: 6 Jan 2007
le Dim Avr 15, 2007 10:51
Voici le code de la page (pour les paresseux comme moi)
1. Le fichier php
2. Le fichier CSS
1. Le fichier php
- Code: Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Guide de l'Airsoft Belgique Fédération: répliques et conseils pour en softair
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Christophe NOEL" />
<meta name="copyright" content="© Christophe NOEL" />
<meta name="keywords" content=
"airsoft airsofteur softair air soft billes scénarios répliques reviews association belgique france cyma marui classic army fps aeg gbb gnb spring huile achat holster chargeur metal full tir automatique gaz masque grenade pistolet batteries chrony rencontres évènements" />
<meta name="date" content="2006-08-24" />
<meta name="description" content="Guide de l'Airsoft : répliques, reviews, scénarios, conseils d'achats" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<table border="0" width="100%">
<tr>
<td>
<div id="topleft"></div>
<div id="topcontent">
<center>
<a href="http://www.airsofteur.com/"><img height="80" src="http://www.airsofteur.com/img/banner2.jpg" alt="Guide Airsoft en Belgique et en France" border="0" /></a><br />
<a href="http://www.airsofteur.com/">Accueil Airsoft</a> | <a href="bestarmes.php">Répliques</a> | <a href="http://airsoft-belgique.airsofteur.com">Airsoft Belgique</a> | <a href=
"partenaires.php">Partenaires</a> | <a href="http://www.airsofteur.com/forum/">Forum</a> | <a href="contact.php">Contact</a>
</center>
</div>
<div id="topright">
<a href="http://aa.airsofteur.com/"><img alt="Team Airsoft Liège" src="http://www.airsofteur.com/img/byaa.gif" border="0" /></a>
</div>
</td>
</tr>
</table>
<div id="left">
<div class="menu">
<h3>
L'Airsoft
</h3>
<ul>
<li>
<a href="http://www.airsofteur.com/quid.php">Qu'est-ce que l'airsoft ?</a>
</li>
<li>
<a href="http://www.airsofteur.com/debuter.php">Comment débuter ?</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/forum/">Forums</a>
</li>
</ul>
</div>
<div class="menu">
<h3>
Les répliques
</h3>
<ul>
<li>
<a class="menu" href="http://www.airsofteur.com/repliques.php">Catégories de réplique</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/conseils.php">Conseils d'achat</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/bestrepliques.php">Sélections de répliques</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/shops.php">Meilleures boutiques</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/entretien.php">Entretien et précautions</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/marques.php">Marques réputées</a>
</li>
</ul>
</div>
<div class="menu">
<h3>
Les parties
</h3>
<ul>
<li>
<a class="menu1" href="http://www.airsofteur.com/objectifs.php">Objectifs de jeu</a>
</li>
<li>
<a class="menu1" href="http://www.airsofteur.com/variantes.php">Variantes de jeu</a>
</li>
<li>
<a class="menu1" href="http://www.airsofteur.com/joueurs.php">Joueurs spéciaux</a>
</li>
<li>
<a class="menu1" href="http://www.airsofteur.com/securite.php">Sécurité</a>
</li>
<li>
<a class="menu1" href="http://www.airsofteur.com/regles.php">Règlement</a>
</li>
</ul>
</div>
<div class="menu">
<h3>
Equipement
</h3>
<ul>
<li>
<a class="menu" href="http://www.airsofteur.com/equipement.php">Uniforme et équipement</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/billes.php">Billes</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/accessoires.php">Accessoires</a>
</li>
</ul>
</div>
<div class="menu">
<h3>
Communautés
</h3>
<ul>
<li>
<a href="http://www.airsofteur.com/wiki/">Encyclopédie Wiki</a>
</li>
<li>
<a class="menu" href="http://airsoft-belgique.airsofteur.com">Airsoft Belgique</a>
</li>
<li>
<a class="menu" href="http://www.france-airsoft.fr/">Airsoft France</a>
</li>
</ul>
</div>
</div>
<div id="right">
<div class="rightmenu">
<h3>
Shopping
</h3><a href="http://www.airsofteur.com/forum/viewforum.php?f=9"><b>Bonnes affaires</b> -> Achat répliques Cyma, Jin Gong, Sniper, Well, Dboys avec gearbox metal : à partir de <b>100
euros</b></a>
</div>
<div class="menu">
<h3>
Forums
</h3>
<ul>
<li>
<a class="menu" href="http://www.airsofteur.com/forum/index.php?c=5">Des idées pour vos scénarios</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/forum/index.php?c=2">Vos questions techniques</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/forum/index.php?c=3">Les parties publiques en Belgique</a>
</li>
</ul>
</div>
<h3>
Liens commerciaux
</h3><script type="text/javascript">
//<![CDATA[
<!--
google_ad_client = "pub-3328799335206397";
688345
google_ad_width = 180;
google_ad_height = 150;
google_ad_format = "180x150_as";
google_ad_type = "text_image";
google_color_border = "688345";
google_color_bg = "688345";
google_color_link = "d6f29e";
google_color_text = "d6f29e";
google_ad_channel = "";
//-->
//]]>
</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script> <script type="text/javascript">
//<![CDATA[
_uacct = "UA-288842-7";
urchinTracker();
//]]>
</script>
<h3>
Convertisseur FPS
</h3>
<form name="conversion_form" action="http://www.airsofteur.com/conversion.php" method="post">
<p>
<input type="text" name="montant" size="4" /> <select name="devise">
<option value="FJ">
FPS à Joules
</option>
<option value="JF">
Joules à FPS
</option>
</select>
</p>
<p>
<input type="submit" name="ok" value="Convertir" />
</p>
</form>
<h3>
Utile
</h3>
<ul>
<li>
<a class="menu" href="http://www.airsofteur.com/wiki/">Notre projet WikiMedia</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/puissance.php">Puissances des répliques</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/bricolage1.php">Bricolage 1</a>
</li>
<li>
<a class="menu" href="http://www.gaia-airsoft.org/gungrenades.htm">Bricolage: grenades</a>
</li>
<li>
<a class="menu" href="http://www.airsofteur.com/wiki/Special:Allpages" target="blank">Dico de l'airsoft</a>
</li>
</ul>
</div>
<div id="content">
<div class="editovert">
<center>
Bienvenue sur le portail des airsofteurs <b>débutants</b>. Découvrez de manière sobre les règles, les répliques d'armes et des idées de scénarios pour l'airsoft également appelé
"softair".<br />
<img height="60" src="img/airsoft1.jpg" alt="" /><img height="60" src="img/airsoft2.jpg" alt="" /><br />
</center>
</div><br />
<div class="editovert">
<center>
<h2>
6 mois d'existence - 150 visiteurs / jour !
</h2>Fêtons notre nouvel hébergement... plein de bande passante ! Pour l'occasion, nous vous offrons la <b>superbe vidéo</b> à succès qui nous caractérise, nous et notre fameux esprit de
second degré :<br />
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OZrw2i02Q5M" />
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/OZrw2i02Q5M" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350" />
</object>
</center><br />
</div>
<div class="edito">
<br />
L'airsoft est un <b>jeu</b> ou <b>sport</b> de loisirs issu du Japon : des adultes et mineurs jouent avec une âme d'enfants aux cowboys et aux indiens à l'aide de leurs <b>répliques</b>
d'armes propulsant des <b>billes</b> de plastique <b>biodégrables</b>. La Belgique, la France, le Luxembourg mais aussi la Suisse et le Canada comptent de <b>nombreux joueurs</b> de cette
nouvelle discipline.<br />
<center>
<b>Les airsofteurs ne sont ni adeptes de violence ni des fanatiques de l'armée.</b>
</center>
</div>
<div class="edito">
<b>WEBMASTERS :</b> pour un meilleur référencement sur internet, échangeons des liens entre nos sites : <a href="contact.php">contactez-moi</a> !<br />
<br />
</div>
<div class="index">
<h1 class="article">
Liste des mises à jour
</h1>
<div class="edito">
<b>14-04-07 :</b> Upgrade de l'hébergement. Amélioration du <i>design</i> et corrections du contenu.<br />
<b>30-03-07 :</b> Les utilisateurs d'<b>Internet Explorer</b> vont enfin pouvoir naviguer plus facilement dans le forum. Les bugs d'affichage liés à IE ont été corrigé grâce à Tiger qui
nous a informé de ce problème. L'équipe est en train de tester les nouvelles répliques chinoises de DBoys et Jing Gong.<br />
<b>23-01-07 :</b> Bonne nouvelle pour les cheapers : les rumeurs prétendent la nouvelle marque chinoise Jing Jong comme meilleure que Tokyo Marui... On parle aussi des fameuses M4 de chez
DBoyz. Bientôt un compte rendu fiable sur cette nouvelle marque qui s'ajoute aux bonnes marques cheaps telles que Cyma, Well, Both Elephant.<br />
<b>15-01-07 :</b> Bientôt un vrai look pour le site : enfin un design ! Airsofteur.com est classé meilleur nouveau site dans plusieurs annuaires de Belgique et de France !! Bref, que de
bonnes nouvelles.<br />
<b>20-12-06 :</b> Création du portail pour débutant. Notre projet est de pouvoir fournir un portail simple permettant aux débutants de rapidemment et facilement s'introduire aux bases de
l'airsoft en Belgique, France, Suisse et Canada.
</div>[ <a href="http://www.airsofteur.com/">retour</a>]
</div>
<center>
© Airsofteur.com 2006-2007 _ version 1.2 _ postmaster@airsofteur.com
</center>
</div>
</body>
</html>
2. Le fichier CSS
- Code: Tout sélectionner
br.spacer {
clear: both;
}
body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #35484e; background: #7c9659 }
h1 {margin: 0; color: #51262d; font-variant: small-caps;}
h3 {margin: 0; text-align: center; border-bottom: dashed 1px #51262d; color: #51262d;}
a {color: d6f29e; text-decoration: none;}
a:hover {color: #424339; text-decoration: underline;}
#topleft { float:left; width: 15%; }
#topright {float:right; width: 23%; padding: 5px;}
#topcontent { margin-left: 18%; margin-right: 25%;}
.small {margin-left: 10px; font-size: 50%;}
.menu ul {margin: 0; margin-top: 4px; margin-bottom: 10px; padding: 0; list-style: none;}
.menu a {width: 93%; margin: 1px; padding: 2px;padding-left:5px; display: block; border: solid 1px #35484e; background-color: #d6f29e; color: #35484e;}
.menu a:hover {background-color: #6c8649; color: #ffffff; text-decoration: none;}
.rightmenu ul {margin: 0; margin-top: 8px; margin-bottom: 8px; padding: 0; list-style: none;}
.rightmenu li {margin-top: 5px; marginbottom: 5px;}
.rightmenu a {color: #d6f29e;}
.rightmenu a:hover {color: #324339; text-decoration: underline;}
td {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #35484e; }
img { padding-right:5px ;}
div.edito { border:solid 1px #9CB4CE; background:#EDFBEC; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px; }
div.edito4 { border:solid 1px #9CB4CE; background:#F1FFEF; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px; }
div.editovert { border:solid 1px #7c9659; background:#d6f29e; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px; }
.edito a {color: blue; text-decoration: none;}
h1.article { font-family:Trebuchet MS,arial; font-variant:small-caps; font-size:11pt;
color:#369;
font-weight:bold;
border-bottom:1px solid #369; }
#header {margin-bottom: 10px; text-align: center;}
#topnav {margin-bottom: 10px; text-align: center;}
#left {float: left; width: 15%; margin-bottom: 25px; padding: 5px; background-color: #688345; border: solid 3px #324339;}
#left h3 {color: #d6f29e; border-bottom: dashed 1px #324339; margin-bottom: 1px; background-image:url(a1.gif);}
#right {float: right; color:#000000; width: 23%; padding: 5px;background-color: #688345; border: solid 3px #324339;}
#right h3 {color: #d6f29e; border-bottom: dashed 1px #324339;margin-bottom: 1px; background-image:url(a1.gif);}
#content {margin-left: 18%; margin-right: 25%; padding: 5px; padding-left: 8px; padding-right: 8px; background-color: #b5d18f; border: solid 3px #51262d;}
#content p {text-align: left;}
#content a:hover {color: #f03732;}
#footer {clear: both; margin-top: 25px; text-align: center;}
div.banniere { width:100%; color:#c60; background-color:#ffecce; border:1px solid #c60; }
div.titredusite { width:100%; background:#EEEEEE; border:solid 1px #CCCCCC; font-family:Trebuchet MS ,arial; font-size:9pt; text-align:left; }
td.banniere { width:100%; color:#c60; background-color:#FFFFAA; border:1px solid #c60; padding:0px; }
Dernière édition par insanecricri le Dim Avr 15, 2007 10:53, édité 1 fois.
- Koxin-L
- WRInaute passionné
- Messages: 1925
- Inscription: 29 Mar 2007
le Dim Avr 15, 2007 10:52
- Code: Tout sélectionner
#topright
{
float:right;
width: 23%;
padding: 5px;
margin-top: -xxpx
}
Mais bon, quel intérêt de mettre des div dans un td...
Met des div partout
- insanecricri
- Nouveau WRInaute
- Messages: 30
- Inscription: 6 Jan 2007
le Dim Avr 15, 2007 11:00
Merci beaucoup pour ton aide mais...
(1) "margin-top: -xxpx " -> cela fonctionne mais je crains que pour certaines résolutions, l'image ne remonte trop haut. Ton avis ?
(2) Pour le td -> sans le tableau qui encadre mes <div> l'affichage de ma page foire totalement. Si vous avez une idée je prends aussi
(et en encadrant d'un div ca ne marche po :s)
Merci bcp en tout cas.
(1) "margin-top: -xxpx " -> cela fonctionne mais je crains que pour certaines résolutions, l'image ne remonte trop haut. Ton avis ?
(2) Pour le td -> sans le tableau qui encadre mes <div> l'affichage de ma page foire totalement. Si vous avez une idée je prends aussi
(et en encadrant d'un div ca ne marche po :s)
Merci bcp en tout cas.
- insanecricri
- Nouveau WRInaute
- Messages: 30
- Inscription: 6 Jan 2007
le Dim Avr 15, 2007 11:03
Mise à jour : en encadrant d'un div ca ne marchait pas.
Maintenant oui
Maintenant oui
- Koxin-L
- WRInaute passionné
- Messages: 1925
- Inscription: 29 Mar 2007
le Dim Avr 15, 2007 11:04
1 - Non, la résolution n'a rien à voir, si tu met une marge de 10px, elle sera de 10px en 800x600 ou 1280x1024.
2 - Une seul solution virer tous les TD et te mettre sérieusement aux placement via les div...
Un exemple ici : http://css.alsacreations.com/Faire-une- ... s-tableaux
2 - Une seul solution virer tous les TD et te mettre sérieusement aux placement via les div...
Un exemple ici : http://css.alsacreations.com/Faire-une- ... s-tableaux
- insanecricri
- Nouveau WRInaute
- Messages: 30
- Inscription: 6 Jan 2007
le Dim Avr 15, 2007 11:16
Merci beaucoup.
Je marque ce topic comme résolu.
Je marque ce topic comme résolu.
7 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- [RESOLU]Probleme tres simple CSS menu
- [résolu]problème d'une simple redirection .php en .html
- Alignement des images dans Firefox
- [résolu] Problème d'affichage (IE/firefox) avec images
- css alignement input IE et firefox : perte de cheveux ! RESOLU
- [Résolu] Problème includes php-répertoire des images en HTML
- probleme alignement bouton en html
- probleme avec alignement de cellule
- Problème alignement d'un div en css
- Problème alignement texte menu horizontal
- Ecrire un sitemap pour Google News - 25-11-2006
- Google Code Jam 2003 - 18-09-2003
Consultez la description détaillée des produits ou services de Google suivants : Google Images, Hello, Google Image Labeler
- Recherche de citations d'un site en texte brut
Cet outil vous permet de trouver des pages citant votre site mais ne faisant pas (encore) de lien. Il suffira parfois d'un simple mail pour transformer cette simple citation en lien (backlink).
Qui est en ligne
Utilisateurs parcourant ce forum: erestrebian et 0 invités
Contact
Confidentialité