Div.body6 comment changer la taille ecran

Question

julien66

29 Aug 2019 à 21:04

Bonsoir
Premier sujet de novice...
je suis sur le logiciel dreamweaver.
lorsque je vois mon site sur telephone portable le fond bordeaux s’arrête au milieu de l’écran et pourtant le fond en image.jpg fait 1200 x 1656 (nom du fond : bg_top_img).
je ne vois pas comment changer la taille d'affichage, je suis aller sur le fichier index et fichier css...
mais je suis perdu... Smiley sweatdrop

site : http://www.chambre-hotes-de-charme.fr/
ps... sur mon ordinateur taille ecran : 1280 x 800 ..c'est super.. pas de fond beige en bas comme sur mon portable

Anedja

30 Aug 2019 à 09:43

Bonjour,
Le fond qui nous intéresse est attribué à l’élément div de classe body1?; les autres ne servent à rien car ils sont en-dessous de ce fond opaque. Or cet élément a une largeur ajustée naturellement à celle de l’écran. En revanche, la div de classe main embrasse toute la largeur de la page. Je te conseille donc de déplacer, dans style.css, les propriétés background- de .body1 vers .main, et de supprimer les autres...

julien66

30 Aug 2019 à 10:30

Merci beaucoup pour votre reponse !! ..mais vous voyez pour vous donner une image c'est comme un enfant de maternelle (moi) dans une cour de lyceen..(vous)
donc je ne sais pas comment faire cette manipulation

MathildeG

30 Aug 2019 à 11:38

Bonjour,

Je pense que tu n'as peut-être pas mis les attributs sur le bon élément dans ton CSS.

Montre-nous la partie concernée dans ton html et ton css Smiley smile

julien66

30 Aug 2019 à 11:57

une partie de la page index en html


</style></head>
<body id="page1">
<div class="body6">
<div class="body1">
<div class="body5">
<div class="main">

<header>
<h1><a href="chambre-hote-saint-paul-de-fenouillet.html" id="logo">Gigi</a></h1>
<nav>

et pour le css j'ai 3 fichiers :
- layout
- reset
- style

je prends quel fichier ?
Merci

MathildeG

30 Aug 2019 à 12:16

Le CSS est normalement le style.css pour ce que tu souhaites.

De ce que je vois sur le site, il y a deux <div> qui sont inutiles pour ce que tu souhaites faire.

julien66

30 Aug 2019 à 12:37

voici mon fichier integrale style css : merci d'avance

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block
}
mark, rp, rt, ruby, summary, time {
display:inline
}
/* Left & Right alignment */
.left {
float:left
}
.right {
float:right
}
.wrapper {
width:100%;
overflow:hidden
}
.wrap {
overflow:hidden;
width:965px;
margin-left:-5px;
padding-left:5px
}
/* Global properties */
body {
background:url(../images/bg_bot.jpg) center 0 repeat #faf3ed;
border:0;
color:#200;
line-height:24px;
font-family: "Lucida Bright";
font-size: 14px;
}
.ic, .ic a {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
.css3 {
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 4px rgba(0, 0, 0, .4);
-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);
-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
position:relative
}
/* Global Structure */
.main {
margin:0 auto;
width:960px
}
.body1 {
background-image: url(../images/bg_top_img.jpg);
background-repeat: repeat;
background-position: center top;
}
.body2 {
background:#faf3ed
}
.body3 {
background:url(../images/bg_bot.jpg) top center repeat
}
.body4 {
background:url(../images/bg_bot_img.jpg) top center no-repeat
}
.body5 {
background:url(../images/slider_shadow.png) center 508px no-repeat
}
.body6 {
background:url(../images/bg_top.jpg) top repeat-x
}
/* main layout */
a {
color:#a80002;
text-decoration:none;
outline:none
}
a:hover {
text-decoration:underline
}
h1 {
float:left;
padding:0px 0 0 36px
}
h2 {
font-size:41px;
line-height:1.2em;
color:#200000;
padding:16px 0 12px 0;
letter-spacing:-2px
}
h2.letter_spacing {
letter-spacing:-3px
}
h3 {
font-size:27px;
color:#230000;
line-height:1.2em;
padding:20px 0 9px 0;
letter-spacing:-1px
}
h3 span {
color:#a80002
}
p {
padding-bottom:24px
}
/* header */
header {
height:121px;
padding-top:31px;
width:100%;
overflow:hidden
}
#logo {
display:block;
background:url(../images/logo.png) 0 0 no-repeat;
width:259px;
height:94px;
text-indent:-9999px
}
#top_nav {
float:right;
padding:4px 43px 30px 0
}
#top_nav li {
float:left;
padding:3px 26px 5px 0;
background:url(../images/top_line.gif) right 0 no-repeat;
margin-right:25px
}
#top_nav li a {
display:block;
line-height:0
}
#top_nav .end {
background:none;
padding-right:0;
margin-right:0
}
#menu {
width:633px;
float:right;
padding:0 0 0 0
}
#menu li {
float:left;
padding-left:3px
}
#menu li a {
display:block;
font-size:24px;
color:#faf3ed;
line-height:40px;
padding:0 20px;
height:44px;
letter-spacing:-1px
}
#menu li a:hover, #menu .active a {
text-decoration:none;
background:url(../images/menu_bg.png) repeat
}
.slider_bg {
width:100%;
height:404px;
background:url(../images/bg_slider.jpg) 0 0 no-repeat;
position:relative;
overflow:hidden;
box-shadow:0 0 5px rgba(0, 0, 0, .4);
-moz-box-shadow:0 0 5px rgba(0, 0, 0, .4);
-webkit-box-shadow:0 0 5px rgba(0, 0, 0, .4);
margin-bottom:35px
}
.slider {
top:10px;
right:10px;
position:absolute;
z-index:1;
width:920px
}
.slider .items {
display:none
}
.slider .pic {
float:right;
position:relative
}
.banner {
left:0px;
top:0;
position:absolute;
width:271px;
z-index:2;
text-align:center
}
.banner strong {
font-size:52px;
color:#bf0f0a;
display:block;
line-height:1.2em;
text-transform:uppercase;
padding:55px 0 0 0;
letter-spacing:-2px
}
.banner strong span {
display:block;
margin-top:-16px
}
.banner b {
display:block;
font-size:27px;
color:#312826;
text-transform:uppercase;
padding:0 0 23px 0;
line-height:1.2em;
letter-spacing:-1px
}
.banner p {
background:url(../images/quot1.png) 0 0 no-repeat
}
.banner p span {
display:block;
background:url(../images/quot2.png) right bottom no-repeat;
padding:0 0 0 0;
color:#6c5f5b;
padding-bottom:2px
}
.slider .pagination {
position:absolute;
z-index:2;
bottom:10px;
left:107px
}
.slider .pagination li {
float:left;
padding-right:3px
}
.slider .pagination a {
display:block;
width:17px;
height:17px;
text-indent:-9999px;
background:url(../images/buttons.png) right 0 no-repeat
}
.slider .pagination a:hover, .slider .pagination .current a {
background-position:left
}
/* content */
#content {
padding-bottom:40px
}
#content2 {
padding-bottom:31px
}
.pad_left1 {
padding-left:30px
}
.pad_bot1 {
padding-bottom:13px
}
.pad_bot2 {
padding-bottom:24px
}
.marg_right1 {
margin-right:20px
}
.box {
background:url(../images/box_bg.png) repeat;
color:#faf3ed;
box-shadow:0 0 5px rgba(0, 0, 0, .4);
-moz-box-shadow:0 0 5px rgba(0, 0, 0, .4);
-webkit-box-shadow:0 0 5px rgba(0, 0, 0, .4)
}
.box > div {
background:url(../images/box_top.png) 0 top no-repeat;
padding:30px;
padding-top:0;
overflow:hidden
}
.box h2 {
color:#a80002;
padding:15px 0 12px 0
}
.box h2 span {
color:#faf3ed
}
.box figure {
padding-bottom:13px
}
.list1 li a {
font-style:italic;
padding-left:12px;
background:url(../images/marker_1.gif) 1px 8px no-repeat;
color:#faf3ed
}
.list_1 {
color:#fff
}
.list_1:hover {
text-decoration:none
}
.button1 {
display:inline-block;
font-size:20px;
color:#faf3ed;
line-height:34px;
padding:0 15px;
background:#a80002;
letter-spacing:-1px
}
.button1:hover {
text-decoration:none;
color:#1e0000;
background:#faf3ed
}
.testimonials li span {
float:left;
width:40px;
height:40px;
font-size:30px;
color:#faf3ed;
line-height:34px;
text-align:center;
background:#a80002;
margin-right:20px
}
.testimonials li p {
float:left;
width:180px;
padding-bottom:15px
}
.testimonials li img {
padding-top:2px
}
.line1 {
background:url(../images/line_vert1.gif) 285px 0 repeat-y
}
.line2 {
background:url(../images/line_vert1.gif) 615px 0 repeat-y
}
.price {
margin-top:-7px
}
.price li {
overflow:hidden;
background:url(../images/price_bg.gif) 0 -6px repeat-x
}
.price a {
float:left;
color:#220000;
background:url(../images/marker_2.gif) 1px 11px no-repeat #faf3ed;
padding-left:12px
}
.price a:hover {
text-decoration:none;
color:#a80002
}
.price span {
float:right;
background:#faf3ed
}
.address {
padding-bottom:0
}
.address span {
float:left;
width:84px
}
/* footer */
footer {
height:138px;
font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#696969;
line-height:18px
}
footer a {
color:#c53005;
text-decoration:underline
}
footer a:hover {
text-decoration:none
}
#icons {
padding:5px 0 0 0
}
#icons li {
float:left;
padding-right:9px
}
/* Tooltips */
.aToolTip {
background:#a80002;
color:#fff;
margin:0;
padding:2px 10px 3px;
font-size:11px;
position:absolute;
line-height:17px
}
.aToolTip .aToolTipContent {
position:relative;
margin:0;
padding:0
}
/* forms */
#ContactForm {
margin-top:-5px;
width:910px
}
#ContactForm span {
float:left;
width:111px;
line-height:20px
}
#ContactForm .wrapper {
min-height:24px
}
#ContactForm .textarea_box {
min-height:170px;
width:100%;
overflow:hidden;
padding-bottom:9px
}
#ContactForm {
}
#ContactForm a {
margin-left:20px;
float:right
}
#ContactForm .input {
width:399px;
height:18px;
background:#faf3ed;
padding:1px 5px;
color:#220000;
font:14px Georgia, "Times New Roman", Times, serif;
margin:0;
float:left
}
#ContactForm textarea {
overflow:auto;
width:789px;
height:163px;
background:#faf3ed;
padding:1px 5px;
color:#220000;
font:14px Georgia, "Times New Roman", Times, serif;
margin:0
}

MathildeG

30 Aug 2019 à 14:06

Dans le code que tu donnes, tu as tous les fonds qui se superposent...

Ici, je ne vois pas pourquoi tu mets les fonds en double... Le fond du <body> est le même que celui du body3 et body6. Celui du body1 est le même que le body4. Pourquoi souhaites-tu avoir autant de fond et de <div> ?

Ceci devrait régler tous tes soucis :


body {
background:url(../images/bg_bot.jpg) center 0 repeat #faf3ed;
border:0;
color:#200;
line-height:24px;
font-family: "Lucida Bright";
font-size: 14px;
}
.body1 {
background-image: url(../images/bg_top_img.jpg);
background-repeat: repeat;
background-position: center top;
}
.body2 {
background:#faf3ed
}
.body3 {
background:url(../images/bg_bot.jpg) top center repeat
}
.body4 {
background:url(../images/bg_bot_img.jpg) top center no-repeat
}
.body5 {
background:url(../images/slider_shadow.png) center 508px no-repeat
}
.body6 {
background:url(../images/bg_top.jpg) top repeat-x
}

Je le vois plutôt comme ceci ton code :


body {
background: url(../images/bg_top_img.jpg) center top repeat;
border:0;
color:#200;
line-height:24px;
font-family: "Lucida Bright";
font-size: 14px;
}
.body1 {
}
.body2 {
}
.body3 {
}
.body4 {
}
.body5 {
background:url(../images/slider_shadow.png) center 508px no-repeat
}
.body6 {
}

Je te laisse supprimer les attributs vides dans le CSS et le Html car ils sont devenus inutiles. Je les ai laissé pour que tu vois les parties que j'ai modifié.
Modifié par MathildeG (30 Aug 2019 - 14:07)

julien66

30 Aug 2019 à 14:33

mercccccciiiiiiiiiiiii !!!! ca marche sur mon portable plus de fond beige en bas ...merci merci !!!! Smiley biggrin

Modifié par julien66 (30 Aug 2019 - 14:33)

MathildeG

30 Aug 2019 à 15:54

N'oublie pas de retirer toutes les <div> de ton html et les class inutiles de ton CSS. Ca sera plus propre et tu pourras mieux t'y retrouver Smiley lol

Sujet clos

Questions générales et questions de débutants

Div.body6 comment changer la taille ecran