JeuWeb Créez votre jeu par navigateur !

Wells · (Modification du message : 18-01-2012, 03:25 PM par Sephi-Chan.)

Bonjour à tous, j'ai un cas de conception CSS très compliqué qui est en train de me rendre fou.

La démo : c'est ici

Ca fonctionne très bien sous tout les navigateurs sauf IE9.

Plusieurs soucis :
- Mon tableau ne se rezise pas à 100% de la page mais dépasse en bas
- la colonne de gauche qui devrait s'agrandir pour combler ce qui manque, ne le fait pas

Le but étant que l'interface s’adapte a la taille de la fenêtre (faite le test sous FF par exemple)

Je suis peu être passé à coté de qq chose, alors je soumet ca à vos yeux d'aigles Smile

Maks · 17-01-2012, 07:39 PM

Code :
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">

avec un doctype html 5 :'(

A plusieurs endroit tu fermes 3 fois des div je ne vois pas pourquoi, essaye de corriger ça Wink

**niahoo** · 17-01-2012, 07:52 PM

tu peux aussi utiliser des media queries si c'est la taille de la fenêtre qui importe

Wells · 18-01-2012, 01:18 AM

Oui, je sais, des tableaux pas beau tout ca ^^

Mais pour avoir une hauteur dynamique en DIV, sur tous les navigateurs, ca reste le plus simple.

Sauf que ca marche pas sous IE, je pense pas que ca viennent d'un div mal fermer, mais plutot une interférence avec le rowspan

**Sephi-Chan** · (Modification du message : 18-01-2012, 10:39 AM par Sephi-Chan.)

Le "complexe" dans le titre est vachement subjectif quand même. :p

Tes exigences en terme de compatibilité avec IE, c'est IE9 et + ? Ça nous permettra de répondre à tes besoins de manière un peu plus efficace et élégante.

Tu as également les marges, qui ne sont pas très bien : elles grandissent au fur et à mesure de l'agrandissement de la fenêtre.
Je vais essayer de proposer une meilleure version (d'ici à ce week-end).

Roworll · 18-01-2012, 10:47 AM

Un petit code pondu en 5mn.
Avec une base de ce genre et un peu de boulot, tu devrais pouvoir réussir à faire ce que tu veux, en t'affranchissant au passage des tableaux.

Testé et fonctionnel sous FF, IE, Opera , Chrome et safari.

Sinon, y'a comme une inspiration STO dans ton design. Je me trompe ?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<style>

div.head {

	borderolid black 1px;

	position:absolute;

	top:1px;

	left:1px;

	right:1px;

	height:40px;

}

div.col-l {

	borderolid black 1px;

	position:absolute;

	top:42px;

	left:1px;

	bottom:32px;

	width:100px;

}

div.col-r {

	borderolid black 1px;

	position:absolute;

	top:42px;

	right:1px;

	bottom:32px;

	width:20px;

}

div.foot {

	borderolid black 1px;

	position:absolute;

	bottom:1px;

	left:1px;

	right:1px;

	height:30px;

}

div.content {

	background:lightgrey;

	position:absolute;

	top:43px;

	bottom:33px;

	left:103px;

	right:23px;

}



</style>

</head>

<body>

	<div class="head">1</div>

	<div class="col-l">2</div>

	<div class="col-r">3</div>

	<div class="foot">4</div>

	<div class="content">My content Here</div>

</body>

</html>

Wells · 18-01-2012, 01:55 PM

Oui pour IE ca sera 9+ en espérant que le 10 gérera enfin nativement les bords arrondies, les shadow et autre gradiant (on peut tjs rêver non?)

Roworll ton code est pas mal c'est vrai, mais il est beaucoup plus simple que mon rendu.

Que se soit horizontalement ou verticalement, j'ai des boutons, dont le nb est indéterminée.
Ils prennent la place qu'ils prennent (non connu au départ) et le design doit compléter vers le bout de la page et vers le bas tout seul.

Le tout en mettant des espace fixes entre les boutons.

Je te laisse plancher sur le sujet ^^

PS: oui très grosses reprise de STO qui a un design sobre et très efficace je trouve

**Sephi-Chan** · 18-01-2012, 01:57 PM

Comment ça doit se comporter quand il y a beaucoup de boutons ?
Et quand on réduit beaucoup la fenêtre ?

Wells · 18-01-2012, 01:58 PM

1024 mini, je gère pas les écrans en dessous. Pour le haut, il n'y aura pas plus de boutons, mais possiblement moins.

Pour le cote, il n'y aura jamais assez de boutons pour tt remplir, mais le nb reste variable.

Maks · 18-01-2012, 02:05 PM

Citation :Oui pour IE ca sera 9+ en espérant que le 10 gérera enfin nativement les bords arrondies, les shadow et autre gradiant (on peut tjs rêver non?)

C'est déjà le cas :heu: (sauf pour les gradient)

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	CSS3 et HTML 5 ?	Thib4s	21	11 221	27-07-2010, 10:55 PM Dernier message: Sephi-Chan