Ordre d'apparence des blocs

**Luckyluk** · 19 Octobre 2004

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

cepiat · 19 Octobre 2004

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é 19 Octobre 2004 par cepiat

Sebastien · 19 Octobre 2004

L'ordre des blocs a quand même son importance quand l'affichage se fait dans le flux...

K-ZimiR · 19 Octobre 2004

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

cepiat · 19 Octobre 2004

Vous parler de flux RSS ? si oui un site entier n'est jamais passé en flux, uniquement les rubrique et une page de news

Modifié 19 Octobre 2004 par cepiat

Sebastien · 19 Octobre 2004

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

**Luckyluk** · 19 Octobre 2004

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

kiara · 19 Octobre 2004

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.

Sebastien · 19 Octobre 2004

Luckyluck a tu regardé du coté de Alsacréations?

http://www.alsacreations.com/articles/modeles/

**Luckyluk** · 19 Octobre 2004

Luckyluck a tu regardé du coté de Alsacréations?
http://www.alsacreations.com/articles/modeles/

j'avais pas vu cette page

je regarde ça demain...

merci

LaurentDenis · 19 Octobre 2004

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).

cepiat · 19 Octobre 2004

Nyop mici Sebastien pour l'explication désolé Luckyluk pour la fausse réponse ;(

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

K-ZimiR · 20 Octobre 2004

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

**Dan** · 20 Octobre 2004

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

**Luckyluk** · 20 Octobre 2004

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

**Luckyluk** · 20 Octobre 2004

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....

LaurentDenis · 20 Octobre 2004

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é 20 Octobre 2004 par LaurentDenis

Connexion

Ordre d'apparence des blocs

Sujets conseillés

Luckyluk

cepiat

Sebastien

K-ZimiR

cepiat

Sebastien

Luckyluk

kiara

Sebastien

Luckyluk

LaurentDenis

cepiat

K-ZimiR

Dan

Luckyluk

Luckyluk

LaurentDenis

Veuillez vous connecter pour commenter

Parcourir

Activité