28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Design fluide : pbs disposition des éléments.

Bonjour,

Tout d'abord, j'espère que pour ma première intervention,
je suis bien dans la bonne section et que je ne pose pas une question dejà traitée
( j'ai un peu cherché, j'avoue ne pas avoir trouvé ce qui pourrait rendre soluble mon pb)

voici l'objet de ce sujet

alors j'ai crée cette interface globale :


j'ai exporté chaque élément séparément afin de les intégrer dans un site "fluide".
en fait, mon but ( faisable? je l'espere) est d'avoir un site s'adaptant sur la largeur à des écrans type 4/3 ou 16/9.


le probleme se pose au niveau du rectangle "marron clair",
je n'arrive pas l'intégrer dans ma div grise du site...

comme sur cet exemple de ss qu'un ami m'a envoyé


Peut-etre que cela n'est pas véritablement faisable.
devrais-je plutot me tourner vers la solution de créer un design différent
avec redirection ( avec javascript) vers le design adequate selon la résolution
du visiteur ?


code css :
#body {
width : 100%;
margin-left : -8px;
margin-right : auto;
}
#top {
width : 100%;
height : 175px;
background-image : url(images/titre.png);
background-repeat : no-repeat;
}
#main {
position : relative;
z-index : -1;
width : 100%;
height : 500px;
border : 1px solid white;
background-color : #525050;
}
#gauche {
position : relative;
z-index : 1;
width : 80%;
margin-top : 85px;
height : 300px;
background-image : url(images/gauche.png);
background-repeat : no-repeat;
}
#barre {
position : absolute;
z-index : 0;
width : 50%;
margin-top : 150px;
height : 170px;
background-image : url(images/barre_1.png);
background-repeat : no-repeat;
}
#barre2 {
position : absolute;
float : right;
clear : left;
z-index : 0;
width : 99%;
margin-top : -20px;
margin-left : 100%;
height : 210px;
background-image : url(images/barre1.png);
background-repeat : repeat-y;
}
#corps {
float : left;
clear : left;
position : relative;
z-index : 1;
margin-top : -45px;
width : 650px;
height : 400px;
margin-left : 52%;
background-image : url(images/corps.png);
background-repeat : no-repeat;
}
#player {
z-index : 2;
clear : left;
float : right;
margin-top : -525px;
margin-left : 50%;
}
#bott1 {
width : 100%;
height : 50px;
background-image : url(images/trait.pn);
}
#bott2 {
width : 100%;
height : 70px;
background-image : url(images/trait.png);
}


le code html :

<body>

<div id="body">
<div id="top"></div>


<div id="main">
<div id="barre">
<div id="barre2"></div></div>
<div id="gauche">
<div id="corps"><img src="images/corps.png" width="650px" height="400px" </div></div>
</div>
<div id="player"><object type="application/x-shockwave-flash" 
width="225px" height="175px" data="flash/player.swf" name="Object1">
<param name="quality" value="high" >
<param name="movie" value="flash/player.swf">
<param name="wmode" value="transparent">

</object></div>


<div id="bott1"><img src="images/trait.png" width="100%"></div>



                    


<!-- div contenu fermé --></div>


</body>





en tout cas merci d'avance...
Modifié par ideo (22 Jan 2014 - 14:35)
Salut,

Aurais-tu moyen de nous montrer quel aspect tu voudrais que cela ait :
- sur un petit écran (style celui de ton ami)
- sur un écran large
Bonsoir Marcv,

merci de bien vouloir te pencher légèrement sur mon soucis.

en fait, le problème, c'est que j'ai beau "tourné" l'histoire dans tous les sens,
je n'arrive pas à garder cette image dans ma div a fond gris...

En changeant de résolution, l'image s'agrandit et dépasse de mon fond gris (avec une longeur fixe de 500px et une largeur de 100% selon la résolution) alors que les autres éléments restent en place.

en fait, dans l'absolu, je ne voudrai pas que les éléments s'agrandissent mais juste
se positionnent différemment selon la résolution pour que le site d'adapte en pleine page à chaque écran.

ainsi avec une résolution de 1280x1024
obtenir ceci

et avec une résolution de 1900x1080
obtenir ceci

en espérant être clair.

merci
Modifié par ideo (22 Jan 2014 - 14:36)
Salut,

Tu dois pouvoir t'en sortir en partant sur ces bases :
[b]HTML[/b]
<body>

	<div id="header">
		<img src="titre.png">
	</div>

	<div id="main">
		<div id="blockaki">
			<div id="player"></div>
		</div>	
	</div>

	<div id="footer">
	</div>

</body>

[b]CSS[/b]
#main {
position:relative;
overflow:hidden;
}
#blockaki {
position:absolute;
right:10%;
background:url(corps.png) bottom no-repeat;
}
#player {
position:absolute;
right:0;
}
#footer {
height:70px;
background:url(trait.png) no-repeat;
}
Je réaffirme mon remerciement,
cela fonctionne bel et bien à première vue



il ne me reste plus qu'à réussir à intégrer les autres éléments.

en tout cas, merci encore. Smiley cligne
Modifié par ideo (22 Jan 2014 - 14:36)
Sujet clos
Aller à