28172 sujets

CSS et mise en forme, CSS3

Prob d'affichage sous IE avec padding

Bonjour tout le monde,

Voilà je suis un inconditonnel des "tables", mais j'essaye de changer pour le "CSS". Alors pour m'entraîner je m'attaque à la refonte du design de mon site web. J'avoue que niveau codage c'est super mais niveau compatibilité entre les navigateurs c'est la m.....

Alors j'ai un petit soucis qui commence à me rendre fou et j'espère que vous pourrez m'aider. Car cela m'éclairera sur le reste. Comment utiliser des padding sans tout décaller avec IE ?

J'essaye de refaire le header de mon site, problème d'alignement de mon texte sur des images, avec padding cela décale tout sous IE. De plus en cherchant à régler le problème j'ai créer un autre décalage, je deviens fous Smiley biggol

Voici mon code CSS :


div#lien_menu1 
{	
	width: 820px;
	height: 80px;
	margin: 0;
	padding: 0;
	text-align: center ;
	vertical-align: middle ;
	background: #ffffff;
}


Voici mon code HTML concerné :


<body>
<div id="lien_menu1">TEST</div>
</body>



J'ai simplifié les choses avec ce simple texte. Comment centrer "TEST" horizontalement et verticalement ?

D'avance merci.
Modifié par zubaran (17 Oct 2008 - 14:00)
Bonjour,

Centrer un bloc horizontalement et verticalement dans la page: dans l'absolu, on fera ça avec un bloc en display: table-cell, ou éventuellement en display: inline-block. Dans la pratique, IE comprenant mal ou pas du tout ces deux instructions, on utilisera... un tableau. Smiley lol

Un peu de lecture:
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html

PS: je suppose que tu travailles bien avec une page HTML (ou XHTML) valide? http://validator.w3.org
Salut et merci pour ta réponse.

Oui je travail bien avec une page valide mise à part un texte défilant dont je n'ai pas réussi à trouver l'intermédiaire à la balise <marquee>

J'ai réussi à résoudre mon problème mais pas de façon conventionnelle puisque cela empêche la validation w3. J'ai du mettre un div entre <a></a> pour appliquer un padding et décalé les textes sinon cela me décale tout Smiley sweatdrop

Voici mon code CSS :


div#entete
{
	width: 1005px;
	height: 156px;
	margin: 0 auto;
	background: #ffffff;
}

div#banniere
{
	width: 820px;
	height: 156px;
	float: left;
	background: #ffffff;
}

div#menu_haut
{
	width: 820px;
	height: 30px;
	margin: 0;
	padding: 0;
	text-align: top;
	float: left;
}

div#menu_haut_bann
{
	width: 820px;
	height: 80px;
	margin: 0;
	padding: 0;
	text-align: top;
	float: left;
}

div#bann
{
	width: 820px;
	height: 80px;
	margin: 0 auto;
	background: #ffffff;
	text-align: top;
}


div#language
{
	background: url(Gifs/Hh.gif) no-repeat;
	font: 9pt "Verdana";
	color: blue;
	width: 173px;
	height: 30px;
	float: left;
	margin: 0 auto;
	padding: 0 ;
	vertical-align: middle;
	font-weight: bold ;
	text-align: center;
}


Mon code HTML :


<div id="entete">

	<div id="menu_forum">
		<div id="frame_forum_haut"><img id="Bh_01" src="http://www.abandonware-paradise.fr/Gifs/Bh_01.png" alt="Menu Forum"></div>
		<div id="frame_forum"><?php include "new_forum.php"; ?></div>
		<div id="frame_forum_bas"><img id="Bb_01" src="http://www.abandonware-paradise.fr/Gifs/Bb_01.png" alt="Menu Forum"></div>
	</div>
	<div id="banniere">
		<div id="menu_haut_bann">
			<div id="bann"><a href="index.html"><img src="Gifs/<?php echo "Titre$image"; ?>.png" alt="Bienvenue sur Abandonware-Paradise" title="Bienvenue sur Abandonware-Paradise"></a></div>
		</div>
		<div id="menu_haut">
			<div id="language"><div class="lien">Language : <a href="index-english.html"><img src="Gifs/us.gif" alt="Abandonware-Paradise English" title="Abandonware-Paradise English">&nbsp;</a><img src="Gifs/pl.jpg" alt="Raj Abandonware u nas">&nbsp;<a href="index.html"><img src="Gifs/fr.gif" alt="Abandonware-Paradise Français" title="Abandonware-Paradise Français"></a></div></div>
			<div id="lien_menu1"><a href="index.html"><div class="lien">Index</div></a></div>
			<div id="lien_menu2"><a href="http://www.forum.abandonware-paradise.fr" target="_blank"><div class="lien">Forum</div></a></div>
			<div id="lien_menu3"><a href="annuaire.html"><div class="lien">Annuaire</div></a></div>
			<div id="lien_menu4"><a href="TOP20.html"><div class="lien">Top Download</div></a></div>
			<div id="lien_menu5"><a href="livre-d-or.html"><div class="lien">Livre d'Or</div></a></div>
			<div id="lien_menu6"><a href="contact.html"><div class="lien">Contact</div></a></div>
			<div id="lien_menu7"><a href="http://www.abandonware-paradise.fr/Vbulletin/showthread.php?t=297"><img src="Gifs/Hd.gif" title="Abandonware-Paradise Taverne au Krog" alt="Abandonware-Paradise Taverne au Krog"></a></div>
		</div>
</div>
</div>


Si tu as une solution je suis preneur, j'en peut plus de ce CSS lol.

J'essaye de comprendre et d'apprendre mais des que je crois avoir pigé et que je met en application à un moment ca foire ca se décale et je sais vraiment pas pourquoi.

http://www.micro-paradise.com/rss/

Voilà où j'en suis, le problème se situe sur les boutons : index, forum, etc..
Bonjour zubaran,

Est tu sur d'avoir un document valide hormis le marquee et les div que tu as rajouté.

a écrit :
Unable to Determine Parse Mode!

The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML 4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode unambiguously, because:

the MIME Media Type (text/html) can be used for XML or SGML document types
No known Document Type could be detected
No XML declaration (e.g <?xml version="1.0"?>) could be found at the beginning of the document.
No XML namespace (e.g <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of the document.
As a default, the validator is falling back to SGML mode.


Déjà commencer par mettre la balise ouvrante <html> qui manque.

Il semble qu'il manque un espace dans ton doctype entre les premiers guillemets fermants et les suivants.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"[b][#red]ici[/#][/b]"http://www.w3.org/TR/html4/loose.dtd">


Utiliser un code "sémantique" c'est a dire la balise qu'il faut selon le type de contenu que l'on veux afficher, dans ton cas une liste au lieu d'une succession de div pour un menu.

Exemple :

<ul>
<li><a href="mon-lien1.html>mon lien 1</a></li>
<li>><a href="mon-lien1.html>mon lien 1</a></li>
...
</ul>


Ensuite

a écrit :
Oui je travail bien avec une page valide mise à part un texte défilant dont je n'ai pas réussi à trouver l'intermédiaire à la balise <marquee>


Est-ce vraiment primordial d'avoir du texte qui défile constamment ?
Modifié par knarf (18 Oct 2008 - 00:24)
Au pire, si tu veux la possiblité de le faire défiler, tu passe par javascript...
Et les gens qui n'auront pas javascript activé, verront le text en bloc, ce n'est pas gravisime...
Salut,

Et merci pour vous réponses que je vais essayer tout de suite.

Non c'est sur que mon bloc de défilement n'est pas indispensable. Je chercherai une alternative plus tard, sûrement avec du Javascript.
Calak a écrit :
Au pire, si tu veux la possiblité de le faire défiler, tu passe par javascript... Et les gens qui n'auront pas javascript activé, verront le text en bloc, ce n'est pas gravisime...


zubaran a écrit :
Non c'est sur que mon bloc de défilement n'est pas indispensable. Je chercherai une alternative plus tard, sûrement avec du Javascript.


Abandonnez ce mécanisme qui est plus nuisible à l'utilisateur qu'autre chose (que ce soit par la balise propriétaire marquee ou par une bidouille JS) surtout si ce n'est pas une contrainte forte (indispensable). Smiley ravi
Mouarf qu'est ce que ca me saoûle le CSS Smiley ravi

Sur 6h de boulot sur ce petit header lol j'arrive même pas à en faire quelque chose de présentable. Aves mes tables j'aurai déjà finit le site ( bon ok les tables c'est dépassé et c'est pas recommandé )

Si je fais avec des listes j'arrive à centrer comme il faut mon texte mais plus mon image lol Qui se met en background que sur la zone du texte et non sur l'ensemble. Aucun contrôle avec des width ou height sur des li ou ul.

Enfin vous pouvez toujours regarder ce que ca donne : http://www.micro-paradise.com/rss/

Smiley bawling Smiley bawling Smiley bawling Smiley bawling
Si jamais vous voulez mon petit bout de CSS :

div#banniere
{
	width: 820px;
	height: 156px;
	float: left;
	background: #ffffff;
}

div#menu_haut_bann
{
	width: 820px;
	height: 80px;
	margin: 0;
	padding: 0;
	text-align: top;
	float: left;
}

div#bann
{
	width: 820px;
	height: 80px;
	margin: 0 auto;
	background: #ffffff;
	text-align: top;
}

.language
{
	background: url(Gifs/Hh.gif);
	width: 173px;
	height: 30px;
	margin: 0;
	padding: 0;
	text-align: left;
	float: left;
}

.menus
{
	width: 462px;
	height: 30px;
	margin: 0;
	padding: 0;
	text-align: left;
	float: left;
}

div#banniere ul li.bouton1 a
{
	width: 1500;
	background: url(Gifs/Hm.gif);
	padding: 5px 0px 5px 0px;
	margin: 0;
	font-weight: bold ;
	color: #000000;
	text-align: center;
}

div#banniere ul li.bouton1 a:hover
{
	background: url(Gifs/Hm_sel.gif);
	padding: 5px 0px 5px 0px;
	margin: 0;
	font-weight: bold ;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

div#banniere ul
{
	margin-left: 0;
	padding-left: 0;
	display: inline;
}

div#banniere ul li.premier
{
	padding: 5px 0px 5px 0px;
	margin: 0;
	list-style: none;
	font: 9pt "Verdana";
	color: blue;
	font-weight: bold ;
	text-align: center;
}

div#banniere ul li.bouton1
{
	padding: 5px 0px 5px 0px;
	margin: 0;
	list-style: none;
}


Si j'avais jamais appris à travailler avec les tables à l'époque ( y'a plus de 6ans ) ca serait sûrement plus facile pour moi pour assimiler.

Peut-être auriez-vous un bon site d'où je pourrai reprendre des cours sans non plus être un site pour débutant ?
Bonne idée et merci pour les liens.

J'ai enfin réussi, je pense avoir mieux compris maintenant. Je vais desuite essayer de refaire le même menu voir si j'ai vraiment pigé ou non Smiley biggol


http://www.micro-paradise.com/rss/ <-- résultat

Bon j'ai encore beaucoup de boulot Smiley lol
Sujet clos
Aller à