Sujet Précédent Sujet Suivant

Position

Résolu/Fermé
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019 - Modifié le 27 janv. 2019 à 14:49
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 - 30 janv. 2019 à 20:27
Bonjour,

Je suis débutant.
Je vais m'arracher les cheveux. lol.
J'ai regardé plusieurs vidéo/forum... j'ai pas compris.

voilà, j'ai une architecture SIMPLE

2 DIV hautes : "header" et "menu"
2 DIV centrales : "articles" et "publicite"
1 DIV basses: "footer"

Ce que je voudrais faire c'est mes 2 divs hautes reste FIXE et que les autres divs passe APRES.

J'ai passé la journée à manipuler les trucs "position"...etc Mais je piges pas car quand je FIXE mes 2 div hautes, bas mes 2 div centre sont tout de même placés "derrière". Alors, j'me doute bien qu'il s'agit de jouer avec les div, les positions..etc, mais je ne pige pas.
Je veux que mon contenu passe APRES mes 2 divs du haut.

en gros, ce que j'ai:

ma div qui contient mes 2 div haute: 

.head-menu
{
    position: fixed;
    width: 100%;

}


Mes deux div haute 


.header
{
    background-color: #fff; /* BLEU */
    width: 90%;
    border: 0% solid #000;
    margin: 0% auto;
    padding: 1%;
    z-index: 1000;

    }

.menu
{
    background-color: #00f; /* BLEU */
    width: 90%;
    border: 0% solid #000;
    margin: 0% auto;
    padding: 1%;
    z-index: 1000;

    }


Ensuite, le reste est dans une div "container": 

.container
{
    background-color: #ff9; /* JAUNE */
    width: 100%;
    margin: 0% auto;
    border: 0;
    left: 0px;
    z-index: 100;
    clear: left;


}


qui contient les divs suivantes: 

.articles
{
    background-color: #0ff; /* CYAN */
    width: 100%;
    padding: 0.5%;

}

.publicite
{
    background-color: #0f0; /* VERT */
    width: 100%;
}

.footering
{
    background-color: #888; /* MAGENTA */
    width: 100%;
    padding: 0.5%;
    bottom: 0px;

}


Le résultat est celui-ci:



A savoir, donc, que ce que je veux c'est que mon CONTENU, en (JAUNE), soit APRES ma barre d'en-tête

Merci d'avance
A voir également:

4 réponses

Réponse 1 / 4
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
27 janv. 2019 à 17:06
Bonjour, pourriez vous postez votre code HTML ainsi que le code CSS complet ?
Merci
0
Réponse 2 / 4
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019
27 janv. 2019 à 17:59
Le code css est celui posté plus haut;

le code html: 

<link rel="stylesheet" href="css/test-container.css">  <!--CSS GESTION DES BASES DE DONNEES-->
    

    
</head>
    
<body>

/* PREMIERE DIV - GESTION DU BANDEAU HAUT */


/* DIV DU BANDEAU HAUT */
<div class="head-menu">
    <div class="headering">
    
/* DIV DU MENU */
    </div>
    
    <div class="menu">menu
    </div>
</div>


/* DEUXIEME DIV - GESTION DU CONTENU  */

<div class="container">

/* DIV DES ARTICLES */
    <div class="articles">
        <h3>Début d'article</h3>
        <p>
    
            
            </p>
           
/* DIV ARTICLES DU BAS -  PUB... */
    </div>
    
    <div class="publicite">Ceci est un bandeau publicitaire
    </div>
    

/* DIV PIED DE PAGE */
    <div class="footering">
        copyright 2018 - Infos-cLubs
        
    </div>

    
</div>
0
sorony
27 janv. 2019 à 20:20
Bonsoir, plutôt que des vidéos je vous conseille un cours en texte avec des exemples pratiques à faire vous même. Cela vous fera progresser et surtout vous fournit les bases(ce genre de cours pour débutant sont légion mais une vidéo c'est plutôt bien pour un point précis qu'on veut éclaircir quand on connait déjà les bases et les principes), comme le comportement normal des balises(utile à savoir avant de les modifier).

Ensuite mieux encore qu'une vidéo la règle est un exemple précis à décortiquer ça peut servir et c'est plus rapide de lire et faire par soi même qu'une vidéo.
https://www.google.fr/search?source=hp&ei=8v5NXLXiDuiqgwfJh6H4Cw&q=positionnement+en+css

Sachez aussi que la propriété de style position : fixed ne rends pas un élément fixe mais fait qu'il garde la même position dans la page quelque que soit le défilement de celle ci(scroll en anglais).
Donc ce que vous voulez faire c'est utiliser les éléments de façon normale et le CSS que vous mettez n'est pas nécessaire.
Une balise DIV(à éviter car elle n'indique rien sur le contenu qui lui est associée et qu'il y a de meilleures balises, c'est pas une faute mais une lacune et pauvreté de la page la rendant moins apte à référencer) à un comportement de type bloc. Elle prend tout l'espace qui lui est possible et ira sur une nouvelle ligne. Pour qu'elle suive une autre il serait mieux de positionner en float ou encore plus simplement définir des tailles en % pour qu'elles soient positionné comme nécessaire.

Attention vous indiquez z-index :1000 je voit pas ce que ça vient faire ici et en plus c'est absurde de donner la même valeur à 2 z-index(sauf cas très précis, ex. la vidéo que vous utilisez qui n'a rien à voir avec ce que vous dites vouloir faire).

Donc commencez par les bases et non une vidéo explicative d'un truc spécifique pour apprendre et savoir en pratiquant vous même. Soyez rigoureux car c'est simple(beaucoup plus que vous pensez) mais demande de la rigueur et la pratique qui va avec. C'est pas en regardant quelqu'un d'autre faire que vous apprendrez mais bien en vous creusant les méninges et suivant une règle absolue que vous pourrez vous débrouiller.
Un exemple plus concret: 


<style>
.bandeau{width:80%}
main{width:100%;height:60%;
}
footer{
background-color: #888;
}
</style>
<header><p>
en tête de la page</p>
<p>avec 2 textes qui se suivent</p> 
</header>
<main>
<p>le contenu principal , il peut inclure d'autres balises comme des paragraphes avec section en articles</p>
</main>
<footer>
<p>un pied de page</p>
</footer>


Détails de vos erreurs:
z-index indique des niveaux de superposition, donc inutile ici vous parlez de positionnement d'éléments successifs et non de superposition.
bottom: 0px;
Inutile sans définir avant une règle de positionnement , et aussi la valeur par défaut est déjà de 0. Si vous rajoutez de définir la position en absolue(par rapport au bord de la page) ça veut éventuellement dire que vous le positionnez à 0 par rapport au bas de page(bottom).

Bref il faut que vous appreniez la définition des propriétés CSS que vous utilisez sinon c'est n'importe quoi...
0
sorony
27 janv. 2019 à 20:20
Liste avec des exemples: https://www.w3schools.com/Css/
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
28 janv. 2019 à 18:08
Le site Open Classroom est également pas mal pour apprendre le langage de programmation web ;) (HTML/CSS/PHP/JS...)

Cela te permettra aussi de te faire plaisir ^^
0
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019
28 janv. 2019 à 18:34
Oui je regarde aussi sur des sites tels que OpenClassroom ;-)
0
Réponse 3 / 4
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019
28 janv. 2019 à 18:11
Merci pour vos réponses et vos conseils.

Si quelqu'un a une solution concrète à me proposer (si j'ai posé cette question en particulier c'est parce qu'avant j'ai cherché). J'aime pas demander pou rien.

Mais j'vais suivre vos conseils en parallèle ..
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
28 janv. 2019 à 18:23
Je suis en train de regarder
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
Modifié le 28 janv. 2019 à 18:32
Est-il possible de fournir le code HTML entier ? il semble manquer une partie...
Envoyez en MP si cela doit rester privé, ou modifiez les liens ou autre pour cacher les infos sensibles

Je vous demande ça parce que pour avoir un rendu des modifs que j'ai fait il me faut le code entier pour avoir la même disposition de page que vous...
0
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019
28 janv. 2019 à 18:33
Le reste du html ne concerne que le <head></head> avec rien de bien particulier dedans...
0
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019 > piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022
28 janv. 2019 à 18:33
Merci
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
Modifié le 28 janv. 2019 à 18:38
Justement, si ^^ il y a les meta etc qu'il me faut, ainsi que le reste des balises html parce que vu ce que j'ai en affichage avec le code que vous avez envoyé, ça va être compliqué de vous aider, je n'ai absolument pas la même chose.

0
Réponse 4 / 4
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
28 janv. 2019 à 22:22
Voilà le code HTML 


<!DOCTYPE html>
	<head>
		<!-- TITRE-->
		<title></title>

		<!--META-->
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!--SCRIPT-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

		<!--POLICES DE CARACTERE-->
		<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet"> <!--POLICE DU LOGO-->
		<link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet"> <!--POLICE DU LOGO-->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <!--POLICE P-->

		<!-- CSS-->
		<link rel="stylesheet" href="css/test-styles.css"> <!--CSS GENERAL-->

		<!-- <link rel="stylesheet" href="css/test-cols.css"> CSS GESTION DES COLONNES-->
		<!-- <link rel="stylesheet" href="css/test-form.css"> CSS GESTION DES FORMULAIRES-->
		<!-- <link rel="stylesheet" href="css/test-general.css"> CSS GESTION DES BASES DE DONNEES-->
		<link rel="stylesheet" href="css/test-container.css"> <!--CSS GESTION CONTAINER-->
		<link rel="stylesheet" href="css/test-pagerone.css"> <!--CSS GESTION PREMIERE PAGE-->
		<link rel="stylesheet" href="a.css"> <!-- NE PAS PRENDRE EN COMPTE -> CSS DE TEST -->
	</head>
	<body>
		<!-- DIV DU BANDEAU HAUT (EN-TETE + MENU)-->
		<div class="header">
			<div class="h_en_tete">EN-TETE</div>
			<div class="h_menu">MENU</div>
		</div>
		
		<!-- DIV QUI CONTIENT LES ARTICLES (TITRE + CONTENU) -->
		<div class="cont_body">
			<div class="b_articles">
				<h3>TITRE ARTICLE</h3>
					CONTENU DE L'ARTICLE
			</div>
		</div>
		
		<!-- DIV QUI CONTIENT LA PUB -->
		<div class="b_pub">
			PUBLICITE
		</div>
		
		<!-- DIV QUI CONTIENT LE COPYRIGHT -->
		<div class="footer">
			COPYRIGHT
		</div>
	</body>
</html>


Voilà le code CSS : 

html, body{
	background-color: #0ff;	/* Définit la couleur d'arrière plan de la page */
}
/* HEADER */
.header{
	width: 100%;	/* Largeur de la dive header */
	height: 100px;	/* Hauteur de la div header */
	top: 0;			/* Définit la position de la div par rapport à la page */
	position: fixed;	/* Fixe la div à la position définie juste au dessus */
}
.h_en_tete{
	text-align: center;	/* Centre le texte au milieu */
	height: 50px;	/* Hauteur de la div (50% de la div header qui la contient) */
	background-color: black;	/* Définit la couleur d'arrière plan de la div */
	color: white;	/* Couleur du texte contenu dans la div */
	width: 100%;	/* Largeur de la div */
}
.h_menu{
	text-align: center;	/* Centre le texte au milieu */
	height: 50px;	/* Hauteur de la div (50% de la div header qui la contient) */
	width: 90%;	/* Largeur de la div */
	background-color: blue;	/* Définit la couleur d'arrière plan de la div */
	margin: auto;	/* Permet de centrer la div sur l'écran (sans ça, elle se décale à gauche) */
}

/* BODY */
.cont_body{
	margin-top: 100px;	/* Décale la div de 100px vers le bas pour dépasser la div header qui fait 100px de hauteur (sans ça, les deux div se superposent */
}
.b_articles{
	text-align: center;	/* Centre le texte au milieu */
}
.b_pub{
	text-align: center;	/* Centre le texte au milieu */
	background-color: #0f0; /* VERT Définit la couleur d'arrière plan de la div */
	margin-bottom: 40px;	/* Met une marge de 40px à la div pour dépasser la div footer qui fait 40px (sans ça, les deux div se superposent) */
}

/* FOOTER */
.footer{
	text-align: center;	/* Centre le texte au milieu */
	background-color: #888; /* MAGENTA Définit la couleur d'arrière plan de la div */
	width: 100%;	/* Largeur de la div */
	padding: 0.5%;	/* Marge "interne" de la div */
	height: 40px;	/* Hauteur de la div */
	bottom: 0;	/* Définit la position de la div par rapport à l'écran */
	position: fixed;	/* Fixe la div à la position définie juste au dessus. */
}
/* Pour enlever la fixation de la div copyright, il faut supprimer les lignes 46 et 47 (bottom:0; et position:fixed;) */
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
Modifié le 28 janv. 2019 à 22:25
Si tu as des questions sur ce que j'ai fait n'hésites pas, si j'ai oublié quelque chose, pareil ;)

Concernant la barre de pub, sa position dépend de la taille du contenu de l'article, tu peux corriger cela en rajoutant un bottom:0; width:100%; et position:absolute;

La page ne passera en dessous de la barre de menu que si le contenu de l'article est trop grand pour être affiché en entier sur la page (pour tester, prends un texte et colle le plusieurs fois)
0
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019
29 janv. 2019 à 08:03
Salut Pirate,

tout d'abord je te remercie. Tout est bien commenté. Je connaissais la pluspart des attributs donc j'ai pas été perdu.
Par contre, je comprends pas car ça ne fonctionne pas:

/ Je ne vois pas les différentes couleurs des background-color

/ Les text-align: center; ne fonctionnent pas non plus

/ J'ai rajouté plein de texte dans le contenu, mais quand je scrool, ça ne passe pas sous ma barre de menu

Bizarre?

Ce qui est bizarre c'est que j'ai l'impression qu'aucune propriété n'a été prise en compte (les fond ne sont pas coloré, idem pour les couleurs de texte...

chelou

voilà ce que j'ai
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
29 janv. 2019 à 18:06
Bonsoir, c'est à cause du lien du fichier CSS, j'ai rajouté un link a.css dans le HEAD, c'est le fichier dont je me suis servi sur mon PC.

Il suffit simplement de remplacer le lien par celui que vous avez
0
robby94 Messages postés 26 Date d'inscription jeudi 24 janvier 2019 Statut Membre Dernière intervention 16 février 2019
29 janv. 2019 à 21:32
oui j'avais fait les modifs sur ça mais ça ne reconnais pas.. ça fonctionne pas.. c'est bizarre
0
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
29 janv. 2019 à 21:36
Comment se nomme le fichier .css qui contient le code que je vous ai envoyé ?
0

Discussions similaires

Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
[PYTHON] Récupérer position dans liste
erickvand -
hugo -

12 réponses
Caler une adresse au niveau de la fenêtre d'une enveloppe
®omain -
kent -

15 réponses