Sujet Précédent Sujet Suivant

[CSS & XHTML 1.0 strict] Alignements

Fermé
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 - 10 juil. 2009 à 19:05
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 - 13 juil. 2009 à 10:14
Bonjour,

J'ai un site dont l'organisation se fait uniquement par des balises <div>. Avant j'utilisais les tableaux, mais tout le monde sera d'accord pour dire que les <div> sont plus pratiques et plus manipulables que les tableaux ...

Seulement, les <div> ont encore quelques petits défauts ... C'est difficile à manipuler au niveau des alignements !

J'ai plusieurs soucis pour lesquels j'ai testé une bonne dizaine de méthodes toutes sans succès.

On tiendra pour compte dans ce qui suit que je ne souhaite plus me servir des tableaux.

Le premier

J'ai une div qui contient tout le site et je souhaite la centrer par rapport à la fenêtre (mon site est automatiquement aligné à gauche). Je précise que la div a une largeur et une hauteur fixes.
J'ai déjà testé (et suis prêt à le refaire) la méthode des marges négatives, des marges auto et du text-align:center; sur le body ...

Le second

Je cherche à aligner du texte changeant verticalement dans une balise <div>.
J'ai déjà testé (et suis prêt à le refaire) la méthode avec le line-height (sans intérêt pour un texte changeant), la méthode du vertical-align:middle; et display:table-cell; ...


Voilà, merci d'avance,

Cordialement,

Faradn
A voir également:

14 réponses

Réponse 1 / 14
globbersthemes
10 juil. 2009 à 21:24
peux tu nous montrer ta page web ?


GLOBBERS ,http://www.globbersthemes.com
0
Réponse 2 / 14
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 11:22
Yep !

Voici l'adresse : http://animmangamovies.free.fr
Et pour le CSS et les paresseux : http://animmangamovies.free.fr/design.css

Voilà,

Merci =)

Faradn
0
Réponse 3 / 14
globbersthemes
11 juil. 2009 à 12:07
resalut,
alors pour faire simple :

tu dois intercaler une nouvelle div entre body et #tot voici un exemple:

<body>
<div class="mapagecentrer">
<div id="tot">
<div id="pre"></div>
<div id="emptycornertopleft"></div>
<div id="spepostcornerleft"></div>
<div id="spehorleft" onclick="window.location='../'"></div>
<div id="spehormain" onclick="window.location='index.php?par=1'"></div>
<div id="spehorright" onclick="window.location='index.php?com=1'"></div>
<div id="spepostcornerright"></div>
<div id="emptycornertopright"></div>
<div id="inthortop"></div> <div id="verupleft"></div>

<div id="vermainleft">
Manga Bar
</div>


css:
.mapagecentrer {
width:800px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;

}

petit details dans ton body n oublie pas de mettre la proprieté text-align:center; c est important pour certain navigateur


pour la deuxieme question

la propriete vertical align concerne pas les div mais les tableaux montre moi ou se trouve l erreur svp


globbers, http://www.globbersthemes.com/
0
Réponse 4 / 14
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 13:19
Coucou,

Oui, pour le text-align: center; dans le body je l'ai juste enlevé pour faire quelques tests.

Ta solution ne marche pas sur mon site ... Je pense que ça a un lien avec la position de mes <div> ; ils ne sont pas en relative ...

Bref regarde et dis-moi ce que t'en penses, merci beaucoup en tous cas ! (très sympa ton site btw)

Mon second problème était l'alignement vertical dans un <div> (par exemple le texte "Manga Bar", il est en haut et pas au centre). J'avais tenté un vertical-align: middle; avec un display: table-cell pour forcer le centrage vertical mais ça marche pas. Après y'a la solution line-height mais c'est gênant parce que le texte change (une fois qu'on fait son choix de mangas). Bref j'essaie de centrer les textes.

Merci !

Faradn
0

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

Posez votre question
Réponse 5 / 14
globbersthemes
11 juil. 2009 à 15:05
j avais oublier, ENLEVE

div {
float: left;
}

C EST CETTE PROPRIETE QUI T EMPECHE D AVOIR LA PAGE CENTRER

globbers,http://www.globbersthemes.com/
0
Réponse 6 / 14
globbersthemes
11 juil. 2009 à 15:17
enleve aussi tes positions en absolute t en a pas besoin et redefinies des blocks dans la dix #ctr et pour ton texte essaye la proprietes padding-top


globbers,http://www.globbersthemes.com/
0
Réponse 7 / 14
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 15:38
En fait, mes positions absolute pour chaque <div> dans le <div> #tot en position absolute ça permet que leur position dépende de #tot. Là en enlevant float: left; je remets le retour chariot et en enlevant les positions ça fout le bordel ...

Bon, j'ai laissé comme ça fait sans le float: left; et les positions, peut-être que c'est là que je m'y suis mal pris.
0
Réponse 8 / 14
globbersthemes
11 juil. 2009 à 17:28
resalut ce que je voulais dire c est que tu n as plus besoin de position absolute parce que tu peux faire:

<body>
<div class="mapagecentrer">
<div id="tot">
<div id="pre">
<div id="emptycornertopleft">
<div id="spepostcornerleft">
<div id="spehorleft" onclick="window.location='../'">
<div id="spehormain" onclick="window.location='index.php?par=1'">
<div id="spehorright" onclick="window.location='index.php?com=1'">
<div id="spepostcornerright">
<div id="emptycornertopright">
<div id="inthortop">
<div id="verupleft">

<div id="vermainleft">
Manga Bar
</div>

</div></div></div></div></div></div></div></div></div></div>

tu fermes pas toutes les div tu les fermes a la fin pour faire un groupe a la div #tot

en y inserant a chaque div la propriete float:left pour quelle se suivent
0
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 18:41
Plop,

C'est une méthode très désavantageuse : j'ai divisé ma page en 5, je ne peux pas mettre les balises d'ouvertures dans une page et de fermeture dans l'autre, et je tiens à garder mes include. Malgré tout j'ai essayé, ça ne marche pas (et franchement c'est pas terrible d'avoir 25 lignes de </div> d'affilée). Ca fout le bordel (genre encore pire qu'avant ! lol), embriquer tout n'est donc pas la solution ...

Merci,

Faradn
0
Réponse 9 / 14
Profil bloqué
11 juil. 2009 à 17:35
Je pense de cette facon c plus propre...

essaye voir:


il reste deux trop style a finir j'ai pas tout finis tu verras.


Ps: change l'url de la css dans le head..


CSS: 

@CHARSET "ISO-8859-1";

*, img	
{margin:0px; padding:0px;}

body
{background-color:#000;color:#000;font-family: Trebuchet MS,Arial,serif;text-align: center;}

#page
{width:800px;margin:auto;} 

#header
{width:600px;margin:auto;margin-top:50px;}

#header .left
{float:left;width: 180px;height: 95px;background  : url("images/spe_hor_left.jpg") right;}

#header .middle
{float:left;width: 200px;height: 95px;background: url("images/spe_hor_main.jpg");}

#header .right
{float:left;width: 220px;height: 95px;background: url("images/spe_hor_right.jpg") left;}

#content
{clear:both;padding-top:50px;}

#content .left
{float:left;}

#mangaBar .top
{width: 95px;height: 50px;background: url("images/ver_up.jpg") no-repeat;}

#mangaBar .middle, #episodeBar .middle
{width: 95px;height: 300px;background-color:#FFF;}

#mangaBar .bottom, #episodeBar .bottom
{width: 95px;height: 50px;background: url("images/ver_down.jpg") no-repeat;}

#content .middle
{float:left;}

#main
{padding:50px;}

#main .top
{}

#main .middle
{width: 500px;height: 95px;background-color:#FFF;}}

#main .bottom
{}

#content .right
{float:left;}

#footer
{clear:both;padding-top:50px;padding-bottom:50px;width:600px;margin:auto;margin-top:50px;height: 95px;}

#footer .left
{float:left;width: 50px;height: 95px;background: url("images/hor_left.jpg") no-repeat;}

#footer .middle
{float:left;width: 500px;height: 95px;background-color:#FFF;}

#footer .right
{float:left;width: 50px;height: 95px;background: url("images/hor_right.jpg") no-repeat;}



HTML : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

<head>
	 <title>Anim Manga Movies - AMM : Watch here your favourite manga anims now !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="Anim%20Manga%20Movies%20-%20AMM%20%20%20Watch%20here%20your%20favourite%20manga%20anims%20now%20%21_fichiers/css.css">  </head>
<body>
	<div id="page">

		<div id="header">
		      <div class="left" onclick="window.location='../'"></div>
		      <div class="middle" onclick="window.location='index.php?par=1'"></div>
		      <div class="right" onclick="window.location='index.php?com=1'"></div>
		</div>

		<div id="content">
		      <div class="left">
				<div id="mangaBar">
					<div class="top">&nbsp;</div>
				      <div class="middle">Manga Bar</div>
				      <div class="bottom">&nbsp</div>
				</div>
			</div>
		      <div class="middle">
				<div id="main">
					<div class="top">&nbsp;</div>
				      <div class="middle">
						<hr>
							Watch here your favourite anim videos !
							<br> 
							In order to watch your favourite anims, please follow the instructions below :
						</hr>
						<ul>
							<li>Click on the link "ENTER"</li>
							<li>Select the anim you want to watch</li>
							<li>Choose between the languages and subtitles in order to watch the anim with your favourite parameters</li>
							<li>Finally select the manga's episode and have fun ;)</li>
						</ul>
						<a href="http://animmangamovies.free.fr/index.php?welcome=1">ENTER</a>
					</div>
				      <div class="bottom">&nbsp;</div>
				</div>
			</div>
		      <div class="right">
				<div id="episodeBar">
					<div class="top">&nbsp;</div>
				      <div class="middle">Episodes' Bar</div>
				      <div class="bottom">&nbsp;</div>
				</div>
			</div>
		</div>
		
		<div id="footer">
			<div class="left">&nbsp;</div>
		      <div class="middle">Language Bar</div>
		      <div class="right">&nbsp;</div>
		</div>

	</div>
</body>
</html>
0
Réponse 10 / 14
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 18:50
Ok ... c'est chaud pour moi de voir les éléments que tu as changés ...

J'ai copié tout mon code pour pouvoir faire des tests, alors maintenant ça se passe ici : http://animmangamovies.free.fr/index_temp.php

Voilà, j'essaie ta méthode, j'en ai pour une dizaine de minutes et je poste à nouveau là ;)
0
Réponse 11 / 14
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 19:40
Voilà, j'ai fini le code ...

J'ai suivi l'idée de très près mais y'a un petit souci, je sais pas quoi ...

En tout cas j'ai apprécié la refonte du code que j'avais fait à la va-vite sans prendre soin des noms conventionnels ...

Page : http://animmangamovies.free.fr/index_temp.php
CSS : http://animmangamovies.free.fr/css/design_temp.css
0
Réponse 12 / 14
globbersthemes
11 juil. 2009 à 20:33
ca a l'air de prendre forme!!!
0
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
11 juil. 2009 à 21:17
Euh ... ouais, mais faut pas oublier qu'avant il était entier mon site, juste pas centré ;)
0
Réponse 13 / 14
globbersthemes
11 juil. 2009 à 20:35
je vais te faire une autre approche de ton site laisse moi une petite heure et je te donnerai la demo

a toute de suite
0
Réponse 14 / 14
Faradn Messages postés 56 Date d'inscription samedi 17 janvier 2009 Statut Membre Dernière intervention 5 juin 2011 14
13 juil. 2009 à 10:14
Bon ... voilà, j'ai toujours rien trouvé :P
0

Discussions similaires

trait horizontal avec du css
tipi75 -
alainpre -

Bonjour,

Je n'arrive pas à faire un trait horizontal avec du css.

Merci pour votre aide

9 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

Bonjour,

Comment peut on faire pour mettres les indices (en bas de lettre petite taille) et les exposants (en haut de lettre petite taille) ?
Balise xhtml ou style css ?

Je n'aime pas la balise parce qu'elle me décale mes interlignes d'un demi point. créant une interligne de 1 et demi.
Y a t'il d'autres balises html ?

Et en css, quelle classe peut on créer ? Si ça existe....

Namasté
Yv

19 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

Document initial créé par Jean-François Pillou

Par défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none :
Grâce au CSS Grâce au CSS via une classe Grâce au CSS en ligne Notre vidéo

Grâce au CSS Pour ce faire, il suffit de définir le code CSS suivant dans votre code HTML :

a:link
{
text-decoration:none;
}


Notez que la pseudo-classe :link permet de ne cibler que les liens hypertextes () et non les ancres (). Vous pouvez toutefois vous en passer si vo...

0 réponse
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

Bonjour,

J'essaie de faire plusieurs boutons de même dimension, sauf que celle ci varie en fonction du texte inscrit sur le bouton...

Je parle de boutons de boutons de formulaire de ce genre :


14 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

Bonsoir,

Savez vous comment faire pour forcé le retour à la ligne d'un texte dans un div, car j'ai un div de taille max-width de 510px mais si j'entre un mot super grand, celui çi va débordé du div mais je voudrais forcé un retour à la ligne dans ce cas, est ce faisable en CSS ou faut-il passer par un script ?


D'avance merci :)

33 réponses