5568 sujets

Sémantique web et HTML

Ancre / Placement Fixed

Bonjour,

J'essaye tant bien que mal de faire une page avec un header fixe, et le reste de la page qui défile comme si j'avais deux frames, mais le tout avec des CSS.

J'ai en gros un header collé en haut en fixed (ou en absolute sous IE) et le reste de la page qui est un div normal, avec une marge du haut de la hauteur de mon header.

Mon probleme est que lorsque j'ajoute des ancres, le navigateur (ie 6 ou firefox) me recalle le point d'ancrage tout en haut de la page. Il se retrouve donc derrière mon header.

J'ai essaye de mettre une marge sur mon body, mais ca ne semble pas changer grand chose. Est ce que qqn aurait une idée sur la méthode a utiliser, et si les frames sont inévitables ?

merci d'avance
Modifié par snorky (20 Mar 2005 - 22:57)
J'ai pas de page en ligne, alors je vais faire un gros copier coller, j'espère que ca va pas trop poluer le forum. Je m'excuse d'avance. Pour le code, c'est surement pas tres beau voir horrible, vu que je suis pas hyper a l'aise en html, et que j'attaque les css depuis pas tres longtemps. Je prends tous les commentaires ou critiques qu'ils soient positifs ou non, du moment que ca me permet de moins coder n'importe comment.


<body id="base">
	<div id="decotrans"></div>
<div id="directory">
	<div class="dir"><a href="http://snorkybox/forum/forum.php?thread=1">[Premier thread]</a>&gt;<a href="http://snorkybox/forum/index.php?thread=1">[Premier thread]</a></div>
</div>
<div id="menu">
	<span id="logo"></span>
	<span id="lienmenu">
		<ul>
			<li>[<a href="http://snorkybox/forum/forum.php?page=home">forum</a>]</li>
			<li>:: [<a href="http://snorkybox/forum/forum.php?page=search">recherche</a>]</li>
			<li>:: [<a href="http://snorkybox/forum/forum.php?page=profil">profil</a>]</li>
		</ul>
		<ul>
			<li>[<a href="http://snorkybox/forum/forum.php?page=signup">inscription</a>]</li>
			<li>:: [<a href="http://snorkybox/forum/forum.php?page=members">membres</a>]</li>
			<li>:: [<a href="http://snorkybox/forum/forum.php?page=login">identification</a>]</li>
		</ul>
	</span>
</div>
	<div id="main">
		<div id="central">
			<div class="topic">
				<a href="#m_2">message 2</a>
				<table><tbody><tr>
						<td class="avatar" rowspan="2"><img src="forum_data/snorky.jpg"><br><a href="#">Snorky</a></td>
						<td class="date"><a id="m_1" href="#"></a>Le 15/05/2002 à 05h02</td>
					</tr>
					<tr><td class="message">
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
						</td></tr>
				</tbody></table>
				<table><tbody><tr>
						<td class="avatar" rowspan="2"><img src="forum_data/snorky.jpg"><br><a href="#">Snorky</a></td>
						<td class="date"><a id="m_2" href="#"></a>Le 15/05/2002 à 05h02</td>
					</tr>
					<tr><td class="message">
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
						</td></tr>
				</tbody></table>
				...
				<table><tbody><tr>
						<td class="avatar" rowspan="2"><img src="forum_data/snorky.jpg"><br><a href="#">Snorky</a></td>
						<td class="date"><a id="m_10" href="#"></a>Le 15/05/2002 à 05h02</td>
					</tr>
					<tr><td class="message">
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
							bla<br>
						</td></tr>
				</tbody></table>
			</div>
		</div>
	</div>
</body></html>

Voila pour la page html, et viennent maintenant les deux fichiers css utiles :

le forum.css pour la présentation des blocs principaux

* {	margin:0;
	padding:0;}
html {	overflow-x:auto; 
	overflow-y:hidden;}
#base {	overflow-y:auto;
	font-size: 12px;
	font-family: Verdana; 
	color : #000000; 
	height: 100%;
	background: #FFFFFF;}
#decotrans {	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 763px;
	height: 120px;
	border: 0;
	background: #FFFFFF;
	_position: absolute;
	_left: 100px;}
#menu {	position: fixed;
	z-index: 2;
	top: 10px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	height: 81px;
	background: #F0F0F0;
	border-width: 1px;
	border-color: #7F7F7F;
	border-style: solid;
	font-size: 12px;
	_position: absolute;
	_left: 100px;}
#directory {	position: fixed;
	z-index: 2;
	top: 100px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	height: 20px;
	line-height: 20px;
	background: #34699E;
	border-width: 1px;
	border-color: #7F7F7F;
	border-style: solid;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 3px;
	_position: absolute;
	_left: 100px;}
#directory a{	text-decoration: none;
	margin: 5px;
	color: #FFFFFF;}
#directory a:hover {	text-decoration: underline overline;
	color: #FFFFFF;}
#main {	margin-top: 120px;
	margin-left: auto;
	margin-right: auto;
	width: 762px;
	background: #FFFFFF;
	_padding-top: 120px;
	_margin-left: 100px;
	_margin-right: 0;}
#central {	background: #FFFFFF;}
#logo {	position: absolute;
	_position: absolute;
	top: 5px;
	left: 15px;
	height: 71px;
	width: 381px;
	background: #F0F0F0 url("/images/truc.gif") center no-repeat;}
#lienmenu {	display: inline-table;
	position: absolute;
	_position: absolute;
	top: 10px;
	left: 411px;
	width: 319px;
	height: 61px;
	line-height: 30px;
	margin: auto;
	text-align: center;
	background: #F0F0F0;}
#lienmenu li {	display: inline;}
#lienmenu a:active, a:visited, a:link{	text-decoration: none;
	color: #000000;}
#lienmenu a:hover{	text-decoration: underline overline;
	color: #000000;}

et le topic.css, pour le coeur de la page:

.topic {background: #F0F0F0;
	padding: 5px 10px;
	_padding: 10px;
	color: #000000;
	font-size: 11px;}
.topic table {	height: 20px;
	width: 740px;
	border-spacing: 0px;
	border-collapse: collapse;
	margin: 5px 0px;
	_margin: 10px 0px;}
.topic tr, td {	border-width: 1px;
	border-color: #FFFFFF;
	border-style: solid;}
.topic .date {	background: #D0D0D0;
	height: 20px;
	line-height: 20px;
	color: #FFFFFF;
	padding: 0px 5px;}
.topic .message {	padding: 5px;
	width: 660px;}
.topic a:active,.topic a:visited,.topic a:link {	color: #34699E;
	font-weight: bold;}
.topic a:hover {	color: #7F7F7F;
	font-weight: bold;}
.topic .avatar {	text-align: center;
	vertical-align: top;
	padding: 10px;}

voila c fini Smiley smile

Enfin une petite image, du haut du forum en question apres l'appel d'un lien sur une ancre. Seul le bas du paragraphe concerné est visible, le reste est masqué par le menu.

upload/1257-image.JPG

merci d'avance

PS : Igor, désolé de ne pas avoir lu la FAQ avant Smiley confused , j'espère que c mieux maintenant
PS2 : j'ai zappé pas mal de sauts de ligne et de tab dans les css et le html, pour prendre moins de place, mais c'est plus tres lisible, donc si vous préférez avec les sauts de ligne, dites le moi, je modifie.
Modifié par snorky (21 Mar 2005 - 21:50)
Bonjour et bienvenue Snorky,

Merci de lire les Règles du forum et d'éditer ton dernier post pour présenter les extraits de ton code. Encadres le de [ code][ /code] (sans les espaces), cela plus lisible pour tous le monde et ton problème trouveras plus facilement sa réponse. Smiley cligne
Salut Igor

Je dois t'avouer que tu me déçois beaucoup beaucoup. Quand j'ai poste mon premier message ici, tu m'a renvoyer vers les regles du forum. Effectivement, je ne les respectais pas. Je me suis mis au boulot, j'ai potassé comme un fou plein de tutoriaux, j'ai mis mon code a jour. Tout ca pour etre aux normes. Et maintenant que mon code respecte les regles, tu n'y jette meme pas un coup d'oeil. Trop triste.

Tu me diras, c'est normal, tu n'as sans doute pas le temps, vu le nombre de personne a qui il faut que tu rappelles les relges du forum...
Modérateur
Hmmm YogaMan, personne n'a de responsabilité à répondre à ta question. Igor est un modérateur, et un modérateur est là pour faire respecter les règles et modérer les propos. Pour ce qui est de répondre aux questions, ils peuvent le faire ou ne pas le faire tout comme n'importe quel autre membre.

Tu dois respecter les règles, et quelqu'un doit te le rappeler. Ceci n'engage en rien qu'on doit t'accorder une réponse après.

YogaMan a écrit :
Tu me diras, c'est normal, tu n'as sans doute pas le temps, vu le nombre de personne a qui il faut que tu rappelles les relges du forum...


Ouais, évidemment qu'on aurait plus de temps pour aider si tout le monde respectait les règles dès le départ. Smiley cligne

Je dois t'avouer que ton attitude me déçois un peu. Smiley cligne D'ailleurs, merci de ne pas venir polluer le sujet d'un autre membre. Si tu as quelque chose à reprocher à quelqu'un, fais-le dans ton propre sujet ou en privé. Si tu veux me répondre, fais-le en privé aussi. Je ne veux pas voir ce sujet dévier.
Modifié par Merkel (27 Apr 2005 - 21:05)
Snorky, je comprend pas bien ce qui se passe (je dois être à moitié polio, mais bon...).

Il se passe quoi ? Avec les ancres, ton contenu passe sous le header ???

Sinon, à YogaMan, wé euhh, c'est pas un distributeur automatique, c'est un forum, et Igor c'est pas un distributeur automatique de réponse, c'est un modo (c'est un distributeur automatique de réglement Smiley murf )

Je sais pas si tu te rend compte du temps qui est consacré par Igor pour faire regner une bonne qualité sur le forum et pour aider les membres lorsqu'il peut...
Désolé.

J'ai eu une mauvaise journée et chuis tombé sur 3 ou 4 reponses d'Igor qui allaient dans le meme sens. Je sais, c'est pas une excuse. J'ai écrit trop vite. Toutes mes excuses a Igor.

PS : Comme j'ai polluer en publique, je m'excuse en publique, mais promi la suite sera privée.
Bonjour à tous.

Je suis nouveau sur ce forum. Je suis également nouveau vis à vis du Xhtml et des CSS mais je me documente et je réalise quelques pages avec ces "nouvelles" technos pour perdre mes mauvaises habitudes de faire les mises en page avec des tableaux.

En faisant une recherche sur le forum je suis tombé sur ce sujet qui parle exactement d'un problème que je rencontre. J'ai mis en place un header dont la position est "fixed". Le contenu de ma page défile en dessous ... mais dès que je clique sur un lien qui pointe vers une ancre dans la page, le contenu correspondant à l'ancre se trouve positionné sous le header (car le navigateur cale le contenu correspondant à l'ancre au sommet de la page). J'ai essayé de placer une marge au dessus des blocks qui contiennent les ancres mais rien n'y fait. Est-ce que quelqu'un aurait une idée ?

Merci par avance Smiley cligne
C'est bon, j'ai trouvé la solution à mon problème, grâce aux judicieux tutoriels, en particulier celui ci : Inclure un fichier dans un autre grâce à CSS.
Je simule la présence d'une iFrame en CSS ce qui règle mon problème. Par contre, ma mise en page ne marche pas du tout sur IE. Mais ça, c'est un autre problème ...
Modifié par cowboydan (11 Oct 2005 - 10:24)
Administrateur
Bonjour et bienvenue sur ce Forum,

"si le problème persiste, ne pas hésiter à consulter" Smiley lol enfin poster un nouveau sujet si le problème IE s'éternise (après avoir regardé la FAQ + tutos bien entendu)

Felipe
Sujet clos
Aller à