Webmaster Hub > Ordre d'apparence des blocs

Version complète: sur le forum Webmaster Hub : Ordre d'apparence des blocs

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Luckyluk

mardi 19 octobre 2004 à 08:17

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

CODE

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

CODE

<!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> &raquo; <a href="">bla bla</a> &raquo; 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

mardi 19 octobre 2004 à 09:14

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

Sebastien

mardi 19 octobre 2004 à 09:23

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

K-ZimiR

mardi 19 octobre 2004 à 10:01

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

mardi 19 octobre 2004 à 10:31

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

Sebastien

mardi 19 octobre 2004 à 10:45

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

mardi 19 octobre 2004 à 15:35

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

mardi 19 octobre 2004 à 15:37

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

mardi 19 octobre 2004 à 15:45

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

Luckyluk

mardi 19 octobre 2004 à 15:52

CITATION(Sebastien @ 19 Oct 2004, 16:45)

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

mardi 19 octobre 2004 à 16:40

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

mardi 19 octobre 2004 à 21:19

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

mercredi 20 octobre 2004 à 07:46

CITATION(cepiat @ 19 Oct 2004, 21:19)

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

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

mercredi 20 octobre 2004 à 08:50

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

mercredi 20 octobre 2004 à 13:15

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

CODE

#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

mercredi 20 octobre 2004 à 13:51

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

mercredi 20 octobre 2004 à 14:07

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

)

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.