28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,

Je début en css et après avoir fait une recherche et lu ce qui était préconisé en entete du forum, je n'ai pas réussi à éclaircir le problème du centrage des conteneurs.


Voici l'extrait de la feuille css correspondante

.entete {
	position: absolute;	
	float: right;
	width: 800px;
	height: 100px;
	left: 157px;
	border-left: #FAD348 1px solid;
	border-top: #FAD348 1px solid;
	border-right: #FAD348 1px solid;

    }

.gauche { 
	display: block;	
	position: absolute;
	font-size: 12px;
	float: left;
	top: 120px;
	left: 8px;
	width: 145px;
	height: 300px;
	font-family: Arial,Helvetica,sans-serif;
	text-align: center;
	line-height: 30px; 
	border-left: #FAD348 2px solid;
	border-top: #FAD348 2px solid;
	border-bottom: #FAD348 2px solid;
	padding-left: 5px;
    }

.gauche a:link { 
	
	font-family: Arial,Helvetica,sans-serif; color: #ffffff;
	padding-top: 7px;
	padding-bottom: 3px;
	text-decoration: none;
	border-bottom: #FAD348 1px dashed;


}

.gauche a:hover {
	background-color: #FAD348;
	text-decoration: none;
	color: #000000;
	
    }


.gauche a:visited {
	font-family: Arial,Helvetica,sans-serif; color: #ffffff;
	padding-top: 7px;
	padding-bottom: 3px;
	text-decoration: none;
	border-bottom: #000000 1px dashed;

}

.droite {
	font-family: "palatino linotype", palatino, "times new roman", times, serif; font-size: 14px; letter-spacing: 1px; 	color: #000000;

	display: block;
	position: absolute;
      top: 107px;
      left: 158px;
      width: 777px;
	height: auto;
	min-height: 400px;
	_height: 400px;
      background-color: #ffffff;

      padding: 10px;
	
	border-left: #FAD348 2px solid;
	border-right: #FAD348 2px solid;
	border-top: #FAD348 2px solid;
	border-bottom: #FAD348 2px solid;
    }


Etant donné que c'est le premier site que je fais à l'aide des css, le code doit probablement comporter des aberrations, je vous prie de m'en excuser.

Ma question est la suivante : Je voudrais que le site soit centré sur l'écan du navigateur, mais je ne sais pas comment faire pour associer un positionnement en % des différents conteneurs alors que la banière a une taille fixe en pixels.

J'espère ne pas avoir été trop confus...

Merci par avance Smiley smile

Lutin
Modifié par Atomic Lutin (09 May 2006 - 20:43)
Merci pour le lien, cela a résolu mon problème en partie Smiley smile

J'ai bien réussi à centrer la banière et le corps du site mais je n'ai pas réussi à coller le menu de gauche au bloc central, du coup je l'ai intégré provisoirement entre la banière et le corps du site.

Si tu as une idée de la manière proceder ?

Merci encore !
Lutin
Modifié par Atomic Lutin (08 May 2006 - 22:27)
Voila une solution


<style type="text/css">
 
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	}

#conteneur {
	background-color: black;
	margin-left: 150px;
	color: #FFFFFF;
	}

#menu {
	background-color: #FFFFCC;
	margin: 0px;
	padding: 0px;
	height: 200px;
	width: 150px;
	float: left;
}
#global {
	margin-right: auto;
	margin-left: auto;
	width: 900px;
	position: relative;
	left: -75px;
}



<body>

<div id="global">
  <div id="menu">menu</div>
  <div id="conteneur">contenu</div>
</div>
</body>


A+
Modifié par gege71 (07 May 2006 - 16:04)
Merci beaucoup pour ton aide cela m'a permis d'éclaircir pas mal de choses!

Le résultat est pas mal sur opera et firefox, parcontre sur IE c'est la cata, je vais plancher encore un peu dessus Smiley smile


Lutin
Enleve


	width: 750px;


Du #conteneur

si tu met rien il prend la largeur restante

et surtout n'enleve pas le margin-left

A+
Modifié par gege71 (08 May 2006 - 13:22)
Et bien j'arrive à un truc de pas trop mal, j'ai entièrement repris la feuille css histoire de bien comprendre le mecanisme et j'arrive à quelquechose qui n'est pas très éloigné de ce que tu m'as proposé.

A priori l'affichage est ok sur opera et IE, parcontre c'est sous firefox que ca bug un peu...et je n'ai pas encore testé sous saffari

http://www.cno-provence.com


Merci encore
Ah....effectivement je l'ai pas encore testé sur d'autres ecrans, je travaille sur un LCD 15 pouces alors j'ai du mal à m'en rendre compte.

Merci de me l'avoir signalé Smiley smile

La nuit va etre longue ... Smiley lol
Il va falloir investir Smiley biggrin pour développer correctement il te faudrait au moins un affichage de 1280*1024 Smiley cligne

A+
(Lol je suis en train de chercher un 19pouces LCD mais les dalles MVa sont encore trop chères pour un budget d'étudiant)

En fait ce que j'ai essayé de faire c'est :

- Positionner .global de telle facon qu'il soit centré sur l'écran
- Créer un .ban pour l'entete, un .menu pour les liens, et un .conteneur pour le detail du texte, le tout englobé dans la balise .golbal en html

Le problème est que je n'ai pas réussi à mettre .menu et .conteneur cote à cote sans utiliser de variable float, et lorsque j'utilise float: left, du coup .menu et .conteneur ne dépendent plus de .global

Pourtant j'essaye de faire des efforts Smiley lol
Modifié par Atomic Lutin (08 May 2006 - 23:00)
gege71 a écrit :
Tu peux aussi utiliser Opera 8.5 il a une fonction Zoom +/- de l’affichage

A+



Ben justement avec opera lorsque je réduis le zoom à 50% le tout reste centré Smiley sweatdrop
Justement tu centres le block menu et ton contenu
Alors que je croyais que tu voulais le contenu centré et le menu sur le côté


A+
A la limite peu importe, ce que je ne veux pas en fait, c'est que sur les ecrans à haute résolution, le site soit confiné dans un coin de l'écran et que tout le reste de la largeur soit inoccupée.

Voila un shoot de ce que j'obtiens en zoom 50%, histoire de confirmer que tu as bien la meme chose ?
upload/6469-Sanstitre1.jpg

En revanche un amis vient de m'envoyer un shoot de ce que ca donne sur safari...c'est mal barré :
upload/6469-Sanstitre2.jpg
Modifié par Atomic Lutin (08 May 2006 - 23:24)
Je viens d’étudier ton code et je constate que tu as remit une largeur fixe à ton conteneur

Et ça te met la zizanie que tu compenses un peu avec le float, le calcul au pixel pré ne fonctionne pas car les navigateurs ne compte pas de la même façon certain mette les border a l’extérieur d’autre a l’intérieur, plus les problème des overflow, etc. … le tous = dépassement

Voila pourquoi je laisse toujours un élément sans largeur fixe


A+
J’ai fais un gabarit qui devras correspondre a ce que tu cherche

Resultas nickel sous IE FF et Opera

tu remarquera que il y a des pixels de rab dans la largeur

Jette aussi une œil sur la liste de noms
(Tu a plus qu’a faire aussi une liste pour tes lien (facile) pour que ton code soit nickel)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	}

#centrage {
	margin-right: auto;
	margin-left: auto;
	width: 955px;
	padding: 0px;
	margin-top: 0px;
}

#global {
	margin-left: 150px;
	margin-right: 0px;
	width: 794px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border-left: #FAD348 2px solid;
	border-top: #FAD348 2px solid;
	border-bottom: #FAD348 2px solid;
	border-right: #FAD348 2px solid;
	background-color: #ffffff;
}

#conteneur {
	margin-left: 0px;
	min-height: 400px;
	_height: 400px;
}

#menu {
	margin: 130px 0px 0px;
	padding: 0px;
	width: 150px;
	height: 300px;
	float: left;
	border-left: #FAD348 2px solid;
	border-top: #FAD348 2px solid;
	border-bottom: #FAD348 2px solid;
	font-size: 10px;
	line-height: 25px;
	text-align: center;
}



#menu a:link { 
	font-family: Arial,Helvetica,sans-serif; color: #ffffff;
	padding-top: 7px;
	padding-bottom: 3px;
	text-decoration: none;
	border-bottom: #FAD348 1px dashed;
	font-size: 10px;
	line-height: 25px;
	text-align: center;
}

#menu a:hover {
	background-color: #FAD348;
	text-decoration: none;
	color: #000000;
	font-size: 10px;
	line-height: 25px;
	text-align: center;

    }

#menu a:visited {
	font-family: Arial,Helvetica,sans-serif; color: #ffffff;
	padding-top: 7px;
	padding-bottom: 3px;
	text-decoration: none;
	border-bottom: #FAD348 1px dashed;
	font-size: 10px;
	line-height: 25px;
	text-align: center;
}

a {
	text-decoration: none;
}

a:hover {
	color:#FF9900;
	text-decoration: underline;
}

/* liste noms*/

#conteneur_liste {
	width: 600px;
	margin-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
}
#conteneur_liste ul {
	margin: 0px;
	padding: 0px;
	line-height: 1.3;
}
#conteneur_liste ul li {
	width: 48%;
	float: left;
	margin: 2px;
	padding: 0px;
	list-style-position: inside;
	list-style-type: none;
}
.spacer {
	clear: both;
}


</style>
</head>
<body bgcolor="#006699">
<div id="centrage">
  <div id="menu">
    <p> <a href="http://www.cno-provence.com/index.php3">&nbsp;&nbsp;Accueil du Site&nbsp;&nbsp;</a> </p>
    <p> <a href="http://www.cno-provence.com/article.php3?id_article=5"> &nbsp;&nbsp;Le Bureau Local&nbsp;&nbsp;</a></p>
    <p> <a href="http://www.cno-provence.com/rubrique.php3?id_rubrique=1"> &nbsp;&nbsp;Soirées CNO-Provence&nbsp;&nbsp;</a></p>
    <p><a href="http://www.cno-provence.com/rubrique.php3?id_rubrique=7"> &nbsp;&nbsp;Conférences Nationales&nbsp;&nbsp;</a></p>
    <p><a href="http://www.cno-provence.com/rubrique.php3?id_rubrique=2"> &nbsp;&nbsp;Formation Pratique&nbsp;&nbsp;</a></p>
    <p><a href="http://www.cno-provence.com/rubrique.php3?id_rubrique=8"> &nbsp;&nbsp;Informations Diverses&nbsp;&nbsp;</a></p>
    <p><a href="http://www.cno-provence.com/site.php3">&nbsp;&nbsp; Les Liens Utiles&nbsp;&nbsp;</a></p>
  </div>
  <div id="global"> <img src="test_fichiers/baniere.jpg" alt="" />
    <div id="conteneur">
      <p><img src="test_fichiers/accueil2007.jpg" alt="" width="432" height="269" vspace="4" border="0" align="middle" /> </p>
      <div id="conteneur_liste">
        <ul>
          <li>Bernard Fleiter</li>
          <li>Anne Giraudeau</li>
          <li>Alain Hoornaert</li>
          <li>Olivier Laplanche</li>
          <li>Paul Mariani</li>
          <li>Ambra Michelotti</li>
          <li>Jeffrey Okeson</li>
          <li>Jean-Daniel Orthlieb</li>
          <li>Paul Pionchon</li>
          <li>Dick Wiechmann</li>
        </ul>
        <div class="spacer"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>




A+
Modifié par gege71 (09 May 2006 - 01:44)
Au fait dans les lien tu n’est pas obliger de mettre l’adresse complete
<a href="./index.php3">Accueil du Site</a> = <a href="http://www.cno-provence.com/index.php3">Accueil du Site</a> ont appel ça le chemin relatif Smiley biggrin

Pourquoi php3 Smiley decu ???

A+
gege71 a écrit :
Au fait dans les lien tu n&#8217;est pas obliger de mettre l&#8217;adresse complete
<a href="./index.php3">Accueil du Site</a> = <a href="http://www.cno-provence.com/index.php3">Accueil du Site</a> ont appel ça le chemin relatif Smiley biggrin

Pourquoi php3 Smiley decu ???

A+


Pour les liens relatifs je sais, habituellement c'est ce que je fais, mais la j'ai tappé l'adresse machinalement lol

Quant au php3, en fait le moteur du site est basé sur spip, et tous les fichiers spip sont en php3.

Merci pour ce gabarit, il a l'air de marcher nickel!
Le css permet de faire beaucoup de choses..aut juste savoir s'y prendre Smiley biggrin

Parcontre est-il possible d'intégrer la aprtie du code css concernant les nom dans la page html concernée, et d'associer en plus une feuille externe qui contiendrait tout le reste de la mise en page ?

Merci encore !
Salut

OUI
Il te suffit de repartir le css comme tu le désire il faut surtout éviter de les laisser en double
(pas grave pour le fonctionnement mais risque d'erreurs de maintenance)


Pour SPIP : je m'interroge si ça ne complique pas un peut le développement ( je suis partisan du code direct) ?

A+
Pages :