28172 sujets

CSS et mise en forme, CSS3

Div sur tag A Name

Salutations,

sur mon site que je suis intégralement en train de refondre, j'ai un petit souci qui dépasse mes maigres connaissances CSS :

Le site fonctionne intégralement sur le concept de l'include pour me faciliter l'administration.
Depuis sa refonte, ou j'ai changé pas mal de choses, le DIV supérieur de ma page de contenu n'est pas vraiment physiquement compté, et si un tag A=name est dans cette page de contenu (ce qui est récurrent ici), il passe SOUS le DIV supérieur.

Je ne sais pas si je me fais bien comprendre, alors voici des bouts de codes :

(...)
	<!-- contentbar !-->
	<div id="contentbar">
  		<!-- top !-->
   		<?php include $top; ?>
    	<!-- content !-->
		<div id="content">
			<?php
			//test si page est vide vers affichage wda
			if($_GET['page'] == ""){ include"contenu/vide.php"; }

			//test page non vide et existante
			if (file_exists($pageinc)) { include"$pageinc"; }
			?>
		</div>
		<!-- Pied de page !-->
		<?php include $sign; ?>
	</div>
(...)


(...)
/*********** Section haute ***********/
/*********** Cellule centrale ***********/
#contentbar {
	float: right;
	width: 849px; /* Largeur du container global de droite moins border de menu */
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	text-align: left;
}

/*********** Top + pub ***********/
#top {
	position: fixed; /* Make it stick, even on scroll */
	width: 849px; /* Largeur du container global de droite moins border de menu */
	background-color: #FFFFFF;
	font-size: 10px;
	color: #FF8727;
	border-bottom: 1px solid #999; /* Bordure du bas de l'ensemble du top */
}

/*********** Bloc compris dans la cellule centrale ***********/
#content {
	width: 829px; /* Largeur du contenu de droite moins padding et border de menu */
	text-align: center;
	padding: 0px;
	margin: 85px 10px 0px 10px;
	margin-bottom: auto;
	font-family: Verdana, Arial!important;
	font-size: 12px;
	background-color: #FFFFFF;
}
(...)


Comment faire pour que #top par exemple soit un bloc qui devienne figé, et que #content commence APRES et pas en dessous ?

Merci de votre aide...
Merci de ce retour, néanmoins cela n'a aucune incidence, à part le fait de réduire en largeur mon espace de publication.
Modifié par Casio (18 Nov 2017 - 14:06)
Il y avait en effet bien un margin en trop (que j'ai remplacé par des padding), mais ça ne change rien.
Bonjour,
J'ai eu le même problème y longtemps que j'ai résolu en javascript
De mémoire cela donne un truc comme cela :
function goToAncre(oCible){ 
	var  oPos = oCible.offset();  
	$(window).scrollTop(oPos.top - 85 );
}
$(document).ready(function(){
	if(document.location.hash !=''){
/* Pour l'ancre présente dans l'url */
		var sHah = (document.location.hash).replace("#",''), oCible = $("a[name='"+sHah+"']");
		 if(oCible.length >  0){
			  goToAncre(oCible);
		 }
	}

   $('a[href^="#"]').on('click', function(oEvent){ 
		 var el = oEvent.currentTarget, sHah = (el.hash).replace("#",''), oCible = $("a[name='"+sHah+"']");
		 if(oCible.length >  0){
			  document.location.hash = '#'+sHah;
            goToAncre(oCible);
            return false;
        }  
		return true;
		 
	 }) ;
});
Sujet clos
Aller à