28114 sujets

CSS et mise en forme, CSS3

[Résolu]Centrer un cadre (site) au milieu de l'écran ???

Bonjour,

il y a presque 2 ans, avec un copain nous avions fait ce site internet
A l'époque, on nous avait dit d'utiliser des frames...

Il y a quelques jours nous venons de terminer notre deuxième site, respectueux des standarts web cette fois-ci. Et en mettant le "vieux" site à jour hier soir, j'ai failli avoir une crise cardiaque devant le "bordel" (il faut bien le dire) engendré par les frames. Alors depuis, je me demande si ça vaudrait pas la peine de transposer les frames en css... J' y réfléchis mais il y a un point qui me travaille... avec les frames, nous avons un cadre qui fait tant par tant pour s'adapter à (presque)toutes les résolutions placé au centre de l'écran du visiteur et l'espace restant (si il y a) est simplement occupé par un fond de couleur... est-ce possible de rendre la même chose en CSS ?
je pensais mettre le fond dans le html et donné une taille passe partout au body... mais en ce qui concerne le positionnement au centre de l'écran, je nage un peu... c'est possible ?si oui quelqu'un a une idée ?
Modifié par p_tite_jo (18 Nov 2005 - 16:45)
Modérateur
bonjour,

j'ai un page qui peut peut-etre te suffire, un bouton centré, avec 2 css un pour IE (display:inline-block; etc ..), et un pour les autres (display:table; etc ...).
en en usant de tes image a la place tu devrais pouvoir obtenir ce que tu recherche.
Je te laisse, copier la page et les 2 fichiers css ...et faire tes petites recherches sur ces proprietés interessantes.Qui permettent de faire usage du vertical-align:middle; a un element de type inline.
...<edit> oups, ça n'ira que pour la page d'entrée, desolé pour ce post , finalement inutile.</edit>.

http://gcyrillus.free.fr/dkg/trucs_css/splash.html
http://gcyrillus.free.fr/dkg/trucs_css/splash.css
http://gcyrillus.free.fr/dkg/trucs_css/splash_IE.css

a plus..

re edit

sinon, j'ai aussi une bidouille (je vois pas trop comment la qualifié d'autre, même si elle est valide).
Il s'agit d'un div centreé sur une image utilisé en background qui est elle (positionné en absolute ) aussi fluide.Cel permet en trichant de garder l'ensemble a peu prés centré se redimensionnant selon la taille de la fenetre) le css est inclus a la page : http://gcyrillus.free.fr/dkg/trucs_css/fond_div_fluide.html
ce n'est probablement pas non plus ce que vous rechercher,
je ne sais pas centré un element de type bloc avec une dimension fixe, en fonction de la resolution sans faire usage des marges negatives.
bon courage.

<edit> solution sans marges negatives et compatible IE : un tableau d'une cellulle comme conteneur du site : http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html </edit>
Modifié par gcyrillus (14 Sep 2006 - 17:13)
hello,
tout d'abord merci de prendre le temps de t'occuper de mon problème...
je vais tenter ta bidouille.. je te tiens au courant

edit: pfff c'est hardu comme truc Smiley sweatdrop c'est pas encore ça... le visiteur qui a une résolution de 1024*768 n'a pas de cadre centré... ma page.

Faudrait pouvoir exprimé ceci: 
<frameset frameborder=0 border=0 rows=" [b]*[/b],650,*" cols="*,850,*">
en CSS... serait-ce une limite de la mise en page CSS ?????
Modifié par p_tite_jo (18 Nov 2005 - 16:18)
Modérateur
rebonjour,
voici une idée usant des marges negatives, peut-etre plus approprié a votre cas ou plus facile a gerer pour le contenu , vu la taille du conteneur centrer fixe. Smiley smile .

<edit>je viens de prendre connaissance de ton lien, en effet avec des tailles prederminées , ça ne marche pas, le tout (sur la bidouille precedente) est appuyée sur des valeurs en pourcentage. qui se redimensionne donc.</edit>

<!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="fr">
	<head>
	<title>centrons en marge negatives !</title>
	<style type="text/css">
	<!--

/* CSS Document */
body,html {
background-color:#888;
     margin: 0;
     text-align: center; 
     
width:100%;
height:100%;
}
.corps
{
   position:absolute;
     left: 50%; 
     top: 50%;
     width: 755px;
     height: 558px;
     margin-top: -300px; /* moitié de la hauteur */
     margin-left: -400px; /* moitié de la largeur */
     background-color:#777;/*pour le visualiser */
}

.menuhoryzontale
{
text-align:center;
height:2em;
     background-color:#444;/*pour le visualiser */
position:absolute;width:755px;
     margin-left: 0!important;
     margin-left: -290px
}
.menuhoryzontale ul {margin:0;padding:0;}
.menuhoryzontale ul li {display:inline;}
.menuhoryzontale ul li a {}

.boiteverticale {float:right;width:175px;}
.margemenu {height:2em;}
.contenu
{
text-align:left;
margin-right:176px;
     background-color:#666;/*pour le visualiser */
height:100%;
}
	
	-->
	</style>
	
	
</head>

<body>


<div  class="corps">
<div  class="menuhoryzontale">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">forum</a></li>
<li><a href="#" >news</a></li>
<li><a href="#" >contac</a></li>
<li><a href="#">liens</a></li>           
</div>
<div class="boiteverticale">
<div class="margemenu"></div>
boite</div>
<div class="contenu">
<div class="margemenu"></div>
contenu a partir d'ici.
</div>
</div>

</body>
</html>


a plus, pour faire autrement, je ne sais pas vraiment faire (et puis pas le temps cette fin de semaine.)
bon courage




<edit> solution sans marges negatives et compatible IE : un tableau d'une cellulle comme conteneur du site : http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html
</edit>
Modifié par gcyrillus (14 Sep 2006 - 17:14)
Sujet clos
Aller à