Nouveau sujet Aide

connecté
il y a 2 min
Bonjour Titouan,

J'ai modifié légèrement ton code pour avoir le résultat attendu sans trop casser la structure de base, code dispo ici : https://codepen.io/Friesstyle/pen/wvBMVxb

La principale modif est des mettre le sous-menu dans l'item de menu lui-même et non dans une div à part à l'extérieur du block .menus. Ensuite lors du survol de ton élément, rendre visible le block .submenu (qui sont en display: none à la base) à l'intérieur du .menu (cf: .menu:hover > a ~ .submenu)

Cependant comme disait si justement Gus, il vaudrait mieux utiliser une vraie liste imbriquée pour que la sémantique soit plus juste et ajouter la balise nav au passage. Tu as l'astuce pour faire apparaître le À toi d'adapter le CSS en fonction de la nouvelle structure html, bon courage Smiley smile .
Modifié par Friesstyle (10 Dec 2019 - 11:05)

Dans CSS et mise en forme, CSS3 · Problème de sélecteur pour sous-menu

il y a 2 h
Bonjour,

Je voudrais afficher des sous-menu en fonction du menu que je sélectionne. Ainsi, par défaut, le sous-menu est caché, puis si je passe la souris sur le menu, il faudrait que le sous-menu s'affiche. Mais je n'arrive pas à trouver le bon sélecteur CSS (L72 (CSS))

Mon code actuel : https://codepen.io/Titouan79/pen/BayjgWd

Merci d'avance pour vos réponses Smiley smile
Modifié par Titouan79 (10 Dec 2019 - 09:30)

Dans CSS et mise en forme, CSS3 · Problème de sélecteur pour sous-menu

il y a 13 h
Re,

Au lieu de se focaliser sur les consoles log, il vaudrait mieux expliquer cette application, chose que vous n'avez jamais fait. Donnez du CONTEXTE. Quelles sont toutes les étapes de cette application. Les avez-vous marquez quelque part. De cette façon, je comprendrai mieux ce que ces console.log représente, au lieu d'essayer de deviner ce que vous cherchez à réaliser.

Si l'objectif est d'afficher la valeur choisie (légumes, riz ou sauce), ça peut se faire...

Dans JavaScript, DOM et API Web HTML5 · Suite prompt ne fonctionne pas

il y a 16 h
Bonjour la communauté et aux bonnes volontés.
Je suis sur un projet (formation)de création de site de location de vélo.
Il faut une carte 'dune région de notre choix, ensuite, il faut via l'api jc décaux de faire ressortir tous les points de station.
J'ai utilisé openstreetmap pour la carte, avec leaflet comme bibliothèque.
Mon souci, c'est comment arrivé à faire apparaître ces zones sur ma carte.
Pour info, j'ai déjà la clé de jcdécaux et il faut le faire avec javascript.
Des tutos, tutos, rien.
Réveillez moi avec vos savoirs.

Dans Questions générales et questions de débutants · API jc decaux

il y a 16 h
Bonjour, ça commence a faire pas mal de temps que je suis fasse a un problème que je n'arrive pas à résoudre, je m'explique j'ai une sidenav materialize sur mon site web, l'affichage ce fait très bien en mode desktop mais en mobile non, l'affichage est très petit, j'ai testé sur iphone 6, samsung S8 et sur le simulateur mobile chrome, petit truc bizarre, sur le simulateur mobile de firefox tout va bien l'affichage est parfait ^^

Enfin voilà ma page: http://www.vdkskim.com/vdk

et voilà mon code:
le menu html:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>VDK</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="css/style2.css" rel="stylesheet" type="text/css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


	</head>
		<!--<a href="#slide-out" data-position="right" class="sidenav-trigger show-on-large grey-text text-darken-4 tooltipped"><i class="material-icons large" style="margin-top: 9px;">chevron_right</i></a>-->

			<ul id="slide-out" class="sidenav black" style="display: block; left: 0px;@media only screen and (max-width: 1000px) {width:90%;font-size:30px;}">
					<div class="container" style="margin-top:30px;width:90%;">
		          <a href="index.php"><img class="responsive-img  dude-pic" src="/gauvdk/images/cover_1.jpg"></a>
		      </div>
					<div class="side-navbar">
						<ul style="margin-top:30%;">
							<li><a class="waves-effect white-text" href="news.php"><i class="material-icons white-text">new_releases</i>News</a></li>
							<li><div class="divider"></div></li>
							<li><a class="waves-effect white-text" href="video.php"><i class="material-icons white-text">videocam</i>Vidéos</a></li>
							<li><div class="divider"></div></li>
							<li><a class="waves-effect white-text" href="spot.php"><i class="material-icons white-text">place</i>Trouver un spot</a></li>
							<li><div class="divider"></div></li>
							<!--<li><a class="waves-effect white-text" href="photo.php"><i class="material-icons white-text">contacts</i>Contact</a></li>
							<li><div class="divider"></div></li>-->
							<div class="user-view">
							<a href="#name"><span class="white-text name"></span></a>
						</div>
							<div style="text-align:center;color:white;font-weight:bold;"></div>
							<div class="user-view">
							<a href="#name"><span class="white-text name"></span></a>
						</div>
							<li><a class="waves-effect white-text" href="../index.php"><i class="material-icons white-text">mood</i>VDK Skimboard</a></li>
							<li><div class="divider"></div></li>
						</ul>
				</div>
			</ul>

		  <script>
			$(document).ready(function() {
				var toggle = -1;
				$('.slider').slider({full_width: true, indicators: false, duration: 1000, interval: 2200, dragged: true});
		        setTimeout(function () {
					var firstSliderImage = document.getElementById('slide-image-1');
					firstSliderImage.src = "/media/img/main__site_1.jpg";
				    firstSliderImage.onload = function () {
				        $('.all-body-click-region.inner__wrapper').css({'display':'block'});
				        $('.loader').css({'display':'none'})
				    };
		        }, 100);
			});
			$(document).ready(function(){
				var instance = M.Sidenav.getInstance(elem);
    		$('.sidenav').sidenav();
  		});
			M.AutoInit();
		</script>
</html>


et la page:

<!DOCTYPE html>
<html>
<?php include('menu.html');?>
	<body>
		<div class="row">
			<a href="#" data-target="slide-out" class="sidenav-trigger show-on-large white-text"><i class="material-icons large col s1" style="margin-top: 9px;">chevron_right</i></a>
		</div>
		<div class="background">
			<div class="slider fullscreen">
				<ul class="slides">
				  <li>
					<img class="background-image responsive-img" src="images/cover_1.jpg">
					<div class="caption center">
					  <h3>VDK Skimboard</h3>
					  <h5 class="light grey-text text-lighten-3">Retrouvez toute l'actualité skimboard en France</h5>
	      		<a href="news.php" class="waves-effect transparent grey-text darken-text-2"><i class="medium material-icons">arrow_forward</i></a>
					</div>
				  </li>
					<li>
					<img class="background-image responsive-img" src="images/skim1.jpg">
					<div class="caption center">
					  <h3>Vidéos</h3>
					  <h5 class="light grey-text text-lighten-3">Regardez nos vidéos mais aussi celles des meilleurs skimboarder mondiaux</h5>
	      		<a href="#" class="waves-effect transparent grey-text darken-text-2"><i class="medium material-icons">arrow_forward</i></a>
					</div>
				  </li>
					<li>
					<img class="background-image responsive-img" src="images/photo2.jpg">
					<div class="caption center col s6 offset-s6">
					  <h3>Trouver votre spot</h3>
					  <h5 class="light grey-text text-lighten-3">Naviguez sur notre carte de spot,</h5>
						<h5 class="light grey-text text-lighten-3">testés et approuvés !</h5>
	      		<a href="#" class="waves-effect transparent grey-text darken-text-2"><i class="medium material-icons">arrow_forward</i></a>
					</div>
				</li>
				</ul>
			</div>
		</div>
	</body>
</html>


Si quelqu'un à une solution car la je suis vraiment perdu je ne comprend pas Smiley decu
Merci

Dans JavaScript, DOM et API Web HTML5 · Problème d'affichage Sidenav materialize mobile

il y a 17 h
upload/1575909749-78055-zzpo.jpg Voici mon HTML :


<div class="parent3">
			       	<a href="#"><div class="bloc9">
					
					<img class="saut" src="saut.jpg" width="480" height="480" />
				
				    </div></a>
					<div class="parent3b">
					<div class="bloc10"> <img class="bois" src="book-01.jpg" width="120" height="157" /> Bois</div> 
					<div class="bloc11"><img class="sable" src="book-02.jpg" width="120" height="157" />  Sable</div>
					<div class="bloc12"><img class="rivière" src="book-03.jpg" width="120" height="157" /> Rivière</div>
					<div class="bloc13"><img class="pierre" src="book-04.jpg" width="120" height="157" /> Pierre </div>
					</div>
					</div>
					
				<div class="parent4">


Voici mon CSS :


.parent3 {
	width: 1024px;
	background-color:#FFFFFF;
	display: flex;
}

.bloc9 {
	width: 480px;
	background-color:#FFFFFF;
	display: float;
}

.saut {
	margin-top: 100px;
	margin-left: 20px;
	border: 1px black solid;
	
}



.parent3b {
	width: 500px;
	height:500px;
	background-color:#FFFFFF;
	
}

.bloc10 {
	margin-top: 100px;
	
    float: left;
	height: 230px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:right;
    
	
	height: 230px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc12 {
	float:left;
	
	height: 232px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
	
}

.bloc13 {
	float:right;
	
	
	height: 232px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}


Et en image jointe ce que ça donne. Je cherche à laisser un espace blanc entre l'image de gauche et les carrés, et à centrer les carrés dans leur div-mère du coup.
Modifié par Jeremyyy (09 Dec 2019 - 17:42)

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 18 h
Jeremyyy a écrit :
En effet, j'ai été idiot sur le coup lol, j'avais complètement zappé les bordures ! Bon du coup problème réglé grâce à toi, les deux du bats par contre, j'ai dû ajouter 2px en hauteurs (donc carrés quasi-parfaits) pour vraiment bien être sur la même ligne que l'image de gauche. Bon, pour 2px, ce n'est pas gênant, ça se voit pas =)

Tu aurais une piste pour m'aider à centrer ces 4 carrés, pour décoller les deux de gauche de l'image ?


Renvoi moi ton évolution de code alors ou une url.

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 18 h
En effet, j'ai été idiot sur le coup lol, j'avais complètement zappé les bordures ! Bon du coup problème réglé grâce à toi, les deux du bats par contre, j'ai dû ajouter 2px en hauteurs (donc carrés quasi-parfaits) pour vraiment bien être sur la même ligne que l'image de gauche. Bon, pour 2px, ce n'est pas gênant, ça se voit pas =)

Tu aurais une piste pour m'aider à centrer ces 4 carrés, pour décoller les deux de gauche de l'image ?

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 18 h
Un grand merci pour ton aide ! Mais j'ai toujours un petit soucis (décidément ces carrés verts m'auront gavés depuis le temps !), ils dépassent un peu vers le bas, je règle depuis tout à l'heure les hauteurs/largeurs (pour que ça reste des carrés) mais je n'arrive pas à bien faire coller en hauteur au même niveau avec l'image "saut". De plus, je n'arrive pas non plus à centrer les 4 carrés pour laisser un espace blanc entre l'image "saut" à gauche et les 4 carrées.

J'ai joué avec le &nbsp; (dans HTML) et margin-bottom dans le CSS mais ça n'a rien donné, sauf tout me décaler vers le haut.

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 19 h
Salut

Perso quand j'arrive dans une feuille de style, comparer à une classe/interface PHP, je fais CTRL + F.

Je ne me soucie pas de l'organisation d'une feuille de style.

Au pire je fais du SASS avec du MULTI fichier et c'est mon arborescence qui me guide au lieu du fichier css lui même. .

--/css
----/media
----/small
----/medium
----/tall
--style.css


etc.. un genre comme ça.
Modifié par JENCAL (09 Dec 2019 - 15:51)

Dans CSS et mise en forme, CSS3 · Appli ou site permettant de "ranger" une feuille de style

il y a 19 h
Bonjour à tous et à toutes,

Je viens de terminer l'intégration d'un site.
Comme j'ai fait ça un peu dans la précipitation, et même si j'ai fait attention en mettant des commentaires, c'est un peu le bazar dans ma feuille de style. Si un collègue y met son nez, j'ai peur qu'il n'y retrouve pas ses petits. Smiley lol
Du coup, je voulais savoir s'il existait une appli ou un site permettant de "ranger" un peu tout ce bazar ?
Autrement, si ça n'existe pas, comment est-ce que je peux organiser, au mieux, ma feuille de style ?
Par exemple, quelle est la meilleure organisation selon vous ?

Organisation 1
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
/*Champs recherche*/
Règle CSS recherche;
/*Menu principal*/
Règle CSS menu principal;
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
/*Bloc 2*/
Règle CSS bloc 2;
/*Bloc 3*/
Règle CSS bloc 3;
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
/*Bloc legal*/
Règle CSS Bloc legal;
/* Réseaux sociaux */
Règle Réseaux sociaux;

@media (max-width:xxxpx) { /* Pour device 1*/
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
/*Champs recherche*/
Règle CSS recherche;
/*Menu principal*/
Règle CSS menu principal
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
/*Bloc 2*/
Règle CSS bloc 2;
/*Bloc 3*/
Règle CSS bloc 3;
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
/*Bloc legal*/
Règle CSS Bloc legal;
/* Réseaux sociaux */
Règle Réseaux sociaux;
}
@media (max-width:xxxpx) { /* Pour device 2*/
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
/*Champs recherche*/
Règle CSS recherche;
/*Menu principal*/
Règle CSS menu principal;
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
/*Bloc 2*/
Règle CSS bloc 2;
/*Bloc 3*/
Règle CSS bloc 3;
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
/*Bloc legal*/
Règle CSS Bloc legal;
/* Réseaux sociaux */
Règle Réseaux sociaux;
}
....


Organisation 2
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS logo pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS logo pour device 2;
}
/*Champs recherche*/
Règle CSS recherche;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS recherche pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS recherche pour device 2;
}
/*Menu principal*/
Règle CSS menu principal;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS menu principal pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS menu principal pour device 2;
}
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS bloc 1 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS bloc 1 pour device 2;
}
/*Bloc 2*/
Règle CSS bloc 2;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS bloc 2 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS bloc 2 pour device 2;
}
/*Bloc 3*/
Règle CSS bloc 3;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS bloc 3 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS bloc 3 pour device 2;
}
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Logo footer pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Logo footer pour device 2;
}
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
}
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Bloc footer 1 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Bloc footer 1 pour device 2;
}
/*Bloc legal*/
Règle CSS Bloc legal;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Bloc legal pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Bloc legal pour device 2;
}
/* Réseaux sociaux */
Règle Réseaux sociaux;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Réseaux sociaux pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Réseaux sociaux pour device 2;
}


A moins que vous ayez une autre organisation à proposer.

De même, au sein des règles CSS quelle est la bonne organisation à avoir ?

Désolé si ma question appelle une réponse évidente aux yeux de certains, mais ayant appris sur le tas, je n'ai pas "appris" comment bien ranger ma chambre Smiley langue

Merci pour vos réponses et votre aide bienveillante Smiley cligne
Bonne journée
Modifié par spip93 (09 Dec 2019 - 15:49)

Dans CSS et mise en forme, CSS3 · Appli ou site permettant de "ranger" une feuille de style

il y a 19 h
Jeremyyy a écrit :
Bonjour à tous les deux !

Je vous remercie pour vos réponses !

@ gcyrillus : en fait, j'avais essayer plusieurs combinaisons pour le roll-over de l'image, mais ça foirait à chaque fois Smiley ohwell Pour éviter de tout mélanger, j'en reparlerai après le problème des cadres.

@ deux : j'ai lu les articles en lien, il y a déjà du mieux (voir image)mais étrangement, mon quatrième cadre disparaît, et l'autre reste décalé un peu en haut. Par contre l'autre a bien été placé sous le premier donc nickel !

(mon HTML reste identique, je ne met que le CSS)


.bloc10 {
	margin-top: 100px;
	position: relative;
    float: left;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:left;
    
	margin-top: 0px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc12 {
	clear:left;
	margin-top:100px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
	
}

.bloc13 {
	clear:right;
	margin-top: 100px;
	
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}



Tu fais 4 fois la même chose à deux ligne près...

Autant "homogénéisé" ton code ! 


.parent3b > div{
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.parent3b > div:nth-child(even){
  float: left;
}

.parent3b > div:nth-child(odd){
  float: right;
}

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 20 h
Jeremyyy a écrit :
Hhmm...mon quatrième carré va donc derrière mon cadre "Information", c'est donc pour ça. Merci pour la visualisation Jencal !

Bon, j'essaye de régler les "clear" et "float" pour bien positionner tout ça, mais galère galère...

EDIT : yes exactement ! Bien les mettre sur la même ligne que mon carré "saut" à gauche !


https://codepen.io/JUSEN/pen/KKwVXgW

Tu peux gérer le positionnement seul à partie de là Smiley smile

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 20 h
Hhmm...mon quatrième carré va donc derrière mon cadre "Information", c'est donc pour ça. Merci pour la visualisation Jencal !

Bon, j'essaye de régler les "clear" et "float" pour bien positionner tout ça, mais galère galère...

EDIT : yes exactement ! Bien les mettre sur la même ligne que mon carré "saut" à gauche !
Modifié par Jeremyyy (09 Dec 2019 - 15:30)

Dans CSS et mise en forme, CSS3 · Réunir 4 Div en un carré

il y a 20 h
Bonjour et désolée, je viens de me rendre compte qu'effectivement j'étais à 100% dans mon problème.
Merci allan00958. J'ai essayé aussi la façon:
Garniture = (prompt('Entrez votre garniture (7 ou 8 ou 4)'));

Ça régle le problème de calcule mais la suite de
console.log ('Plus ' + Garniture);
ça donne PLUS 8 au lieu de PLUS RIZ.

Ce que vous avez fait fonctionne, mais ne tient pas compte des console.log Smiley confus
Merci encore

Dans JavaScript, DOM et API Web HTML5 · Suite prompt ne fonctionne pas

25 Dernières réponses
Aller à