28172 sujets

CSS et mise en forme, CSS3

Faire disparaître un bouton

Bonsoir,

Non non, je ne me suis pas trompée d'endroit, ne me conseillez pas d'aller voir un dermato, je parle évidemment d'un bouton html ^^

J'ai une image sur la gauche de ma fenêtre et à droite une div contenant des instructions. Cependant, si on diminue la taille de l'écran, je veux que les instructions disparaissent pour laisser place à un bouton/lien. Donc dans le fichier html contient les deux :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Trions nos déchets</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="tri2.css" />
	</head>
	<body>
		<div id="fond">
			<div id="dechets" class="eau">
			</div>
		</div>
		<div id="instructions">
			Blablablabla
		</div>
		<button type="button" id="lien_instructions"><a href="instructions.html" target="_blank">Instructions</a></button>
			
		<script type="text/javascript" src="tri.js">
		</script>
	</body>
</html>


J'arrive à faire disparaître la div d'instructions mais pas le bouton Smiley ohwell Comment puis-je faire ?
Voici le code CSS
body
{
	margin:0;
	padding:0;
}

a 
{
	text-decoration: none;
	color: black; 
}

@media screen and (min-width: 700px)
{
	#fond
	{
		background: url(images/poubelles2.png) no-repeat center center;
		width:700px;
		height:640px;
		background-size : 100%;
		border:1px black solid;
		float:left;
	}

	#instructions
	{
		float: right;
		width:500px;
		height:640px;
		background-color : red;
	}
	
	#lien_instructions
	{
		width:0px;
		height:0px;
	}
}

@media screen and (max-width: 700px)
{
	#fond
	{
		background: url(images/poubelles2.png) no-repeat center center;
		width:200px;
		height:100px;
		background-size : 100%;
		border:1px black solid;
		float:left;
	}

	#instructions
	{
		width:0px;
		height:0px;
	}
}


Bon les valeurs ne sont pas encore au point. Dois-je vous donner l'image ? Je suis pas sûre qu'elle soit intéressante

Merci d'avance
Bonjour Ccile13,

En effet comme l'indique Zelalsan, il est plus facile de cacher des éléments avec un display: none;.

Je rajouterai juste un complément à votre approche CSS : vous pouvez simplifier sa maintenance.
D'après votre code, vous utilisez cette méthode de cloisonnement :
/* CSS pour toutes largeurs */

@media screen and (min-width: 700px) {
    /* CSS à partir de 700px */
}

@media screen and (max-width: 700px) {
    /* CSS jusqu'à 700px */
}

Il sera plus facile d'aborder l'adaptation en pensant surcharge CSS...
/* CSS pour toutes largeurs */

@media screen and (min-width: 700px) {
    /* Surcharge CSS à partir de 700px */
}
...ce qui vous évitera de fastidieuses redondances de code (comme avec #fond).

Ainsi à partir de votre code, vous auriez le même résultat avec la structuration ci-après :
body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black; 
}

#fond {
    background: url(images/poubelles2.png) no-repeat center center;
    width: 200px;
    height: 100px;
    background-size: 100%;
    border: 1px black solid;
    float: left;
}

#instructions {
    float: right;
    width: 500px;
    height: 640px;
    background-color: red;

    /*width: 0px;*/
    /*height: 0px;*/
    display: none; /* Disparition des instructions */
}

#lien_instructions {
    /* Sous-entendu déjà présent */
}

/* A partir de 700px... */
@media screen and (min-width: 700px) {
    #fond {
        width: 700px;
        height: 640px;
    }

    #instructions {
        display: block; /* Apparition des instructions */
    }

    #lien_instructions {
        /*width: 0px;*/
        /*height: 0px;*/
        display: none; /* Disparition du lien vers des instructions */
    }
}
Vous avez à votre disposition les exemples en lignes :
- Comportement avec votre code d'origine : http://codepen.io/guiwint/pen/gGCtL
- Comportement avec le code simplifié : http://codepen.io/guiwint/pen/Gskzg

Espérant que la solution vous convienne.
Bonnes recherches et bon code...
display : none ? Il existe ce machin ? Ouaaa ^^

Merci bien en tout cas et pour les explications sur les media queries ^^
Modifié par Ccile13 (07 Mar 2014 - 13:23)
Sujet clos
Aller à