Calque fixé pour de bon. Utopie ?

Bibilefou · Message par **Bibilefou** » 19 sept. 2003, 15:52

Bon, je m'incline. ça va me faire les pieds.

SIBELIUS => merci pour ces exemples convaincants. Bon boulot.

Bibilefou · Message par **Bibilefou** » 21 sept. 2003, 17:59

Salut !

Bon, je suis en train de refaire ça. Je passe en XHTML strict. C'est vrai que ça le fait le strict.

Dans ma nouvelle version , j'essaie de respecter, d'optimiser l'ordre des éléments dans mon code source.

Ce qui relève de la forme, j'aimerais le placer en bout de source. Le problème, c'est le chevauchement.

J'ai un div qui contient une image en arrière plan. Cet élément n'étant pas utile au contenu du site, je l'ai placé en bout de source. Le problème est que le postitionnement passe en absolu et il en résulte un chevauchement des calques.

J'ai essayé pas mal de trucs sans grand succès.

Vous auriez pas des pistes ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8) Gecko/20051111 Firefox/1.5

SIBELIUS · Message par **SIBELIUS** » 21 sept. 2003, 21:47

"Impossible d'ouvrir la page"

Peux-tu décrire précisément la structure de ta page ?

Bibilefou · Message par **Bibilefou** » 21 sept. 2003, 23:33

Oupss ... j'avais éteinds le serveur ...

Donc, la structure :
div qui contient tout le contenu (730px de large centré sur l'écran, en relatif).
A l'intérieur de celui ci on retrouve :
le titre : h1 passé en pseudo calque avec les styles
div (x2 à la suite): contenu. un calque placé en relatif largeur de 490px et hauteur de 270px).
div : celui qui me chagrine. il est utilisé pour afficher une image de W: 730px/H: 120px. Il est placé en bas et devrait être afficher entre le titre (h1) et le premier div du contenu.

Enfin bref, je sais pas si vous captez la structure mais là, je souffre ...
J'ai relancé mon serveur, un exemple vaut mieux qu'un long discours ...

Bibilefou · Message par **Bibilefou** » 21 sept. 2003, 23:57

on a la droit de bidouiller avec un calque vide ?

J'ai ajouté un calque vide en lui spécifiant ses dimensions. Il est placé entre h1 et le contenu. Du coup, ça fait un espace vide où je peux faire remonter n'importe quel calque placé en bout de source, sans en chavaucher un autre.

SIBELIUS · Message par **SIBELIUS** » 22 sept. 2003, 07:59

Je n'ai pas vu le code, ni compris ta structure (désolé

)
Mais tu peux commencer par virer toutes tes positions relatives ou absolues pour tes div.

J'ai ajouté un calque vide en lui spécifiant ses dimensions. Il est placé entre h1 et le contenu. Du coup, ça fait un espace vide où je peux faire remonter n'importe quel calque placé en bout de source, sans en chavaucher un autre.

Les div se placent les uns avec autres grâce aux margins, pas avec des bidouilles comme ça

Bibilefou · Message par **Bibilefou** » 22 sept. 2003, 13:30

Mon code source :

Code : Tout sélectionner

<body>
<div id="conteneur"> 
  <h1 id="lbdsm" title="machin"><span class="none">machin</span></h1>
  <div id="edito"> 
    <h2>&Eacute;dito</h2>
    <div class="texte"> 
      <p>[...]</p>
    </div>
  </div>
  <div id="tribune"> 
    <h2>Tribune libre</h2>
    <div class="articles"> 
      <p>- <span class="tribTitre">Nam nunc. Sed condimentum</span><br />
        Le 20-09-03 &agrave; 10h32 par 
        <?php antispam('adresse@email','Mr. Truc') ?>
        .<br />
        Sed mollis lacinia quam. Fusce lectus velit, suscipit blandit, pretium 
        ut, tempus et, wisi. Ut ipsum. Donec eget mi ut augue ullamcorper volutpat. 
        Praesent diam odio, pellentesque et, hendrerit sit amet, molestie nec, 
        dui. Vivamus at odio imperdiet orci euismod consectetuer. Maecenas tincidunt 
        fermentum metus. Proin sagittis lobortis mi.</p>
      [...] </div>
    <div class="ajout"> 
      <form action="<?= $_SELF ?>" method="post" id="tribuneAddForm" title="Utilisez ce formulaire pour ajouter vos news.">
        [...] 
      </form>
    </div>
  </div>
  <div class="droite"> 
    <div class="quick"> 
      <h2>Nouveaut&eacute;s</h2>
      <p><img src="image.gif" alt="texte secondaire" /><strong>titre album<br />
        <acronym title="nom groupe - label en entier">Groupe - Label..</acronym></strong><br />
        CD 9 titres<br />
        12,00 &euro;</p>
      [...] </div>
    <div class="quick"> 
      <h2>Rechercher</h2>
      <form action="recherche.php" method="get">
        <input name="q" id="q" type="text" value="" size="30" />
      </form>
    </div>
    <div class="quick"> 
      <h2>Newsletter</h2>
      <form action="newsletter.php" method="post">
        <input name="courriel" id="courriel" type="text" value=" votre@email" size="23" onFocus="this.value='';" />
        <input type="image" src="ok.gif" alt="OK" align="middle" />
      </form>
    </div>
  </div>
  <div id="bandeau"><span class="none">Consultez notre <a href="/gallerie/">gallerie 
    d'images.</a></span></div>
</div>
</body>

Bibilefou · Message par **Bibilefou** » 22 sept. 2003, 13:32

Mes styles :

Code : Tout sélectionner

input, textarea, select, option {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #555;
	margin: 1px;
	border: 1px solid #EEE;
}
body {
	background-attachment: fixed;
	background-image: url(fd_brain.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
/* conteneur / centré */
#conteneur {
	float: left;
	width: 730px;
	vertical-align:top;
}
/*
 *	Styles appliqués à la rubriqu Edito
 *		- conteneur / titre / contenu
 */
#edito {
	float:left;
	width:65%;
	height:270px;
	overflow: hidden;
	background-image: url('images/table.gif');
	background-repeat: no-repeat;
	background-position: left top;
	vertical-align: top;
	margin-bottom: 3%;
}
#edito h2 {
	width:47%;
	height: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 3px;
	text-align: right;
	border:0px; margin:0px;padding:0px;
}
#edito .texte {
	height:250px;
	margin-right:3%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	overflow: auto;
	text-align: justify;
	padding-right: 10px;
	padding-left: 15px;
	color: #333;
	text-indent: 15px;
	padding-top:0px;
	overflow: auto;
}
#edito .texte:hover { color: #000}
/*
 *	Styles appliqués à la rubriqu Tribune libre
 *		- conteneur / articles (contenu) / ajout (formulaire)
 *						- forme articles
 */
#tribune {
	float:left;
	width:65%;
	height:290px;
	overflow: hidden;
	background-image: url('images/table.gif');
	background-repeat: no-repeat;
	background-position: left top;
	vertical-align: top;
	margin-bottom: 3%;
}
#tribune h2 {
	width:47%;
	height: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 3px;
	text-align: right;
	border:0px; margin:0px;padding:0px;
}
#tribune .articles {
	float:left;
	height:250px;
	width:55%;
	overflow: auto;
	padding-left:12px;
}
#tribune .ajout {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #555;
	margin-left:57%;
	padding-left: 1em;
	padding-top:0px;border:0px;
	vertical-align:top;
}
.articles p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	text-align: justify;
	padding-right: 5px;
}
.articles p:hover {
	color: #000;
	background-color: #f9f9f9;
}
.tribTitre { font-weight: bold; }
.tribAuteur { text-decoration: none; color: #000; }
.tribAuteur:hover { text-decoration: underline; }
/* logo / titre */
#lbdsm {
	width: 100%;
	height: 80px;
	background-image: url(lbdsm.gif);
	background-repeat: no-repeat;
	background-position: center top;
	margin:0px;
}
/* bandeau d'illustration photo */
#bandeau {
/*	position:absolute;*/
	width:730px;
	height:150px;
	top: 80px;
	background-image: url('bandeau/1.jpg');
	background-repeat: no-repeat;
	background-position: center top;
}
/*
 *	Contenu tablé à droite
 *		- conteneur / groupe / titre / contenu
 */
.droite {
	margin-left:530px;
	padding:0px;border:0px;
	top:80px;
}
.quick {
	margin-bottom:25px;
	border: 1px solid #eee;
	padding: 0px;
	vertical-align:top;
}
.quick h2 {
	position:static;
	width:50%;
	height:13px;
	background-color: #eee;
	layer-background-color: #eee;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#555;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	text-align: center;
	border:0px;padding:0px;margin:0px;
}
.quick p {
	overflow: visible;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#555;
	text-decoration: none;
	margin-top:10px;
	margin-bottom:30px;
}
.quick img {
	text-align:left;
	margin-left: 5px;
	margin-right: 5px;
	height: 65px;
	width: 65px;
}
.quick #q {
	width:96%;
}
.quick form {
	margin:0px;padding:0px;border:0px;
	vertical-align:top;
	text-align:center;
}
/* Divers */
.none { display: none; }
acronym {
	border-bottom: 1px dotted #eee;
	cursor: help;
}

Bibilefou · Message par **Bibilefou** » 22 sept. 2003, 13:36

les problèmes qui me restent à résoudre :
sous IE :
le calque 'droite'' doit remonter au niveau du haut du calque edito.
les titres des rubriques contenus dans les calque 'quick' doivent être collés à leurs bordures et placés à droites.

sous firebird / IE :
le calque 'bandeau' doit venir se placer sous le calque 'lbdsm'.

Là, c juste callé avec les marges. Et ça coince ...

Geckozone

Calque fixé pour de bon. Utopie ?

Chevauchement...

Qui est en ligne ?