Bonjour,

Je souhaiterais savoir comment faire pour que mes "div" s'adaptent à la largeur de l'écran pour un contenu de largeur fixe à 980, comme exemples ci-dessous

https://www.laboratoires-fenioux.com/fr

http://www.jeuxvideo.com/

De plus mes "div" ont des ombres que je souhaiterai appliquer que sur un côté du bloc, soit en haut soit en bas. Comment faire pour que l'ombre n'apparaisse pas sur les 4 bordures dans utiliser des positions relatives négatives et sans utiliser une valeur supérieure à 100%?

Mon visuel:

http://img11.hostingpics.net/pics/520988open2.png

Ce que je ne veux pas faire: (ombre sur toute la boite):

http://img11.hostingpics.net/pics/308496open.png

Bien à vous

7 réponses


qui s'adapte + largeur fixe ? pas compris

Si tu veux un truc de 980px centré

width:980px;
margin: 0 auto;
grmber
Auteur

Je parlais que mon fond soit sur tout l'écran en CSS et non en image avec au milieu un contenu à 980px.

Le fond est dans le même style que les sites mentionés.

Merci :)

Une div prend par défaut toute la largeur donc tu met un fond en repeat-x et c'est bon

j'ai pas tres bien compris non plus.
mais si tu veux faire un fond a ton site :
body{
background : url('url de ton image');
}

tu peux ensuite ajouter un repeat pour que l'image soit repeter, sinon tu peux egalement essayer un background-size : cover;

grmber
Auteur

Merci à tous. En effet j'ai du mal m'expliqué. Je vous met un schéma de ce que je voudrais ça sera plus concrect :)

max-width: 980px;

Si c'est ce à quoi je pense, il suffit de créer une div qui contiendrait le background et qui contiendrait une autre div avec ton contenu à 980px.
exemple:

<div class="container">
    <div class="content">
    </div>
</div>

Avec comme CSS:

.container{
    background-color: #eee;   /*Couleur au hasard pour illustrer*/
}

.container .content{
    max-width: 980px;
    margin: 0 auto;
}

Maintenant, ai-je bien compris ton problème? C'est la question à 1 milion de cacahuettes ^^