18100 sujets

Questions générales et questions de débutants

[résolu]Liens dans une page W3C CSS

Bonjour a tous,

J'ai quelques petits soucis pour la construction d'un site.
Je n'arrive pas à créer un lien sur mes 2 menus qui puisse ouvrir une page html dans ma class "centre".

Déjà, est-ce possible ?
Ensuite, Comment ?
Sinon, Ah bon... Tant pis.

Je vous donne mon code HTML :


<html>
<head>
<title>Slyguys.org</title>
<link href="style_ind.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="head1">
  <img src="images/logo.gif" class="logo" alt="logo" width="123" height="92" />
</div>

<div class="head2">
  <div class="menuhaut">  
      <a href="...">Accueil</a>  
      <a href="...">Produits</a>  
      <a href="...">Catalogue</a>  
	<a href="...">Forum</a>  
	<a href="...">Contacts</a>
  </div>
</div>

<div class="gauche">
  <ul class="menu">
	<a href=menu.html target=>Menu 1</a>
	<li>Menu 2</li>
	<li>Menu 3</li>
      <li>Menu 4</li>
	<li>Menu 5</li>
  </ul>
</div>


<div class="centre">
  <h1>Mon site web</h1>
  <h2>Rubrique 1</h2>
  <p>blabla</p>
</div>

</body>

</html>



Et mon code CSS :


body {
margin: 0;										/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif;					/* on définit la police de base dans la page */
font-size: 12px;									/* on définit la taille de police de base dans la page */
}

.head1 {
background-image: url('images/head1.gif');
width: 770px;
height: 90px;
}

.head2 {
background-image: url('images/head2.gif');
width: 770px;
height: 36px;
} 

.logo {
float: right;									/* alignement du logo à droite */
margin-right: 10px;								/* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0;
}

.gauche {
position: absolute;
left:0;											/* on place le bloc gauche à gauche en position absolue */

background-image: url('images/menu.gif');
width: 181px;
height: 337px;
}

.centre {
margin-left: 181px;								/* on place le bloc centre par rapport à la largeur du bloc gauche */
width: 586px;
}

.menu {											/* on définit un conteneur pour le menu */
margin-top: 30px;
width: 160px;
border: 1px solid #060C6F;
background-color: #B7D3F0;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}

h1 {
font-size: 160%;
text-align: left;
}

h2	{
font-size: 120%;
text-align: right;
}

ul,li {
list-style-type: none;							/* pour ne pas avoir de puces */
margin: 0;
padding:0;
line-height: 150%;								/* interligne */
}

.menuhaut {
float: right;									/* on aligne le menu vertical à droite de son conteneur, head3 */
margin-right: 10px;
margin-top: 10px;
}

.menuhaut a {
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none;							/* pour éviter le soulignement au survol */
margin-left: 20px;								/* espacement entre chaque sous-menu */
}


Merci par avance de me donner quelques précisions, je vous en serai reconnaissant.

Max.
Modifié par Maxim (01 Dec 2005 - 09:37)
Bonjour,

alors à priori, si j'ai bien compris ton probléme, tu voudrais ouvrir par ton menu une page html comme avec des frames.

Ton probléme est je pense plus conceptuel que technique. Tu ne peux pas ouvrir un fichier html directement dans un div (la page doit être entiérement rechargée). Pour ton cas il faudrait effectivement que tu travaille avec des include PHP (dans ce cas, la page sera entiérement réchargée), dans lesquels tu mets tes menus (ce qui t'évite de devoir modifier toutes tes pages en cas de changement de menu).

Fait attention à ton code html, dans ton <ul class="menu"> ton lien doit être contenu dans un <li>, la balise <ul> n'accepte que des balises <li> en tant qu'enfants.

En espérant avoir compris ta question.

ouppss : oublié un petit quelque chose, à la vue de ton titre, on pourrais penser que tu souhaites faire du standard, n'oublie donc pas de spécifier une DTD pour ta page html, cela aura une implication sur l'interprétation de ton code html et css.

Pour en savoir plus sur les DTD : http://www.openweb.eu.org/articles/toi_comprendre_moi/ et http://www.openweb.eu.org/articles/differentes_dtd/
Modifié par mplessis (28 Nov 2005 - 17:28)
Ah c'est bien domage ca, que l'on ne puisse ouvrir un fichier html dans un div. Tant pis.

J'ai quand meme réussi avec les include, j'éspère avoir juste.

Domage que la page se recharge entièrement, n'y a-t-il pas une balise ou autre chose qui pourrait éviter de recharger l'image ? Genre un "Cette image n'a pas changé"...

J'ai corrigé le <li>, c'est parce que hier j'étais fatigué Smiley cligne

Pour le DTD, il me semble avoir trouvé, j'ai rajouté :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Transitional me parrait être adapté.

Merci en tous cas mplessis.
Bonjour!

Tu pourrais en profiter pour indiquer la langue par défaut de ton document (<html lang="fr" xml:lang="fr">), ainsi que l'encodage de caractères utilisés...

Sur les jeux de caractères
Bonjour à tous,


Je suis exactement dans la meme situation que [ Maxim ] (du moins je crois). Et donc, après avoir cherché un peu partout sur le net, "l'équivalent" d'une commande 'target'; afin de lire un contenu xHTML dans un conteneur CSS, je tombe sur vos lignes :
a écrit :
Ton probléme est je pense plus conceptuel que technique. Tu ne peux pas ouvrir un fichier html directement dans un div (la page doit être entiérement rechargée).


Alors euh... Smiley confus étant donné que je me lance sur les feuilles de style, j'ai une question :
Comment se composent vos pages exactement ? Smiley sweatdrop
Faut-il à chaque fois refaire pour chaque lien, les cadres, les entêtes, les menus, etc... ?
Salut slick et bienvenu,

Je pense que tu gagnerais à aller faire un tour du côté des Tutoriels pour comprendre un peu comment tout cela fonctionne.

Pour répondre plus préisément à ta question, va voir les gabarit, mis en ligne sur Alsacréations
cela écliarera certainement ta lanterne
Sujet clos
Aller à