Résolu Centré quelque chose : CSS

deleted535977 · 7 Mai 2017

Salut

Je voudrait centré ce bloc:

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Voici mon CSS

Code:

.portofolio {
  background-color: #ffffff;
}

.portofolio {
  text-align: center;

}

.portofolio  .item-folio {
  height: 120px;
  background-color:  #3498DB;
 
}

Je tag les personne qui pourrait m'aide :

@Thibeault & @Walky SEC

Merci a vous les gars

Bonne Soirée

Peaky Blinders · 7 Mai 2017

Code:

margin-left: auto;
margin-right: auto;

ou

Code:

margin:auto;

deleted535977 · 7 Mai 2017

Peaky Blinders a dit:
Code:

margin-left: auto; margin-right: auto;

ou

Code:

margin:auto;

Rien ce passe

Code:

.portofolio  .item-folio {
  height: 120px;
  background-color:  #3498DB;
  margin-left: auto;
  margin-right: auto;
}

deleted577633 · 7 Mai 2017

Weyzen` a dit:
Rien ce passe

Code:

.portofolio .item-folio { height: 120px; background-color: #3498DB; margin-left: auto; margin-right: auto; }

background-position: center; ?

deleted535977 · 7 Mai 2017

Empty-Hack.com 201 a dit:
background-position: center; ?

Rien

CODE HTML :

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Weyzen</title>
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <!-- Fin Font -->

  <!-- CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <<link rel="shortcut icon" href="img/ban.png">
  <!-- Fin CSS -->
</head>

<body>

  <!-- Début du Header -->
  <header class="container-fluid header">
<div class="container">
  <a href="#" class="logo"> Weyzen </a>
  <nav class="menu">
    <a href="#"> Home </a>
    <a href="#about"> A propos </a>
    <a href="#portofolio"> Portofolio </a>
    <a href="#contact"> Contact </a>
  </nav>
</div>

  </header>
  <!-- Fin Du Header -->

<!-- bannière du site -->
<section class="container-fluid banner">
 <div class="ban">
   <img src="img/ban.png" alt="bannière" />
 </div>
<div class="inner-banner">
  <h1> WEYZEN </h1>
   <button class="btn btn-custon"> Contact Me </button>

</div>
</section>
<!-- Fin de la bannière du sie -->

<!-- A propos -->
<section class="container-fluid about">
  <div class="container">
    <div class="row">
      <h2 id="about"> A propos de moi </h2>
      <hr class="separator">
      <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
       <h2> Equipe</h2>
       <p>
           Salut a tous
       </p>
      </article>
      <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
       <h2> Présentation</h2>
       <p>
           Présentation de moi
       </p>
      </article>
      <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
       <h2> Passion</h2>
       <p>
           Passion
       </p>
      </article>

    </div>
  </div>
</section>
<!-- Fin de a propos -->

<!-- Portofolio -->
<section class="container-fluid portofolio">
<div class="container">
  <h2 id="portofolio"> Mon Portofolio </h2>
  <hr class="separator">
  <article class="col-ad-3 col-lg-3 col-xs-12 col-sm-12 item-folio">


  </article>
  <article class="col-ad-3 col-lg-3 col-xs-12 col-sm-12 item-folio">


  </article>
  <article class="col-ad-3 col-lg-3 col-xs-12 col-sm-12 item-folio">


  </article>

</div>
</section>
<!-- Fin du portofolio -->

<!-- Footer / Contact -->
<footer class="container-fluid footer">
 <div class="container">
               <div class="row">
               <div class="span6">
               <form>
               <div class="controls controls-row">
                       <input id="name" name="name" type="text" class="span3" placeholder="Nom">
                       <input id="email" name="email" type="email" class="span3" placeholder="Email">
               </div>
               <div class="controls">
                   <textarea id="message" name="message" class="span6" placeholder="Message" rows="5"></textarea>
               </div>

               <div class="controls">
                    <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Envoyé</button>
               </div>
           </form>
       </div>
</div>
 </div>
</footer>
<!-- Fin du Footer / Contact -->

</body>
</html>

CODE CSS:

Code:

@charset "UTF-8";

/* font-family: 'Raleway', sans-serif; */
/* bleu clair --> 3498DB */
/* bleu foncé --> #2C3E50 */

body, html {
  padding 0;
  margin 0;
}

body {
  font-family: 'Raleway', sans-serif;
}

a, a:hover {
  text-decoration: none;
}

.container-fluid {
  padding: 0;
}

.separator {
  height: 3px;
  width: 5%;
  border: none;
  box-shadow: none;
  background-color: #3498DB;
}

 /* header */
.header {
  background-color: #3498DB;
  height: 70px;
  line-height: 70px;
}

.logo {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  float: left;
}

.menu {
  float: right;
}

.menu a {
  color: #ffffff;
  margin-right: 20px;
}

.menu a:hover {
  color: #2C3E50;
}


 /* bannière */
.banner {
  width: 100%;
  max-width: 100%;
}

.ban {
  width: 100%;
  max-width: 100%;
  position: relative;
}

.ban img {
  width: 100%;
  max-width: 100%;
}

.inner-banner {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}
.inner-banner h1 {
  color: #ffffff;
  text-shadow: 1px 1px 20px #f00000;
}

.inner-banner .btn.custom {
  background-color: #3498DB;
  color: #ffffff;
}

inner-banner .btn-custom:hover {
  background-color: #2C3E50;
}

 /* about */
#about {
  text-align: center;
  padding-top: 10%;
}

.about article {
  margin-top: 10%;
}

.about article h2 {
  text-align: center;
}

 /* portofolio */

.portofolio {
  background-color: #ffffff;
}

.portofolio {
  text-align: center;

}

.portofolio  .item-folio {
  height: 120px;
  background-color:  #3498DB;
  background-position: center;
}
 /* contact*/

MRN. · 8 Mai 2017

Weyzen` a dit:

Rien

CODE HTML :

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Weyzen</title>
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <!-- Fin Font -->

  <!-- CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <<link rel="shortcut icon" href="img/ban.png">
  <!-- Fin CSS -->
</head>

<body>

  <!-- Début du Header -->
  <header class="container-fluid header">
<div class="container">
  <a href="#" class="logo"> Weyzen </a>
  <nav class="menu">
    <a href="#"> Home </a>
    <a href="#about"> A propos </a>
    <a href="#portofolio"> Portofolio </a>
    <a href="#contact"> Contact </a>
  </nav>
</div>

  </header>
  <!-- Fin Du Header -->

<!-- bannière du site -->
<section class="container-fluid banner">
 <div class="ban">
   <img src="img/ban.png" alt="bannière" />
 </div>
<div class="inner-banner">
  <h1> WEYZEN </h1>
   <button class="btn btn-custon"> Contact Me </button>

</div>
</section>
<!-- Fin de la bannière du sie -->

<!-- A propos -->
<section class="container-fluid about">
  <div class="container">
    <div class="row">
      <h2 id="about"> A propos de moi </h2>
      <hr class="separator">
      <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
       <h2> Equipe</h2>
       <p>
           Salut a tous
       </p>
      </article>
      <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
       <h2> Présentation</h2>
       <p>
           Présentation de moi
       </p>
      </article>
      <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
       <h2> Passion</h2>
       <p>
           Passion
       </p>
      </article>

    </div>
  </div>
</section>
<!-- Fin de a propos -->

<!-- Portofolio -->
<section class="container-fluid portofolio">
<div class="container">
  <h2 id="portofolio"> Mon Portofolio </h2>
  <hr class="separator">
  <article class="col-ad-3 col-lg-3 col-xs-12 col-sm-12 item-folio">


  </article>
  <article class="col-ad-3 col-lg-3 col-xs-12 col-sm-12 item-folio">


  </article>
  <article class="col-ad-3 col-lg-3 col-xs-12 col-sm-12 item-folio">


  </article>

</div>
</section>
<!-- Fin du portofolio -->

<!-- Footer / Contact -->
<footer class="container-fluid footer">
 <div class="container">
               <div class="row">
               <div class="span6">
               <form>
               <div class="controls controls-row">
                       <input id="name" name="name" type="text" class="span3" placeholder="Nom">
                       <input id="email" name="email" type="email" class="span3" placeholder="Email">
               </div>
               <div class="controls">
                   <textarea id="message" name="message" class="span6" placeholder="Message" rows="5"></textarea>
               </div>

               <div class="controls">
                    <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Envoyé</button>
               </div>
           </form>
       </div>
</div>
 </div>
</footer>
<!-- Fin du Footer / Contact -->

</body>
</html>

CODE CSS:

Code:

@charset "UTF-8";

/* font-family: 'Raleway', sans-serif; */
/* bleu clair --> 3498DB */
/* bleu foncé --> #2C3E50 */

body, html {
  padding 0;
  margin 0;
}

body {
  font-family: 'Raleway', sans-serif;
}

a, a:hover {
  text-decoration: none;
}

.container-fluid {
  padding: 0;
}

.separator {
  height: 3px;
  width: 5%;
  border: none;
  box-shadow: none;
  background-color: #3498DB;
}

 /* header */
.header {
  background-color: #3498DB;
  height: 70px;
  line-height: 70px;
}

.logo {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  float: left;
}

.menu {
  float: right;
}

.menu a {
  color: #ffffff;
  margin-right: 20px;
}

.menu a:hover {
  color: #2C3E50;
}


 /* bannière */
.banner {
  width: 100%;
  max-width: 100%;
}

.ban {
  width: 100%;
  max-width: 100%;
  position: relative;
}

.ban img {
  width: 100%;
  max-width: 100%;
}

.inner-banner {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}
.inner-banner h1 {
  color: #ffffff;
  text-shadow: 1px 1px 20px #f00000;
}

.inner-banner .btn.custom {
  background-color: #3498DB;
  color: #ffffff;
}

inner-banner .btn-custom:hover {
  background-color: #2C3E50;
}

 /* about */
#about {
  text-align: center;
  padding-top: 10%;
}

.about article {
  margin-top: 10%;
}

.about article h2 {
  text-align: center;
}

 /* portofolio */

.portofolio {
  background-color: #ffffff;
}

.portofolio {
  text-align: center;

}

.portofolio  .item-folio {
  height: 120px;
  background-color:  #3498DB;
  background-position: center;
}
 /* contact*/

Salut! Tu as trouvé ? car moi ton code donne ça :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

je fais des études en informatique donc n'hésite pas à me demander

voilà mon dernier projet réalisé pour un cours :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

deleted535977 · 8 Mai 2017

MRN. a dit:
Salut! Tu as trouvé ? car moi ton code donne ça :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

je fais des études en informatique donc n'hésite pas à me demander voilà mon dernier projet réalisé pour un cours :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Salut

Nan j'ai pas trouve

MRN. · 8 Mai 2017

Weyzen` a dit:
Salut

Nan j'ai pas trouve

contacte mp

Rivals · 13 Mai 2017

Weyzen` a dit:
Rien ce passe

Code:

.portofolio .item-folio { height: 120px; background-color: #3498DB; margin-left: auto; margin-right: auto; }

Ajoute une largeur (width: XXXpx

deleted535977 · 13 Mai 2017

Rivals a dit:
Ajoute une largeur (width: XXXpx

Salut

Je voudrait pas trop dérange mais tu peut change mon code avec le tien

Rivals · 13 Mai 2017

Weyzen` a dit:
Salut

Je voudrait pas trop dérange mais tu peut change mon code avec le tien

Il suffit de rajouter une largeur ^^

deleted535977 · 13 Mai 2017

Rivals a dit:
Il suffit de rajouter une largeur ^^

Ah ok

Wazau · 29 Mai 2017

Pas très propre de faire cela si on cherche a réaliser un site responsive.
Il faut faire attention que ton site ne soit pas coder que pour ta résolution d'écran à toi.

deleted535977 · 29 Mai 2017

Wazau a dit:
Pas très propre de faire cela si on cherche a réaliser un site responsive.
Il faut faire attention que ton site ne soit pas coder que pour ta résolution d'écran à toi.

ont va dire c'est deja résolu ! Mais merci

Résolu Centré quelque chose : CSS

deleted535977

Peaky Blinders

King Plex

deleted535977

deleted577633

deleted535977

MRN.

deleted535977

MRN.

Rivals

deleted535977

Rivals

deleted535977

Wazau

ʇûoɐ ǝznop

deleted535977