28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'alignement

Bonjour, bonjour,

Alors je précise tout d'abord que j'ai écumé pas mal le forum et le web pour résoudre mon problème. J'ai un peu de mal avec l'attribu display des balises div. Aussi je me retrouve avec un alignement bisard sur le thème que je développe actuellement pour dotclear.

Je veux que mon menu de navigation en orange soit collé au pied de page de couleur foncé.

www.korx-crew.com/test/dotclear/

Je souhaiterai également savoir si quelqu'un a une idée pour faire en sorte que mon pied de page reste toujours en bas. j'ai testé avec des alignement absolu comme dans les tuto mais ça m'a causé des bugs d'affichages ailleur (sans doute faut-il modifier d'autre parties de mon thème pour l'appliquer correctement.

Merci de votre future réponse.

voici mon template :

<?php
# ***** BEGIN LICENSE BLOCK *****
# This file is part of DotClear.
# Copyright (c) 2004 Olivier Meunier and contributors. All rights
# reserved.
#
# DotClear is free software; you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation; either version 2 of the License, or
# (at your option) any later version.
# 
# DotClear is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
# 
# You should have received a copy of the GNU General Public License
# along with DotClear; if not, write to the Free Software
# Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
#
# ***** END LICENSE BLOCK *****
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php dcInfo('lang'); ?>  "  lang="
  <?php dcInfo('lang'); ?>  ">
  <head>
    <meta http-equiv="Content-Type" 	content="text/html; charset=<?php dcInfo('encoding'); ?>" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
    <?php dcHeadLinks(); ?>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php dcInfo('rss'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="<?php dcInfo('atom'); ?>" />
    <meta name="DC.title" content="<?php dcInfo(); ?>" />
    <title>
<?php dcSinglePostTitle('%s - '); dcSingleCatTitle('%s - ');
      dcSingleMonthTitle('%s - '); dcCustomTitle('%s - '); dcInfo(); ?>
    </title>
    <link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/style.css" media="screen" />
    <?php dcPostTrackbackAutoDiscovery(); ?>
  </head>
  <body>
  
      <!--////////////////////////////////   DEBUT HEADER ////////////////////////////////////-->
      <div id="header-wrap">
        <div id="header">

        </div>
      </div>
      <!--////////////////////////////////   FIN HEADER ////////////////////////////////////-->
      <!--////////////////////////////////   DEBUT BODY 1 ////////////////////////////////////-->
      <div id="primary-wrap">
        <div id="primary" class="twocol-stories">
          <div class="inside">
            <div class="story first">
              <br />
              <?php include dirname(__FILE__).'/list.php'; ?>
              <div style="clear:both">
              </div>
            </div>
            <div class="story">
              <h3></h3>
            </div>
            <div style="clear:left;">
            </div>
          </div>
          <div class="clear">
          </div>
        </div>
      </div>
      <!--////////////////////////////////   FIN BODY 1   ////////////////////////////////////-->
      <!--////////////////////////////////   DEBUT MENU   ////////////////////////////////////-->

      <div id="menu_navigation">
        <ul>
          <li>
          <a  href="" title="Liens">Liens</a></li>
          <li>
          <a  href="/musee/" title="Mus&eacute;e">Mus&eacute;e</a></li>
          <li>
          <a href="/gallery/" title="M&eacute;dia">M&eacute;dia</a></li>
          <li>
          <a href="" title="Team">Team</a></li>
          <li>
          <a class="current" href="/" title="Retourner sur la page d'accueil">Accueil</a></li>
        </ul>
      </div>
      <div style="clear:both">
      </div>
     
      <!--////////////////////////////////   FIN MENU   ////////////////////////////////////-->
      <!--////////////////////////////////   DEBUT BODY 2 ////////////////////////////////////-->
      <div id="ancillary">
        <div class="inside">
          <div class="block first">
            <h2>Calendrier</h2>
            <div id="sidebar">
              <div id="calendar">
<?php #Affichage du calendrier
                dcCalendar('<table summary="Calendrier">%s</table>'); ?>
                <span>
                </span>
              </div>
            </div>
          </div>
          <div class="block">
            <ul class="blogroll">
              <li id="linkcat-2" class="linkcat">
                <div id="archives">
                  <h2>Archives</h2>
                  <?php dcMonthsList(); ?>
                </div></li>
            </ul>
          </div>
          <div class="block">
            <h2>Derni&egrave;res News</h2>
            <ul class="dates">
              <li>
              <a href="http://www.triptik.org/2007/03/10/nos-amis-les-gones/">
                <span class="date">                  10.03
                </span>
                Nos amis les Gones </a></li>
              <li>
              <a href="http://www.triptik.org/2007/02/12/madrid/">
                <span class="date">                  12.02
                </span>
                Madrid </a></li>
              <li>
              <a href="http://www.triptik.org/2007/02/11/st-leger/">
                <span class="date">                  11.02
                </span>
                St L&eacute;ger </a></li>
              <li>
              <a href="http://www.triptik.org/2007/02/11/template-pour-dotclear/">
                <span class="date">                  11.02
                </span>
                Template pour Dotclear </a></li>
              <li>
              <a href="http://www.triptik.org/2007/02/09/billet-de-bienvenue/">
                <span class="date">                  09.02
                </span>
                Premier billet </a></li>
            </ul>
          </div>
          <div class="clear">
          </div>
        </div>
      </div>
      <!--////////////////////////////////   FIN BODY 2   ////////////////////////////////////-->
      <!--////////////////////////////////   DEBUT FOOTER ////////////////////////////////////-->
      <div id="footer">
        <div class="inside">
          <p class="copyright">Catapult&eacute; par
            <a href="http://www.dotclear.fr">DotClear</a>. Design by <a href="mailto:klesk@korx-crew.com">Klesk</a>.
          </p>
          <p class="attributes">
            <a href="<?php dcInfo('rss'); ?>">Fil RSS</a>
            <a href="<?php dcInfo('rss'); ?>?type=co">Commentaires RSS</a>
          </p>
        </div>
      </div>
      <!--////////////////////////////////   FIN FOOTER ////////////////////////////////////-->
       
 
  </body>
</html>


et ma feuille de style :

/*  
Theme Name: KorX
Theme URI:  http://www.korx-crew.com
 
Description: My theme derived from triptik
Version: 0.10
Author: Klesk
Author URI:  http://www.korx-crew.com
 
*/



/*//////////////////  GLOBAL   ////////////////*/

* {
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }

.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }

/*//////////////////  GENERAL   ////////////////*/

body{
	background: #ffffff;
	color:#BFBFBF;
	font-size:11px;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}

/* This class sets the width and position for all rows */
.inside{
	width:80%;
	min-width:65em;
	max-width:85em;
	margin:0 auto;
}

a{
	color:#FFF;
}

h1{
	color:#272727;
	font-size:1.5em;
	font-weight:normal;
	margin:1.5em 0;
}

h2, h3{
	font-size:1.15em;
	color:#FFF;
	font-weight:normal;
}
.block h2 {
	font-size:1.5em;
	color: #EF870E;
	}
	
#primary h2{
	color:#272727;
}
.comment-head h2{
	background: url(images/bubbles.gif) no-repeat top left;
	height:37px;
	padding-left:30px;
}

p{
	line-height:1.75em;
}
#contactform p{
	line-height:0;
}
ul li{
	list-style-type:square;
	margin:0.5em 0 0.5em 2em;
}

blockquote{
	margin-left:1em;
	padding-left:1em;
	border-left:2px solid #CCC;
	color:#CCC;
}

pre{
	width:100%;
	padding:1em 0;
	overflow:auto;
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
}

table{
	width:100%;
	border-spacing:2px;
	margin:1.5em 0;
}
table th, table td{ padding:0.3em 0.75em }
table th{
	background:#CCC;
	color:#000;
	text-align:left;
}
table td{
	background:#333;
	color:#FFF;
}
table caption{
	text-align:left;
	color:#FFF;
	margin-bottom:-1em;
	margin-top:1em;
}

.rule{
	border-top:1px solid #CCC;
	height:1px;
	font-size:1px;
	line-height:1px;
	margin:1.5em 0;
}

/*//////////////////  HEADER   ////////////////*/

#header-wrap{
		background:#000 url(images/header-bkg-repeat.jpg) repeat-x top left;	display:block;
	}
	
#header{
	background:transparent url(images/header.jpg) no-repeat top left;
	height:135px;	
}


/*//////////////////  BODY 1   ////////////////*/

#primary-wrap{
	background:#ffffff url(images/content.jpg) no-repeat top left;
	height: 400px;

	}
#primary{
	padding:20px 0 2em 0;
	color:#272727;
	text-align: justify;
	
}

#primary.twocol-stories .story{
	float:left;
	width:48%;
	margin:0 0 0 4%;
	display:inline;
}
* html #primary.twocol-stories .story{
	margin-left:2%;
}
#primary.twocol-stories .first, * html #primary.twocol-stories .first{
	margin:0 0 0 0;
}
#primary  a{
	color:#272727;
}

.post-title {
	font-size:1.15em;
	margin:0 0 1.5em 0;
	font-weight:normal;
	color:#CCC;
}
.post-title a{
	color:#CCC;
	text-decoration:none;
	border-bottom:1px dotted #666;
}

.story .details{
	margin:1em 0;
	text-align:right;
	border-top:1px solid #333;
	padding:0.5em 0;
	font-size:0.95em;
	color:#666;
}


/*//////////////////  BODY 2   ////////////////*/

#ancillary{
	background: #272727 url(images/footer-bkg-repeat.jpg) repeat-x top left;
	padding:2em 0 0 0;
}
#ancillary .block{
	float:left;
	width: 30%;
	margin:0 0 0 5%;
}
* html #ancillary .block{
	margin-left:3.9%;
}
#ancillary .twice-length{ width:65%; }
#ancillary .thrice-length{ width:100%; }
#ancillary .first, * html #ancillary .first{
	clear:both;
	margin:0;
}
#ancillary .block-separator{
	clear:both;
	height:2.5em;
}

#ancillary .block h2, #ancillary .block h3{
	margin:0 0 1em 0;
}

ul.dates, ul.blogroll ul, ul.pages{
	list-style-type:none;
	margin:1.5em 0 2em 0;
	border-top:1px solid #3D3D3D;
}
ul.dates li, ul.blogroll ul li, ul.pages li{
	list-style-type:none;
	margin:0;
	padding:0.5em 0;
	border-bottom:1px solid #3D3D3D;
}


ul.dates a, ul.blogroll a, ul.pages a{
	color:#BFBFBF;
	text-decoration:none;
}
ul.dates a:hover, ul.dates a:hover .date, ul.blogroll a:hover, ul.pages a:hover{ 
	color:#FFF;
}

ul.blogroll{ margin-top:0; }
ul.blogroll li{
	list-style-type:none;
	margin:0;
}



/*//////////////////  FOOTER   ////////////////*/

#footer{
	background-color:#272727;
	clear:both;
	color:#939393;
	padding:2em 0 3em 0;
}
#footer .inside{
	background:url(images/footer_black.gif) 50% 0 repeat-x;
	padding:1em 0;
}
#footer p{
	margin:0;
	font-size:0.95em;
}
#footer p.copyright{ float:left; }
#footer p.attributes{ float:right; }
#footer p.attributes a{
	padding:0 0 0 1em;
	text-decoration:none;
	color:#525252;
}
#footer p.attributes a:hover{
	color:#FFF;
}


/*//////////////////  MENU NAVIGATION   ////////////////*/
	
#menu_navigation{
  display: block;
	background:#ffffff;
	
	}

#menu_navigation li {
    margin: 0;
    padding: 0;
    display: inline;
}

#menu_navigation li a:link, #menu_navigation li a:visited {
    display: block;
    float: right;
    height: 30px; 
    width: 86px;
    line-height: 38px;
    text-decoration: none;
    text-align: center;
    background:#ffffff url(images/tab.gif) top left;
    padding: 0;
	  margin-left:2px;
}

#menu_navigation li a:hover, #menu_navigation li a:active,#menu_navigation li a.current  {
    background:#ffffff url(images/tab-hover.gif) top left;
    padding: 0;
	  line-height:40px;

}

/*//////////////////  CALENDRIER   ////////////////*/

#sidebar div#calendar table{
	font-size: 0.8em;
	text-align: center;
	margin: 0 auto;
	border-collapse: collapse;
}

#sidebar div#calendar table caption{
	margin: 0 auto;
}

#sidebar div#calendar table th{
	color: #BFBFBF;
	background: transparent;
}

#sidebar div#calendar table td{
	width: 10%;
	line-height: 2em;
	border: 1px solid #525252;
}

#sidebar div#calendar table td a{
	display: block;
	background: #BFBFBF;
	color: #333333;
	font-weight: bold;
	text-decoration: none;
}

#sidebar div#calendar table td a:hover{
	background: #EF8711;
	color: #FFFFFF;
}

/*//////////////////  PAGINATION   ////////////////*/

.pagenav {
	font: 0.9em;
}

p.pagenav a {
	background : #ddd;
	color: black;
	padding:2px;
	border: 1px solid #bbb;
	text-decoration: none;
	font-size:90%;
}

p.pagenav a:hover {
	background:#EF870E;
	color:white;
}

p.pagenav strong {
	color: black;
	padding:2px;
	border: 1px solid #bbb;
}


N'hésitez pas à me dire si vous voyez d'autres choses qui pourraient etre améliorées.
Modifié par Klesk (11 Apr 2007 - 17:47)
J'ai parcouru vite fais le code.

1. Ton "primary-wrap" (qui contient la partie gauche avec les news) est défini en "float: left".
2. Tu n'as pas de "conteneur", avec une taille bien définie. En gros on a affaire à un site accordeon qui s'adapte à la résolution de l'utilisateur (pas génial).
3. Ton div "menu_navigation" du menu oange est à la suite du div "primary-wrap". Pour résumer :
<div id="primary-wrap"> ... </div>
<div id="menu_navigation"> ... </div>

Il est donc logique qu'il vienne se positionner à droite de ton div "primary-wrap".

Le découpage de ton site est pas spécialement complexe, mais ta feuille de style c'est l'usine à gaz. A mon avis tu te compliques la vie...
Et donc la solution ??

Tu as fait un résumé de mon post, ce qui permettra aux autres de comprendre plus rapidement mon problème, mais cela ne m'apporte rien en l'état. Si en revanche tu as une idée pour simplifier tout ça et faire en sorte que ça fonctionne alors je suis preneur.

Je suis en train d'adapter un thème wordpress (n'éxistant pas en direct dl, mais avec l'accord de son auteur) vers dotclear pour ensuite en faire la modification, ce qui explique l'usine a gaz de css (que j'ai déjà emputé d'une bonne partie ne servant a rien dans mon cas).

Je fais donc appel aux pro du css/xhtml. Le fait que le site s'adapte à la résolution de l'écran est fait exprès, après si cela doit poser problème pour résoudre les élements que j'ai cité alors soit je définierai une taille fixe.

Merci d'avance.
Modifié par Klesk (09 Apr 2007 - 04:41)
Ca me donne déjà une piste je te remerci. En revanche le menu ne fonctionne pas sous opéra du coup. Est-il possible avec les changements que tu as fait d'aligner le menu a droite comme prévu initialement ou cela pose t-il un problème ?

POur être précis ce que je souhaiterai, c'est :

- que le design s'adapte à la résolution.
- que le menu de navigation soit en position droite.
- que la hauteur dans laquelle est mon texte s'adapte a la longueur du texte ( à l'heure actuelle ça passe par dessus le pied de page quand j'enlève le float:left notamment ).
Modifié par Klesk (09 Apr 2007 - 14:55)
Ca à l'air de marcher impec

:)

Le seul souci qui subsiste c'est que si je fais F11 pour mettre en plein ecran le pied de page reste fixe. J'avais essayé avec le tuto d'alsa creation et la position absolute, mais le souci c'est qu'en basse résolution le pied de page recouvrait le contenu de la page pour rester visible. Snif Snif. Si ya pas de solution a ça, c'est pas grave au pire faudrait appliquer la couleur du pied de page en dessous comme ça, ça se fond dans le design.

En tout cas merci d'y prendre le temps.
Modifié par Klesk (10 Apr 2007 - 09:39)
Bon j'en suis rendu là : http://www.korx-crew.com/test/dotclear/

si vous êtes dans des résolutions supérieures à 1280*1024, ça serait gentil de me faire un retour sur la façon dont ça s'affiche, notament ave une capture en pleine résolution par exemple.

Il me reste a trouver comment affcher mes news cote à cote sur deux colonnes et non l'une au dessus de l'autre et quelques modifs niveau couleurs sur les liens etc...

J'ai quand bien avancé et j'ai notament maintenant l'effet escompté quand à la mise en page et l'affichage en plein écran.

Merci bcp.

Si tu as d'autres idées d'amélioration n'hésites pas. Les autres également.
Je vois que l'adaptation de mon thème avance. Félicitations !
Afin de pouvoir afficher tes news sur deux colonnes essaye voir d'englober chacune d'elles par un float left.
Je suis passé sous spip depuis et le thème à quelque peu avancé et changé Smiley smile :

www.korx-crew.com/test/spip/

Je l'ai notament amélioré pour avoir un affichage similaire avec tous les navigateurs et une certification w3c.

Seul l'utilisation de <table> me permettait de faire ce que je voulais. J'ai retourné les div dans tous les sens mais le résultat n'était jamais le même selon le browser.

Ceci est loin d'etre terminé Smiley smile
Modifié par Klesk (14 Jun 2007 - 19:19)
C'est clair que c'est un vrai casse-tête à chaque fois....
Sinon le lien pour spip ne passe pas....
Modifié par superflu (15 Jun 2007 - 13:04)
Sujet clos
Aller à