[css] centrer/ aligner

IgiXcs Messages postés 172 Statut Membre -  
IgiXcs Messages postés 172 Statut Membre -
Bonjour,

comment contrer ou sinon aligner un bloc par raport a un autre

www.cfg-serv.c.la j'essaye sans résultat d'aligner le texte avec le header :

merci d'avance ;)

90 réponses

IgiXcs Messages postés 172 Statut Membre 94
 
bah mettre une largeur fixe pour la page ;)
0
IgiXcs Messages postés 172 Statut Membre 94
 
parti :)

oki! (surtout que suis over nul en csshtml mes premiers pas! mais j'ai soif d'apprendre -site du zéro le tuto sur css il est bof bof-)

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS je look les css ... ;)
0
Dalida Messages postés 7114 Statut Contributeur 923
 
donc en premier, tu effaces ta feuille de style EN ENTIER, plus rien, que dalle, nada…

ensuite on va se pencher sur HTML.
tu as choisi XTML 1.0 Strict, va falloir assumer !!!
-:oD

• le DocType, l'architecture du document, c'est ok ;
• pour le moment tu vires tout le Javascript (fais une copie quand même !), il nous gênerait pour la validation, on le remettra tout à l'heure plus proprement.

et zou, tu mets en ligne et tu fais valider le tout par le W3C.
0
IgiXcs Messages postés 172 Statut Membre 94
 
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Dalida Messages postés 7114 Statut Contributeur 923
 
rien de bien méchant !
mais tu vois, c'est par là qu'il faut commencer !
les navigateurs réagissent différemment les uns des autres mais si en plus ton document n'est pas valide, va savoir ce qui peut bien en ressortir !!!

pour les erreurs :
VIRE LE JAVASCRIPT ;
• dans la balise '<body>' tu vires tous les attributs ;
• tu vires toutes les balises '<br>' (on les remplacera par la balise '<br />' si besoin mais pour le moment faut seulement nettoyer) ;

et ça devrait à peu près passer.
0
IgiXcs Messages postés 172 Statut Membre 94
 
ouai ce que jevenai tout juste de faire ;)
0
Dalida Messages postés 7114 Statut Contributeur 923
 
oups, j'ai oublié !
la balise '<center>' n'existe plus (à virer !) et l'attribut 'border' pour '<img />' non plus (idem !).
0
IgiXcs Messages postés 172 Statut Membre 94
 
apres chaques balise j'ai mis retour a la ligne pour voir mais c'est pas pour autant qu'il aime mieu :p

plus que 10erreur :p
0
IgiXcs Messages postés 172 Statut Membre 94
 
youpi ;)

no error
0
Dalida Messages postés 7114 Statut Contributeur 923
 
c'est la balise '<img /> qui est mal fermée :
<img src="http://www.c.la/images/banner/bandeau88-31cla.gif" border="0" width="88" height="31" alt="C.la - Redirection gratuite sans pub" />


avec ça et ce qu'il y a au dessus ça doit être bon.
0
IgiXcs Messages postés 172 Statut Membre 94
 
j'avait compris quand tu avait écrit

oups, j'ai oublié !
la balise '<center>' n'existe plus (à virer !) et l'attribut 'border' pour '<img />' non plus (idem !).
donc, j'ai bien refermé
0
IgiXcs Messages postés 172 Statut Membre 94
 
Maintanant,c'est le css que l'on va voir?
0
Dalida Messages postés 7114 Statut Contributeur 923
 
à l'assaut de css !!!

comme on travaille avec des propriétés qui peuvent être héritées, il faut commencer par les balises les plus englobantes pour finir par les détails.

moi je commence toujours par préciser deux ou trois trucs à '<html>', ça mange pas de pain et on part sur de bonnes bases !
-;o)
html
{
font-familly:Verdana, Arial, Helvetica, sans-serif; 
font-size:100%;
margin:0;
padding:0;
}

• la police : à toi de choisir deux ou trois polices mais tu dois rester dans la même famille (sérif, sans sérif ou monospace) et toujours finir par le nom générique au cas où l'ordi n'est pas les polices demandées, il mettra la police par défaut de la même famille ;
• on prend la taille de police par défaut (100%) pour l'ensemble du document, on modifiera par la suite ;
• j'initialise toujours marges et espacements, c'est une habitude.
body
{
font-size:.8em;
width:800px;
margin:0 auto;
}

• tu définies la taille de police (toujours en 'em' sauf pour '<html>') que tu veux pour le texte du document ;
• tu définies la largeur de la page ;
• j'ai centré le corps, sans les marges en haut et en bas, à toi de voir si c'est ce que tu veux.
0
Dalida Messages postés 7114 Statut Contributeur 923
 
est-ce que tu veux que la bannière fasse 800px de large ???
0
IgiXcs Messages postés 172 Statut Membre 94
 
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fteam-c4.fr%2F.cfg%2F&warning=1&profile=css21&usermedium=all

front familly il aime pas :p

0
Dalida Messages postés 7114 Statut Contributeur 923
 
coquille !!!
une seul 'L' à 'family' !!!…
0
IgiXcs Messages postés 172 Statut Membre 94
 
700*150 la bah, la taille d'origine, on la touche pas ;)
0
Dalida Messages postés 7114 Statut Contributeur 923
 
petite modification pour le html, j'ai juste mis les éléments dans l'ordre et ajouté une balise de titre (on pourra masquer le texte après mais il faut un titre au contenu !).
		<div id="header">
			<h1>Le Titre !!!</h1>
		</div>   
		<div id="menu">
			<ul>
			<li><a href="./index.html">Accueil</a></li>
			<li><a href="./forum">Forum</a></li>
			<li><a href="./tuto.html">Tutos</a></li>
			<li><a href="./contact.php">Contact</a></li>
			</ul>
		</div>

		<div id="pubs">
			<p>	Publicitée :
				<a href="http://www.c.la"><img src="http://www.c.la/images/banner/bandeau88-31cla.gif" width="88" height="31" alt="C.la - Redirection gratuite sans pub" /></a>
				<!--<SCRIPT TYPE="text/javascript" language="javascript" SRC="http://ads.allotraffic.com/skycraper?id=17357"></SCRIPT>
!-->	
			</p>
		</div>

		<div id="texte">
			<p>Bonjour,<br />
				Je viens anoncer que le site est fini!<br />
				Pour les personnes désirant des tutos, merci de les demander via le forum ;)<br />
                IgiX
			</p>
			<p>Bonjour,<br />
				Je suis heureux de vous accueillir sur le site de #cfg-serv, aide à la configuration de serveurs cs/cz.
				Le site est encore en cours de réalisation, mais le forum est ouvert!<br />
				Pour toutes vos questions, vos sugestions ou autre à propos de #cfg-serv, merci de vous adresser à IgiX soit via le forum (messages privés),
				où sinon par email : igix@laposte.net<br />
				IgiX
			</p>
		</div>
0
IgiXcs Messages postés 172 Statut Membre 94
 
Oki, Le titre!!! vien fair son entrée :p
0
Dalida Messages postés 7114 Statut Contributeur 923
 
pour une bannière "image" :
div#header h1
{
height:150px;
margin:0;
padding:0;
text-indent:-1000em;
overflow:hidden:
background-image:url(monimage.png);
background-position:center;
background-repeat:no-repeat;
}

• on définit une hauteur fixe ;
• pas de marges ni d'espacements qui modifieraient sa taille ;
• on cache le texte et on affiche une image en arrière plan à la place : c'est plus joli !!!
0
Dalida Messages postés 7114 Statut Contributeur 923
 
pour les colonnes tu veux quoi ?

à gauche le menu et à droite la pub ?
quelle largeur pour les colonnes ?
0