18034 sujets

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

Image dans une div qui prend toute la taille restante de la fenetre

Bonsoir, voilà j'essaye de faire le design de mon site web, celui ci est en deux parti : a gauche le logo et le menu sur une largeur de 240px et tout le reste ça sera la section du site. Pour ma page d'accueil je voulais mettre une image de fond pour pouvoir écrire du texte par dessus mais elle ne prend pas le reste de la fenetre.

voila mon code html : 

<body>
<div class="header"> 
<header>
<center> <a href="vegapunk.html"> <img src="logo.png" width="120" > </a> </center>
</header>
</div>
<div class="page" ></div>
</div>
</body>


Et voilà le code css : 


.header {
	position:fixed;
	float:left;
	background-image:url(dbz.png);
	width:240px;
	top: 0px;
    bottom: 0px;
    left: 0px; }

header {
	width:240px;	}

.page {
	position:absolute;
	float:right;
	left:240px;
	top:0px;
	bottom:0px;
	right:0px;
	background-image:url(page.png);
background-repeat:no-repeat;	
}


Merci de votre aide.
Modifié par vegapunk (02 May 2015 - 00:43)
Bonjour,
Il y a dix ans je t'aurai trouvé une solution simple, mais nous sommes dans la technologie
Responsive comme te l'explique Raphaël http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html

En bref l'écran est une vrais fenêtre qui te laisse voir le paysage du site ... c'est a dire sans limite,
il ne devrait plus y avoir de notion de taille de page mais de taille de fenêtre !

Si tu as regardé au moins une fois un site sur un téléphone portable, tuas vu qu'en écartant avec les doigts ça zoom dans tout les sens ! alors situ force ton mage a coller a la taille du div de droite, elle va être très déformée !

Désolé de cette réponse, c'est juste pour t'expliquer le probléme.
Mais est ce que mon code est bon pour coupé la page ne deux : a gauche le menu sur 240 px et tout le reste pour le contenu des pages ?
Administrateur
Bonjour et bienvenue, Smiley smile

2 choses pour commencer :
- l'élément center il faut tout de suite oublier ça ; cet élément de présentation est mort et enterré depuis plus de 10 ans. Les éléments HTML apportent du sens (la sémantique, comme header pour l'entête de page) et les CSS permettent de styler (voir l'article de Raphaël Centrer les éléments ou un site web en CSS à ce sujet)
- position: fixed pour le menu à gauche je vois bien l'intérêt si le but est qu'il soit toujours visible même après avoir scrollé. Il y a quand même un écueil : il ne faut surtout pas que le menu soit trop long sinon on ne voit plus le bas (et il faut prendre en compte les visiteurs qui zooment un peu ou beaucoup donc ne pas dépasser, à la louche, la moitié ou les 2/3 de la hauteur. Et ceux qui ont un écran pas très haut - le jour où vous réalisez une adaptation sur tablette ou smartphone faudra trouver une autre technique, mais bon on débute pas par ça - ou une fenêtre bouffée par les rangées d'onglets et de barres d'outil comme moi au boulot Smiley smile )
position : absolute à droite par contre mieux vaut oublier et le fait de mélanger avec float: right montre que vous êtes pas sûr de ce que font l'un et l'autre (on est tous mais vraiment tous passés par là... Smiley ravi ). Direction Openweb via l'article de Florent sur le sujet : Guide de survie du positionnement CSS
C'est noté et corrigé pour le center merci. Le menu de gauche restera fix et dans toute les pages c'est pour cela que j'ai pensé à mettre la position fix, pour le positionnement j'ai encore un peu de mal, voici ce que j'essaye de faire :

upload/58632-site.jpg
Modifié par vegapunk (02 May 2015 - 22:52)
Sujet clos
Aller à