28173 sujets

CSS et mise en forme, CSS3

Alignement impossible...

Bonjour,

ne sachant pas par quoi commencer, je vais mettre une image (tout sera plus clair) :

upload/7233-Image1.png

Comme vous le voyez, il y a un problème au niveau de "Accueil".

Voici mon code :

HTML :
<div id="header">
			<p>
				<img src="./images/titre_gauche.png" /><titre><? echo $titre_accueil; ?></titre><img src="./images/titre_droite.png" />
			</p>
			
			<p>
				<a href="index.php?langue=de"> <drapeau> <img src="./images/drapeaux/de.jpg" /> </drapeau> </a>
				<a href="index.php?langue=es"> <drapeau> <img src="./images/drapeaux/es.jpg" /> </drapeau> </a>
				<a href="index.php?langue=en"> <drapeau> <img src="./images/drapeaux/en.jpg" /> </drapeau> </a>
				<a href="index.php?langue=fr"> <drapeau> <img src="./images/drapeaux/fr.jpg" /> </drapeau> </a>
			</p>
		</div>


CSS :
#header {
	width: 70%;
	height: 200px;
	
	border-style: solid;
	border-width: 1px;
	border-color: #37769D;
	
	float: right;
	vertical-align: middle;
	background: #87CFFF url(../images/header_bg.jpg) repeat-x top left;
}

#header p {
	margin: 15px;
	font-size: 0;
	
	text-align: center;
}

#header titre {
	font-size: 60px;
	text-align: center;
	
	background: #87CFFF url(../images/titre_centre.png) repeat-x;
}

#header p img {
	border: 0px;
}

#header p drapeau {
	margin-left: 10px;
	margin-right: 10px;
}


A savoir que je n'ai mis ici que la partie convernée. Il y a en réalité un menu sur la gauche (d'où le float:right).

Dans tous les cas, lorsque je change le margin sur "#header titre", le résultat est toujours le même. Comme si je ne faisait rien du tout.

C'est très embêtant, mon but étant d'aligner verticalement (par rapport aux images) mon texte. Est-ce possible au moins ? J'ai crû comprendre que oui, mais tous les tutoriaux ou morceaux de codes que j'ai essayé pour le faire n'ont rien donné.

En éspérant avoir une réponse Smiley decu ,
Slagt.
Salut,

Déja tu as des soucis de sémantique dans ton html.
Il vaudrait mieux utiliser une balise <h1> pour le titre en mettant ton image en fond, et une liste <ul> pour les liens de ton menu langue.

Pour ton problème, il faudrait que tu donne un peu plus de code que sur l'éléments précis qui te pose problème. N'aurais tu pas une page en ligne, certainement plus parlante qu'un simple code ? Si ce n'est pas possible, une capture d'écran avec un code complet ca peut aider aussi.
Slagt a écrit :
<titre><? echo $titre_accueil; ?></titre>


La balise <titre>, tu l'as défini en XML ou c'est une balise que je ne connais pas ?! Smiley confused
Bonjour et merci de vos réponse.

J'ai eut tellement de mal à placer correctement les drapeaux que la première solution trouvé m'allais. Mais maintenant que tu le dis, c'est vrai que c'est beaucoup plus simple avec une liste...


Pour la balise titre, elle est défini dans le CSS :

#header titre {

	font-size: 60px;

	text-align: center;

	

	background: #87CFFF url(../images/titre_centre.png) repeat-x;

}


Et non, le site n'est pas en ligne... voilà un screen complet (j'ai volontairement voilé les noms et numéro de téléphone, vous comprendrez pourquoi Smiley cligne . Je doute qu'ils apprécient)

upload/7233-Alsa.jpg

Code HTML :
<? 

$langue = $_GET["langue"];

if (!isset ($_GET["langue"]))
	$langue = "fr";

include ("private/message_" . $langue . ".php");

?>

<!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" lang="en" xml:lang="en">

	<head>
		<title></title>
		
		<meta name="keywords" content="" />
		
		<meta name="description" content="" />
 
		<link href="private/style.css" rel="stylesheet" type="text/css" />
	</head>
	
	<body>
		
		<!-- Adresse des gîtes -->
		<div class="menu_gauche">
			<p><? echo $menu_gauche1_titre; ?></p>
			<ul>
				<li><? echo $menu_gauche1_puce1; ?></li>
				<li><? echo $menu_gauche1_puce2; ?></li>
				<li><? echo $menu_gauche1_puce3; ?></li>
			</ul>
		</div>
		<!-- Fin menu_gauche -->
		
		<!-- En-tete : titre de la page et Drapeaux -->
		<div id="header">
			
			<img src="./images/titre_gauche.png" /><h1> <? echo $titre_accueil; ?> </h1><img src="./images/titre_droite.png" />
			
			<ul>
				<li> <a href="index.php?langue=de"> <img src="./images/drapeaux/de.jpg" /> </a> </li>
				<li> <a href="index.php?langue=es"> <img src="./images/drapeaux/es.jpg" /> </a> </li>
				<li> <a href="index.php?langue=en"> <img src="./images/drapeaux/en.jpg" /> </a> </li>
				<li> <a href="index.php?langue=fr"> <img src="./images/drapeaux/fr.jpg" /> </a> </li>
			</ul>
		</div>
		<!-- Fin header  -->
		
		<!-- Contacts -->
		<div class="menu_gauche" style="margin-top:20px">
			<p><? echo $menu_gauche2_titre; ?></p>
			<ul>
				<li><? echo $menu_gauche2_puce1; ?></li>
				<li><? echo $menu_gauche2_puce2; ?></li>
				<li><? echo $menu_gauche2_puce3; ?></li>
				<li><? echo $menu_gauche2_puce4; ?></li>
				<li><? echo $menu_gauche2_puce5; ?></li>
				<li><? echo $menu_gauche2_puce6; ?></li>
			</ul>
			
			<p><? echo $menu_gauche3_titre; ?></p>
			<ul>
				<li><? echo $menu_gauche3_puce1; ?></li>
				<li><? echo $menu_gauche3_puce2; ?></li>
				<li><? echo $menu_gauche3_puce3; ?></li>
				<li><? echo $menu_gauche3_puce4; ?></li>
			</ul>
		</div>
		<!-- Fin menu_gauche  -->
		
		<!-- Message de promotion et autres avertissements -->
		<div id="avertissement">
			<p>
				<? echo $avertissement; ?>
			</p>
		</div>
		<!-- Fin de avertissement -->
		
		<!-- Photo de la location -->
		<div id="photo">
			<p>
				<a href="./images/photos/grandes/vue_ensemble.jpg"><img src="./images/photos/miniatures/vue_ensemble.jpg" /></a>
			</p>
			
			<p>
				<? echo $commentaire_photo1; ?>
			</p>
		</div>
		<!-- Fin photo -->
	</body>
	
</html>


Le code PhP sert à manipuler les différentes langues sans changer de page Smiley smile

Et le CSS :
body {
	background-color: #87CFFF;
	margin: 50px;
	
	color: #2B698F;
	font-family: "Trebuchet MS", Geneva, Arial, sans-serif;
	font-size: small;
	line-height: 120%;
}

.menu_gauche {
	width: 25%;
	
	border-style: solid;
	border-width: 1px;
	
	color: #9F5516;
	float: left;
	background: #FFC872 url(../images/menu_gauche_bg.jpg) repeat-x bottom left;
}
.menu_gauche p {
	margin-top: 10px;
	margin-left: 10px;
}

.menu_gauche ul {
	margin-left: 10px;
}

.menu_gauche ul li {
	margin-bottom: 3px;
}

.menu_gauche a {
	color: #BD0C00;
}

.menu_gauche a:hover {
	color: #FFF;
}

#header {
	width: 70%;
	height: 200px;
	
	border-style: solid;
	border-width: 1px;
	border-color: #37769D;
	
	text-align: center;
	float: right;
	background: #87CFFF url(../images/header_bg.jpg) repeat-x top left;
}

#header h1 {
	display: inline;
	font-size: 60px;
	
	background: #87CFFF url(../images/titre_centre.png) repeat-x top left;
}

#header ul li {
	display: inline;
}

#header ul img {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	
	border: none;
}

#avertissement {
	width: 70%;
	
	float: right;
}

#avertissement p {
	text-align: center;
}

niveau1, niveau1a, niveau1b, niveau1c, niveau1d {
	font-style: italic;
}

niveau2, niveau2a, niveau2b, niveau2c, niveau2d {
	font-weight: bold;
}

niveau3, niveau3a, niveau3b, niveau3c, niveau3d {
	font-weight: bold;
	color: #FF0000;
}

niveau4, niveau4a, niveau4b, niveau4c, niveau4d {
	font-weight: bold;
	text-decoration: underline;
	color: #FF0000;
}

niveau1a, niveau2a, niveau3a, niveau4a {
	font-size: medium;
}

niveau1b, niveau2b, niveau3b, niveau4b {
	font-size: large;
}

niveau1c, niveau2c, niveau3c, niveau4c {
	font-size: x-large;
}

niveau1d, niveau2d, niveau3d, niveau4d {
	font-size: xx-large;
}

#photo {
	width: 70%;
	
	float: right;
	border: none;
}

#photo p {
	text-align: center;
	font-size: x-small;
}

#photo p img {
	margin-left: 25px;
	margin-right: 25px;
	
	margin-top : 5px;
	margin-bottom: 0px;
	
	border: none;
}


J'éspère que vous aurez une solution, en attendant je vais mettre une liste pour les drapeaux et <h1> pour le titre...
Merci beaucoup !

[EDIT] J'ai mis les listes pour les drapeaux et le titre h1. Le screen n'a pas changé biensûr... [/EDIT]
Modifié par Slagt (20 Jun 2006 - 13:47)
Décidement...

En bidouillant j'ai réussi à obtenir ce que je voulais (sous Firefox (MAC) et Safari (MAC), ne marche pas sous FireFox (Windows) ni IE (Windows)). Mais ça ne me plait vraiment pas (parce que ça a été trouvé en bidouillant... et parce que ça ne fonctionne pas partout)

Je vous montre les modifications, dites moi ce que vous en pensez :

Modifications au niveau du CSS uniquement :
#header {
	width: 70%;
	height: 200px;
	
	padding-top: 25px;       <== (Ajout) Pour centrer le contenu (Bidouille)
	margin-bottom: 5px;    <== (Ajout) Pour centrer le contenu (Bidouille)
	
	border-style: solid;
	border-width: 1px;
	border-color: #37769D;
	
	text-align: center;
	float: right;
	background: #87CFFF url(../images/header_bg.jpg) repeat-x top left;
}

#header h1 {
	display: inline;
	font-size: 60px;
	line-height: 78px;       <== (Ajout)
	
	padding-top: 4px;        <== (Ajout) Bidouille
	padding-bottom: 5px;  <== (Ajout) Bidouille
	
	vertical-align: top;       <== (Ajout) Bidouille aussi... j'aurais mis "middle" mais bon... et à ma grande surprise, je croyais que ça ne fonctionnait qu'avec les tableau...
	background: #87CFFF url(../images/titre_centre.png) repeat-x top left;
}

Modifié par Slagt (20 Jun 2006 - 14:11)
a écrit :
J'ai eut tellement de mal à placer correctement les drapeaux que la première solution trouvé m'allais. Mais maintenant que tu le dis, c'est vrai que c'est beaucoup plus simple avec une liste...

C'est surtout beaucoup plus logique concernant la sémantique. Tu fais une liste de langues représentée par des drapeaux, quoi de plus logique que la balise pour faire des listes. Idem pour le titre, quand il existe 6 balises différentes de titres ( de <h1> à <h6> )

EDIT: Concernant ton code "bidouillé comme tu dis, ca me choque pas que tu utilise des padding et margin. C'est une chose assez normale pour arriver à une mise en page précise compatible pour tous navigateurs. Ne pense pas qu'en avoir besoin est mal, bien au contraire, si ca existe il faut en profiter.
Modifié par Mikachu (20 Jun 2006 - 14:07)
Merci beaucoup pour la rapidité. Mais entre temps j'ai éditer mon post car j'ai pu tester sous Windows. Et il y a un décalage sous Firefox ainsi que sous IE (qui ne comprend pas les padding et margin ou quoi ?).

Je craque !!!
Modifié par Slagt (20 Jun 2006 - 14:15)
Rebonjour

Bon, je suis passé à autre chose après y être finalement réussi... mais voilà qu'il faut tout changer (changement de design oblige). Et maintenant j'ai un problème très chiant.

Voilà le code HTML :
<div class="header">
	<p>
		<img src="./images/titre_gauche.png" />
		<h1> <? echo $titre_accueil; ?> </h1>
		<img src="./images/titre_droite.png" />
	</p>
</div>


Et voilà ce que je trouve lorsque je fais Clique Droit > Afficher la source... 
<div class="header">
	<p>
		<img src="./images/titre_gauche.png">
		</p><h1> Accueil </h1>
		<img src="./images/titre_droite.png">
		
</div>


Oui oui, mais pourquoi ce "</p>" apparait il ici ??? Ca détruit tout mon beau design Smiley decu
Sujet clos
Aller à