Aller au contenu

Ordre d'apparence des blocs

Luckyluk

Par Luckyluk
dans (X)HTML et CSS

 Partager

Sujets conseillés

Luckyluk

Luckyluk

Posté
Posté

bonjour à tous,

j'ai un squelette html + CSS trouvé sur le net qui me vas bien dans l'apparence du site

mais j'aimerai que DANS LE CODE SOURCE, le bloc du menu gauche apparaisse apres le contenu

pour mettre en avant le contenu par rapport au menu vis a vis des moteurs de recherches.

C'est possible dans mon cas?

http://www.dynamisme.net/squelette/SQUEL2.html

code du CSS



body {
	background: #fff url(LOGO150.gif) no-repeat 10px 0;
	}

#header {
	width: 95%;
	height: 150px;
	margin-left: 10px;
	text-align: center;
	}

#bread {
	width: 90%;
	margin-left: 10px;
	border-style: solid;
	border-color: #fc0;
	border-width: 1px 1.5em;
	padding: 3px 1%;
	font-family: Verdana;
	color: #006;
	}

	#bread a {
  color: #006;
  text-decoration: none;
  }
  
	#bread a:hover {
  text-decoration: underline;
  }

#menu {
	width: 150px;
	margin-left: 10px;
	margin-top: 10px;
	float: left;
	}

	#menu a {
  display: block;
  color: #fc0;
  text-decoration: none;
  padding: 4px 5px 2px;
  margin: 0 2px 0 0;
  }

	#menu a:hover {
  border-right: 5px solid #008;
  color: #008;
    padding-right: 3px;
    margin-right: 0;
    }

	#menu p.here {
  border-right: 5px solid #006;
  color: #006;
  padding: 4px 5px 2px;
  margin: 0;
  }



#content {
	margin: 10px 25% 10px 157px;
	padding: 0 0 0 18px;
	border-left: 1px solid #fc0;
	text-align: left;
	}
	#content .cont {
   float: left;
          text-align: left;
          margin:10px 25% 10px 7px;
	}

#footer {
	clear: both;
	width: 95%;
	margin: 10px;
	text-align: center;
	font-family: Verdana;
	font-size: 11px;
	padding: 3px;
	}

	#footer .date {
  float: left;
  text-align: left;
  }

	#footer .contact {
  float: right;
  text-align: right;
  }

#submenu {
	position: absolute;
	top: 175px;
	left: 83%;
	width: 140px;
	z-index: 3;
	border-left: 1px dotted #fc0;
	border-bottom: 1px dotted #fc0;	
	padding: 3px;
	margin-right: -1px;

	}

	#submenu a {
  display: block;
  color: #fc0;
  text-decoration: none;
  border-bottom: 1px solid #fff;
  }

	#submenu a:hover {
  border-bottom: 1px dotted #008;
  color: #008;
  }

	#submenu p.here {
  border-bottom: 1px dotted #006;
  color: #006;
  margin: 0;
  padding: 0;
  }

html, body {
	margin: 0;
	padding: 0;
	}

p, a, ul, ol, li {
	font-family: Verdana;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia;
	color: #009;
	}

code html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<title>titre </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" href="squel1.css" type="text/css">



</head>
<body>

<div id="header" title="title du bloc header">
<h1>TITRE DE LA PAGE</h1><br clear="all">
</div>

<div id="bread">
<a href="">bla bla</a> » <a href="">bla bla</a> » blabla
</div>


<div id="menu">
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<p class="here">titre menu</p>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<p class="here">titre menu</p>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>
<a href="#">menu gauche</a>

</div>


<div id="content">

<h1>bla bla h1</h1>

<h2>blabla h2</h2>

<p>
<a href="">The
blabla dans p</a>
</p>


<h3>
blabla h3
</h3>

<ul>
<li>blabla blabla <a href="">blabla blabla</a></li>

<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla blabla blabla blabla blabla blabla</a></li>
</ul>
<h3>bla bla h3</h3>

<ul>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
</ul>

<h2>blabla h2</h2>

<h3>blabla h3</h3>


<ul>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
<li>blabla blabla <a href="">blabla blabla</a></li>
</ul>
<span class="cont">blabla class aaaaaaa ddddddd  contact@</span>

</div>
<div id="submenu">
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<p class="here">sous-lien</p>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<p class="here">sous-lien</p>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<p class="here">sous-lien</p>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
<a href="#">menu droit</a>
</div>

<div id="footer">
<span class="date">
Last Modified: 18, February, 2002
</span><span class="contact">blabla class contact@</span>
</div>
<br>
</body>
</html>

merci d'avance

Lien vers le commentaire
Partager sur d’autres sites
cepiat

cepiat

Posté
Posté (modifié)

J'ai un peu de mal a saisir ce que tu veux, mais si j'ai bien compris tu veux uniquement que dans le code source ton menu sois après le contenu.

Rien de plus simple , il te suffit de déplacer ce qui ce trouve entre <div id="menu"> et </div> et de le mettre après <div id="content">.

Dans l'affichage Css l'emplacement des block n'est pas important, ceci est gérer avec le css donc si tu veux uniquement modifer l'ordre d'apparence dans le code source aucun souci tu peux déplacer les DIV à ton gréer cela ne changera rien à l'affichage final ;)

Modifié par cepiat
Lien vers le commentaire
Partager sur d’autres sites
K-ZimiR

K-ZimiR

Posté
Posté

Tout à fait d'accord avec Sebastien.

De plus j'ai parcouru le code rapidement et j'ai noté la présence de "absolute" et de "float", ces deux instructions excluent certains styles du flux et donc l'ordre des blocs prend son importance si on veut éviter les surprises à l'affichage :)

Lien vers le commentaire
Partager sur d’autres sites
Sebastien

Sebastien

Posté
Posté

Non non de flux CSS : par defaut les éléments s'affichent dans l'ordre du code, l'un en dessous de l'autre pour les éléments de type bloc et de gauche à droite pour les elements in-line :)

Lien vers le commentaire
Partager sur d’autres sites
Luckyluk

Luckyluk

Posté
  • Auteur
Posté

merci de vos reponse,

evidemment, si je pose cette question , c'est que j'ai essayé d'afficher la page en mettant le bloc"menu" apres le "content"..

mais l'affichage ne fonctionne pas evidemment...

je l'ai fait avec le bloc de droite car il est defini en "absolute" et cela fonctionne bien mais le gauche a une histoire de float ou autre alignement "par rapport a un autre bloc...."

quelqu'un connait un squelette qui aurait un

1 header

1contenu + 1menu gauche + 1 menu droit (dans cet ordre)

1 footer qui s'adapte en fonction de la taille de chaque partie centrale...

....et avec ça vous pouvez m'apporter le digestif ;)

Lien vers le commentaire
Partager sur d’autres sites
kiara

kiara

Posté
Posté

En donnant une position absolue a tous les blocs, tu dois pouvoir ensuite les affichés comme bon te semble, puisqu'ils seront positionnés "virtuellement".

tu pourras donc avoir dans le source la declaration du contenu avant le menu, et a l'affichage, le menu sera positionné a sa place, le contenu aussi.

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Le "squelette" que tu reproduis montre bien la limite des mises en pages dans lesquelles les colonnes sont de largeurs mixtes (largeur fixe en pixel et largeur relative): l'ordre HTML des colonnes est figé gauche > centre > droite.

Dans une mise en page de ce type, mais avec 3 colonnes de largeurs relatives (type 25% 50% 25%), il suffit d'utiliser la position relative sur les 2 premières colonnes pour :

- avoir un ordre HTML Centre > gauche > droite

- échanger les emplacements à l'écran des colonnes centre et gauche (la colonne centre est déplacé vers la droite de la largeur de la colonne gauche, et la colonne gauche est déplacé vers la gauche de la largeur de la colonne centre).

Lien vers le commentaire
Partager sur d’autres sites
K-ZimiR

K-ZimiR

Posté
Posté
Faut vraiment que je lâche mes tableaux et que j'y passe au css...

<{POST_SNAPBACK}>

Je te le conseille aussi ;)

J'ai mis du temps avant d'y passer aussi, par méconnaissance et par manque de temps.

Mais avec le recul, j'ai vraiment bien fait de m'y mettre car le couple xhtml/css est vraiment avantageux lors des développements de sites.

Tu trouveras sur le hub tout ce qu'il te faut pour y arriver.

Un bon départ serait les tutoriaux d'Alsacreations et d'Openweb.

Bon courrage ;)

Lien vers le commentaire
Partager sur d’autres sites
Dan

Dan

Posté
Posté

Une petite info en passant...

Vous avez la possibilité d'utiliser [ codebox ] au lieu de [ code ] (sans les espaces) pour avoir un affichage dans une boîte déroulante. C'est plus facile pour visualiser l'ensemble du post ;)

Dan

Lien vers le commentaire
Partager sur d’autres sites
Luckyluk

Luckyluk

Posté
  • Auteur
Posté

j'ai fait un test,

en remplaçant le "float" par une position "absolute" pour le menu (apres tout le menu se trouvera toujours au même endroit !

ça a l'air de marcher

#menu {
	width: 150px;
	margin-left: 10px;
	margin-top: 10px;	
	position: absolute;
	top: 175px;
	left: 1%;
	}

j'ai pu mettre mon div"menu" apres le contenu

Lien vers le commentaire
Partager sur d’autres sites
Luckyluk

Luckyluk

Posté
  • Auteur
Posté

par contre mon footer s'ajuste sur le contenu

alors si le "contenu" est plus petit qu'un des menu....mon footer se retrouve au milie du menu.....

bon ben j'ai plus qu'a aller fouiner....

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (modifié)

Pour gérer le pied de page, tu dois passer obligatoirement par des colonnes en float, puisque la position absolue rend les colonnes totalement sans effet sur l'emplacement vertical du pied de page.

Pour conserver un ordre centre > gauche > droite de tes colonnes dans le HTML, voici une solution rapide : http://blog-and-blues.org/test/3_colonnes_float/ qui utilise la position relative en plus du float, comme je le suggérais plus haut.

(Pas le temps d'écrire les explications... Elles viendront demain matin ;) )

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...