Centrage
Résolu
valttt
Messages postés
299
Date d'inscription
Statut
Membre
Dernière intervention
-
valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention -
valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite center horizontalement mon tableau sur ma page.
Il est actuellement décalé sur la gauche. Étant débutant, il y a surement des erreurs.
En espérant que vous puissiez m'aider, merci d'avance...
Voici mes codes:
HTML:
<!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 name="generator" content="JMBerthier - Galerie Photo XHTML" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Autour de la Guitare</title>
<link rel="stylesheet" type="text/css" href="photo.css" />
<SCRIPT LANGUAGE="JavaScript">
<!-- Ce script et d'autres sont sur le code java GRATUIT -->
<!-- LE CODE JAVA - https://www.lecodejava.com/ -->
<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>
</HEAD>
<div id="header">
<div id="menu_tab">
<ul class="menu">
<li class="divider"></li>
<li><a href="accueil.html" class="nav"> Accueil </a></li>
<li><a href="photo.html" class="nav_selected"> Photos_Videos </a></li>
<li><a href="agenda.html" class="nav"> Agenda </a></li>
<li><a href="forum" class="nav"> Forum </a></li>
<li><a href="espace" class="nav"> Espace Membres </a></li>
<li><a href="contact.html" class="nav"> Contact </a></li>
</ul>
</div>
</div>
<table width=700 border=0 cellspacing=20 cellpadding=0>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<div class="z"> </div>
<tr>
<td colspan=7 align=center><img name="mainpic" src="1.jpg" width=755 height=570 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('1.jpg');"><img src="1.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('2.jpg');"><img src="2.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('3.jpg');"><img src="3.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('4.jpg');"><img src="4.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('5.jpg');"><img src="5.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('6.jpg');"><img src="6.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('7.jpg');"><img src="7.jpg" width=90 height=60 border=0></a></td>
</tr>
</table>
</html>
CSS:
html {
margin:0;
padding:0;
background: url(Images/bg2.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
}
a{
text-decoration:underline;
color:#BF2F68;
}
#header{
width:980px;
height:109px;
margin:auto;
background:url(images/top_menu_bg.png) no-repeat center;behavior: url(iepngfix.htc);
}
.logo{
padding:15px 0 0 0;
float:left;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width:1030px;
float:left;
padding:15px;
}
ul.menu {
list-style-type:none; display:block; width:630px;
margin: auto; padding:65px 60px 0 0; background:none;}
ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}
ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #BF2F68;}
a.nav:hover {
color: #BF2F68; text-decoration:none;}
/*----------------main_content----------------*/
#main_content{
width:902px;
clear:both;
background-color:transparent;
height:50px;
margin:20px 0 0 0;
padding:3px 0 0 250px;
}
#center_content{
width:902px;
float:left;
height:500px;
padding:10px 0 30px 100px;
}
.title{
clear:both;
padding:5px 0 10px 0;
color:#FFFFFF;
}
.title a{
color:#DF6195;
text-decoration:underline;
}
/*---------------------pagination-----------------------------*/
div.pagination {
padding:5px;
margin:5px;
text-align:center;
float:left;
font-size:10px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #d8325d;
}
div.pagination a:hover, div.pagination a:active {
border:1px solid #ddd;
color: #fff;
background-color: #d8325d;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
font-weight: bold;
background-color: #d8325d;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
color: #ccc;
}
/*----footer---------*/
#footer{
width:auto;
clear:both;
padding:725px 0 10px 325px;
margin:10px 0 0 0;
height:15px;
text-align:center;
font-size:16px;
color:#a6f2a4;
}
.center_footer{
float:left;
padding:10px 0 0 100px;
}
Je souhaite center horizontalement mon tableau sur ma page.
Il est actuellement décalé sur la gauche. Étant débutant, il y a surement des erreurs.
En espérant que vous puissiez m'aider, merci d'avance...
Voici mes codes:
HTML:
<!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 name="generator" content="JMBerthier - Galerie Photo XHTML" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Autour de la Guitare</title>
<link rel="stylesheet" type="text/css" href="photo.css" />
<SCRIPT LANGUAGE="JavaScript">
<!-- Ce script et d'autres sont sur le code java GRATUIT -->
<!-- LE CODE JAVA - https://www.lecodejava.com/ -->
<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>
</HEAD>
<div id="header">
<div id="menu_tab">
<ul class="menu">
<li class="divider"></li>
<li><a href="accueil.html" class="nav"> Accueil </a></li>
<li><a href="photo.html" class="nav_selected"> Photos_Videos </a></li>
<li><a href="agenda.html" class="nav"> Agenda </a></li>
<li><a href="forum" class="nav"> Forum </a></li>
<li><a href="espace" class="nav"> Espace Membres </a></li>
<li><a href="contact.html" class="nav"> Contact </a></li>
</ul>
</div>
</div>
<table width=700 border=0 cellspacing=20 cellpadding=0>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<div class="z"> </div>
<tr>
<td colspan=7 align=center><img name="mainpic" src="1.jpg" width=755 height=570 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('1.jpg');"><img src="1.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('2.jpg');"><img src="2.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('3.jpg');"><img src="3.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('4.jpg');"><img src="4.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('5.jpg');"><img src="5.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('6.jpg');"><img src="6.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('7.jpg');"><img src="7.jpg" width=90 height=60 border=0></a></td>
</tr>
</table>
</html>
CSS:
html {
margin:0;
padding:0;
background: url(Images/bg2.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
}
a{
text-decoration:underline;
color:#BF2F68;
}
#header{
width:980px;
height:109px;
margin:auto;
background:url(images/top_menu_bg.png) no-repeat center;behavior: url(iepngfix.htc);
}
.logo{
padding:15px 0 0 0;
float:left;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width:1030px;
float:left;
padding:15px;
}
ul.menu {
list-style-type:none; display:block; width:630px;
margin: auto; padding:65px 60px 0 0; background:none;}
ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}
ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #BF2F68;}
a.nav:hover {
color: #BF2F68; text-decoration:none;}
/*----------------main_content----------------*/
#main_content{
width:902px;
clear:both;
background-color:transparent;
height:50px;
margin:20px 0 0 0;
padding:3px 0 0 250px;
}
#center_content{
width:902px;
float:left;
height:500px;
padding:10px 0 30px 100px;
}
.title{
clear:both;
padding:5px 0 10px 0;
color:#FFFFFF;
}
.title a{
color:#DF6195;
text-decoration:underline;
}
/*---------------------pagination-----------------------------*/
div.pagination {
padding:5px;
margin:5px;
text-align:center;
float:left;
font-size:10px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #d8325d;
}
div.pagination a:hover, div.pagination a:active {
border:1px solid #ddd;
color: #fff;
background-color: #d8325d;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
font-weight: bold;
background-color: #d8325d;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
color: #ccc;
}
/*----footer---------*/
#footer{
width:auto;
clear:both;
padding:725px 0 10px 325px;
margin:10px 0 0 0;
height:15px;
text-align:center;
font-size:16px;
color:#a6f2a4;
}
.center_footer{
float:left;
padding:10px 0 0 100px;
}
