Forum
Moderateurs: Alexis
Auteur Message
Tsuna
Messages: 28
Bonjour, un ami m'as confier son site à moi et a un autre ami. Nous ne connaissons rien en CSS x) bon j'arrive a modifier mais pas a créer...Cet ami a fixer la chatbox a droite de l'écran fixer a la barre de défilement (si vous me suivez x)) mais malheureusement sur mobile le chat est en énorme et cache tout. Et pour régler ça, j'avais penser a intégré le chat dans la colonne de droite (zone 2)..malheureusement je n'y connais rien en CSS comme je l'ai dis x) je me doute que je doit modifié quelques chose là 
#chatbox_posts {
    position: fixed;
    right: 0px;
    bottom: 10px;
    width: 130px;
    height: 340px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-radius: 0 0 0 15px;
    padding: 5px;
    overflow: auto;
    background-color: rgba(3,108,159,0.9);
    word-wrap: break-word;
    z-index: 0;
}

#menudroite #chatbox {
    position: fixed;
    right: 0px;
    bottom: 360px;
    width: 130px;
    height: 60px;
    padding: 5px;
    background-color: rgba(3,108,159,0.9);
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    z-index: 0;
}


mais quoi...je m'en remets a vous..merci x)
Tsuna
Messages: 28
Ou alors de faire en sorte que sur smartphone et tablette le chat reste de la meme taille sans que ce soit zoomer, je ne sais pas si c'est possible en vérité, mais je préfère demander XD
Alexis

Messages: 1136
Site internet
Ta deuxième idée me semble trop complexe à réaliser.

Pour la première idée, je pense que ceci devrait remettre la chatbox à son emplacement d'origine :
#chatbox_posts {
    height: 340px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-radius: 0 0 0 15px;
    padding: 5px;
    overflow: auto;
    background-color: rgba(3,108,159,0.9);
    word-wrap: break-word;
    z-index: 0;
}

#menudroite #chatbox {
    height: 60px;
    padding: 5px;
    background-color: rgba(3,108,159,0.9);
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    z-index: 0;
}

Si tu veux que la chatbox ait la même apparence que tous les autres blocs du menu, tu peux également enlever les lignes border et background :

#chatbox_posts {
    height: 340px;
    padding: 5px;
    overflow: auto;
    word-wrap: break-word;
    z-index: 0;
}

#menudroite #chatbox {
    height: 60px;
    padding: 5px;
    z-index: 0;
}

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tsuna
Messages: 28
Merci beaucoup ! C'est très gentil, je m'attendais à recevoir une explication mais au lieu de ça tu m'envoi le CSS modifier, c'est encore mieux

Et encore une petite question, les bouton "accueil" "furum" "inscription" "livre d'or" je peux les animé ? Par animé j'entends qu'ils changent de couleur lorsque la souris passe dessus
Alexis

Messages: 1136
Site internet
Oui c'est possible, il suffit d'ajouter la classe suivante à ton css et de mettre dedans les propriétés de ton choix :

#header h2 a:hover {

}

Pour les explications,
#header h2 a désigne les liens contenus dans le header
:hover, ajouté après n'importe quelle classe, permet de fixer le style de cette classe lorsqu'elle est survolée par la souris.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tsuna
Messages: 28
merci beaucoup
Tsuna
Messages: 28
Désoler de encore demander ton aide 
L'onglet des emoji apparais a l'endroit du chat avant, c'est à dire a droite coller a la barre de défilement. J'ai réussi a rapprocher la "fenetre" des emoji contre la colonne de droite (zone 2), mais lorsque que je retire la ligne de CSS "position: fixed; bottom: 430px; right: 118px;" les emoji se superpose au chat (normal vu que c'est son emplacement d'origine je pense)
ma question est : peut-on faire en sorte que l'onglet emoji apparaisse comme ici :

Spoiler
mais qu'il s'ouvre toujours ici, car la fenêtre bouge avec la page, exemple :

Spoiler
 je dois écrire quelque chose d'autre ou simplement modifier la CSS déjà existant ? x)
#emote {
    position: fixed; bottom: 430px; right: 118px;
    heigt: 200px;
    width: 130px;
    background-color: rgba(3,108,159,0.90);
    padding: 6px;
    border: 0px solid white;
    border-radius: 0px 15px 15px 0px;
}
 Merci encore une fois par avance x)
Alexis

Messages: 1136
Site internet
Si tu souhaites que les emojis soient fixés par rapport au contenu de ton site et non par rapport à la fenêtre du navigateur, il faut que tu remplaces "position: fixed" par "position: absolute".

Pour le positionner, tu peux ensuite indiquer le décalage en pixels par rapport à sa position normale en utilisant "top" (décalage depuis le haut) et "left" (décalage depuis le bas)

Quelque chose comme ça devrait être approximativement bon :
    position: absolute; top: 0px; left: 130px; 

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tsuna
Messages: 28
Je reviens ici après quelques temps x)
Afin de "customiser" notre site j'ai voulu mettre un curseur personnalisé alors voilà mon problèmes, le curseur par défaut fonctionne mais par exemple celui du pointeur (la main avec l'index et le pouce déplier) ne fonctionne pas...

voici ce que j'ai inscrit dans le css 
body {
    margin: 0;
    padding: 0; 
    font-size: 12px; 
    font-family:verdana,arial, Helvetica, sans-serif;
    color: #000000;
    background-color:#FFFFFF;
    background-image:url(https://img4.hostingpics.net/pics/887401cover.png);
    background-size: 100%;
    background-attachment:fixed;
    text-align : left;
    cursor: url(https://img4.hostingpics.net/pics/496898normal.png), default;
}
a:link{ 
       cursor: url (https://img4.hostingpics.net/pics/386726click.png), pointer;

voilà  alors peut-être que c'est car le fichier est en .png et non en .cur, si quelqu'un a une solution ça m'aiderais beaucoup ! Merci d'avance ! ^^ 

Alexis

Messages: 1136
Site internet
Dans ton css, i y a un espace en trop entre le "url" et la parenthèse ouvrante. Je pense que c'est tout simplement ça.

Le css n'est pas un langage très tolérant aux erreurs de syntaxe .

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tsuna
Messages: 28
ah oui exact x) je vais essayer et revenir vers toi pour te dire ^^
Tsuna
Messages: 28
yes ! niquel ! par contre sur le coup j'ai oublier de mettre } et tout a buger j'ai suer xD mais bon c'est régler, merci mille fois !
 

Aller à:     Haut de page