Bonjour,
Je suis débutant dans le HTML/CSS, et je souhaite réaliser un petit site personnel.

Mais j'ai quelques soucis au niveau de mon CSS, j'aurais besoins qu'on m'éclaire...

Voici à quoi ça ressemble globalement :



J'ai donc pour mon bandeau du haut, trois div, associé à un id css :

• bandeauHaut
• bandeauHautPartGauche
• bandeauHautPartDroite

Comme vous pouvez le voir sur mon schéma, en plein écran, c'est la position que je souhaite.
Lorsqu'on rétréci la taille de la fenêtre, la division bleu suit le bord droit. C'est aussi ce que je souhaite (même si ça ne me dérange pas qu'elle ne bouge pas...)
Mais, lorsque la place manque, elle vient se caler en dessous ! Et ça, je ne veut pas,car après ça ne ressemble plus à un bandeau..
Voici mon fichier CSS :

#bandeauHaut{
	float: left;
	width: 100%
}

#bandeauHautPartGauche{
	margin-left: 50px;
	float: left;
}

#bandeauHautPartDroite{
	margin-right: 50px;
	float: right;	
}

Que dois-je modifier afin d'avoir un vrai bandeau qui ne bouge pas ? Ou alors, que la division de gauche bouge, jusqu'a ce que la place manque, elle ne bouge plus ?

Merci d'avance pour votre aide

Déjà, je ne pense pas que le float: left sur #bandeauHaut soit utile, surtout que tu lui donnes width: 100%, alors que mettre un élément en flottant implique souvent qu'on veuille des éléments à côté. Je te suggère déjà d'enlver ces deux propriétés.

Ensuite, connais-tu la largeur de #bandeauHautPartGauche et #bandeauHautPartDroite ? Si oui, tu peux demander à ce que #bandeauHaut ait une largeur maximale (max-width) de la somme des deux plus les marges et paddings. Ce faisant, quand la page rétrécira, elle cessera de faire varier la largeur de #bandeauHaut et créera un ascenseur horizontal.

Merci de ta réponse..
En effet, les deux propriétés n'étaient pas utiles.
Pour ce qui est de définir une largeur maximal, ça ne fonctionne pas en indiquant un max-width à mon bandeau haut... :/
Mais ce n'est pas un min-width qu'il faudrait plutôt mettre ? Si oui, ça ne fonctionne pas non plus.. Au rétrécissement de la fenêtre, ma div de droite passe toujours en dessous de la gauche.

Citation : ZeTS

[…]Au rétrécissement de la fenêtre, ma div de droite passe toujours en dessous de la gauche.

Mets tes deux <div> #bandeauHautPartGauche et #bandeauHautPartDroite dans un bloc conteneur, auquel tu donne des dimensions fixes (width). Cela empêchera ta 3^ème<div> de passer sous la 2^ème .

Ton code HTML devrait donc ressembler à ça :

<div id="bandeauHaut">
<div> <!-- Ton bloc conteneur -->
<div id="bandeauHautPartGauche"></div>
<div id="bandeauHautPartDroite"></div>
</div> <!-- Fin de ton bloc conteneur -->
</div>

En espérant avoir été assez clair ,
AzeTkN.

Si tu ne veux pas une taille fixe pour que ça s'adapte à la taille de l'écran tout de même, tu peux utiliser l'attribut "min-width" plutôt que "width" dans le bloc conteneur de la méthode de AzeTkN; cela te permettra d'avoir l'avantage d'aucune largeur fixe (design responsive), et éviter ton soucis de placement avec une taille minimale.

Effectivement, je me suis emmêlée les pinceaux, je voulais dire min-width.

Citation : AzeTkN

En espérant avoir été assez clair

Oui merci, très clair, je vais prendre en compte vos remarques, j'essaie ça se soir !
Pour tout te dire, je pensais que mon #bandeauHaut faisais déjà office de "conteneur" de #bandeauHautPartDroite et #bandeauHautPartGauche

Citation : ZeTS

Pour tout te dire, je pensais que mon #bandeauHaut faisais déjà office de "conteneur" de #bandeauHautPartDroite et #bandeauHautPartGauche

Non, car tu lui attribut une valeur proportionnelle à celle de la page : 100 %. Autrement dit, il doit prendre tout le temps la largeur de la page.
Alors que si tu mets tes deux blocs, #bandeauHautPartDroite et #bandeauHautPartGauche, dans un bloc conteneur auquel tu attribues une largeur minimale (min-width) égale à celles de tes deux blocs additionnées (plus leurs marges extérieures et intérieures), cela empêchera à ta 3^ème<div> de passer en dessous de l'autre. Et de cette façon, tu peux garder la largeur de 100 % pour ton premier bloc, et quand la fenêtre ne sera pas assez grande pour pouvoir afficher l'intégralité des deux blocs enfants, cela créera un ascenseur horizontal .

Ah oui d'accord ! Je n'étais pas assez vif d'ésprit pour comprendre ça tout seul
Merci, je vais tester ça de-suite !

Met ça dans ton css :

@media screen and (max-height: 400px) {
	#bandeauHautPartGauche{
	    width: 100%;
    }
}

Après les ":" du max height (premiere ligne), tu entre la taille de la fenêtre lorsque le bandeau vert passe en dessous.
PS : Je n'ai pas essayé le code

Alors j'ai testé vos deux solutions :

Celle de Dimitrius dev ne fonctionne pas, où alors je l'ai pas implémentée correctement

Pour ce qui est de la solution de AzeTkN et les conteneur, elle fonctionne parfaitement !
Merci beaucoup pour votre aide !

En fait, la solution de Dimitrius dev veut dire "si le périphérique sur lequel la page est affichée est un écran et que sa hauteur n'excède pas 400 pixels, alors faire prendre toute la largeur de la page au bloc #bandeauHautPartGauche".
C'est une media query .

slt, moi je suis africain de l'afrique centrale mais je uis entrain de realiser quelque chose en matiere de html et css.

mais a present j'ai racontre un probleme au niveu du "@media screen and (max-width){}" . a ce point la mes oprions deroulant ne parvienne pas a se mettre en mode z-index, sa bouge toute la page quand je veux les ouvrir.

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet.