Carrer Code HTML Help

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Carrer Code HTML Help

Message par Fayzl4D Mer 16 Juil 2014 - 21:14

Salut c'était pour vous dire j'y arrive tout seul a coder mais juste un problème je n'arrive pas a crée de carrer quelqu'un pourrait me passer un carrer ou un rectangle sous forme de code html et css si possible je voudrait mettre des carrer dans mes onglet pour comprendre je vous incite a aller découvrir se que j'ai déjà commencer merci j'attend vos réponse avec impatience?

Découvre mon Forum ici: http://pokemon-atlantis.forumactif.org/


Dernière édition par Fayzl4D le Jeu 17 Juil 2014 - 13:42, édité 1 fois
avatar

Fayzl4D
*

Messages : 41
Inscrit(e) le : 02/05/2014

http://fayzl4d.exprimetoi.com/
Fayzl4D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par gendarme Mer 16 Juil 2014 - 22:11

Le lus simple  serait de le faire avec des images . Sinon
Code:
.carre{
width:100px;    
height;100px;    
background:#000;
}
gendarme

gendarme
****

Messages : 235
Inscrit(e) le : 16/04/2012

http://simu-secours.forumactif.org/
gendarme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par Fayzl4D Jeu 17 Juil 2014 - 6:49

merci pour le code mais ou faut t'il le placer car je l'ai mis dans généralité et sa a rien fait?
avatar

Fayzl4D
*

Messages : 41
Inscrit(e) le : 02/05/2014

http://fayzl4d.exprimetoi.com/
Fayzl4D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par Fayzl4D Jeu 17 Juil 2014 - 7:01

et pareil pour le css sa n'a rien fait voici mon css et html:
Mon CSS: abc {border-bottom: 5px solid (couleur de la barre sous les onglets, par exemple : #ffffff pour blanc);}
.def {
background-color: (couleur fond des onglets, par exemple : #ffffff pour blanc);
-moz-border-radius:10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px;}
astu_cat a:{
background-image: url(http://astuforum.free.fr/forum/onglets/1_0.png);
}
.astu_cat_style a:hover{
background-image: url(http://astuforum.free.fr/forum/onglets/1_1.png);
}
.astu_cat_style a:focus{
background-image: url(http://astuforum.free.fr/forum/onglets/1_2.png);
}
.astu_cat_style {
display:inline;
font-size: 0.65em;
padding-left:6px;
padding-right:6px;
}
.astu_cat_style a{
border-top: 1px #B8B8B8 solid;
border-left: 1px #B8B8B8 solid;
border-right: 1px #B8B8B8 solid;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-radius-topleft: 6px;
-webkit-border-radius-topright: 6px;
-border-radius-topleft: 6px;
-border-radius-topright: 6px;
text-align:center;
font-size: 0.65em;
background-color:#DCE6EC;
padding-left:6px;
padding-right:6px;
display:inline;
font-size: 0.65em;
letter-spacing: -0.1em;
font-weight: bolder;
font-family: verdana;
}
.astu_cat a:hover{
text-decoration: none !important;
color: #000000;
background-image: url(http://astuforum.free.fr/forum/onglets/1_1.png);
}
.astu_cat a:focus{
text-decoration: none !important;
color: #000000;
background-image: url(http://astuforum.free.fr/forum/onglets/1_2.png);
}
.astu_table{
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 5px !important;
font-family: Verdana;
}
.astu_forum_nom{
display:none;
}
.astu_folder{
width: 50%;
margin-left: 10px;
}
.astu_desc{
width: 80%;
float:left;
text-align:left;
font-size: 0.68em;
background-color:#DCE6EC;
-moz-border-radius-topleft: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px
border-top-left-radius: 20px;
border-bottom: 2 px solid #000000;
border-left: 2px solid #000000;
border-top: 2px solid #000000;
padding-top: 15px;
padding-left:8px;
padding-right:15px;
}
.astu_stats{
background-color:#DCE6EC;
font-size: 0.65em;
-moz-border-radius-topleft: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px
border-top-left-radius: 20px;
border-bottom: 2 px solid #000000;
border-left: 2px solid #000000;
border-top: 2px solid #000000;
padding: 3px;
position: relative;
text-align: center;
width: 200px;
}
.astufo_titre a{
text-align:left;
text-align middle;
padding-bottom: 5px;
padding-left: 20px;
padding-right:20px;
background-image: url(http://astuforum.free.fr/forum/onglets/1_0.png);
-moz-border-radius: 6px;
border: 1px solid #000000;
width: 70%;
background-repeat: repeat-x;
background-position: bottom;
font-weight: bolder;
}
.astufo_titre a:hover{
text-align:left;
text-align middle;
padding-bottom: 5px;
padding-left: 20px;
padding-right:20px;
background-image: url(http://astuforum.free.fr/forum/onglets/1_2.png);
-moz-border-radius: 6px;
border: 1px solid #000000;
color:#000000;
}
.astu_titre{
text-align:center;
font-size: 0.70em;
font-family: courrier;
text-decoration: none !important;
height:20px;
}
.astu_titre a{
text-align:center;
font-size: 14px;
font-family: courrier;
text-decoration: none !important;
}

.astu_cat_body{
border-left: 0px solid #cce6ff;
border-right: 0px solid #cce6ff;
border-bottom: 0px solid #000000;
border-top: 0px solid #cce6ff;
-moz-border-radius: 6px;
}
.astu_cat ul{
padding-bottom:10px;
padding-left: 20px;
margin:0;
padding-top: 5px;
width: 800px !important;
}
.astu_cat li{
margin-left: 1px;
}

.astu_cat a{
text-decoration: none !important;
}

a.forumlink{
display:block;
font-size:14px; /* la taille de la police */
padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
text-align:center;
font-variant:small-caps; /* Les petites capitales */
color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
border-bottom:4px double #6a3e1a;
font-weight:normal; /* Le texte non boldé */
margin-bottom:10; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
}
a.forumlink:hover{
font-variant:small-caps;
color:#6e5831 !important;
border-bottom:4px double #6a3e1a;
font-weight:bold; /* Texte en gras */
display:block;
}
div.stats_cate{ /* La div ayant pour class 'stats_cate' */
font-size:12px;
text-align:right;
border-bottom:#6a3e1a 1px solid;
border-right:#6a3e1a 3px solid;
font-style:italic; /* On met le texte en italic */
color:#6a3e1a;
padding-right:4px; /* On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
margin-bottom:4px;
margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */
width:220px; /* On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
margin-left:385px; /* On place le bloc à droite en le décallant par rapport au bord gauche de la case */
}
div.description{ /* La div ayant pour class 'description' */
background-color:#ffffff; /* On lui donne une couleur de fond */
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #b79981;
width:560px;
min-height:20px; /* La hauteur minimum */
font-size:12px;
text-align:justify;
text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
padding:4px;
margin:4px;
color:#6e5831;
}

.onglet{
float: left;
padding: 2px;
margin-right: 4px;
margin-bottom: -1px;
color: #000;
background: #ffffff;
border: 1px solid #000000;
cursor: pointer;
width: 18%;
list-style: none;}

.onglet_selectionner{
float: left;
padding: 2px;
margin-right: 4px;
margin-bottom: -1px;
color: #000;
background: #ffffff;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: none !important;
cursor: pointer;
width: 18%;
list-style: none;}

.onglet:hover{
background: #9C1C56;}

.clear{
clear: both;}

.contenu{
color: #black;
background: #ffffff;
border: 1px solid #000000;
padding: 10px;
list-style: none;}

#les_contenus, #les_onglets{
width: 100%;}
body
{
background-color: black;
} /*le corps de ta page sera noir*/

h1, h2
{
color: red;
} /*tes titres h1 et h2 seront écrits en rouge*/

#stylePerso
{
background-color: red;
width:500px;
height:400px;
} /*tout le code que tu placera entre des balises et sera dans un bloc bleu de 200*100 pixels*/
#stylePerso
{
background-color: blue;
width:1000px;
height:800px;
} /*tout le code que tu placera entre des balises et sera dans un bloc bleu de 200*100 pixels*/
/*PA*/
#entete {
text-align:center;
height:200px;
width:780px;
margin-bottom:20px;
border-style:solid;
border-width:3px;
}
#main {
margin:auto;
max-width:780px;
}
#menu {
float:left;
width:240px;
padding: 5px;
height:190px;

}
#contenu {
float:left;
width:500px;
margin-left:20px;
height:200px;
}
#footer {
max-width:780px;
margin:auto;
}

#pacadre1, #pacadre2, #pacadre3{
width:240px;
height:100px;
margin-top:20px;
}
#pacadre1{
background-color:cyan;
float:left;}
#pacadre2{background-color:red;
margin-left:20px;
float:left;}
#pacadre3{background-color:black;
margin-left:20px;
float:left;}

#pacadre3, #pacadre2, #pacadre1, #contenu, #menu, #entete {-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-o-border-radius: 25px;
-htm-border-radius: 25px;
background-color:#E8F0F4;

border-color:orange;
font-color:black;

}

#pacadre3, #pacadre2, #pacadre1, #contenu, #menu {
border-style:dotted;
border-width:1px;
}

#patexte{padding:10px;
font-family:Georgia;
text-align:justify;}


#pafastlink
{
display: block;
padding: 3px;
margin-bottom: 1px;
text-align: center;
background: #E8F0F4;
color: #A12D2D !important;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
transition: 500ms;
-moz-transition: 500ms;
-htm-transition: 500ms;
-o-transition: 500ms;
-webkit-transition: 500ms;
-webkit-border-radius: 25px;
border-radius: 25px;
-o-border-radius: 250px;
-htm-border-radius: 250px;

}

#pafastlink:hover
{
background: #79BAEC;
color:
#cc0000 !important;
transition: 500ms;
-moz-transition: 500ms;
-htm-transition: 500ms;
-o-transition: 500ms;
-webkit-transition: 500ms;
}
.box
{
padding: 200px;
background: #eeeeee;
border: 100px solid #bbbbbb;

border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 10px;
}
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
width: 400px;
height: 120px;
overflow: hidden;
border: 2px solid #000000;
background-color: #ffffff;
}
.cate_img
{
position: relative;
z-index: 2;
width: 400px;
height: 120px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
position: relative;
z-index: 1;
width: 400px;
height: 120px;
margin-top: -120px;
text-align: justify;
font-size: 11px;
color: #8c8c8c;
padding: 2px;
overflow: auto;
}

Mon Code HTML (Dans généralité: <div id="les_onglets">

<ul>
<li onclick="changeOnglet(this);" class="onglet_selectionner" id="o_1">
Onglet 1
</li>

<li onclick="changeOnglet(this);" class="onglet" id="o_2">
Onglet 2
</li>

<li onclick="changeOnglet(this);" class="onglet" id="o_3">
Onglet 3
</li>

<li onclick="changeOnglet(this);" class="onglet" id="o_4">
Onglet 4
</li>

<li onclick="changeOnglet(this);" class="onglet" id="o_5">
Onglet 5
</li>

</ul>

<div class="clear">
<div id="les_contenus">

<div class="contenu" id="co_1">
Exemple de tableau par onglet
</div>

<div style="display: none;" class="contenu" id="co_2">
Mon contenu 2
</div>

<div style="display: none;" class="contenu" id="co_3">
Mon contenu 3
</div>

<div style="display: none;" class="contenu" id="co_4">
Mon contenu 4
</div>

<div style="display: none;" class="contenu" id="co_5">
Mon contenu 5
</div>
</div>
</div>
</div>

Si quelqu'un pourrait me donner un code qui marche ou me dire pourquoi le code que gendarme ma donner marche pas et ou je doit le passer merci d'avance les amis?
avatar

Fayzl4D
*

Messages : 41
Inscrit(e) le : 02/05/2014

http://fayzl4d.exprimetoi.com/
Fayzl4D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par gendarme Jeu 17 Juil 2014 - 10:03

Mettez ceci dans votre page d'acceuil (désolé pour les puriste , je sais que ce n'est pas trés propre ^^)

Code:
 <style>

.carre{
   width:100px;
   height:100px;
   background:#000;
}
</style>
<div class="carre">
</div>

Si vous faites plusieurs carré pareil , ajouter juste le div , si vous en faites plusieurs différent faite ce genre de chose :
Code:
 <style>

.carre{
   width:100px;
   height:100px;
   background:#000;
}
.carrea{
   width:100px;
   height:100px;
   background:#111;
}

</style>
<div class="carre">
</div>
<div class="carrea">
</div>
gendarme

gendarme
****

Messages : 235
Inscrit(e) le : 16/04/2012

http://simu-secours.forumactif.org/
gendarme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par Fayzl4D Jeu 17 Juil 2014 - 11:38

merci j'ai réussit a faire un carrer mais comment fait t'on pour y ajouter un texte et je voudrait 2 Rectangle l'un a coté de l'autre l'un sera Bienvenue avec un texte et le 2 Sera nouveauté avec un texte défilant vers le bas si vous pourriez me passer un ou des codes pour faire se genre de chose.
mon forum: http://pokemon-atlantis.forumactif.org/
avatar

Fayzl4D
*

Messages : 41
Inscrit(e) le : 02/05/2014

http://fayzl4d.exprimetoi.com/
Fayzl4D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par gendarme Jeu 17 Juil 2014 - 11:47

Pour mettre du texte , il vous suffit de le mettre entre le <div></div>
Pour faire défiler vers le haut rajouter ceci entre le div
Code:
<MARQUEE DIRECTION="up" >Votre texte</MARQUEE>
gendarme

gendarme
****

Messages : 235
Inscrit(e) le : 16/04/2012

http://simu-secours.forumactif.org/
gendarme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par Fayzl4D Jeu 17 Juil 2014 - 11:52

merci mais pour mettre un rectangle a coté de l'autres on fait comment?
avatar

Fayzl4D
*

Messages : 41
Inscrit(e) le : 02/05/2014

http://fayzl4d.exprimetoi.com/
Fayzl4D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par gendarme Jeu 17 Juil 2014 - 13:10

2 soluttion : soit vous rajouter un ID dans chaque DIV et un peu de CSS soit vous faite un tableau .
gendarme

gendarme
****

Messages : 235
Inscrit(e) le : 16/04/2012

http://simu-secours.forumactif.org/
gendarme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par Fayzl4D Jeu 17 Juil 2014 - 13:27

ok merci pour info mais je verrait j'ai trouve page aceuil en libre services sous forme tableaux et je rajoute des effet...Si vous voulez venir voir ma proggression <a href="http://pokemon-atlantis.forumactif.org/">Clic Ici/a>

Sinon seriez vous intéresse a rejoindre mon forum Pokémon pour m'aider au niveaux codage sa serait génial?
avatar

Fayzl4D
*

Messages : 41
Inscrit(e) le : 02/05/2014

http://fayzl4d.exprimetoi.com/
Fayzl4D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par gendarme Jeu 17 Juil 2014 - 13:33

Je suis déjà assez occupé comme sa Wink . Si votre problème est résolu , pensez a cocher l’icône résolu Wink .
gendarme

gendarme
****

Messages : 235
Inscrit(e) le : 16/04/2012

http://simu-secours.forumactif.org/
gendarme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carrer Code HTML Help

Message par Chacha Jeu 17 Juil 2014 - 13:44

Fayzl4D a écrit:Sinon seriez vous intéresse a rejoindre mon forum Pokémon pour m'aider au niveaux codage sa serait génial?

Carrer Code HTML Help Warnin10Bonjour,

Le recrutement pour son forum n'est pas autorisé. Je vous invite à lire :


A bientôt sur ForumActif Smile
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum