[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Bouton_active[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Bouton_hover[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Fb-hover[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -20%
Sony PULSE Elite – Casque PS5 sans fil (blanc) ...
Voir le deal
119 €

Partagez
 

[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://velp.monempire.net
VELP
{ Membre }
{ Membre }

Masculin Messages : 29



[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Empty
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]&nbsp;</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
MessageSujet: [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]   [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyJeu 24 Mai 2012, 14:21
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Empty
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. Smile
MessageSujet: Re: [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]   [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyJeu 24 Mai 2012, 16:42
Revenir en haut Aller en bas
http://velp.monempire.net
VELP
{ Membre }
{ Membre }

Masculin Messages : 29



[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Empty
Génial...

Merci beaucoup,

Velp
MessageSujet: Re: [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]   [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyJeu 24 Mai 2012, 19:27
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Empty
Hello !
Je vois que le problème est résolu, par conséquent je classe Very Happy
Merci de l'avoir signalé ! [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] 926145
MessageSujet: Re: [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]   [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] EmptyVen 25 Mai 2012, 06:56
Revenir en haut Aller en bas
Contenu sponsorisé




[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Empty
MessageSujet: Re: [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]   [Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU] Empty
Revenir en haut Aller en bas
 

[Page d'accueil] Un cadre déformé par le Message sur la page d'accueil [RÉSOLU]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème visuel dans la page d'envoi de message [résolu]
» onglet à droite du contenue (page daccueil)
» Sortir le profil du cadre ''message'' [résolu]
» [Résolu] Problème mise en page
» Problème mise en page message

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit