[Design Extensible]

Question

Vazaroth

8 Dec 2013 à 01:25

Salut,

Bonjour,

Je suis en train de créer le site web de mon père, je le veux fluide pour que je ne m’embête pas avec des médias queries qui prendrait un temps FOU ! ><

par contre j'arrive pas à gérer les margin pour qu'ils reste la où je veux en fonction de l'image du background.

Le site : http://www.dumasconstructions.fr/choix-accueil.php

HTML5:

<!DOCTYPE html>
 
<html>
<head>
<title>Dumas Constructions</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link type="text/css" rel="stylesheet" href="style-choix.css" />
<script type="text/javascript">
<!--
// Texte à faire défiler :
var texte = "Crédit d'impôt 2014, Les dernières informations et Tarifs de ventes photovoltaïques trimestre 4";
 
var vitesse = "10";     //vitesse de défilement (en ms)
var pas = 2;            //pas de défilement (en px)
var sens = 1;  //1=> de la droite vers la gauche (par défaut)
               //-1=> de la gauche vers la droite
 
// Fonctions du diaporama              
var conteneur , chrono, X;
 
function creationDiaporama()
{
  var noeudDiv, noeudTxt, crlf, noeudSpan;
   
  conteneur = document.getElementById("conteneur");
   
  noeudDiv = document.createElement("div");
  noeudSpan = document.createElement("span");
  crlf = document.createElement("nobr");
  noeudTxt = document.createTextNode(texte);
   
   
  crlf.appendChild(noeudTxt);
  noeudSpan.appendChild(crlf);
  noeudDiv.appendChild(noeudSpan);
  conteneur.appendChild(noeudDiv);
   
  noeudDiv.style.textAlign = "center";
  noeudDiv.style.padding = "0px";
  noeudDiv.style.margin = "0px";
     
  noeudSpan.className = "aspectTexte";
 
  if (noeudSpan.offsetWidth<conteneur.scrollWidth)
    noeudDiv.style.width = conteneur.scrollWidth*3+"px";
  else
    noeudDiv.style.width = noeudSpan.scrollWidth*3+"px";
 
  if (sens!=-1 && sens!=1)
    sens = 1;
   
  if (sens==1) 
    X = 0;
  else
  {
    conteneur.scrollLeft = conteneur.scrollWidth; 
    X = conteneur.scrollLeft;
  }
   
  chrono = setTimeout("defile()",vitesse);
}
 
// Défilement du texte
function defile()
{
  X = X + (sens)*pas;
  conteneur.scrollLeft = X;
   
  if (sens==1)
  {
    if (conteneur.scrollLeft<X)
      X = 0;
    chrono = setTimeout("defile()",vitesse);
  }
  else
  {
    if (conteneur.scrollLeft==0)
    {
        conteneur.scrollLeft = conteneur.scrollWidth;
        X = conteneur.scrollLeft;
    }
    chrono = setTimeout("defile()",vitesse);
  }
}
 
// Arret du défilement lorsque l'on ferme la page
function stopDiaporama()
{
  clearTimeout(chrono);
}
 
// Reprise du défilement lorsque l'on sort du cadre
function repriseDiaporama()
{
    chrono = setTimeout("defile()",vitesse);
}
  
//-->
</script>
</head>
<body onload="creationDiaporama()" onunload="stopDiaporama()">
 
<p id="construction"><a href="constructions.php">Batiments Traditionnels</a></p>
 
<div id="conteneur" class="conteneur" onMouseOver="clearTimeout(chrono);" onMouseOut="repriseDiaporama()">
</div>
 
<p id="enr"><a href="enr.php">Ernergies Renouvelables</a></p>
 
</body>
 
</html>

Le CSS qui va avec :

@font-face
{
    font-family: "prototype";
    src: url('font/prototype.ttf');
}
 
html, body
{
    font-family: prototype;
    margin : 0;
    padding : 0;
    width : 100%;
    background-size: contain;
    background-size: 100% 100%;
    background-image: url(img/choix.png);
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-position: absolute;
    overflow: hidden;
    -webkit-animation: body 2s 1;
    -moz-animation: body 2s 1;
    -o-animation: body 2s 1;
    animation: body 2s 1;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
}
 
@-webkit-keyframes body {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
 
@-moz-keyframes body {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
 
@-o-keyframes body {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
 
@keyframes body {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
 
#construction
{
    font-size: 2.5em;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 8em;
}
 
#construction a
{
    font-weight: bold;
    color: black;
    text-decoration: none;
    padding: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 10px #343434;
    -webkit-box-shadow: 0px 0px 10px #343434;
    -o-box-shadow: 0px 0px 10px #343434;
    box-shadow: 0px 0px 10px #343434;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #656565;
    background:#cfcfcf;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfcfcf", endColorstr="#656565"); /* Pour IE seulement et mode gradient à linear */
    background: -webkit-gradient(radial,center center,0,center center,100, from(#cfcfcf), to(#656565));
    background: -moz-radial-gradient(center center, circle contain, #cfcfcf, #656565);
    background: -o-radial-gradient(#cfcfcf, #656565);
    background: -ms-radial-gradient(#cfcfcf, #656565);
    background: radial-gradient(#cfcfcf, #656565);
}
 
#enr
{
    font-size: 2.5em;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 2em;
}
 
#enr a
{
    font-weight: bold;
    color: black;
    text-decoration: none;
    padding: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 10px #343434;
    -webkit-box-shadow: 0px 0px 10px #343434;
    -o-box-shadow: 0px 0px 10px #343434;
    box-shadow: 0px 0px 10px #343434;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #656565;
    background:#cfcfcf;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfcfcf", endColorstr="#656565"); /* Pour IE seulement et mode gradient à linear */
    background: -webkit-gradient(radial,center center,0,center center,100, from(#cfcfcf), to(#656565));
    background: -moz-radial-gradient(center center, circle contain, #cfcfcf, #656565);
    background: -o-radial-gradient(#cfcfcf, #656565);
    background: -ms-radial-gradient(#cfcfcf, #656565);
    background: radial-gradient(#cfcfcf, #656565);
}
 
<!--
.conteneur
{
    margin-top: 6.5em;
    -moz-box-shadow: 0px 0px 10px #343434;
    -webkit-box-shadow: 0px 0px 10px #343434;
    -o-box-shadow: 0px 0px 10px #343434;
    box-shadow: 0px 0px 10px #343434;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: 1px solid #656565;
    background:#000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#656565"); /* Pour IE seulement et mode gradient à linear */
    background: -webkit-gradient(radial,center center,0,center center,100, from(#000000), to(#656565));
    background: -moz-radial-gradient(center center, circle contain, #000000, #656565);
    background: -o-radial-gradient(#000000, #656565);
    background: -ms-radial-gradient(#000000, #656565);
    background: radial-gradient(#000000, #656565);
 
    overflow: hidden;   /* on cache les barres de défilement */
    padding: 10px 10px 10px 10px;
}
 
/* style du texte qui doit défiler */
 
.aspectTexte{
    font-size: 1.5em;
    font-family: Comic Sans MS;
    color: white;
    text-decoration: none;
}
-->

Autant vous dire que je suis en train de devenir fou ><

Peter-L

8 Dec 2013 à 09:37

Bonjour Vazaroth

Tu dis ... je le veux fluide pour que je ne m’embête pas avec des médias queries qui prendrait un temps FOU !

Alors en fait tu gagnerais vraiment beaucoup de temps à utiliser les média queries justement!!!! Smiley sweatdrop

Imagines le temps que tu passes à te rendre fou pour des margin relatives qui ne restent pas en place... alors qu'avec les media queries c'est réglé en 2 lignes CSS.

Sinon tu peux utiliser des framework de type Bootstrap qui te facilite la vie avec des grilles fluides .
Modifié par Peter-L (08 Dec 2013 - 09:38)

Vazaroth

8 Dec 2013 à 18:52

Salut,

J'ai regardé un peu, il faut apparemment apprendre le less, n'est ce pas ? Pas d'autres solutions que de passer par un framework ?

Peter-L

8 Dec 2013 à 18:59

non t'as besoin d'apprendre le less pour utiliser bootstrap Smiley rolleyes

C'est juste des class pré-conçues que tu rajoutes pour dans ton html pour donner une grille fluide à ta page. Bon j'ai simplifié mais l'idée est là.

Aprés l'autre solution ce sont les média queries

Vazaroth

8 Dec 2013 à 20:13

D'accord, mais la je sais pas trop comment m'y prendre pour l'adapté sur mon site en faite ^^

Sujet clos

CSS et mise en forme, CSS3

[Design Extensible]