Problème de superposition et de rectangle-CSS
ThePico20
Messages postés
102
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
Je suis suis en train de faire un site-web avec ce que j'ai appris, mais je ne suis pas un professionnel, je suis qu'un pauvre débutant qui aimerais mieux connaitre et pour mieux connaitre je viens poser mon problème sur ce forum car c'est déjà le deuxième sujet que je poste et la communauté est super cool et me répond positivement et avec des réponses qui m'aide beaucoup.
Alors, mon problème comme il est dit dans le titre, j'ai un Header en position fix qui passe en dessous d'un texte alors, que j'aimerais que ce soit le texte qui passe en dessous, une petite image vous aideras à comprendre: http://image.noelshack.com/fichiers/2012/32/1344680194-help2.png
Voilà pour mon problème de superpositions.
PS: J'ai mit bleu pour que ce soit voyant, mais je vais changer ^^' Je sais que c'est horrible.
J'ai un autre petit problème, j'aimerais que le rectangle"bleu" qui est sur l'image se redimensionne en fonction du texte. Une autre petite image pour vois aider a comprendre: http://image.noelshack.com/fichiers/2012/32/1344680202-help.png
Mon code CSS:
Et voilà, merci à tous ceux qui ont lut et qui vont essayer de m'aider ! :D
Je suis suis en train de faire un site-web avec ce que j'ai appris, mais je ne suis pas un professionnel, je suis qu'un pauvre débutant qui aimerais mieux connaitre et pour mieux connaitre je viens poser mon problème sur ce forum car c'est déjà le deuxième sujet que je poste et la communauté est super cool et me répond positivement et avec des réponses qui m'aide beaucoup.
Alors, mon problème comme il est dit dans le titre, j'ai un Header en position fix qui passe en dessous d'un texte alors, que j'aimerais que ce soit le texte qui passe en dessous, une petite image vous aideras à comprendre: http://image.noelshack.com/fichiers/2012/32/1344680194-help2.png
Voilà pour mon problème de superpositions.
PS: J'ai mit bleu pour que ce soit voyant, mais je vais changer ^^' Je sais que c'est horrible.
J'ai un autre petit problème, j'aimerais que le rectangle"bleu" qui est sur l'image se redimensionne en fonction du texte. Une autre petite image pour vois aider a comprendre: http://image.noelshack.com/fichiers/2012/32/1344680202-help.png
Mon code CSS:
#article{
box-shadow: 0px 2px 5px black;
padding: 2px 5px 2px 5px;
background-color: blue;
opacity: 0.5;
margin: 100px;
}
Et voilà, merci à tous ceux qui ont lut et qui vont essayer de m'aider ! :D
A voir également:
- Problème de superposition et de rectangle-CSS
- Smiley rectangle barré signification - Forum LibreOffice / OpenOffice
- Signification rectangle avec croix dedans ✓ - Forum Samsung
- Dans la présentation à télécharger, sans modifier leur position dans la feuille : passez le rectangle noir en arrière-plan. passez le rectangle bleu au premier plan. passez le rectangle hachuré au premier plan. quel mot apparaît ? - Forum Graphisme
- Open office image arriere plan ✓ - Forum LibreOffice / OpenOffice
- Aide pour contours rectangle - Forum Photoshop
8 réponses
Oui, tiens:
#article{
box-shadow: 0px 2px 5px black;
padding: 2px 5px 2px 5px;
background-color: blue;
opacity: 0.5;
margin: 100px;
}
#article{
box-shadow: 0px 2px 5px black;
padding: 2px 5px 2px 5px;
background-color: blue;
opacity: 0.5;
margin: 100px;
}
La barre doit être mal positionnée par rapport aux autres divs.
Tu peux montrer ce que tu as dans body ? Juste la barre du haut et la barre bleue ?
Tu peux montrer ce que tu as dans body ? Juste la barre du haut et la barre bleue ?
Il vaudrait mieux que tu partes sur une structure comme celle-ci :
<html>
<head>
<style>
body, html { width: 100%; height: 100%; margin: 0; padding: 0;}
#main { width: 90%; max-width: 1024px; min-width: 800px; height: 100%; margin: 100px auto 0; background-color: #ddd;}
#entete { position: fixed; width: 100%; height: 70px; background-color: grey; top: 0; left: 0; margin: 0 auto; z-index: 10;}
#article { box-shadow: 0px 2px 5px black; padding: 2px 5px 2px 5px; background-color: blue; opacity: 0.5;}
</style>
</head>
<body>
<div id="main">
<div id="entete"></div>
<div id="article">Salut, ca va ? Quoi de neuf ??</div>
<!-- Autres divs ou aticles -->
</div>
</body>
</html>
Ta barre bleue doit être pour l'instant déclarée dans ta div "entete".
Il vaut mieux les dissocier.
Dans mon exemple, la barre bleue fait 90% de la largeur de l'écran, donc si tu veux que la barre soit à la taille du texte, il faut que tu rajoutes "position: absolute;" à "#article"
<html>
<head>
<style>
body, html { width: 100%; height: 100%; margin: 0; padding: 0;}
#main { width: 90%; max-width: 1024px; min-width: 800px; height: 100%; margin: 100px auto 0; background-color: #ddd;}
#entete { position: fixed; width: 100%; height: 70px; background-color: grey; top: 0; left: 0; margin: 0 auto; z-index: 10;}
#article { box-shadow: 0px 2px 5px black; padding: 2px 5px 2px 5px; background-color: blue; opacity: 0.5;}
</style>
</head>
<body>
<div id="main">
<div id="entete"></div>
<div id="article">Salut, ca va ? Quoi de neuf ??</div>
<!-- Autres divs ou aticles -->
</div>
</body>
</html>
Ta barre bleue doit être pour l'instant déclarée dans ta div "entete".
Il vaut mieux les dissocier.
Dans mon exemple, la barre bleue fait 90% de la largeur de l'écran, donc si tu veux que la barre soit à la taille du texte, il faut que tu rajoutes "position: absolute;" à "#article"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour je pense avoir compris puisque votre header (bar grise) est en position fixed vous voulez que la barre bleu passe en dessous lorsque vous scroller dans la page?
si c est le cas il faut faire
j'espère que c est bien ça
si c est le cas il faut faire
#barre_grise
{
z-index: 2;
}
#barre_bleu
{
z-index: 1;
}
j'espère que c est bien ça
http://imageshack.com/f/nlcapturedu20120811145025p
http://imageshack.com/f/07capturedu20120811145042p
voici le code
http://imageshack.com/f/07capturedu20120811145042p
voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-image: url("images11.jpg");
height: 2000px;
}
#barre_grise {
border: 2px black solid;
position: fixed;
background-color: grey;
z-index: 2;
height: 100px;
width: 100%;
font-size: 2.5em;
}
#barre_bleu {
background-color: blue;
z-index: 1;
font-size: 2.5em;
position: relative;
top: 200px;
}
</style>
<title>TEST</title>
</head>
<body>
<div id="barre_grise">
<p>
ceci est la barre grise en position fixe
</p>
</div>
<br />
<br /<br /> />
<div id="barre_bleu">
<p>
la barre bleu passe en dessous grace a z-index
</p>
</div>
</body>
</html>
Il me manque juste le CSS pour que ce soit automatique la taille ^^
Je le connais ce code CSS mais, j'ai un trou ! :'(
Je le connais ce code CSS mais, j'ai un trou ! :'(