28111 sujets

CSS et mise en forme, CSS3

Problème media queries

Bonjour je viens d'adapter le site pour mobile et tablette mais je n'arrive pas a adapter mon contenu (ou je met tous les articles) mais pour les écrans d'ordis tout est nikel

voila mon site web : websitekarim.esy.es

et voila le code html et css :

merci pour vos réponses


<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="stylepage.css" />
    <link rel="icon" type="image/png" href="faviconwk.png">
    <title>WebsiteKarim</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta charset="utf-8" />
</head>
    <body>
 
          
        <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
        <header class="header">
            <a href="/" class="logo">WEBSITEKARIM</a>
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
         
            <ul class="menu">
            <li><a href="#">ACCEUIL</a></li>
            <li><a href="#">MENU 2</a></li>
            <li><a href="#">MENU 3</a></li>
            </ul>
        </header>
     
        <div id="content-page1"> 
            <span class="title-content-page1"><p>Bienvenue dans mon site web</p></span>
        </div>
 
 
    </body>
</html>







body {
  margin: 0;
  font-family: 'Droid Serif', serif;
  background-color: #f4f4f4;
}
 
a {
  color: #000;
}
 
 
/* header */
 
.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}
 
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}
 
.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}
 
.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}
 
.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}
 
/* menu */
 
.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}
 
/* menu icon */
 
.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}
 
.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
 
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
 
.header .menu-icon .navicon:before {
  top: 5px;
}
 
.header .menu-icon .navicon:after {
  top: -5px;
}
 
/* menu btn */
 
.header .menu-btn {
  display: none;
}
 
.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}
 
.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
 
.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
 
.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}
 
/* 48em = 768px */
 
@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
 
#content-page1 {
  position: absolute;
  margin-top: 60px;
  margin-left: 40px;
  width:1050px;
  height:2000px;
  background-color:#fff;
  }
 
  .title-content-page1 {
    text-align: center;
    text-decoration: underline;
    font-size: 25px;
  }
Bonjour,

Ton contenu utilise une largeur avec une unité fixe, dont la valeur est de 1050px. Je te conseille d'utiliser les pourcentages, en oubliant pas de préciser une largeur maximum si tu souhaites la limitée. Par exemple :


width: 100%;
max-width: 1050px;


Le positionnement en absolue de ton conteneur risque de te poser des soucis dans la suite de tes aventures. Je te conseille de, dès maintenant, trouver une meilleure solution.
Modifié par mob (24 Feb 2017 - 08:49)
Sujet clos
Aller à