5568 sujets

Sémantique web et HTML

Placements

Bonjour à tous,
Cela fais quelques jours que je penche sur un problème sans résultat, lorsque je réduis ou augmente la fenêtre de mon navigateur, un des éléments de mon site bougent comme je le souhaite, mais pas l'autre (mon titre), je voudrais que celui-ci suive le mouvement de mon contenu et ne reste pas statique.
Par exemple si j'ai une marge de 100px entre mon contenu et mon titre, je voudrais que cette marge de 100px reste ainsi que j'augmente ou diminue la taille de la fenêtre.
Voici mon 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" />
<title>Jules Egger</title>
<link rel="stylesheet" media="screen" type="text/css" title="style css" href="style.css" />
</head>

<body>
	<div id="site">
	<div id="vignettes">
	   <a href="jules_egger_1.html"><img src="vignettes/vignette_44.jpg" width="160" height="103" style="padding-right:15px;"/></a>
       <img src="vignettes/vignette_28.jpg" width="160" height="103" style="padding-right:15px;"/>
       <img src="vignettes/vignette_18.jpg" width="160" height="103" style="padding-right:15px;"/>
       <img src="vignettes/vignette_31.jpg" width="160" height="103" style="padding-right:15px;"/>
       <br />
       <a href="series/jules_egger_2.html"><img src="vignettes/vignette_35.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
       <img src="vignettes/vignette_24.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_10.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_4.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	    
       	<br />
       <a href="series/jules_egger_3.html"><img src="vignettes/vignette_42.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
       <img src="vignettes/vignette_47.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_19.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_38.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	
       <br />
       <a href="series/jules_egger_4.html"><img src="vignettes/vignette_29.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
       <img src="vignettes/vignette_45.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_6.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_33.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	      
       <br />
       <a href="series/jules_egger_5.html"><img src="vignettes/vignette_3.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
       <img src="vignettes/vignette_40.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_8.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	 
       <img src="vignettes/vignette_15.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />	  
       
    </div><!--fin div vignettes -->
    <div id="titre">
    <h1> Jules Egger</h1>
    <h2> <a href="personnalites.html">Personnalit&eacute;s</a> - <a href="studio.html">Studio</a> - <a href="infos.html">Infos</a> - <a href="contact.html">Contact</a></h2>
    </div><!--fin div titre -->
	</div><!--fin div site -->
</body>
</html>




#vignettes {
	width:800px;
	margin-left:90px;
	margin-top:90px;
	margin-bottom:90px;
}

#titre {
	float:right;
}

h1 {
	width:800px;
	color:#000;
	font-size:30px;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:4px;
	position:absolute;
	left:900px;
	top:475px;
	
}

h2 {
	width:800px;
	color:#000;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	position:absolute;
	left:900px;
	top:525px;
} 

a {
	color:#000000; 
	text-decoration:none; 
}

a:hover { 
text-decoration:underline; 
}


Merci Smiley cligne
Bonjour,
Débutant tout comme toi, j'ai remarqué ta <div id="titre">après ton contenu,c'est pas très sémantique tout sa Smiley langue .(à moins que tu n'envisageais de le placer en bas)
Pour ton problème, essaie d'ajouté une <div> avec la taille que tu souhaite entre les <div> concerné.
(je ne sais pas si c'est très W3C).
ou tu peux toujours mettre ton <div id="titre"> dans une <div>en position:absolute puis la placer à 100px de ton contenu.(sa te permettras de gardé #titre en float).
birshmark a écrit :
Bonjour,
Débutant tout comme toi, j'ai remarqué ta &lt;div id=&quot;titre&quot;&gt;après ton contenu,c'est pas très sémantique tout sa Smiley langue .(à moins que tu n'envisageais de le placer en bas)
Pour ton problème, essaie d'ajouté une &lt;div&gt; avec la taille que tu souhaite entre les &lt;div&gt; concerné.
(je ne sais pas si c'est très W3C).
ou tu peux toujours mettre ton &lt;div id=&quot;titre&quot;&gt; dans une &lt;div&gt;en position:absolute puis la placer à 100px de ton contenu.(sa te permettras de gardé #titre en float).


Merci pour ta suggestion mais ça ne fonctionne pas Smiley confus
Sujet clos
Aller à