28172 sujets

CSS et mise en forme, CSS3

Un menu css qui ne veut pas ce centrer...

bonjour,

Depuis 2 jours j'essaie avec acharnement de pouvoir centrer les lettres et les lignes de mon menu mais apparement il y a quelque chose qui m'échappe.... Si vous pouviez m'aider j'en serait infiniment reconnaissant Smiley smile

voici mon code menu :

#topmenu {
position:absolute;
bottom:-1px;
text-transform:uppercase;
white-space: nowarp;
width:100%;
height:38px;
border-top: 1px solid #7E8083;
border-bottom:1px solid #7E8083;
}

#topmenu ul {
margin:0;
padding:0;
}

#topmenu a:link, #topmenu a:visited {
float: left;
display: block;
padding: 4px 10px 7px 10px;
font-size:11px;
letter-spacing:5px;
font-weight: bold;
line-height:  17px;
color: #ccc;
text-decoration:none;
font-weight:bold;
color:#F0F5F8;
margin-top:2px;
}

#topmenu li {
margin-top:4px;
list-style-image:none;
background:none;
text-align:center;
list-style-type: none;
float:left;
border-right: 1px solid #7E8083;
min-width:120px;
}

#topmenu li:hover {
background-color:#256F91;
}

#topmenu li a{
display:block;
width:30px;
}


<modération : suppression de l'image />

Que puis-je faire pour tout centrer, que ce soit propre ? Smiley decu
Modifié par Heyoan (11 Jun 2009 - 13:45)
Hello,

l'Aperçu permet de joindre de grandes images sans déformer la mise en page du forum. Smiley cligne

D'autre part ce serait plus simple d'avoir directement un code html à copier/coller.
désolé j'avais pas vu que mon image avait déformé le forum, mile excuse Smiley sweatdrop

Qu'entendez vous par code html a copier/coller ? il vous faut toute la page du css ?

A la base pour résumer, je pars d'une template open source pour joomla qui ce prenome "aurora" et je l'ai deja pas mal modifier, sauf que ce fameux menu du haut 'topmenu" lui ne veut pas s'aligner proprement, le reste (pour le moment) fonctionne a merveille...

j'attends vos précisions, merci beaucoup.
lawrencium a écrit :
il vous faut toute la page du css ?
Non : il faudrait le code html de ton menu qui va avec.
ok, désolé, un peu abruti par cette "prise de tete",

voici le code hashteumeuleu:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('templateColour'); ?>.css" type="text/css" />

<!--[if IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<style type="text/css">
#banner {
background:url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/<?php echo $this->params->get('templateColour'); ?>/headimg_<?php echo $this->params->get('templateColour'); ?>.jpg) no-repeat;
}
</style>

<?php
$user1 = $this->countModules('user1')?1:0;
$user2 = $this->countModules('user2')?1:0;
$topmenu = $this->countModules('user3')?1:0;
$right = $this->countModules ('right')?1:0;
$left = $this->countModules ('left')?1:0;


// USER 1 & 2 calculations
if ($user1+$user2 == 2) :
$user1_style="float:left;width:49%;";
$user2_style="float:left;width:49%;";
elseif (($user1 == 1) and ($user2 == 0)) :
$user1_style="width:99%;";
elseif (($user1 == 0) and ($user2 == 1)) :
$user2_style="width:99%";
endif;
// END
if ($left+$right == 2) :
$content = "LR";
elseif (($left == 1) and ($right == 0)) :
$content = "L";
elseif (($left == 0) and ($right == 1)) :
$content = "R";
elseif (($left == 0) and ($right == 0)) :
$content = "0";
endif;

//CHECK FOR EDIT MODE
$editmode = false;
if (JRequest::getCmd('task') == 'edit' ) :
	$editmode = true;
	$content='L';
endif;
?>


</head>

<body class="mainbody">
	<div id="wrapper">
    		<div id="mainhead<?php echo $topmenu; ?>">
           		 <div id="flash">
                    <jdoc:include type="modules" name="top" style="xhtml" />
				</div>
				<div id="logo">
                <a href="index.php"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/<?php echo $this->params->get('templateColour'); ?>/logo.png" style="border:0;" alt=""/></a>
                </div>
                <?php if ($topmenu) : ?>
				<div id="topmenu">
					<jdoc:include type="modules" name="user3" />
				</div>
				<?php endif; ?>
			</div>
		<div id="inner_wrapper">
				<div id="bread">
				<jdoc:include type="module" name="breadcrumbs" />
				</div>
				<?php if ($this->params->get('banner')) : ?>
				<div id="banner"></div>
				<?php endif; ?>
       	<div id="wrapper2">
                <?php if ($left) : ?>
                <div id="leftmenu"> 
					<jdoc:include type="modules" name="left" style="xhtml" />
				</div>
				<?php endif; ?>
                <?php if ($right) : ?>
                <div id="rightcol">
					<jdoc:include type="modules" name="right" style="xhtml" />
                </div>
				<?php endif; ?>
			<div id="inner_wrapper2">
           		<?php if ($user1 or $user2) : ?>
               	<div id="usermod<?php echo $content; ?>">
                <?php if ($user1) : ?>
      					<div id="user1" style="<?php echo $user1_style; ?>">
      						<jdoc:include type="modules" name="user1" style="xhtml" />
      					</div>
						<?php endif; ?>
						<?php if ($user2) : ?>
      					<div id="user2" style="<?php echo $user2_style; ?>">
      						<jdoc:include type="modules" name="user2" style="xhtml" />
      					</div>
            			<?php endif; ?>
                </div>
                <jdoc:include type="message" />
                <?php endif; ?>    
				<div id="content<?php echo $content; ?>"> 
				<jdoc:include type="component" />
				</div>
             </div>     
			 <!-- end of content aread --> 
			 </div>
                    <div id="footer">
			Powered by <a href="http://www.joomla.org">Joomla! 1.5</a> | Design by <a href="http://www.nukedesign.co.uk">NukeDesign</a> |
		<a href="http://validator.w3.org/check/referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
		 | <a href="http://www.hermish.com/check_this.cfm">508</a>
	    </div>    

        </div>
	</div>		
</body>
</html>
Salut,

a écrit :
voici le code hashteumeuleu
Non, ça c'est le code Paiehachepé.

Ce qui nous intéresse c'est uniquement le code HTML que ton navigateur reçoit. Mais si tu veux pas t'ennuyer, et faciliter par la même occasion le travail de ceux qui voudront t'aider, l'url d'une page en ligne est encore ce qu'on fait de mieux.
Hem... c'est vraiment laborieux ! Smiley murf

ton code PHP ne nous aide pas puisque :
1) ton problème ne concerne pas PHP
2) nous ne connaissons pas tes classes PHP qui permettent de construire ta page.
3) tous ceux qui sont susceptibles de t'aider ne font pas forcément du PHP.

En clair il nous aurait fallu le code html généré de ton menu.

Mais bon à priori ce sera inutile car il semble qu'il suffise d'enlever le float:left et le width:30px de tes liens.

Au passage tu as mis white-space: nowarp; à la place de nowrap.
arg, malheureusement, le site est actuellement en local, donc pas moyen de vous le faire partager pour vérifier...

J'ai suivit sinon le conseil de heyoan, effectivement tout est redevenu centrer... sauf que maintenant mon menu est a la vertical au lieu d'être a l'horizontal... je n'est egalement aucun fichier html dans ma template, juste du php et un fichier javascript. comme je commence sur joomla (j'ai longtemps travaillé avec npds) je le connais pas encore bien... Mais dans la logique le fichier html devrais être dans le rep de template...

je pense que mon menu n'en est pas vraiments un... c'est plus une mise en forme de lien par css qu'autre chose. Si j'arrivai a redimensionner ces maudites lignes de séparation entre les liens ce serait top!
bon j'ai triché, j'ai eu marre des petites sépartion d'1px, je les ai enlevé et j'ai reussi a cadrer tant bien que mal, sa fait zoli maintenant!

merci beaucoup pour votre aide
a écrit :
je n'est egalement aucun fichier html dans ma template, [...] Mais dans la logique le fichier html devrais être dans le rep de template
Et si tu faisais simplement menu Affichage / Code source dans le navigateur ?
oui effectivement...

attention :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
  <base href="http://127.0.0.1/destruction-joomla/index.php/news" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - le portail dynamique et système de gestion de contenu" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>News</title>
  <link href="/destruction-joomla/index.php/news?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/destruction-joomla/index.php/news?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/destruction-joomla/templates/aurora/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="http://127.0.0.1/destruction-joomla/components/com_jcomments/tpl/default/style.css" type="text/css" />
  <script type="text/javascript" src="/destruction-joomla/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/destruction-joomla/media/system/js/caption.js"></script>
  <script src="http://127.0.0.1/destruction-joomla/components/com_jcomments/js/jcomments-v2.0.js" type="text/javascript"></script>
  <script src="http://127.0.0.1/destruction-joomla/components/com_jcomments/libraries/joomlatune/ajax.js" type="text/javascript"></script>


<link rel="stylesheet" href="/destruction-joomla/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/destruction-joomla/templates/aurora/css/template.css" type="text/css" />

<link rel="stylesheet" href="/destruction-joomla/templates/aurora/css/yellow.css" type="text/css" />

<!--[if IE 6]>
<link href="/destruction-joomla/templates/aurora/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 7]>
<link href="/destruction-joomla/templates/aurora/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<style type="text/css">
#banner {
background:url(/destruction-joomla/templates/aurora/images/yellow/headimg_yellow.jpg) no-repeat;
}
</style>



</head>

<body class="mainbody">
	<div id="wrapper">
    		<div id="mainhead1">
           		 <div id="flash">
                    
				</div>
				<div id="logo">
                <a href="/destruction-joomla/index.php"><img src="/destruction-joomla/templates/aurora/images/yellow/logo.png" style="border:0;" alt=""/></a>
                </div>
                				<div id="topmenu">
					<ul id="mainlevel-nav"><li><a href="/destruction-joomla/index.php/news" class="mainlevel-nav" id="active_menu-nav">News</a></li><li><a href="/destruction-joomla/index.php/releases" class="mainlevel-nav" >Releases</a></li><li><a href="/destruction-joomla/index.php/events" class="mainlevel-nav" >Events</a></li><li><a href="/destruction-joomla/index.php/download" class="mainlevel-nav" >Download</a></li><li><a href="/destruction-joomla/index.php/shop" class="mainlevel-nav" >Shop</a></li><li><a href="/destruction-joomla/index.php/about" class="mainlevel-nav" >About</a></li><li><a href="/destruction-joomla/index.php/contact" class="mainlevel-nav" >Contact</a></li><li><a href="/destruction-joomla/index.php/newsletter" class="mainlevel-nav" >Newsletter</a></li></ul>
				</div>
							</div>
		<div id="inner_wrapper">
				<div id="bread">
				<span class="breadcrumbs pathway">
<a href="http://127.0.0.1/destruction-joomla/" class="pathway">Home</a> <img src="/destruction-joomla/templates/aurora/images/arrow.png" alt=""  /> News</span>

				</div>
				       	<div id="wrapper2">
                                <div id="leftmenu"> 
							<div class="moduletable_menu">
					<h3>Main Menu</h3>
					<ul class="menu"><li class="item1"><a href="http://127.0.0.1/destruction-joomla/"><span>Home</span></a></li></ul>		</div>
			<div class="moduletable_menu">
					<h3>Key Concepts</h3>
					<ul class="menu"><li class="item40"><a href="/destruction-joomla/index.php/extensions"><span>Extensions</span></a></li><li class="item38"><a href="/destruction-joomla/index.php/content-layouts"><span>Content Layouts</span></a></li><li class="item43"><a href="/destruction-joomla/index.php/example-pages"><span>Example Pages</span></a></li></ul>		</div>
	
				</div>
				                			<div id="inner_wrapper2">
           		    
				<div id="contentL"> 
				<div class="componentheading">
	News</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		
<table class="contentpaneopen">
<tr>
		<td class="contentheading" width="100%">
					Some Fresh News from this summer...			</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/destruction-joomla/index.php/news/57-some-fresh-news-from-this-summer?format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/destruction-joomla/templates/aurora/images/pdf_button.png" alt="PDF"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/destruction-joomla/index.php/news/57-some-fresh-news-from-this-summer?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/destruction-joomla/templates/aurora/images/printButton.png" alt="Print"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/destruction-joomla/index.php/component/mailto/?tmpl=component&link=aHR0cDovLzEyNy4wLjAuMS9kZXN0cnVjdGlvbi1qb29tbGEvaW5kZXgucGhwL25ld3MvNTctc29tZS1mcmVzaC1uZXdzLWZyb20tdGhpcy1zdW1tZXI%3D" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/destruction-joomla/templates/aurora/images/emailButton.png" alt="E-mail"  /></a>	</td>
		   </tr>
</table>
<table class="contentpaneopen">

<tr>
	<td width="70%"  valign="top" colspan="2">
		<span class="small">
			Written by Administrator		</span>
		  
	</td>
</tr>

<tr>
	<td valign="top" colspan="2" class="createdate">
		Wednesday, 10 June 2009 15:53	</td>
</tr>


<tr>
<td valign="top" colspan="2">
<font class="tiny"><br /></font><font class="content"><table border="0" width="100%"> 	<tbody> 		<tr> 			<td width="12%"><img src="http://www.speedcore.eu/images/destructioncamtr.gif" border="0" width="143" height="152" align="left" /></td> 			<td width="88%">       			<div align="left"> 			<p> 			<font face="arial,helvetica,sans-serif"><strong><font size="3">Destruction Records hits  the underground cinematic world with an audio contribution by A.I.D.S.  (DEST.-05 <a href="http://destruction.speedcore.eu/encapsulation.php?page=DEST-05" target="_blank" title="destruction - 05 AIDS & Lawrencium  - On The Way To Anihilation">Remember</a>) to a short french film. <br /> 			</font></strong></font> 			</p> 			<p> 			<font face="arial,helvetica,sans-serif"><strong><font size="3">As the movie is in post-production,  we will give you a link to watch it very soon !</font></strong></font> 			</p> 			<font face="andale mono,times" size="3"><br /> 			</font> 			</div> 			</td> 		</tr> 	</tbody> </table> <table border="0" width="100%"> 	<tbody> 		<tr> 			<td width="88%"> 			<!-- 			@page { margin: 2cm } 			P { margin-bottom: 0.21cm } 			A:link { so-language: zxx } 			--> 			<p style="margin-bottom: 0cm" align="none"> 			<font face="arial,helvetica,sans-serif"><strong><font size="3">Some words about 			Destruction Records in the next CORE Magazine ! Exclusive news will be 			revealed !!!  Get your copies here : <a href="http://www.core-mag.net/" target="_blank">core-mag.net</a></font></strong></font> 			</p> 			<font face="arial,helvetica,sans-serif"><strong><font size="3"><br /> 			</font><font size="3">An exclusive interview 			will be available on Destruction website before July with the man behind "Le 			Chaos Ordinaire" project : Mister Fred Notek aka La Foudre ! <a href="http://www.lechaosordinaire.com/" target="_blank">lechaosordinaire.com</a></font></strong></font> 			</td> 			<td width="12%"> 			<div align="right"> 			<span style="margin-bottom: 0cm">                                                <img src="http://www.speedcore.eu/images/coremagasine.jpg" border="0" width="136" height="162" align="left" /></span> 			</div></td></tr></tbody></table></font><div class="small" align="left" style="margin-top: 10px; clear:both;">
 </div>
</td>
</tr>

<tr>
	<td colspan="2"  class="modifydate">
		Last Updated on Wednesday, 10 June 2009 22:52	</td>
</tr>


</table>
<span class="article_separator"> </span>
		</div>
		</td>
</tr>

<tr>
	<td valign="top" align="center">
			</td>
</tr>
</table>

				</div>
             </div>     
			 <!-- end of content aread --> 
			 </div>
                    <div id="footer">
			Powered by <a href="http://www.joomla.org">Joomla! 1.5</a> | Design by <a href="http://www.nukedesign.co.uk">NukeDesign</a> |
		<a href="http://validator.w3.org/check/referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
		 | <a href="http://www.hermish.com/check_this.cfm">508</a>
	    </div>    

        </div>
	</div>		
</body>
</html>


c'est vrai que si vous avez une methode ce serait top Smiley smile
lawrencium a écrit :
sauf que maintenant mon menu est a la vertical au lieu d'être a l'horizontal...
Le float était à supprimer sur les liens (éléments A et pas LI).
Sujet clos
Aller à