5568 sujets

Sémantique web et HTML

Bonjour a tous !

il me manque plus qu'un dernier problème a régler pour commencer ma petite page web.
L'idée que j'ai c'est de faire un site avec une image au centre (toujours au centre) et des menu dans chaque coins (toujours dans les coins) pour qu'aucunes résolution soient lésées, j'ai fait mes images dans plusieurs %age de format, pour choisir celui qui s'adapte mieu a la "morphologie" du navigateur de celui qui le consulte (en plus de choisir la couleure de fond donc)

En revanche, j'ai un soucis, voila mon html et mon css :


html :

<body>
	<div id="contenu">
	</div>
	<div id="bordures">
		<a href="index.php"><img class="bord haut gauche" src="images/50/Aileretour50.png" alt="bord haut gauche" border="no"></a>
		<a href="/forum"><img class="bord haut droite" src="images/50/Aileforum50.png" alt="bord haut droite" border="no"></a>
		<a href="<?php echo $actuel; ?>?style=noir"><img class="bord bas gauche" src="images/50/Dezoom50.png" alt="bord bas gauche" border="no"></a>
		<a href="<?php echo $actuel; ?>?style=rouge"><img class="bord bas droite" src="images/50/Zoom50.png" alt="bord bas droite" border="no"></a>
	</div>
</body>


css :


#contenu
{
position: absolute;
margin:0px 0px;
padding:0px 0px;
height:100%;
width:100%;
background:url("images/Contenu25.png") no-repeat center center;
}
#bordures
{
position: absolute;
margin:0px 0px;
padding:0px 0px;
height:100%;
width:100%;
}
#bordures img.bord
{
position: absolute;
}
#bordures img.haut {top:0;}
#bordures img.bas {bottom:0;}
#bordures img.gauche {left:0;}
#bordures img.droite {right:0;}
}


En gros, avec ça, je devrait faire une partie css pour chaque contenus différents et une page pour chaque taille de contours différents...

Pour simplifié la chose, il faudrait que ma balise de contenu soit une images dans le html et non pas un background via css, et qu'a l'inverse, mes coin soient des images en backgrounds dans le css et non pas des images dans le html.


Je ne sais pas si j'ai bien expliqué, normalement ça devrait allez. Merci d'avance Smiley smile .
Hello Smiley smile

Je pense qu'une petite maquette graphique de ce que tu souhaites obtenir serait la bienvenue.

Là, j'avoue qu'en regardant ton code et cette #contenu vide, ces attributs "alt" avec du "bord haut gauche" et ce menu sans liste <ul>, ça me fait peur Smiley biggrin
Voila une maquette : www.fjuae.hbg.fr

Même si ce n'est pas le mieux tiptop adapté a tout le monde et autre, ce n'est pas grave, j'aime bien l'idée de faire quelque chose de ce genre la, par contre, au niveau de la facilitée à insérer une nouvelle page, il me faut résoudre mon problème.

C'est a dire passé les 4 images des coins dans le css, et au contraire gérer le contenu (qui sera toujours une image centré) via le html. : )
Modifié par Fjuae (05 Feb 2009 - 15:35)
Ok je vois Smiley smile

Dans ce cas je pense que le code suivant est plus approprié :

<body>

     <div id="menu">

          <ul>
               <li class="accueil"><a href="#">Page d'accueil</a></li>
               <li class="forum"><a href="#">Forum</a></li>
               <li class="style_suiv"><a href="#">Style suivant</a></li>
               <li class="style_prec"><a href="#">Style précédent</a></li>
          </ul>

     </div>

     <div id="centre">

          <!-- Contenu centre -->

     </div>

</body>
div#menu ul li.accueil {
width:...px;
height:...px;
background:transparent url(img/haut_gauche.png) no-repeat;
position:absolute;
top:0;
left:0; }

div#menu ul li.accueil a {
display:block;
width:100%;
height:100%;
text-indent:-9999px; }

/* Même principe pour les 3 autres angles. Possibilité d'optimiser en regroupant des éléments  aux styles identiques. */

div#centre { /*Technique des marges négatives pour centrer horizontalement / verticalement un bloc positionné absolument */
position:absolute;
left: 50%; 
top: 50%;
width: ...px;
height: ...px;
margin-top: ...px; /* moitié de la hauteur */
margin-left: ...px; /* moitié de la largeur */}


Ça devrait fonctionner pas trop mal...
Modifié par BeliG (05 Feb 2009 - 15:52)
Merci, je vais essayer de comprendre et d'appliquer votre code, et je garderais précieusement le tuto aussi. Je vous informerais ici si j'arrive a me dépatouiller avec tout ça! Encore merci.
Fjuae a écrit :
Merci, je vais essayer de comprendre [...] votre code
Si tu as une question n'hésite surtout pas !

Fjuae a écrit :
et je garderais précieusement le tuto aussi.
Pour la technique des marges négatives, c'est ici :
Centrer les éléments ou un site web en CSS (Rubrique "Les marges négatives")
Modifié par BeliG (05 Feb 2009 - 15:57)
www.fjuae.hbg.fr

Voila le résultat pour ce que j'ai commencer à faire, quand ont clique sur un lien, l'image est entourée et une barre de scroll apparait, peux-t-on enlever ça ?

Sinon c'est génial, merci Smiley langue


Edit: Merci pour le tuto Smiley jap
Modifié par Fjuae (05 Feb 2009 - 16:27)
Fjuae a écrit :
Voila le résultat pour ce que j'ai commencer à faire, quand ont clique sur un lien, l'image est entourée et une barre de scroll apparait, peux-t-on enlever ça ?
div#menu ul li a {
outline:none; }
La propriété "outline" permet de préciser des contours à un élément (un peu comme "border"). Par défaut sur Firefox, une bordure d'1px apparaît au clic sur un lien.

En donnant la valeur "none" à "outline" on annule l'effet.

Par contre ton site perd en accessibilité. "outline" avec sa valeur par défaut est bien pratique pour naviguer sur un site à l'aide de la touche "tabulation", mais bon...
En fait, c'est un site pour écrans tactiles que je tente principalement de faire Smiley smile
Sinon tout marche bien pour les bordures, par contre le centre je n'arrive pas tout a fait a le centrer, mais je ne me suis pas encore plongé dans le tuto.


Je vous tien au courant de ce fameux centre récalcitrant.
Par contre ton image n'est pas centrée, c'est voulu ? (tu as mis 25% à top et left de #contenu, au lieu de 50%).

Je te conseille également d'optimiser tout de suite ton code, ça t'évitera de perdre du temps lors des futures mises à jour.

- Supprimer "div#menu ul li.HG a", "div#menu ul li.HD a", "div#menu ul li.BG a" et "div#menu ul li.BD a" pour cibler plus globalement :
div#menu ul li a {
display:block;
width:100%;
height:100%;
text-indent:-9999px;


- Eventuellement regrouper "div#menu ul li.HG" avec "div#menu ul li.HD", et "div#menu ul li.BG" avec "div#menu ul li.BD" :
div#menu ul li.HG, div#menu ul li.HD {
width:78px;
height:180px;
position:absolute;
top:0; }

div#menu ul li.HG {
background:transparent url("http://www.fjuae.hbg.fr/images/50/Aileretour50.png") no-repeat;
left:0; }

div#menu ul li.HD {
background:transparent url("http://www.fjuae.hbg.fr/images/50/Aileforum50.png") no-repeat;
right:0; }

/* pareil pour les images du bas */

Modifié par BeliG (05 Feb 2009 - 16:47)
Voila j'ai tout regrouper comme tu me l'a conseillé.
Par contre pour l'image du centre, les bords persistent, donc j'ai peux-être mal placé le "outline:none;" pour cette div. Par contre, même avec 50% elle n'est pas alignée, tu a sûrement vu 25% car je trifouillait à taton pour l'aligner Smiley biggol
Modifié par Fjuae (05 Feb 2009 - 17:05)
Fjuae a écrit :
Par contre pour l'image du centre, les bords persistent, donc j'ai peux-être mal placé le "outline:none;" pour cette div.

Faudrait pas trop abuser là quand même Smiley langue
T'as réussi avec les 4 images des coins, essaye de te débrouiller un peu tout seul pour celle du centre...


C'est quoi cette image "Fondnoir.jpg" ? Smiley eek
Oui je n'ai pas encore pris le temps de lire le tuto, je vais trifouiller ça après avoir fait autre chose. Sinon pour le fond noir, bin c'est pour le fond noir ... même si on peux faire via les couleurs en hexa, je préfère faire comme ça, ça permet de mieux m'y retrouver Smiley smile