VELP
{ Membre }
Messages : 29
| Bonsoir, Je vous présente mon problème: - Ayant récemment modifié le code du contenu de ma page d'accueil, je me suis rendu compte que le cadre était déformé par ce dernier... En effet, il semble que le contenu est plus grand que le cadre... Pour avoir accès à mon forum: www.vous-etes-le-patron.net Le code de mon message: - Code:
-
<div id="EnTete"><div style="background-image:url('http://img15.hostingpics.net/pics/210661Motif.png'); border: 8px solid #fff ; border-right:5px #fff solid; width: 800px; height: auto; box-shadow: 0px 0px 6px #666; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;"><div class="titre">{USERNAME}, Bienvenue sur le forum</div><br><br><table style="width:780px;"><tr><td style="width:150px;"> <div class="navigation"><a href="http://www.vous-etes-le-patron.net/c2-premier-pas">Premier Pas</a></div><div class="navigation"><a href="http://www.vous-etes-le-patron.net/c3-tableau-velp">Tableau Velp</a></div><div class="navigation"><a href="http://www.vous-etes-le-patron.net/c8-transaction">Transaction</a></div><div class="navigation"><a href="http://www.vous-etes-le-patron.net/c10-simulation">Simulation</a></div><div class="navigation"><a href="http://www.vous-etes-le-patron.net/c1-europe">Europe</a></div><div class="navigation"><a href="http://www.vous-etes-le-patron.net/c6-multimedia">Multimedia</a></div></td><div id="Bande"><span class="titre2">Présentation</span></div>
<td style="width:440px;"><div class="presentation"><p>
Vous êtes le patron est le PREMIER forum de simulation économique et de gestion d'entreprise du Web.<br> Elle est et restera la simulation la plus réaliste du Web.<br><br> Découvrez à travers ce jeu, un Monde du commerce sophistiqué où vous aurez à gérer votre entreprise tout en restant le plus concurrentiel possible, car sur VELP, la concurrence est le moteur de la simulation<br><br> Résisterez-vous à la concurrence ?
</p></div></td>
<td style="width:190px"><p> </p><div class="annonces"><span class="titre3">Annonces</span><p><marquee class="html-marquee" direction="up" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
➜<b><font color="#41e051">[24/03] </font> [En Construction] La simulation est temporairement en pause</b><br>Nous procédons actuellement à la mise en place de la version 3 de la simulation !<br><b><a href="http://www.vous-etes-le-patron.net/t2642-en-construction-la-simulation-velpienne-est-temporairement-en-pause#11633">+ d'infos</a></b><br> <hr> ➜<b><font color="#41e051">[20/01] </font> [Optimisation] Limite de stockage :Déchet</b><br>Les stocks limite de déchets sont dorénavant affecté par la quantité produite !<br><b><a href="http://www.vous-etes-le-patron.net/t2098-optimisation-limite-de-stockage-dechet">+ d'infos</a></b><br> <hr> ➜<b><font color="#41e051">[17/01] </font> [Optimisation] Qualité</b><br>Et si on doublait la qualité de vos produits ?<br><b><a href="http://www.vous-etes-le-patron.net/t2050-qualite-optimisation">+ d'infos</a></b><br><br><br>
</marquee></p></div></td></tr></table>
<center><div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
<a href="http://www.jeux-en-ligne-gratuits.net/fiches/multijoueurs/3_0_0.php" title="jeu en ligne">jeux gratuits</a>
<a href="http://www.argent-gratuit.net" target="_blank" title="Gagner argent"><strong>Gagner de l'argent rapidement</strong></a>
<a href="http://annuaire.enligne.com/">Annuaire en ligne - annuaire gratuit de sites internet</a>
<a href="http://www.ajoutezvotrelien.com">Ajoutez votre lien</a>
<a href="http://www.webrankinfo.com/"><img src="http://www.webrankinfo.com/images/wri/webrankinfo-80-15.png" title="WebRankInfo" width="80" height="15" alt="Actualites du referencement" /></a>
<a href="http://annuaire.crea-site-internet.net/Categories/forums_blogs_sites_persos.php" title="Annuaire gratuit, catégorie : Forums/Blogs/Sites persos">Annuaire gratuit, catégorie : Forums/Blogs/Sites persos</a>
<a href="http://www.maxannu.com/">Annuaire de Max</a>
<a href="http://www.maxannu.com/jeux/jeux-sur-internet/">Annuaire de Max - Jeux sur internet</a>
<a href="http://www.maxannu.com"><img src="http://www.maxannu.com/max88.gif" alt="Annuaire de MAX !" /></a>
<a href="http://www.liens-web.info/">Liens Web</a>
<a href="http://www.liens-web.info/jeux-jeux-videos-c100-p1.html">Liens Web - Jeux & Jeux vidéos</a>
<a href="http://www.morigolo.net/annuaire?Hits=http://www.velp.monempire.net" title="http://www.morigolo.net/annuaire" target="_blank">Aide scolaire en économie</a>
<a href="http://www.1001forums.fr" title="1001forums - Annuaire des forums" target="_blank">1001forums - Annuaire des forums</a>
<a href='http://www.communique-de-presse-gratuit.com/sortie-cd-musique-electronique-the-robot-tribe_47513.html' target='_blank'><img src='http://www.communique-de-presse-gratuit.com/logobouton.gif' border='0' alt='Sortie CD musique électronique : The Robot Tribe'></a>
<!-- début du code liendur.com --><a target="_blank" href="http://www.liendur.com/" title="annuaire">Annuaire</a> <a target="_blank" href="http://www.liendur.com/jeux-de-gestion-405-1.html" title="Jeux de gestion sur liendur.com">Jeux de gestion</a><!-- fin du code liendur -->
<a href="http://annuaire.enligne.com/jeux/simulation/">Annuaire en ligne - annuaire gratuit de sites internet - Simulation</a>
<a href="http://annuaire.kegtux.org/in.php?id=55" target="_blank">Annuaire Freeglobes Gratuit</a>
<a title="Annuaire pour le Référencement Google" href="http://annuaire.yagoort.org">Annuaire Webmaster</a>
<a href="http://www.gautier-girard.com">Forum création d’entreprise</a>
<!-- début du code -->ref multi-annuaires: <a target="_blank" href="http://www.annuaire-automatique.com/" title="Référencez votre site AUTOMATIQUEMENT sur annuaire-automatique.com venez battre le record de soumission">Annuaire Automatique</a> - <a target="_blank" href="http://www.categorille.com/" title="ajoutez votre site dans la bonne categorille">Annuaire Categorille</a> - <a target="_blank" href="http://andrimont.be/" title="annuaire automatique lien en dur">Annuaire Andrimont</a> - <a target="_blank" href="http://www.ci-dessus.com/" title="Ajoutez votre site cidessus">Annuaire ci-dessus</a> - <a target="_blank" href="http://www.ensival.be/" title="ensival le vrai site des ensivalois">ensival belgique</a> - <a target="_blank" href="http://www.ci-dessous.com/" title="référencement gratuit">referencement gratuit</a><!-- fin du code -->
<object width="0" height="30"><param name="movie" value="http://www.youtube.com/v/muiS27Tmgtw?version=3&hl=fr_FR&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/muiS27Tmgtw?version=3&hl=fr_FR&rel=0&autoplay=1" type="application/x-shockwave-flash" width="0" height="30" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</marquee></p></div></center>
<br /><blockquote class="twitter-tweet" lang="fr"><p>LA SIMULATION VELPIENNE EST TEMPORAIREMENT EN PAUSENOUS PROCÉDONS ACTUELLEMENT À LA MISE EN PLACE DE LA VERSION... <a href="http://t.co/ncK82IlF" title="http://fb.me/1lG9YdMVz">fb.me/1lG9YdMVz</a></p>— Stephane Gilbert (@velp_yatb) <a href="https://twitter.com/velp_yatb/status/181815646395437057" data-datetime="2012-03-19T18:53:22+00:00">Mars 19, 2012</a></blockquote> <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<br/><div class="credits">Codage by <a href="http://graph-forum.forumactif.com" target="_blank"><b>mimizZ</b></a> | Tout droit réservé</div></div></div> Le code de mon css relatif à ce message - Code:
-
/* ***************** CSS DE LA PAGE D'ACCUEIL ******************** by mimizZ | http://graph-forum.forumactif.com Droit à la modification des couleurs et du fond uniquement ****************************************************************** */
#EnTete { position:relative; /* largeur et hauteur de l'image */ width:800px; height:500px; }
#EnTete #Bande { position:absolute; /* positionnement de la bande par rapport à la page d'accueil */ left:114px; top:105px; /* largeur et hauteur de la bande */ width:531px; height:72px; background-image: url('http://img15.hostingpics.net/pics/776869Bandeau.png'); }
.titre2 { /* TITRE "PRÉSENTATION */ position:absolute; /* positionnement de la banche par rapport à l'image */ left:175px; top:16px; font-family:Helvetica Neue; text-transform:uppercase; color:#535353; font-weight:bold; font-size:24px; letter-spacing:-1px; text-shadow:1px 1px 1px #fff; }
.titre2:hover {color:#00abea;}
a:link{ cursor: pointer;} a, a:hover {text-decoration:none;}
.titre { /* TITRE " BIENVENUE SUR LE FORUM " */ font-family:Helvetica Neue; text-transform:uppercase; letter-spacing:-1px; font-weight:bold; font-size:38px; color:#eeeeee; text-shadow: 1px 2px 1px #c3c3c3; text-align:center; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 40px; -webkit-border-bottom-left-radius: 40px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 40px; -moz-border-radius-bottomleft: 40px; border-radius: 10px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; background-color:#909090; border-bottom: 3px solid #cccccc; padding:5px; }
.titre:hover {letter-spacing:0px;}
.presentation { /* CADRE TURQUOISE " PRÉSENTATION " */ margin-right:-4px; margin-left:-10px; background-color:#7791B2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: 0px 0px 5px #000; width:430px; height:auto; padding-bottom:8px; padding-left:16px; padding-right:16px; padding-top:50px; }
.presentation p { /* ZONE DE TEXTE PRÉSENTATION */ background-color:#FFF; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border-bottom: 3px solid #84d0f0; border-left: 3px solid #84d0f0; border-right: 3px solid #84d0f0; color:#666; font-family:calibri; font-size:13px; text-align:justify; padding:20px; }
.navigation { /* LIENS */ font-family:"Courier New", Courier, monospace; text-transform:uppercase; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomleft: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; width:125px; background-color:#a6d013; font-size:12px; text-align:center; text-shadow:0px 0px 3px #666; margin-left:15px; margin-top:12px; padding: 3px; border-bottom:2px solid #e9ff9a; }
.navigation:hover { background-color:#fff15f; text-shadow:0px 0px 3px #fff; letter-spacing:1px; border-bottom:2px solid #ffd05f; }
.navigation a {color:#FFF} /* COULEUR DES LIENS */ .navigation a:hover {color:#F60} /* COULEUR DES LIENS AU SURVOL */ .annonces { /* ANNONCES QUI DÉFILENT */ width:170px; max-height:185px; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; background-color:#858585; padding-top:8px; padding-bottom:8px; padding-right:10px; box-shadow: 1px 0px 4px #000; border-left:thin solid #000; text-align:center; }
.titre3 { /* TITRE " ANNONCE " */ color:#FFF font-size:19px; font-family:helvetica neue; text-transform:uppercase; letter-spacing:-1px; font-weight:bold; text-align:center; text-shadow: 2px 2px 1px #4a4179; }
.titre3:hover { color:#d6c8f5; letter-spacing:0px; }
.annonces p { /* ZONE DE TEXTE " ANNONCES */ color:#666; font-family:calibri; font-size:13px; background-color:#FFF; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; text-align:justify; padding:8px; border-right:3px solid #d6c8f5; border-bottom:3px solid #d6c8f5; }
.html-marquee {height:125px;} /* PERMET DE LE DÉFILEMENT DES ANNONCES, NE PAS TOUCHER ! */ .html-marquee2 {height:31px;} /* PERMET DE LE DÉFILEMENT DES PARTENAIRES, NE PAS TOUCHER ! */
.partenaires { /* CADRE DES PARTENAIRES + TITRE */ width:500px; background-color:#f39400; box-shadow: 0px 0px 5px #000; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding-left:250px; padding-right:10px; padding-top:1px; padding-bottom:1px; background-image: url('http://img15.hostingpics.net/pics/874614Partenaires.png'); background-repeat:no-repeat; background-position: left center; }
.partenaires p { /* ZONE OÙ LES LOGOS SONT MIS */ background-color:#FFF; height:31px; padding:6px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border-bottom: 3px solid #f3c200; border-right: 3px solid #f3c200; border-left: 3px solid #f3c200; }
.partenaires img { /* OMBRE PORTÉE SUR LES LOGOS DE PARTENARIAT */ box-shadow: 0px 0px 4px #999; } .credits { /* NE PAS ENLEVER ! */ font-family:calibri; font-size:12px; color:#b5b5b5; padding:10px; text-shadow: 0px 0px 4px #000; text-align:center; } .credits a {color:#e2007a;} .credits a:hover {color:#ea69a0;} /* ********************* FIN DU CODE DE LA PA ********************* */ Enfin le code neutre du message provient du sujet: http://www.css-actif.com/t11663-page-d-accueilcoloree-coins-tres-arrondis Personnellement, je crois que la cause provient du widget Twitter, mais je ne réussi pas à faire en sorte qu'il n'affecte pas la grandeur du cadre... En vérité, il semble que le message de la page d'accueil est complètement dissocié du cadre qui a naturellement pour effet de l'encadré... Si vous êtes en mesure de m'aider, j'en serais ravi... Bien à vous, Velp |
Dernière édition par VELP le Jeu 24 Mai 2012, 19:26, édité 1 fois | |
|
Doare
{ Spécialiste }
Messages : 544
| Hey. La source du problème est là : - Code:
-
#EnTete { position:relative; /* largeur et hauteur de l'image */ width:800px; height:500px; /* ICI */ } Retire la propriété de hauteur de "#Entete" et le cadre s'agrandira normalement avec le contenu. D'ailleurs, je ne comprends pas pourquoi tu as la div "#EnTete" et puis une div à l'intérieur avec les propriétés données dans le code. Il serait plus simple (et plus logique) de tout mettre directement dans "#EnTete" et de spécifier toutes les propriétés du cadre (fond, arrondis, ombre, bordures) dans le CSS. | | |
|
VELP
{ Membre }
Messages : 29
| Génial...
Merci beaucoup,
Velp | | |
|
Psycho
Psychopathe
Messages : 3407
| Hello ! Je vois que le problème est résolu, par conséquent je classe Merci de l'avoir signalé ! | | |
|