vue Under Construction extensible
Kommunauty
Connexion
Inscription

Forum Graphisme Under Construction extensible

Under Construction extensible


Darkevil Messages : 221

Bonjour à tous.

Tout d'abord, j'ai retranscrit intégralement partiellement un template Under Construction (page ou il y a la progression de création du site) en CSS3 (il reste un fichier JS sur 2 et 6 images sur 15). Le problème est que je n'arrive pas à le rendre extensible (oui, je code en CSS3 mais je ne sais pas comment en fais pour faire un site extensible ). Je sais qu'il faut remplacer par du pourcentage, mais comment ? (J'ai tenté de diviser le nombre de pixel d'un élément par le nombre de pixel de mon écran mais ça n'a pas marché )

Quelqu'un peut-il m'aider?

PS: Voici le template d'origine :

et le mien :

Qu'en pensez-vous? (cliquez sur le image pour les voir )

Cordialement,
mercredi 8 février 2012 (Dernière édition mercredi 8 février 2012)

Mizur Messages : 6615

Je ne comprends pas ce que tu entends par "extensible" mais sinon super script, manquerait plus qu'à le mettre en français et virer tout ce qui est inutile !
mercredi 8 février 2012

Darkevil Messages : 221

Tout simplement qui s'adapte automatiquement à la largeur de l'écran. Et merci, la je fais un peu le ménage =), pour tout les personne qui le veulent, attendez que je fasse la partie PHP. Il faut que j'en parle au créateur pour savoir si je peux le redistribuer gratuitement biensur.
mercredi 8 février 2012 (Dernière édition mercredi 8 février 2012)

Lucas Messages : 830

(Hu hu mon script est mieux :P)

Sinon pour rendre le contenu extensible il faut bien utiliser les %. Exemple :


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Extensible</title>
		<link rel="stylesheet" href="theme.css"/>
	</head>
	<body>
		<div id="content">
			<h1>This website is under construction</h1>
			<div id="progress">
				<div id="range" style="width:70%;">
					70%
				</div>
			</div>
		</div>
	</body>
</html>

(Le taille de la barre bleue est réglée dans le code HTML, parce que je suppose qu'elle sera modifiée dynamiquement)


#content {
	width:50%;
	min-width:500px;
	max-width:700px;
	padding:20px;
	margin:0 auto;
	background:#666;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #333;
	box-shadow:0 2px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 2px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);
	text-align:center;
	color:#fff;
	font-family:Helvetica, sans-serif;
}

#progress {
	height:50px;
	margin:0 20px;
	background:#222;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:inset 0 2px 2px rgba(0,0,0,0.5), 0 1px 0 #999;
	-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5), 0 1px 0 #999;
	-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5), 0 1px 0 #999;
	overflow:hidden;
}

#progress #range {
	height:50px;
	background:#1f98d7;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:inset 2px 0 2px rgba(0,0,0,0.5);
	-moz-box-shadow:inset 2px 0 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);
	line-height:50px;
}

h1 {
	font-size:20px;
}

Les lignes importantes sont donc :

#content {
	width:50%;
	min-width:500px; /* La taille minimale du bloc */
	max-width:700px; /* La taille maximale du bloc */
}

Et après pour les éléments compris à l'intérieur si on ne spécifie pas de largeur il prendront toute celle disponible

mercredi 8 février 2012

Darkevil Messages : 221

Ha, merci beaucoup. J'essaye d'y travailler ce soir. Pour la barre bleue, elle s'adaptera automatiquement ( en fonction de la taille de #prog)
mercredi 8 février 2012 (Dernière édition mercredi 8 février 2012)

Vanyali Messages : 1298

moi, la barre bleu, elle est en dehors de la fenêtre grise. C'est assez... spécial

jeudi 9 février 2012

Darkevil Messages : 221

C'est normal, j'ai tenter de le modifier via le site de mon hébergeur et sur mon iPod ( grossière erreur ).Du coup, tt est dans l'ordre et j'abandonne l idée extensible
jeudi 9 février 2012

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !

Forum Graphisme Under Construction extensible

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS