[CSS3] - HELP Déplacement d'élément!!!
Profil introuvable Le 27 août 2016 à 22:51 (Édité le 25 janvier 2019 à 17:52)
Donc pour resitué l'histoir^^. J'était un train de coder une des page de mon site(celle du chat).
Quand je n'arrive plus a déplacer des éléments dans un endroits spécifique en gros j'ai crée un petit block avec
des bordure en radius et je voullais placer mon chat en haut a gauche, seulement je n'arrive a le bouger d'en
bas a droite...
Code HTML:
<?php
$sqlHost = 'mysql.hostinger.fr';
$sqlUser = 'u182950414_web';
$sqlPassword = 'MDP';
$dbName = 'u182950414_zbeub';
$bdd = new PDO('mysql:host='.$sqlHost.';dbname='.$dbName.';charset=utf8',$sqlUser,$sqlPassword) or die($bdd->errorInfo());
if (isset($_POST['pseudo']) AND isset($_POST['message']) AND !empty($_POST['pseudo']) AND !empty($_POST['message']))
{
$message = htmlspecialchars($_POST['message']);
$pseudo = htmlspecialchars($_POST['pseudo']);
$insertmsg = $bdd->prepare('INSERT INTO chat(pseudo, message) VALUES(?, ?)');
$insertmsg->execute(array($pseudo, $message));
header('Location: chat.php');
}
?>
<html>
<head>
<meta charset="utf-8" />
<title>Chat.</title>
<link rel="stylesheet" href="chat.css" />
</head>
<body>
<div class="div_header" id="header"><h1 class="titre"><span id="neyblack"><a href="main.html">NEYBLACK</span><span id="com">.COM</a></span></h1>
<a href="https://www.youtube.com/channel/UCyHBcJDuHWjDqtN1azS2QNA" target="_blank"><img id="yt" src="yt.png"></a></div>
<div id="menu">
<ul>
<li><a href="main.html">Accueil</a></li>
<li><a href="replay.html">Les vidéos en replay!</a></li>
<li><a href="connexion.php">mon profil!</a></li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="right"> </div>
<div id="up"> </div>
<div id="contPrincip">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="chat">Chat</h2>
<form id="form" method="post" action="">
<input type="text" placeholder="PSEUDO" name="pseudo" value="<?php if (isset($pseudo))
{
echo "$pseudo";
} ?>" />
<br />
<textarea type="text" placeholder="MESSAGE" name="message"></textarea><br />
<input type="submit" value="Envoyer" />
</form>
<div id="while">
<?php
$allmsg = $bdd->query('SELECT * FROM chat ORDER BY id DESC LIMIT 0, 5');
while ($msg = $allmsg->fetch())
{
?>
<b><?php echo $msg['pseudo']; ?>:</b><?php echo $msg['message']; ?> <br />
<?php
}
?>
</div>
</div>
<div id="footer"><p class="end">Create by Neyblack.</p></div>
</body>
</html>
body
{
font-family: calibri;
overflow-x: hidden;
margin: 0;
background-color: #D6D6D6;
}
h1, h2
{
color: black;
}
a
{
text-decoration: none;
color: #00A6FF;
}
#yt:hover
{
margin-top: 10px;
height: 80px;
width: 80px;
}
#yt
{
margin-right: 1200px;
margin-top: 30px;
height: 40px;
width: 40px;
}
#up
{
border-radius: 10px;
margin-left: 125px;
margin-top: 75px;
background-color: white;
width: 1000px;
height: 75px;
}
#right
{
position: absolute;
border-radius: 10px;
margin-left: 1200px;
margin-top: 75px;
background-color: white;
height: 500px;
width: 350px;
}
#contPrincip
{
border-radius: 10px;
background-color: white;
margin-top: 50px;
margin-left: 125px;
width: 1000px;
}
#form
{
display: block;
padding-left: 50px;
}
#chat
{
padding-left: 50px;
}
#while
{
padding-bottom: 25px;
padding-left: 50px;
}
#header
{
display: black;
height: 100px;
width: 100%;
background-color: #2F2F2E;
position: absolute;
}
#footer
{
display: black;
margin-top: 50px;
height: 100px;
width: 100%;
background-color: #2F2F2E;
position: absolute;
}
#menu
{
min-width: 500px;
width: 100%
height: 100px;
position: relative;
background-color: black;
}
#menu ul
{
padding-top: 10px;
float: left;
left: 50%;
position: relative;
margin-left: -80px;
}
#menu ul li
{
margin-left: 20px;
float: left;
list-style-type: none;
position: relative;
left: -50%;
}
#menu ul li a:hover
{
color: white;
background-color: grey;
}
#menu ul li a
{
padding-top: 10px;
text-align: center;
display: inline-block;
background-color: black;
height: 30px;
width: 175px;
color: white;
text-decoration: none;
}
.div_header
{
text-align: center;
}
.end
{
padding-top: 25px;
text-align: center;
color: white;
}
.warning
{
position: absolute;
padding-left: 325px;
}
.pwarning
{
position: absolute;
padding-top: 30px;
padding-left: 325px;
}
.titre
{
float: left;
padding-left: 25px;
}
#neyblack
{
font-family: tahoma;
color: #00A6FF;
}
#com
{
font-family: tahoma;
color: white;
}
TheOldNoob Le 28 août 2016 à 01:08 (Édité le 28 août 2016 à 01:11)
Déja, supprime les 7 premieres lignes avec tes accés a la bdd, on sais jamais...
j'ai envie de me moquer, mais c'est jamais drole de codé 😉
retier le million de <br> que tu a mis au dessus de ton chat, il va remonté tout seul ^^
Par contre, c'est domage, ton site est pas responsive, sur mon ecran 23" ça va, mais sur mon 17" c'est moche
Profil introuvable Le 28 août 2016 à 01:33
Sa me fait unpeux chi** le responsive je sais pas dutout comment faire surtout que frenchemnt avoir quel'qun pour m'aidée a mon avis sa m'aiderait non seulement a apprendre masi surtout a moins me sentir seul 😋 enfin bon^^ Merci pour ton aide si tu as du temps j'aurais encore besoin de toi sur quelque points merci pour tout!
TheOldNoob Le 28 août 2016 à 01:46
ensuite, on met des % a la place des px pour avoir un truc qui s'adapte un peu aux ecran. Mais l'idéal étant de bossé avec un framework qui est déjà responsive.
Je parle souvent de Bootstrap, fait par twitter, mais sur un autre poste, j'ai presenté Knacss, facile a prendre en main, surtout pour débutant
Profil introuvable Le 28 août 2016 à 02:21
TheOldNoob Le 28 août 2016 à 09:42
En gros, c'est une parti du code qui est déjà fait, et que tu peu réutilisé
lis se sujet que j'ai fait hier soir, en parti spécialement pour toi 😉
https://www.primfx.com/forum/programmation/html-css/envis-site-responsive-sans-prendre-tete-612
Profil introuvable Le 28 août 2016 à 15:53
