28173 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AST Intranet - Accueil</title>
<meta name="description" content="Joomla - le portail dynamique de gestion de contenu" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2006 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
	<link rel="shortcut icon" href="http://127.0.0.1/intranetast/images/favicon.ico" />
	<link href="templates/ast/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://127.0.0.1/intranetast/images/favicon.ico" />
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body id="page_bg">
<a name="up" id="up"></a>

<div id="center">
	<div id="main_bg">
  	<div id="content_bg">
			<div id="header">
				<div id="topmenu">
									</div>
			</div>
			
			<div id="pad2cinq">
				<div id="pifpoufpafway">
					<span class="pathway">Accueil </span>				</div>
								<div id="blockhaut">
										<div id="highlight" class="boxun">
								<div class="module">
			<div>
				<div>
					<div>
						<h3>Flash info</h3>
		<table class="contentpaneopen">
				<tr>
			<td valign="top" colspan="2">
				<img src="http://medias.lemonde.fr/mmpub/img/let/s.gif" border="0" alt="S" title="S" align="left" />&eacute;gol&egrave;ne Royal a &eacute;t&eacute; d&eacute;sign&eacute;e, jeudi 16 novembre, candidate du Parti socialiste (PS) pour la pr&eacute;sidentielle de 2007, remportant largement, d&egrave;s le premier tour, la primaire qui en fait la premi&egrave;re femme avec une chance r&eacute;elle d&#39;acc&eacute;der &agrave; la pr&eacute;sidence de la R&eacute;publique.			</td>
		</tr>
				</table>
		
		<span class="article_seperator">&nbsp;</span>
		
				  </div>
				</div>
			</div>
		</div>
							</div>
															<div id="highlight" class="boxdeux">
								<div class="moduletable">
							<h3>
					Derniers articles				</h3>
				<ul class="latestnews">
	<li class="latestnews">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=21" class="latestnews">
			Blabla med 1 test</a>
	</li>
		<li class="latestnews">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=2&amp;Itemid=21" class="latestnews">
			Actuadmin</a>
	</li>
		<li class="latestnews">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=21" class="latestnews">
			Blabla med 2 test</a>
	</li>
		<li class="latestnews">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=3&amp;Itemid=21" class="latestnews">
			Blabla</a>
	</li>
		<li class="latestnews">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=21" class="latestnews">
			Blabla admin 1 test</a>
	</li>
	</ul>		</div>
							</div>
															<div id="highlight" class="boxtrois">
								<div class="moduletable">
							<h3>
					Articles les plus lus				</h3>
				<ul class="mostread">
 	<li class="mostread">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=21" class="mostread">
			Blabla med 1 test</a>
 	</li>
 	 	<li class="mostread">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=21" class="mostread">
			Blabla med 2 test</a>
 	</li>
 	 	<li class="mostread">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=3&amp;Itemid=21" class="mostread">
			Blabla</a>
 	</li>
 	 	<li class="mostread">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=2&amp;Itemid=21" class="mostread">
			Actuadmin</a>
 	</li>
 	 	<li class="mostread">
		<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=21" class="mostread">
			Blabla admin 1 test</a>
 	</li>
 	</ul>		</div>
							</div>
			  </div>
								<div id="navigation">
							<div class="moduletable">
							<h3>
					Administratif				</h3>
				
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=blogcategory&amp;id=0&amp;Itemid=21" class="mainlevel" >Actualités administratives</a></td></tr>
<tr align="left"><td><a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=1&amp;Itemid=20" class="mainlevel" >Présentation du service</a></td></tr>
<tr align="left"><td><a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=blogcategory&amp;id=7&amp;Itemid=5" class="mainlevel" >Les réunions</a></td></tr>
<tr align="left"><td><a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=blogcategory&amp;id=8&amp;Itemid=6" class="mainlevel" >Comité d'entreprise</a></td></tr>
<tr align="left"><td><a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=blogcategory&amp;id=5&amp;Itemid=7" class="mainlevel" >Formations informatiques</a></td></tr>
<tr align="left"><td><a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=blogcategory&amp;id=10&amp;Itemid=8" class="mainlevel" >Imprimés</a></td></tr>
</table>		</div>
				            <div class="moduletable">
							<h3>
					Identification				</h3>
					<form action="http://127.0.0.1/intranetast/index.php" method="post" name="login" >
		
	<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
	<tr>
		<td>
			<label for="mod_login_username">
				Nom d'utilisateur			</label>
			<br />
			<input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" />
			<br />
			<label for="mod_login_password">
				Mot de passe			</label>
			<br />
			<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" />
			<br />
			<input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" />
			<label for="mod_login_remember">
				Se souvenir de moi			</label>
			<br />
			<input type="submit" name="Submit" class="button" value="Se connecter" />
		</td>
	</tr>
	<tr>
		<td>
			<a href="http://127.0.0.1/intranetast/index.php?option=com_registration&amp;task=lostPassword">
				Mot de passe oublié&nbsp;?</a>
		</td>
	</tr>
			<tr>
			<td>
				Pas encore de compte&nbsp;?				<a href="http://127.0.0.1/intranetast/index.php?option=com_registration&amp;task=register">
					Enregistrez-vous</a>
			</td>
		</tr>
			</table>
	
	<input type="hidden" name="option" value="login" />
	<input type="hidden" name="op2" value="login" />
	<input type="hidden" name="lang" value="french" />
	<input type="hidden" name="return" value="http://127.0.0.1/intranetast/index.php" />
	<input type="hidden" name="message" value="0" />
	<input type="hidden" name="j5a6610d606d098ff14d7c7228df11346" value="1" />
	</form>
			</div>
				<div class="moduletable">
							<h3>
					Derniers documents				</h3>
				
<br />No documents		</div>
									<div class="moduletable">
			
<form action="index.php?option=com_search" method="get">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="Rechercher..."  onblur="if(this.value=='') this.value='Rechercher...';" onfocus="if(this.value=='Rechercher...') this.value='';" />	</div>

	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="" />	
</form>		</div>
									<div class="moduletable">
							<h3>
					Qui est en ligne				</h3>
				Il y a actuellement 1 invité et 1 membre en ligne		</div>
						</div>
				<div id="content">
					<table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div>			<table class="contentpaneopen">
			<tr>
								<td class="contentheading" width="100%">
					Blabla admin 1 test									</td>
					  </tr>
			</table>
			
		<table class="contentpaneopen">
					<tr>
				<td width="70%" align="left" valign="top" colspan="2">
					<span class="small">
						 Écrit par john </span></td>
			</tr>
						<tr>
				<td valign="top" colspan="2" class="createdate">
					17-11-2006				</td>
			</tr>
					<tr>
			<td valign="top" colspan="2">
				<img src="http://medias.lemonde.fr/mmpub/img/let/s.gif" border="0" alt="S" title="S" align="left" />&eacute;gol&egrave;ne Royal a &eacute;t&eacute; d&eacute;sign&eacute;e, jeudi 16 novembre, candidate du Parti socialiste (PS) pour la pr&eacute;sidentielle de 2007, remportant largement, d&egrave;s le premier tour, la primaire qui en fait la premi&egrave;re femme avec une chance r&eacute;elle d&#39;acc&eacute;der &agrave; la pr&eacute;sidence de la R&eacute;publique.			</td>
		</tr>
					<tr>
				<td colspan="2" align="left" class="modifydate">
					 Dernière mise à jour&nbsp;: ( 17-11-2006 )
				</td>
			</tr>
							<tr>
					<td align="left" colspan="2">
						<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=21" class="readon">
							Lire la suite...</a>
					</td>
				</tr>
					  </table>
		
		<span class="article_seperator">&nbsp;</span>
		
		</div></td></tr><tr><td valign="top"><table width="100%"  cellpadding="0" cellspacing="0"><tr><td valign="top" width="50%">			<table class="contentpaneopen">
			<tr>
								<td class="contentheading" width="100%">
					Blabla med 1 test									</td>
						</tr>
			</table>
			
		<table class="contentpaneopen">
					<tr>
				<td width="70%" align="left" valign="top" colspan="2">
					<span class="small">
						 Écrit par john </span></td>
			</tr>
						<tr>
				<td valign="top" colspan="2" class="createdate">
					17-11-2006				</td>
			</tr>
					<tr>
			<td valign="top" colspan="2">
				<img src="http://medias.lemonde.fr/mmpub/img/let/s.gif" border="0" alt="S" title="S" align="left" />&eacute;gol&egrave;ne Royal a &eacute;t&eacute; d&eacute;sign&eacute;e, jeudi 16 novembre, candidate du Parti socialiste (PS) pour la pr&eacute;sidentielle de 2007, remportant largement, d&egrave;s le premier tour, la primaire qui en fait la premi&egrave;re femme avec une chance r&eacute;elle d&#39;acc&eacute;der &agrave; la pr&eacute;sidence de la R&eacute;publique.			</td>
		</tr>
					<tr>
				<td colspan="2" align="left" class="modifydate">
					 Dernière mise à jour&nbsp;: ( 17-11-2006 )
				</td>
			</tr>
							<tr>
					<td align="left" colspan="2">
						<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=21" class="readon">
							Lire la suite...</a>
					</td>
				</tr>
					  </table>
		
		<span class="article_seperator">&nbsp;</span>
		
		</td><td valign="top" width="50%">			<table class="contentpaneopen">
			<tr>
								<td class="contentheading" width="100%">
					Blabla med 2 test									</td>
						</tr>
			</table>
			
		<table class="contentpaneopen">
					<tr>
				<td width="70%" align="left" valign="top" colspan="2">
					<span class="small">
						 Écrit par john </span>&nbsp;				</td>
			</tr>
						<tr>
				<td valign="top" colspan="2" class="createdate">
					17-11-2006				</td>
			</tr>
					<tr>
			<td valign="top" colspan="2">
				<img src="http://medias.lemonde.fr/mmpub/img/let/s.gif" border="0" alt="S" title="S" align="left" />&eacute;gol&egrave;ne Royal a &eacute;t&eacute; d&eacute;sign&eacute;e, jeudi 16 novembre, candidate du Parti socialiste (PS) pour la pr&eacute;sidentielle de 2007, remportant largement, d&egrave;s le premier tour, la primaire qui en fait la premi&egrave;re femme avec une chance r&eacute;elle d&#39;acc&eacute;der &agrave; la pr&eacute;sidence de la R&eacute;publique.			</td>
		</tr>
					<tr>
				<td colspan="2" align="left" class="modifydate">
					 Dernière mise à jour&nbsp;: ( 17-11-2006 )
				</td>
			</tr>
							<tr>
					<td align="left" colspan="2">
						<a href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=21" class="readon">
							Lire la suite...</a>
					</td>
				</tr>
					  </table>
		
		<span class="article_seperator">&nbsp;</span>
		
		</td></tr></table></td></tr><tr><td valign="top"><div class="blog_more">			<div>
				<strong>
				Suite...				</strong>
			</div>
					<ul>
					<li>
				<a class="blogsection" href="http://127.0.0.1/intranetast/index.php?option=com_content&amp;task=view&amp;id=3&amp;Itemid=21">
					Blabla</a>
			</li>
					</ul>
		</div></td></tr><tr><td valign="top" align="center"><span class="pagenav">&lt;&lt; Début</span> <span class="pagenav">&lt; Précédente</span> <span class="pagenav">1</span> <a href="http://127.0.0.1/intranetast/index.php?option=com_frontpage&amp;Itemid=1&amp;limit=4&amp;limitstart=4" class="pagenav"><strong>2</strong></a> <a href="http://127.0.0.1/intranetast/index.php?option=com_frontpage&amp;Itemid=1&amp;limit=4&amp;limitstart=4 " class="pagenav" title="Suivante">Suivante &gt;</a> <a href="http://127.0.0.1/intranetast/index.php?option=com_frontpage&amp;Itemid=1&amp;limit=4&amp;limitstart=4 " class="pagenav" title="Fin">Fin &gt;&gt;</a><br /><br /></td></tr><tr><td valign="top" align="center">Résultats 1 - 4 sur 5</td></tr></table>				</div>

				<div id="footer">
					Copyright © 1999-2006 john john industry - Tous droits réservés.  Nous contacter.				</div>
			</div>
		</div>
 	</div>
</div>
</body>
</html>
<!-- 1164033355 -->


il n'y a rien devant le doctype car j'ai viré le echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
Modifié par r4z (20 Nov 2006 - 16:02)
Modérateur
Ton identifiant "highlight" apparaît trois fois dans ton code source... Un identifiant ne doit apparaître qu'une seule fois dans une page donc soit tu en supprimes deux soit tu le passes en classe. Pour les classes, tu peux les combiner en écrivant par exemple :
class="boxun highlight"
Tu l'aurais vu si tu avais passé ton document au validateur, comme je te l'ai précisé... Smiley cligne
merci, je ne suis pas un habitué des validateurs, mais quelle est la différence au final ?

edit: j'ai remis comme je l'avais fait au départ car mes boxun, boxdeux et boxtrois ne sont plus côte à côte sinon.
Modifié par r4z (21 Nov 2006 - 10:43)
Voici mon code réel koala64:

				<div id="blockhaut">
					<?php if (mosCountModules('top')) { ?>
					<div id="highlight" class="boxun">
						<?php mosLoadModules( 'top', -3); ?>
					</div>
					<?php }?>
					<?php if (mosCountModules('user1')) { ?>
					<div id="highlight" class="highlight.boxdeux">
						<?php mosLoadModules( 'user1', -2); ?>
					</div>
					<?php } ?>
					<?php if (mosCountModules('user2')) { ?>
					<div id="highlight" class="highlight.boxtrois">
						<?php mosLoadModules( 'user2', -2); ?>
					</div>
					<?php }?>
				</div>



et les classes et id correspondantes:

#blockhaut{
	padding: 0px;
	margin: 0px;
}

#highlight {
	background-color: #EEE8DF;
	border: 5px solid #F3EFE9;
	padding: 0px;
	margin-left: 5px;
	width: 180px;
	height: 140px;
	float:left;
	overflow:hidden;
}

#highlight.boxun {
	margin-left:0px;
}
#highlight.boxdeux {
	margin-left:5px;
}
#highlight.boxtrois {
	margin-left:5px;
}


voilà, c'est sans doute pas optimisé, mais jessaie déjà de faire en sorte que ça fonctionne lol (surtout avec IE et momo)
Modifié par r4z (21 Nov 2006 - 11:09)
Pages :