Problème de superposition et de rectangle-CSS
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
8 réponses
-
regarde ce que j'ai marqué précédemment...
-
Bonsoir ben la vous me posez une colle, moi en général je choisi la taille avec
width
mais elle se choisi pas automatiquement -
Il me manque juste le CSS pour que ce soit automatique la taille ^^
Je le connais ce code CSS mais, j'ai un trou ! :'( -
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#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
<!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 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"
-
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 ? -
Oui, tiens:
#article{
box-shadow: 0px 2px 5px black;
padding: 2px 5px 2px 5px;
background-color: blue;
opacity: 0.5;
margin: 100px;
} -
Re
As-tu le css de ta barre bleue ? Doit-elle être centrée ?
