Bonjour,
Je suis très nulle en css.
Je suis en train de développer un service de lecture en ligne de manga
J'ai 2 bandeaux sur mon site, sur l'un d'eux, je tente de mettre plusieurs éléments dessus,
2 menus déroulants (un pour les pages, un pour les chapitres et bientot un pour les projets), et les 3 pages précédentes et suivantes de la pages courrantes, cependant, ça ne fait pas du tout ce que je veux, ça se met les uns après les autres, et non pas à la suite, j'ai tenté avec float, des div, sans.... je ne sais pas comment faire pour mettre en page.
Alors, le code css:
le html, je ne mets pas la récup des variables et tout :
Voilà, si vous avez besoin de renseignements supplémentaires, n'hésitez pas, je ne cherche pas à ce qu'on me donne la réponse, mais à ce qu'on m'aide à comprendre la logique, et savoir comment faire. Donc, même juste des aides ou des indices, il ne faut pas hésiter.
Merci beaucoup ( j'adore ce site)
Le lien vers mon site, pour que vous voyez ce que ça donne : Mon site
Je suis très nulle en css.
Je suis en train de développer un service de lecture en ligne de manga
J'ai 2 bandeaux sur mon site, sur l'un d'eux, je tente de mettre plusieurs éléments dessus,
2 menus déroulants (un pour les pages, un pour les chapitres et bientot un pour les projets), et les 3 pages précédentes et suivantes de la pages courrantes, cependant, ça ne fait pas du tout ce que je veux, ça se met les uns après les autres, et non pas à la suite, j'ai tenté avec float, des div, sans.... je ne sais pas comment faire pour mettre en page.
Alors, le code css:
img {
width: auto;
height: 1000;
border-width:1px;
border-style:solid;
border-color:black;
}
body {
background-image:url(background_noise.png);
}
body {
margin:0;
padding:0;
}
#bandeau a{
color:#CBCECE;
}
#bandeau {
color:white;
background:#494949;
height:30px;
margin-left:30px;
margin-right:30px;
margin-bottom:10px;
border-radius:0 0 5px 5px; /** Pour mettre les bords en arrondis **/
}
#bandeau2{
background:#494949;
height:40px;
line-height:30px;
margin-left:100px;
margin-right:100px;
margin-bottom:10px;
border-radius:5px 5px 5px 5px; /** Pour mettre les bords en arrondis **/
}
#numPage{
margin-right:200px;
}
#menu {
margin-right:50px;
margin-left:50px;
}
.cadre{
color:white;
vertical-align:middle;
border:1px solid white;
border-radius:5px 5px 5px 5px; /** Pour mettre les bords en arrondis **/
padding:0.3em;
}
.cadrePageCourante{
color: #CBCECE;
vertical-align:middle;
border:1px solid white;
border-radius:5px 5px 5px 5px; /** Pour mettre les bords en arrondis **/
padding:0.3em;
}
a:link{
text-decoration:none;
}
#couleurGrise{
color: #C1C3C3;
}
#content {
}
#image{
}
#pub{
}
#menu{
font-size:10px;
}
/* partie positionnement et déco */
#menu a {
display:block;
color: #fff;
text-decoration:none;
}
#menu > li,
#menu > li li {
position: relative;
display:inline-block;
width: 50px;
padding: 0px 0px;
background-color: #777;
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
border-right: 1px solid #777;
border-radius: 8px 0 0 8px;
}
#menu > li:last-child {
border-right: 0;
border-left: 1px solid #aaa;
border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
background-color: #999;
background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
position: absolute;
top: 0.3em; left: 0;
max-height:0em;
margin: 0; padding: 0;
background-color: #ddd;
background-image: linear-gradient(#fff,#ddd);
overflow: hidden;
transition: 0.3s max-height 0.3s;
border-radius: 0 0 8px 8px;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
/* à adapter, le minimum est le meilleur mais voyez large ???? */
max-height: 20000em;
}
le html, je ne mets pas la récup des variables et tout :
<div id="bandeau">
Lecture en Ligne de la <a href="lune-rouge.fr" class="couleurGrise">Team Lune Rouge</a> Manga <?php echo $_SESSION['nomProjet']; ?>
</div>
<div id="bandeau2">
<div id="numChapitre">
<?php
//On récupère le numéro de chapitre actuel.
$idProjet =$_SESSION['idProjet'];
//Puis on affiche les autres
//on récupère dans la bdd
$reponse = $bdd->query('select * from chapitre WHERE idProjet="'.$idProjet.'" AND finit="1" ORDER BY numChapitre ');
echo '
<ul id="menu">
<li>
'.$_SESSION['numChapitre'].'
<ul>';
while($donnees = $reponse->fetch()){
echo '<li>';
if($donnees['type']==0){//c'est un chapitre
echo '<a href=
"lel.php?onCommence=oui&idProjet='.$idProjet.'&idChapitre='.$donnees['numChapitre'].'&extra=0&chemin=../../../../lel/chapitre/'.$idProjet.'/'.$idProjet.'-'.$donnees['numChapitre'].'/"
>Chap '.$donnees['numChapitre'].'
</a>';
}else{
echo '<a href=
"lel.php?onCommence=oui&idProjet='.$idProjet.'&idChapitre='.$donnees['numChapitre'].'&extra=1&chemin=../../../../lel/extra/'.$idProjet.'/'.$idProjet.'-'.$donnees['numChapitre'].'/"
>Chap '.$donnees['numChapitre'].'
</a>';
}
echo '</li>';
}
echo '
</ul>
</li>
</ul>';
?>
</div>
<div id="numPage">
<?php
if(isset($_GET['image']))
{
$img=$_GET['image'];
}else{
$img=0;
}
$image = $img;
$image = $image-3;
if($image>-1){
echo ' <a href="lel.php?image=',$image,'&onCommence=non" class="cadre">'.$image.'</a> ';
}
$image = $image+1;
if($image>-1){
echo ' <a href="lel.php?image=',$image,'&onCommence=non" class="cadre">'.$image.'</a> ';
}
$image = $image+1;
if($image>-1){
echo ' <a href="lel.php?image=',$image,'&onCommence=non" class="cadre">'.$image.'</a> ';
}
$image = $image+1;
echo ' <span class="cadrePageCourante" >'.$image.'</span> ';
$image = $image+1;
if($image<$nb){
echo ' <a href="lel.php?image=',$image,'&onCommence=non" class="cadre">'.$image.'</a> ';
}
$image = $image+1;
if($image<$nb){
echo ' <a href="lel.php?image=',$image,'&onCommence=non" class="cadre">'.$image.'</a> ';
}
$image = $image+1;
if($image<$nb){
echo ' <a href="lel.php?image=',$image,'&onCommence=non" class="cadre">'.$image.'</a> ';
}
echo '
</div>'; //fin numPage
echo '
<ul id="menu">
<li>
'.$img.'
<ul>';
for($i=0;$i<$nb;$i++){
echo '<li><a href="lel.php?image=',$i,'&onCommence=non">Page '.$i.'</a></li>';
}
echo '
</ul>
</li>
</ul>';
echo '
</div>'; //fin bandeau2
echo '
<div id="content">
<div id="image">';
//S'il y a un numéro d'image, je le récupère, sinon, je mets à 0
//J'affiche les images
echo '<center>';
if($img+1==$nb){
echo '<img src="'.$_SESSION['diaporama'][$img].'" alt="" />';
}else{
echo '<a href="lel.php?image=',$img+1,'&onCommence=non"><img src="'.$_SESSION['diaporama'][$img].'" alt="" /></a>';
}
echo '</center>';
echo '
</div>
</div>Voilà, si vous avez besoin de renseignements supplémentaires, n'hésitez pas, je ne cherche pas à ce qu'on me donne la réponse, mais à ce qu'on m'aide à comprendre la logique, et savoir comment faire. Donc, même juste des aides ou des indices, il ne faut pas hésiter.
Merci beaucoup ( j'adore ce site)
Le lien vers mon site, pour que vous voyez ce que ça donne : Mon site
