Hello!
Voilà pour mon premier post sur ce site!
ce qui m'amène c'est que j'ai besoin d'aide car je fais un site pour mes photos, et en gros je veux quelque chose de très simple, avec juste un défilement horizontal de mes photos avec le titre en bas.
Je fais donc ça avec des tableaux html, mais on m'a dit que c'était archi lourd comme manière de coder et que on pouvait le faire avec du css et que ce serait beaucoup plus optimal!
Si quelqu'un a une idée...
Je mets mon code ici (pitié ne hurlait pas, je suis débutant!!).
Le site est visible ici http://ab-photographic.com/test/decrescentia.html
Merci infiniment pour votre aide et vos conseils!
Modifié par Felipe (26 Mar 2015 - 11:53)
Voilà pour mon premier post sur ce site!
ce qui m'amène c'est que j'ai besoin d'aide car je fais un site pour mes photos, et en gros je veux quelque chose de très simple, avec juste un défilement horizontal de mes photos avec le titre en bas.
Je fais donc ça avec des tableaux html, mais on m'a dit que c'était archi lourd comme manière de coder et que on pouvait le faire avec du css et que ce serait beaucoup plus optimal!
Si quelqu'un a une idée...
Je mets mon code ici (pitié ne hurlait pas, je suis débutant!!).
Le site est visible ici http://ab-photographic.com/test/decrescentia.html
Merci infiniment pour votre aide et vos conseils!
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="fr">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body onload='AntiClickDroitImg()'>
<!-- Menu du site -->
<ul id="navigation">
<li><a href="index.html" class="header-logo">Antoine BERNARD</a></li>
<li><a href="about.html" title="A propos">A propos</a></li>
<li><a href="decrescentia.html" class="home-link" title="Decrescentia">In decrescentia</a></li>
<li><a href="incremento.html" title="Incremento">In incremento</a></li>
<li><a href="apostasia.html" title="Apostasia">In apostasia</a></li>
<li><a href="insomnia.html" title="Insomnia">In quiete</a></li>
<li><a href="derelictione.html" title="Derelictione">In derelictione</a></li>
<li><a href="tirages.html" title="Tirages">Tirages</a></li>
<li><a href="contact.php" title="Contact">Contact</a></li>
<li><a href="expositions.html" title="Expositions">Expositions</a></li>
</ul>
<!-- Contenu du site -->
<div id="tableau-principal">
<table border="0">
<tr>
<td>
<img alt="" src="decrescentia/Decrescentia09.jpg"/>
<p>Decrescentia 09</p>
</td>
<td>
<img alt="" src="decrescentia/Decrescentia10.jpg"/>
<p>Decrescentia 10</p>
</td>
<td>
<img alt="" src="decrescentia/Decrescentia10.jpg"/>
<p>Decrescentia 10</p>
</td>
<td>
<img alt="" src="decrescentia/Decrescentia10.jpg"/>
<p>Decrescentia 10</p>
</td>
<td>
<img alt="" src="decrescentia/Decrescentia10.jpg"/>
<p>Decrescentia 10</p>
</td>
</tr>
</table>
</div>
<!-- Script anti clic droit -->
<script type='text/javascript'>
/* */
</script>
<!-- Piwik -->
<script type="text/javascript">
/* */</script>
<noscript><p><img src="//ab-photographic.com/Statistiques/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
</body>
</html>
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: local('Bitter-Regular'), url(http://fonts.gstatic.com/s/bitter/v7/9BepFqYP2pW-mvfNqASDl-vvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
}
p{font-family: "Menlo", "Monaco", Monospace;font-size: 11px;
color: #aaa;}
h1{font-family: "Menlo", "Monaco", Monospace;font-size: 14px;
color: #222;line-height: 20px; font-weight: 700;}
blockquote{font-family: "Menlo", "Monaco", Monospace;font-size: 12px;
color: #222;line-height: 20px;}
body {background: white;width: 100%;}
header{background-color: green;border: 1px solid green;}
/* #tableau-principal{z-index: 9; } */
#tableau-principal td{ width: 100%;margin-right: 20px;padding-right: 20px;padding-left: 20px;padding-top: 50px;}
#tableau-principal td img{ width: 800px;}
#tableau-principal table {margin-top: 80px;width: 100%;/* border: 1px solid red; */}
#tableau-principal-contact td{ width: 100%;margin-right: 20px;padding-right: 20px;padding-left: 20px;}
#tableau-principal-contact table {margin-top: 80px;width: 100%;/* border: 1px solid red; */}
#tableau-principal-contact blockquote{ font-family: "Menlo", "Monaco", Monospace;font-size: 12px;
color: #222;line-height: 20px; margin-left: 10px;}
#tableau-secondaire table
{
border-collapse: collapse; width: auto; margin-top: 10px;/* Les bordures du tableau seront collées (plus joli) */
}
#tableau-secondaire td
{
border: 1px solid black;width: auto;
}
#tableau-secondaire th
{
border: 1px solid black;width: auto; background: #aaa;
}
#tableau-secondaire .titre {background: #e9e9e9;}
/* Partie haute */
#menu{border: 1px solid green; position: fixed;}
#presentation{border: 1px solid red; position: fixed;}
#navigation {
width: auto;
list-style: none;
margin-top: -40px;
padding: 0;position: fixed;
margin-left: 25px;
border-bottom: 3px solid black;
padding-bottom: 20px;
margin-bottom: 20px;
z-index: 10;
}
#navigation li {
display: inline;
}
#navigation li a {text-decoration: none;margin-top: 10px;font-family: "Menlo", "Monaco", Monospace;
color: #222; font-size: 11px; margin-right: 15px;
}
#navigation .home-link{ color: #427f9e;text-transform: uppercase;}
#navigation .header-logo{
color: #222;text-transform: uppercase; font-size: 15px; font-weight: 600;
}
/* iPhone 5 & 5S in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
.header__logo{display: none;}
}
/* iPhone 5 & 5S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
.header__logo{display: none;}
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
P.blocktext {
/*
margin-left: auto;
margin-right: auto;
*/
width: 6em;
/* text-align: left; */
}
.center-div{margin: 0 auto; }
/* Formulaire de contact */
#contact_form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:white;
/* padding:25px; */
}
#ff label {
cursor:pointer;
margin:4px 0;
font-family: "Menlo", "Monaco", Monospace;
color: #222; font-size: 12px;
display:block;
font-weight:800;
}
input {
display:block;
width:400px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background-color:#f4f4f4;
color:#000;
border:1px solid #5f5f5f;
padding:10px;
margin-bottom:25px;
}
.sendButton {
cursor:pointer;
/*
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
*/
background-color:white;
/*
-webkit-border-radius:16px;
-moz-border-radius:16px;
*/
/*
border-radius:16px;
border:1px solid #eeb44f;
*/
/*
color:#222;
font-family:Arial;
font-size:14px;
*/
font-family: "Menlo", "Monaco", Monospace;
color: #222; font-size: 12px;
width:auto;
/*
font-weight:bold;
text-shadow:1px 1px 0px #cc9f52;
*/
}
.sendButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
background-color:white;
}
Modifié par Felipe (26 Mar 2015 - 11:53)
