Aligner le logos et la connection! css

micka30 -  
Bonjour,
Bonjour,

bonjour!
voici la photo de mon site dans ce lien!

http://www.photomania.com/

j'ai un probleme d'alignememt entre la le logo de mon site et la connection (pseudo et mot de passe!)

je voudrai qu'il soit tout les 2 tout en haut de mon site et o même niveaux logo a gauche et la connection a droite!

or la connection et un peut plus bas!

merci par avance de votre aide!

voici mon code php:

<?php
session_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<!-- Rappel : debut de la page -->
<div id="page_entiere">
<head><!-- Rappel : debut information d'en tète -->

<title>âmesoeur.com</title> <br /> <!-- Rappel : titre de la page -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

<div id="fieldset">

</head><!-- Rappel : fin information d'en tète -->
<body>
<!-- Rappel : c'est ici que l'on écrit le contenu de notre page web -->

<span class= "toutpage">
<div id="toutpage2"></span>

<div id="logo">
<img src="images_site/logo.JPG" class="amoureux_cupidon" alt="amoureux_cupidon" />
</div>

<form action="mapageperso.php" method="post"><div id="connection">

<p><label>Votre pseudo</label> : <input type="text" name="pseudo" size="5"/>

<label>Votre mot de passe</label> : <input type="password" name="mot_de_passe" size="5"/>

<input type="submit" name="envoi" size="5" value="Envoyer " />
</div>

<p>
<span class= "les_connectes">Les connectés :</span>

</p>

<?php

// D'abord, on se connecte à MySQL
mysql_connect("localhost", "root", "");
mysql_select_db("sitemicka");

// Sélectionner les 10 premières entrées de la table jeux_videos
$reponse = mysql_query("SELECT id, pseudo, photo2 FROM infoclients LIMIT 0, 7");

while($resultat = mysql_fetch_assoc($reponse))

{

?>

<?php echo '<a href=fichemembre.php?id='.$resultat['id'].'><img src="images/'.$resultat['photo2'].'" alt="image" /></a></td></tr>'; ?>

<?php

}
mysql_close(); // Déconnexion de MySQL

?>
<p>
<img src="images_site/fotolia_5303750.JPG" class="amoureux_cupidon" alt="amoureux_cupidon" title="Devenez comme nous !" />
</p>

<form action="premierpage.php" method="post">
<span class= "ma_recherche_rapide"> Ma recherche rapide:
<div id="ma_recherche_rapide"></span>
<h2>Ma recherche rapide</h2>

<p>
Je recherche :<br />
<input type="radio" name="re_sexe" value="fille" id="fille" /> <label for="fille">Fille</label><br />
<input type="radio" name="re_sexe" value="garçon" id="garçon" /> <label for="garçon">Garçon</label><br />
</p>

<p>
<label for="age_minimum"><span class= "age_minimum">Age minimum </span></label><br />

<select name="age_minimum" id="age_minimum">

<option value="18">18</option>

</select>

<p>
<div id="age_maximum"> <label for="age_maximum"><span class= "age_maximum">Age maximum</span></label><br />
<select name="age_maximum" id="age_maximum">

<option value="18">18</option>
<option value="19">19</option>

</select>
<br /></div>
<p> <div id="departement">
<label for="departement"><span class= "departement">Département</span></label><br />
<select name="departement" id="departement">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>

</select></div>

<p><label>Ville</label> : <input type="ville" name="ville" /> </br>
</p>

</p>

<p><label>Pseudo</label> : <input type="pseudo" name="pseudo" /> </br>
</p>

<?php
if (isset ($_POST['re_sexe']) && isset ($_POST['age_minimum']) && isset ($_POST['age_maximum'])&& isset ($_POST['departement']))
// Si les variables existent attention qu'elles existent ne veut pas dire qu'elles ne soient pas vides
{

$sexe = $_POST['re_sexe'];
$age_mini = $_POST['age_minimum'];
$age_maxi = $_POST['age_maximum'];
$dep = $_POST['departement'];
$annee_today=date("Y");
$suite_date_today=date("m-d");
$annee_naissance_age_mini=$annee_today - $age_mini;
$annee_naissance_age_maxi=$annee_today - $age_maxi;
$date_naissance_haute=$annee_naissance_age_mini."-".$suite_date_today;
$date_naissance_basse=$annee_naissance_age_maxi."-".$suite_date_today;
// on se connecte à MySQL
$cnx=mysql_connect("localhost", "root", "") or die("Pb connexion au serveur".mysql_error());
$db=mysql_select_db("sitemicka") or die("Pb selection base".mysql_error());

$reponse2 = mysql_query("SELECT id, photo2, date_de_naissance, departement, sexe FROM infoclients WHERE sexe='".$sexe."' AND departement='".$dep."' AND date_de_naissance < '".$date_naissance_haute."' AND date_de_naissance > '".$date_naissance_basse."' ") or die("Pb requette".mysql_error());
while ($donnees2 = mysql_fetch_array($reponse2) )
{
echo '<tr><td><a href=fichemembre.php?id='.$donnees2['id'].'><img src="images/'.$donnees2['photo2'].'" alt="image" /></a></td></tr>';
}
mysql_close(); // Déconnexion de MySQL
}
?>

<!-- bouton d'envoi -->
<input type="submit" name="envoi" value="Envoyer " /></form>
</div>

<h1>Connection</h1></q>

<form action="mapageperso.php" method="post">

<p><label>Votre pseudo</label> : <input type="text" name="pseudo" />
</p>

<p><label>Votre mot de passe</label> : <input type="password" name="mot_de_passe" />
</p>
<p>
</form>
<input type="submit" name="envoi" value="Envoyer " /></form>

<div id="mon_espace">
<a href="monespace.php">Mon espace</a> </p>

<p>Pas encore inscrit?<br />
<a href="inscription.php">Cliquez ici!</a> </p>

<p>Pour nous contacter, <a href="mailto:yovan816@hotmail.com">cliquez ici</a> !</p>

<div id="pied_de_page">
<p> Copyright (C) Amesoeur.com 2007 - Tous droits réservés </p>
</div>
</div>

</body>

</html><!-- Rappel : fin de la page -->

code css:

h1
{

text-align: left;

color: black;
}

p /* chapitre du texte a modifier */

{ /* debut de la modification du chapitre */
color: black; /* couleur du texte */

font-size: 0.6em; /* taille du texte */

font-family: Tahoma, Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité mes on rajoute d'autre police ou cas ou celle ci ne pas pas! */

} h2
{

color : black;
text-align: left;
font-size: 0.8em;
}
body /* On travaille sur la balise body, donc sur TOUTE la page */
{

background-image: url("images_site/bleumsn.jpg");
background-repeat: repeat;
-moz-border-radius:15px 15px 15px 15px;

}

#fieldset

{

-moz-border-radius:15px 15px 15px 15px;
background-color: white;
background-repeat: repeat;
}

titre

{
color: green
font_size : 1.5em;
}

.les_connectes
{
color: white;
font-family: Tahoma, Arial, Verdana,serif;
}

.inscrit
{
color: yellow;
}

#page_entiere
{
-moz-border-radius:15px 15px 15px 15px;
margin-left: 200px;
margin-top: 10px;
margin-right: 200px;
margin-bottom:150px;
}

.amoureux_cupidon

{
margin-top:10px;
float: right;
background-attachment: fixed; /* Le fond restera fixe */

}

#texte_premiere
{
color: black;
text-align:;
font-size:0.6em;
}

.ma_recherche_rapide
{
text-align: center;

}

#ma_recherche_rapide
{
color:black;
border: 4px groove teal;
margin-right: 530px;
margin-bottom: 5px;
padding: 20px;/* Marge interieur du cadre */
background-image: url("images_site/bleumsn.jpg");
-moz-border-radius:15px 15px 15px 15px;
}

#espace_membre
{
text-align:left;
-moz-border-radius:15px 15px 15px 15px;
}

.age_minimum
{
color: black;
font-family: Tahoma, Arial, Verdana,serif;
}
.age_maximum
{
color: black;
font-family: Tahoma, Arial, Verdana,serif;
}
.departement
{
color: black;
font-family: Tahoma, Arial, Verdana,serif;
}

#input_mot_de_passe

{
margin-left:800px;
margin-top: 10px;
}

#mon_espace
{
-moz-border-radius:15px 15px 15px 15px;
text-align: left;
font-family:Tahoma, Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité mes on rajoute d'autre police ou cas ou celle ci ne pas pas! */
color:black;

}

#fieldset2

{
-moz-border-radius:15px 15px 15px 15px;
background-image: url("images_site/bleumsn.jpg");
margin-left:px;
font-size:0.6em;

}
#toutpage2
{
padding-top: px;
padding-left : 11px;/* Marge interieur du cadre */
padding-right : 11px;/* Marge interieur du cadre */
padding-bottom :11px;
color:black;
border: 24px groove teal;

background-repeat: repeat-x;
-moz-border-radius:20px 20px 20px 20px;
}

#pied_de_page
{
padding: 1px;
-moz-border-radius:20px 20px 20px 20px;
text-align: center;
color: black;
background-image: url("images_site/bleumsn.jpg");
background-repeat: repeat-x;

}

#logo
{
margin-right: 540px;
float: left;
background-attachment: fixed; /* Le fond restera fixe */

}
#connection
{
margin-left:400px;

}
Configuration: Windows XP
Internet Explorer 6.0

3 réponses

  1.  Gihef Contributeur
    Bonjour,

    Avant de poursuivre, revoie la structure de ta page.

    Des éléments ne sont pas en place.
    <!-- Rappel : debut de la page --> 
<div id="page_entiere"> 

et

<div id="fieldset">
    n'ont rien a faire d'en l'en-tête.

    Et ton lien d'exemple, ne donne rien.
    Coupe-le en tranches si tu veux le réutiliser.

    --
    0
    1. micka30 Auteur
      bonsoir Gihef,

      OUI J'AI FAIT N'IMPORTE QUOI §§

      je corigerais demain et je te tien o courant
      0
  2. bugs20007
    Salut,

    Tiens essaye ca et dit moi quoi.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    </head>

    <!-- Rappel : debut de la page -->
    <div id="page_entiere">
    <head><!-- Rappel : debut information d'en tète -->

    <title>âmesoeur.com</title> <br /> <!-- Rappel : titre de la page -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

    <div id="fieldset">

    </head><!-- Rappel : fin information d'en tète -->
    <body>
    <!-- Rappel : c'est ici que l'on écrit le contenu de notre page web -->

    <span class= "toutpage">
    <div id="toutpage2"></span>

    <div id="logo">
    <table align="center" width="795" border="0">
    <tr>
    <th width="785" scope="col"><img src="images_site/logo.JPG" class="amoureux_cupidon" alt="amoureux_cupidon" /></th>
    </tr>
    <tr>
    <td><label>Votre pseudo</label>
    :
    <input type="text" name="pseudo2" size="5"/>
    <label>Votre mot de passe</label>
    :
    <input type="password" name="mot_de_passe2" size="5"/>
    <input type="submit" name="envoi2" size="5" value="Envoyer " /></td>
    </tr>
    <tr>
    <td><p><span class= "les_connectes">Les connectés :</span> </p>
    <?php

    // D'abord, on se connecte à MySQL
    mysql_connect("localhost", "root", "");
    mysql_select_db("sitemicka");

    // Sélectionner les 10 premières entrées de la table jeux_videos
    $reponse = mysql_query("SELECT id, pseudo, photo2 FROM infoclients LIMIT 0, 7");

    while($resultat = mysql_fetch_assoc($reponse))

    {

    ?>
    <?php echo '<a href=fichemembre.php?id='.$resultat['id'].'><img src="images/'.$resultat['photo2'].'" alt="image" /></a></td></tr>'; ?>
    <?php

    }
    mysql_close(); // Déconnexion de MySQL

    ?>
    <p> <img src="images_site/fotolia_5303750.JPG" class="amoureux_cupidon" alt="amoureux_cupidon" title="Devenez comme nous !" /> </p></td>
    </tr>
    </table>
    </div>

    <form action="mapageperso.php" method="post"><div id="connection">

    <p><label></label>
    </div>

    <p> </p>

    <form action="premierpage.php" method="post">
    <span class= "ma_recherche_rapide"> Ma recherche rapide:
    <div id="ma_recherche_rapide"></span>
    <h2>Ma recherche rapide</h2>

    <p>
    Je recherche :<br />
    <input type="radio" name="re_sexe" value="fille" id="fille" /> <label for="fille">Fille</label><br />
    <input type="radio" name="re_sexe" value="garçon" id="garçon" /> <label for="garçon">Garçon</label><br />
    </p>

    <p>
    <label for="age_minimum"><span class= "age_minimum">Age minimum </span></label><br />

    <select name="age_minimum" id="age_minimum">

    <option value="18">18</option>

    </select>

    <p>
    <div id="age_maximum"> <label for="age_maximum"><span class= "age_maximum">Age maximum</span></label><br />
    <select name="age_maximum" id="age_maximum">

    <option value="18">18</option>
    <option value="19">19</option>

    </select>
    <br /></div>
    <p> <div id="departement">
    <label for="departement"><span class= "departement">Département</span></label><br />
    <select name="departement" id="departement">
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>

    </select></div>

    <p><label>Ville</label> : <input type="ville" name="ville" /> </br>
    </p>

    </p>

    <p><label>Pseudo</label> : <input type="pseudo" name="pseudo" /> </br>
    </p>

    <?php
    if (isset ($_POST['re_sexe']) && isset ($_POST['age_minimum']) && isset ($_POST['age_maximum'])&& isset ($_POST['departement']))
    // Si les variables existent attention qu'elles existent ne veut pas dire qu'elles ne soient pas vides
    {

    $sexe = $_POST['re_sexe'];
    $age_mini = $_POST['age_minimum'];
    $age_maxi = $_POST['age_maximum'];
    $dep = $_POST['departement'];
    $annee_today=date("Y");
    $suite_date_today=date("m-d");
    $annee_naissance_age_mini=$annee_today - $age_mini;
    $annee_naissance_age_maxi=$annee_today - $age_maxi;
    $date_naissance_haute=$annee_naissance_age_mini."-".$suite_date_today;
    $date_naissance_basse=$annee_naissance_age_maxi."-".$suite_date_today;
    // on se connecte à MySQL
    $cnx=mysql_connect("localhost", "root", "") or die("Pb connexion au serveur".mysql_error());
    $db=mysql_select_db("sitemicka") or die("Pb selection base".mysql_error());

    $reponse2 = mysql_query("SELECT id, photo2, date_de_naissance, departement, sexe FROM infoclients WHERE sexe='".$sexe."' AND departement='".$dep."' AND date_de_naissance < '".$date_naissance_haute."' AND date_de_naissance > '".$date_naissance_basse."' ") or die("Pb requette".mysql_error());
    while ($donnees2 = mysql_fetch_array($reponse2) )
    {
    echo '<tr><td><a href=fichemembre.php?id='.$donnees2['id'].'><img src="images/'.$donnees2['photo2'].'" alt="image" /></a></td></tr>';
    }
    mysql_close(); // Déconnexion de MySQL
    }
    ?>

    <!-- bouton d'envoi -->
    <input type="submit" name="envoi" value="Envoyer " /></form>
    </div>

    <h1>Connection</h1></q>

    <form action="mapageperso.php" method="post">

    <p><label>Votre pseudo</label> : <input type="text" name="pseudo" />
    </p>

    <p><label>Votre mot de passe</label> : <input type="password" name="mot_de_passe" />
    </p>
    <p>
    </form>
    <input type="submit" name="envoi" value="Envoyer " /></form>

    <div id="mon_espace">
    <a href="monespace.php">Mon espace</a> </p>

    <p>Pas encore inscrit?<br />
    <a href="inscription.php">Cliquez ici!</a> </p>

    <p>Pour nous contacter, <a href="mailto:yovan816@hotmail.com">cliquez ici</a> !</p>

    <div id="pied_de_page">
    <p> Copyright (C) Amesoeur.com 2007 - Tous droits réservés </p>
    </div>
    </div>

    </body>

    </html><!-- Rappel : fin de la page -->

    code css:

    h1
    {

    text-align: left;

    color: black;
    }

    p /* chapitre du texte a modifier */

    { /* debut de la modification du chapitre */
    color: black; /* couleur du texte */

    font-size: 0.6em; /* taille du texte */

    font-family: Tahoma, Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité mes on rajoute d'autre police ou cas ou celle ci ne pas pas! */

    } h2
    {

    color : black;
    text-align: left;
    font-size: 0.8em;
    }
    body /* On travaille sur la balise body, donc sur TOUTE la page */
    {

    background-image: url("images_site/bleumsn.jpg");
    background-repeat: repeat;
    -moz-border-radius:15px 15px 15px 15px;

    }

    #fieldset

    {

    -moz-border-radius:15px 15px 15px 15px;
    background-color: white;
    background-repeat: repeat;
    }

    titre

    {
    color: green
    font_size : 1.5em;
    }

    .les_connectes
    {
    color: white;
    font-family: Tahoma, Arial, Verdana,serif;
    }

    .inscrit
    {
    color: yellow;
    }

    #page_entiere
    {
    -moz-border-radius:15px 15px 15px 15px;
    margin-left: 200px;
    margin-top: 10px;
    margin-right: 200px;
    margin-bottom:150px;
    }

    .amoureux_cupidon

    {
    margin-top:10px;
    float: right;
    background-attachment: fixed; /* Le fond restera fixe */

    }

    #texte_premiere
    {
    color: black;
    text-align:;
    font-size:0.6em;
    }

    .ma_recherche_rapide
    {
    text-align: center;

    }

    #ma_recherche_rapide
    {
    color:black;
    border: 4px groove teal;
    margin-right: 530px;
    margin-bottom: 5px;
    padding: 20px;/* Marge interieur du cadre */
    background-image: url("images_site/bleumsn.jpg");
    -moz-border-radius:15px 15px 15px 15px;
    }

    #espace_membre
    {
    text-align:left;
    -moz-border-radius:15px 15px 15px 15px;
    }

    .age_minimum
    {
    color: black;
    font-family: Tahoma, Arial, Verdana,serif;
    }
    .age_maximum
    {
    color: black;
    font-family: Tahoma, Arial, Verdana,serif;
    }
    .departement
    {
    color: black;
    font-family: Tahoma, Arial, Verdana,serif;
    }

    #input_mot_de_passe

    {
    margin-left:800px;
    margin-top: 10px;
    }

    #mon_espace
    {
    -moz-border-radius:15px 15px 15px 15px;
    text-align: left;
    font-family:Tahoma, Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité mes on rajoute d'autre police ou cas ou celle ci ne pas pas! */
    color:black;

    }

    #fieldset2

    {
    -moz-border-radius:15px 15px 15px 15px;
    background-image: url("images_site/bleumsn.jpg");
    margin-left:px;
    font-size:0.6em;

    }
    #toutpage2
    {
    padding-top: px;
    padding-left : 11px;/* Marge interieur du cadre */
    padding-right : 11px;/* Marge interieur du cadre */
    padding-bottom :11px;
    color:black;
    border: 24px groove teal;

    background-repeat: repeat-x;
    -moz-border-radius:20px 20px 20px 20px;
    }

    #pied_de_page
    {
    padding: 1px;
    -moz-border-radius:20px 20px 20px 20px;
    text-align: center;
    color: black;
    background-image: url("images_site/bleumsn.jpg");
    background-repeat: repeat-x;

    }

    #logo
    {
    margin-right: 540px;
    float: left;
    background-attachment: fixed; /* Le fond restera fixe */

    }
    #connection
    {
    margin-left:400px;

    }
    0
    1. Gihef Contributeur 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans nom</title> 
</head> 

<!-- Rappel : debut de la page --> 
<div id="page_entiere"> 
<head><!-- Rappel : debut information d'en tète --> 

<title>âmesoeur.com</title> <br /> <!-- Rappel : titre de la page --> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> 

<div id="fieldset"> 


</head>
      Pas mieux.
      http://www.commentcamarche.net/forum/affich 4563919 aligner le logos et la connection css#1

      --
      0
    2. Dalida Contributeur
      @Gihefsalut Gihef,

      les voeux, blablabla…

      peux-tu jeter un coup d'oeil ici stp.

      en fait il n'y a pas de JS mais une soupe immonde à la FP collé dans une Frame de l'hébergeur…

      pour moi, la meilleure solution c'est de s'habituer à l'alignement à gauche !
      -:oD
      0
    3. Gihef Contributeur
      @DalidaSalut toi,

      Meilleurs vœux aussi.

      <Pardon pour ce divertissement>

      Je l'ai vu.
      Mais toutes les modif. à faire m'ont découragé (-;

      C'est, ça devrait, être placé dans un <table> inutile (d'une seule cellule). Devrait parce que le <table> n'est pas indiqué.
      Le style du body est répété, dans la CSS interne et dans la balise. On lui a fixé une width de 800px !
      Le positionnement aléatoire des différents éléments en absolute ne simplifie rien.
      Les noms de styles impersonnels mélangés à des styles dans les balises…

      J'ai réussi à centrer le <table>, mais pas dans Ff.
      J'ai réussi à centrer une <div> en remplacement de tout ce qui traîne du <table>, mais cette modif. en entraîne d'autres.
      Le <body>, c'est le petit bloc pointillé du haut.
      J'ai laissé tombé.

      Vois si tu peux t'en servir…

      Tu connais Ayumi ?

      </Pardon pour ce divertissement>

      --
      0
    4. micka30 Auteur
      salut bugs2007!

      et merci de ta reponse!

      ton script me donne ca!

      http://images2.photomania.com/329259/1/radB3123.jpg

      merci
      0
  3. micka30 Auteur
    VOICI LE LIEN§

    http://images2.photomania.com/327366/1/radB8554.jpg
    0
    1. Dalida Contributeur
      salut,

      tant qu'à squatter ton post, autant essayer de t'aider.

      au lieu de nous monter des bitmaps, tu devrais nous montrer du code, il n'y a que ça de vrai.

      et si tu n'as pas fait les modifs que Gihef t'a indiqué ça ne sert à rien de bidouiller.
      tu auras une cou***e à un moment ou à un autre : il faut partir avec du html propre avant d'attaquer le styles.
      0

Discussions similaires

Comment aligner des éléments html css
eligame

1 réponse
le pc me dit : check cable connection
chrispet

5 réponses
Connexion SCTR / Aucun chemin d'accès audio DISCORD
FR-Doom

10 réponses
Problème Torrent "Connexion aux Pairs" Bloqué
BobbySponger

4 réponses