[Résolu] Modifier le contenu d'une div par un lien

Question

Hermine

18 Jan 2006 à 23:33

Après avoir fait plusieurs sites avec des frames et iframes (non ne me lynchez pas tout de suite !) j'ai décidé de me mettre au <div>
Voici mon test

<div id="main" align="center" class="main"> </div>
<div id="haut" class="main">
	<img src="images/ha_haut.gif">
</div>

<div id="menubg" class="main"> </div>
<div id="menu" class="main">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: x-small;font-family: Verdana;text-align: justify;font-weight: bold;">
			<tr>
			<td width="40%">&nbsp;
				
			</td>
			<td width="12%" align="center">
				<a href="ha_main.html" target="_top">Accueil</a>
			</td>

			<td width="13%" align="center">
				<a href="ha_presentation.html" target="_self">Présentation</a>
			</td>
			<td width="12%" align="center">
				<a href="ha_lastadd.php" target="main">Galeries</a>
			</td>
			<td width="11%" align="center">
				<a href="ha_contact.php" target="main">Contact</a>

			</td>
			<td width="12%" align="center">
				<a href="ha_livre.php" target="main">Livre d'or</a>
			</td>
			</tr>
</div>
<div id="main2" class="main">
<P>Blablabla</P>
</div>

J'aimerai que les liens prennent place dans la partie main2, mais je ne sais vraiment pas comment faire ...

Second problème : le contenu de cette division ne s'affiche pas sous IE ...
Contenu de ma feuille de style :

BODY
	{
	background-color: #000000;
	color=#000000;
	font-size: x-small;
	font-family: Verdana;
	text-align: justify;
	}  

A:link {text-decoration: none; color: #202040}
A:visited {text-decoration: none; color: #101035}
A:active {text-decoration: none; color: #808080}
A:hover {text-decoration: underline; color: #505080}

.miniature
	{
	width: 50%;
	}
	
.main
	{
	color: #000000;
	font-size: x-small;
	font-family: Verdana;
	text-align: justify;
	font-weight: bold;
	}

#main 
	{
	background-image:url(images/ha_fond14.jpg);
	background-color: #C0C0C0;
	background-repeat: no-repeat;
	width:700;
	height:400;
	position: absolute;
	top: 5;
	left: 40;
	z-index:0;
	border-style: solid;
	border-color: #C0C0C0;
	border-width: 1;
	}

#haut
	{
	background-color: transparent;
	position: absolute;
	width:699;
	height:45;
	top:5;
	left:41;
	z-index: 1;
	}

#menubg 
	{
	filter:alpha(opacity=70);
	background-color:transparent;
	position: absolute;
	top:50;
	left:319;
	width:421;
	height:17;
	z-index:1;
	}
	
#menu 
	{
	background-color:transparent;
	position: absolute;
	top:50;
	left:41;
	width:699;
	height:20;
	z-index:2;
	}
	
#main2 
	{
	background-color: transparent;
	text-indent: 25;
	position: absolute;
	top:70;
	left:41;
	width:610;
	height:335;
	z-index:2;
	}

Voilà, j'espère ne pas avoir poster n'importe où ... Merci d'avance pour l'attention que vous porterez à mon post Smiley smile

Modifié par Hermine (25 Feb 2006 - 11:49)

Hermann

19 Jan 2006 à 01:04

Salut madmoiselle,
C'est toi sur la photo? Smiley cligne

Pour ton site je te conseillerais de commencer par aller voir
http://css.alsacreations.com/Bases-et-indispensables/
et eviter les tableaux quand il ne s'agit pas de données tabulaires, d'un cadrillage ect

Hermine

19 Jan 2006 à 10:46

J'ai regardé le lien et je n'ai pas trouvé comment appeler un fichier à l'intérieur d'une div ...
Pour le tableau je peux le remplacer d'une manière assez simple, j'y penserai, merci Smiley smile

Edit> Oui c'est ma tronche sur la photo Smiley cligne

Modifié par Hermine (19 Jan 2006 - 10:47)

Hermann

19 Jan 2006 à 13:17

Salut la miss Smiley cligne

J'ai trouvé le féminin de mon pseudo lol
Pour appeler un fichier il y a une solution qui equivaut un peu aux iframe mais valide en XHTML strict puisque les iframe sont invalides dans sa version strict.

la voila:

http://forum.alsacreations.com/faq/#item38
Modifié par Hermann (19 Jan 2006 - 13:19)

Raphael

connecté

Administrateur

19 Jan 2006 à 13:22

Hermann a écrit :
Salut la miss
J'ai trouvé le féminin de mon pseudo lol

Dites-le, si vous voulez qu'on vous laisse entre vous hein Smiley cligne

Bientôt "Alsarencontres.com" Smiley langue

Hermine

19 Jan 2006 à 13:29

Ah non ça suffit les rencontres via forum, j'suis déjà inscrite sur un forum qui est devenue une véritable agence matrimoniale à force Smiley ravi

Je vais tester, merci Smiley smile

(J'avais pas vu ce cadre, honte à moi Smiley confused

)

Hermann

19 Jan 2006 à 13:39

Lol Raphael
On peut rigoler un peu, ça fait pas de mal. Smiley biggrin

De tte façon vu ton age ça peut pas coller. Smiley cligne

Modifié par Hermann (19 Jan 2006 - 13:40)

Hermine

19 Jan 2006 à 15:45

Et je ne suis intéressée par personne Smiley smile

Alors ça avance petit à petit

J'édite les sources sur le premier post pour que ce soit plus clair
J'essaie d'avoir le meilleur compromis IE / FF (pour les tailles de texte c'est assez énervant ...)
Problème général :
- Comment fait s'afficher les liens dans l'objet ? Javascript ou solution HTML ?

Problème avec IE :
- le fond de l'objet inséré n'est pas transparent

Page principale


<HTML>
<HEAD>
<TITLE>Hermine's Art - Little Thing</TITLE>
<link href="s_index.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>

<div id="main" align="center" class="main"> </div>
<div id="haut" class="main">
	<img src="images/ha_haut.gif">
</div>
<div id="menubg" class="main"> </div>

<div id="menu" class="main">
				<a href="ha_main.html" target="_top">Accueil</a>       
				<a href="ha_presentation.html" target="page">Présentation</a>       
				<a href="ha_lastadd.php" target="main">Galeries</a>      
				<a href="ha_contact.php" target="_self">Contact</a>      
				<a href="ha_livre.php" target="main">Livre d'or</a>     
</div>

<div id="main2bg" class="main"> </div>

<div id="main2" class="main">
	<object id="page" data="ha_accueil.html" type="text/html" allowtransparency="true">
</div>

</BODY>
</HTML>

CSS page principale


BODY
	{
	background-color: #000000;
	color=#000000;
	font-size: xx-small;
	font-family: Verdana;
	text-align: justify;
	}  

A:link {text-decoration: none; color: #202040}
A:visited {text-decoration: none; color: #101035}
A:active {text-decoration: none; color: #808080}
A:hover {text-decoration: underline; color: #505080}

.miniature
	{
	width: 50%;
	}
	
.main
	{
	color: #000000;
	font-size: xx-small;
	font-family: Verdana;
	text-align: justify;
	font-weight: bold;
	}

#main 
	{
	background-image:url(images/ha_fond14.jpg);
	background-color: #C0C0C0;
	background-repeat: no-repeat;
	width:700;
	height:400;
	position: absolute;
	top: 10;
	left: 40;
	z-index:0;
	border-style: solid;
	border-color: #C0C0C0;
	border-width: 1;
	}

#haut
	{
	background-color: transparent;
	position: absolute;
	width:699;
	height:45;
	top:10;
	left:41;
	z-index: 2;
	}

#menubg 
	{
	opacity:0.4;
	filter:alpha(opacity=40);
	background-color: #E0E0FF;
	position: absolute;
	top:52;
	left:319;
	width:421;
	height:22;
	z-index:1;
	}
	
#menu 
	{
	background-color: transparent;
	position: absolute;
	top:55;
	left:41;
	width:699;
	height:17;
	z-index:2;
	color: #000000;
	font-size: xx-small;
	font-family: Verdana;
	font-weight: bold;
	text-align:right;
	}
	
#main2bg 
	{
	opacity:0.4;
	filter:alpha(opacity=40);
	background-color: #E0E0FF;
	position: absolute;
	top:85;
	left:50;
	width:675;
	height:310;
	z-index:1;
	}
	
#main2 
	{
	background-color: transparent;
	text-indent: 25;
	position: absolute;
	top:90;
	left:55;
	width:665;
	height:300;
	z-index:2;
	}
object 
	{
	position: absolute;
	top:0;
	left:0;
	width:100%; 
	height:100%;
	overflow: hidden;
	font-size: xx-small;
	}

Objet appelé


<HTML>
<HEAD>
<TITLE>Hermine's Art - Little Thing</TITLE>
<link href="s_index2.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>

<P>Blablabla</P>	 
<P align="right"><a href="ha_contact.php" target="_self">Hermine</a></P>

</BODY>
</HTML>

CSS objet


HTML
	{
	border:0;
	}
	
BODY{
	background-color:transparent;
	color=#000000;
	font-weight: bold;
	font-size: xx-small;
	font-family: Verdana;
	text-align: justify;
	text-indent: 25;
	overflow:hidden;
}  

A:link {text-decoration: none; color: #202040}
A:visited {text-decoration: none; color: #101035}
A:active {text-decoration: none; color: #808080}
A:hover {text-decoration: underline; color: #505080}

Modifié par Hermine (19 Jan 2006 - 15:46)

Hermine

25 Feb 2006 à 11:52

Finalement j'ai pris une solution PHP, pour la rapidité de mise en oeuvre Smiley smile

Juste un souci, centrer le site ! (Si vous avez des suggestions au vu de la CSS dans le post ci-dessus je suis preneuse !)

Résultat actuel : http://lakeoftears.free.fr/HA/ha_main.php

kutone

25 Feb 2006 à 17:05

salut'

essaye d'utiliser la propriété margin dans ton css

margin-left: auto;

	margin-right: auto;

ca donnerai ca dans ton cas

#main 
	{
	background-image:url(images/ha_fond14.jpg);
	background-color: #C0C0C0;
	background-repeat: no-repeat;

        margin-left: auto;
        margin-right: auto;

	width:700;
	height:400;
	position: absolute;
	top: 10;
	left: 40;
	z-index:0;
	border-style: solid;
	border-color: #C0C0C0;
	border-width: 1;
	}

A essayer, je suis pas l'as des l'as.
à plus'

Et peut-être enlever align="center" dans ton html pour le main.
Modifié par kutone (25 Feb 2006 - 17:14)

Hermine

25 Feb 2006 à 18:33

Merci

Je vais essayer
Les margin ce sont les marges internes autrement dit la distance par rapport à la marge la plus proche?

kutone

26 Feb 2006 à 09:11

Hum je ne sais pas exactement, je voudrais pas dire de bétises.
En l'occurence les marges gauche et droite de ton conteneur principal se situent de manière égale par rapport à la fenêtre du navigateur.

Il me semble.

Hermann

26 Feb 2006 à 13:12

Bonjour,
Non les margin sont les marges extèrieur au bord d'un éléments contrairement au padding. Exposé visuellement

mail1789

26 Feb 2006 à 23:47

exposé visuellement mais mieux Smiley langue

: http://www.redmelon.net/tstme/box_model/

Hermine

1 Mar 2006 à 13:32

Hum je suis un peu perdue
Je vais aller faire un tour pour voir si je trouve d'autres topics équivalents

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Modifier le contenu d'une div par un lien