header laideur, position de son contenu

php

11 novembre 2019 à 15:28:25

08 nov. 2019, 17:49

Bonjour,
Je n'ai pas trouvé de bon tuto concernant les headers (peut être mal chercher ? )
Donc si vous savez ou je peux en trouver, ou m'aider à résoudre mon problème :

J'aimerais mettre les liens test a gauche et le <table> qui contient les paramètres de connexion à droite donc j'ai mis les deux dans le <div class="header">, malheuresement, le connexion se retrouve en dessous du header.

<body>
 <div class="header">
        <nav class="menu">
            <a href="#">test</a>
            <a href="#">test</a>
            <a href="#">test</a>
            <a href="#">test</a>
        </nav>
    
        
<?php
    if(isset($_SESSION['id']) AND $userinfo['id'] == $_SESSION['id'])
    {
      echo ("vous êtes connecté");   ?> <br/> <?php
      echo ("Nom : ").$userinfo['pseudo'];  ?> <br/> <?php
       
    }else{
      ?> <FORM action="connexion.php" method="post">
       <h1> <TABLE>
<tr>  <td colspan=2><CENTER><FONT size="+2"><b>Connexion</b></FONT></CENTER>                 </td></tr>
<tr>  <td>Nom de Compte:</td><td><input type="text" name="pseudo" value="" >                 </td></tr>
<tr>  <td>Mot de passe:</td><td><input type="password" name="password" value="" >                 </td></tr>
<tr>  <td colspan=2 align=center> <input type="submit" name="connexion" value='connexion!'>  </td></tr>
        </TABLE>
    </h1>
    <?php
    }
    
  ?>
    
    
    </div>
    </header>

</body>

Le CSS :

<style>
/* HEADER */
.header{
position: static;
left: 0;
right: 0;
height: 100px;
line-height: 80px;
background-color: #00BFFF;
}

.table{
text-align: right;
}
</Style>

Voici ce que je voudrais ( si mon explication n'était pas claire ) :

HEADER :

---------------------------------------------------------------------------------------------------------------------

lien test

lien test Nom de compte :

lien test Image (Optionnel) Password :

lien test Se connecter(submit)

------------------------------------------------------------------------------------------------------------------

-
Edité par PHotoPoki 11 novembre 2019 à 16:01:54

Lamecarlate

11 novembre 2019 à 15:55:20

Bonjour,

Mauvais forum

Le sujet est déplacé de la section PHP vers la section HTML / CSS

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : header)

De plus : il faudrait valider votre HTML :

vous fermez un <header> que vous n'avez pas ouvert
vous utilisez <font> et <center>, toutes deux dépréciées depuis le 24 décembre 1999 (ce n'est pas une blague)
<table> n'est pas adapté pour de la mise en page
<h1> est un titre, et doit donc contenir du texte formant un titre

-
Edité par Lamecarlate 11 novembre 2019 à 16:03:25

Pas d'aide concernant le code par MP, le forum est là pour ça :)

PHotoPoki

11 novembre 2019 à 18:15:15

Merci pour les conseils, j'ai amélioré la page mais cela n'affiche pas les connexion à droite et le bouton submit est inexistant !

Devrais-je me concentrer sur le CSS de la page ou le html est suffisant (pour mettre le connexion dans le header à droite)

<body>
<header>
 <div class="header">
        <nav class="menu">
            <a href="#">Accueil</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
        </nav>
		
				
<?php
		if(isset($_SESSION['id']) AND $userinfo['id'] == $_SESSION['id'])
		{
			echo ("vous êtes connecté");   ?> <br/> <?php
			echo ("Nom : ").$userinfo['pseudo'];  ?> <br/> <?php
			 
		}else{
			?> 
			<FORM action="connexion.php" method="post">
       
			<p><b>Connexion</b></p>
			<p>Nom de Compte:</td><td><input type="text" name="pseudo" value="" >    </p>            
			<p>Mot de passe:</td><td><input type="password" name="password" value="" > </p>                
			<input type="submit" name="connexion" value='connexion!'> 
       
		
		<?php
		}
		
	?>
				</form>
		
		
		</div>
    </header>

</body>

<style>
/* HEADER */
.header{
    position: static;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 80px;
    background-color: #00BFFF;
}

.p{
	text-align: right;
}

.nav{
	width:10%;
}
</Style>

J-D-K

11 novembre 2019 à 18:48:58

Déjà, ton header ferme le en écrivant </div> et pas </header>

Ensuite, de ce que j'ai compris, essaye ça.

.header{
display:flex;
justify-content:space-between
}

PHotoPoki

11 novembre 2019 à 19:07:20

C'est déjà un peu mieux merci,

parcontre le /div ferme la balise <div class="header"> et

le /header la balise <header>

La balise div est peut être de trop ?

Poloin_34

11 novembre 2019 à 19:21:52

Effectivement, une balise div avec les propriétés du header dans un header n'a absolument aucun interêt