Apparence de site web

Apparence de site web ou comment ne pas rebuter dès l'index Noter :

#21 Floy

Groupe : Membre
Messages : 12
Inscrit(e) : 02-juin 09
Genre:Homme
Localisation:77

Posté 11 juillet 2009 - 11:18

Alala... c'est pas faute d'y mettre de la bonne volonté, mais... je n'arrive pas à tout faire.

Premièrement j'ai suite à vos remarques décidé d'abondonner les tableu, et de refaire une tentativ avec des div et des float. En gros je m'en sors, à l'exception d'un problème récurrent, l'overflow. Dès que je le mets en scroll ou en auto, ça me fiche un bazar monstre dans les blocs...

Ca peut paraître idiot, mais ça me bloque parce que du coup je ne peux pas finir la structure du site, qui permettrait une amélioration notoire de tous les défaits précédemment soulignés.

Si l'un d'entre vous a envie de jeter un coup d'oeil sur le code de la page ou de la css, je vous les mettrais ici.

Floy

Ici, c'est mieux qu'ailleurs, et ça c'est grâce à Internet
qui offre les avantages de la promiscuité sans les inconvénients.

Haut

#22 thick

SEO & Blogueur

Groupe : Membre+
Messages : 3 014
Inscrit(e) : 15-mars 04
Genre:Homme
Localisation:Andorre

Posté 11 juillet 2009 - 13:57

Bien sûr que tu devrais poster ton souci d'overflow.
Je viens moi même de batailler pendant 3 jours avec Float à cause des vieilles version d'Internet Explorer qui ne l'interprètent pas bien, donc je comprends ta douleur.

Mon blog SEO Rockstar
ADICIE est l'agitateur d'actualité qui dit tout haut ce que les médias disent tout bas.
Ma présentation de consultant référencement

Haut

#23 Floy

Groupe : Membre
Messages : 12
Inscrit(e) : 02-juin 09
Genre:Homme
Localisation:77

Posté 11 juillet 2009 - 19:27

Alors voici le code html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="page">
	<div id="bandeau">header</div>
	<div id="menugauche">menugauche</div>
	<div id="menudroite">menudroite</div>
	<div id="contenu">contenu</div>
		<div id="bloc_news">copyright</div>
	</div>
</div>
</body>
</html>

et la css

div {
	text-align:center;
	}
	
div#page {
		height:450px;
		width:600px;
	}
	
div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#menugauche {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#menudroite{
	float:right;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
	
div#contenu {
	width: 500px;
	height:350px;
	background-color:#FFCC00;
	
	}
div#bloc_news {
	width:500px;
	height:50px;
	background-color:#FF3300;
	}

L'objectif étant de pouvoir mettre un overflow-y:auto à la div contenu

Capture d'écran sans overflow:
Image IPB

Capture d'écran avec overflow:
Image IPB

On voit que le contenu et le copyright s'en vont dans les pâquerettes... c'est triste hein?

Sinon autre question, quand on a fait un bloc par exemple le "menu gauche", dedans on peut mettre un tableau ou alors ça vous hérisse le poil et je dois faire plusieurs blocs?

Ici, c'est mieux qu'ailleurs, et ça c'est grâce à Internet
qui offre les avantages de la promiscuité sans les inconvénients.

Haut

#24 Floy

Groupe : Membre
Messages : 12
Inscrit(e) : 02-juin 09
Genre:Homme
Localisation:77

Posté 17 juillet 2009 - 14:41

Je suis désolé, mais je n'arrive pas à éditer mes posts donc ça fera un double-post... :blushing:
J'ai énormément avancé, mon nouveau design est fini, mais un problème persiste:

Sans overflow, le texte sort de la div. Jusqu'ici tout va bien.
Image IPB

A l'ajout d'un overflow:auto;, le texte ne sort plus de la div, certes, mais celle-ci s'en vaaaaa dans la montagne, et ça c'est pas cool.
Image IPB

le code html de la page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<TITLE>&curren; Accueil - STUNERASE vous souhaite une bonne visite de son site! &curren;</TITLE>
</head>
<body>
<div id="page">
	<div id="bandeau">
		<div id="flash"></div>
		<ul id="menu">
			<li id="h1"></li>
			<li id="h2"><a href="membres/membres.html"></a></li>
			<li id="h3"></li>
			<li id="h4"><a href="bio/bio.html"></a></li>
			<li id="h5"></li>
			<li id="h6"><a href="dates/dates.html"></a></li>
			<li id="h7"></li>
			<li id="h8"><a href="galerie/galerie.html"></a></li>
			<li id="h9"></li>
			<li id="h10"><a href="zik/zik.html"></a></li>
			<li id="h11"></li>
			<li id="h12"><a href="amis/amis.html"></a></li>
			<li id="h13"></li>
		</ul>
	</div>
	<div id="menugauche">
		<div id="mg1"></div>
		<a href="contact/contact.html" class="contact"></a>
		<a href="presse/presse.html" class="presse"></a>
		<a href="fichetechnique/fichetechnique.html" class="fichetechnique"></a>
	</div>
	<div id="menudroite">
		<div id="md1"></div>
		<a href="http://www.myspace.com/stunerase" class="myspace"></a>
	</div>
	<div id="contenu">
		<div id="contenu1"></div>
		<div id="contenu2"><BR>Bienvenue sur notre site!<BR><BR>
<BR><BR>News du 30/06: Inscrivez-vous &agrave; la newsletter pour rester inform&eacute;s de l'actualit&eacute; du groupe!!!
<BR><BR><A HREF="../mj/mj.html">News du 26/06: Hommage &agrave; l'un des plus grands que la Terre a accueilli...</A>
<BR><BR>News du 15/06: Banni&egrave;res publicitaires du site
<BR>à télécharger sur la page <A HREF="../pub/pub.html">&curren; Pub &curren;</A>
<BR><BR>News du 14/06: Lecteur exportable dispo dans la rubrique &curren; Compos &curren;
<BR><BR>News du 13/06: Nouveau contenu dans la rubrique &curren; Galerie &curren;
<BR><BR>News du 12/06: cr&eacute;ation du nom de domaine www.stunerase.com !!
<BR><BR>News du 11/06: Nouvelles versions de certaines compositions en &eacute;coute!
<BR>Mise &agrave; jour de la rubrique &curren; Amis &curren;
<BR><BR>News du 02/06: Meilleure compatibilit&eacute; avec diff&eacute;rents navigateurs.</div>
	</div>
	<div id="footer"><BR>&curren; Tous droits r&eacute;serv&eacute;s &copy; Stunerase 2008-2009 &curren;</div>
</div>
</body>
</html>

la css

body {
	text-align:center;
	margin-top: 0px;
	margin-bottom: 0px;
	margin: 0 auto;
		width: 960px; 
		text-align:center; 
		font: 24px Cooper Black, Arial, sans-serif;
	   color : #FFFFFF;
		background-color: #000000}

A{
color:#FF0000;
font:  14px Cooper Black, Arial, sans-serif ;
text-decoration:none;
}
A:hover {
color:#FFFFFF;
font:   14px Cooper Black, Arial, sans-serif   ;
text-decoration:none;
}
A:visited {
color:#FF0000;
font:   14px Cooper Black, Arial, sans-serif   ;
text-decoration:none;
}

div#page {
		height:720px;
		width:960px;
		margin: auto;
	}
	
div#bandeau {
	width:960px;
	height:153px;
		}
	
	div#flash {
	width:960px;
	height:91px;
	background-image: url("images/header0.bmp");
		}
		
		#menu {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			}
		#menu li {
			float: left;
			height: 62px;
			border: 0px;
			margin-right: 0px;
			}
		#menu li a {
			display: block;
			padding: 62px 0;
			}
			
	
			li#h1{
				width:25px;
				height:62px;
				background-image: url("images/header1.bmp");
				float:left;
				}
		
			li#h2{
				width: 154px; 
				height: 62px; 
				background-image: url('images/header2passif.bmp');
				float:left; 
				}
			
			li#h2:hover{
				background-image: url('images/header2actif.bmp');
				}
	
			li#h3{
				width:42px;
				height:62px;
				background-image: url("images/header3.bmp");
				float:left;
				}
		
			li#h4{
				width: 62px; 
				height: 62px; 
				background-image: url('images/header4passif.bmp');
				float:left; 
				}
			
			li#h4:hover{
				background-image: url('images/header4actif.bmp');
				}
	
			li#h5{
				width:42px;
				height:62px;
				background-image: url("images/header5.bmp");
				float:left;
				}
		
			li#h6{
				width: 112px; 
				height: 62px; 
				background-image: url('images/header6passif.bmp');
				float:left; 
				}
			
			li#h6:hover{
				background-image: url('images/header6actif.bmp');
				}
	
			li#h7{
				width:44px;
				height:62px;
				background-image: url("images/header7.bmp");
				float:left;
				}
		
			li#h8{
				width: 141px; 
				height: 62px; 
				background-image: url('images/header8passif.bmp');
				float:left; 
				}
			
			li#h8:hover{
				background-image: url('images/header8actif.bmp');
				}
	
			li#h9{
				width:44px;
				height:62px;
				background-image: url("images/header9.bmp");
				float:left;
				}
		
			li#h10{
				width: 131px; 
				height: 62px; 
				background-image: url('images/header10passif.bmp');
				float:left; 
				}
			
			li#h10:hover{
				background-image: url('images/header10actif.bmp');
				}
	
			li#h11{
				width:42px;
				height:62px;
				background-image: url("images/header11.bmp");
				float:left;
				}
		
			li#h12{
				width: 87px; 
				height: 62px; 
				background-image: url('images/header12passif.bmp');
				float:left; 
				}
			
			li#h12:hover{
				background-image: url('images/header12actif.bmp');
				}
	
			li#h13{
				width: 34px; 
				height: 62px; 
				background-image: url('images/header13.bmp');
				float:left; 
				}
	
div#contenu {
	width: 717px;
	height:514px;
	margin-left: 123px;
	}
	
	div#contenu1 {
   width: 717px;
   height: 41px;
   background-image: url("images/contenu1.bmp"); 
	}
	
	div#contenu2 {
   width: 717px;
   height: 473px;
   background-image: url("images/contenu2.bmp"); 
   padding:5px;
   
   	}
	
	
div#menugauche {
	float:left;
	width:123px;
	height:400px;
	display: block;
	}
	
	div#mg1 {
   width: 123px;
   height: 416px;
   background-image: url("images/menugauche1.bmp");
   
	}
	
div#menudroite{
	float:right;
	width:120px;
	height:567px;
	}
	
	div#md1 {
   width: 120px;
   height: 398px;
   background-image: url("images/menudroite1.bmp"); 
	}

div#footer {
	width:717px;
	height:53px;
	background-image: url("images/footer.bmp"); 
	margin-left: 123px;
	}
	
a.contact { display:block; width: 123px; height: 50px; background-image: url('images/menugauche2passif.bmp')}

a.contact:hover { width: 123px; height: 50px; background-image: url('images/menugauche2actif.bmp')}

a.presse { display:block; width: 123px; height: 49px; background-image: url('images/menugauche3passif.bmp')}

a.presse:hover { width: 123px; height: 49px; background-image: url('images/menugauche3actif.bmp')}

a.fichetechnique { display:block; width: 123px; height: 51px; background-image: url('images/menugauche4passif.bmp')}

a.fichetechnique:hover { width: 123px; height: 51px; background-image: url('images/menugauche4actif.bmp')}

a.myspace { display:block; width: 120px; height: 169px; background-image: url('images/menudroite2passif.bmp')}

a.myspace:hover { width: 120px; height: 169px; background-image: url('images/menudroite2actif.bmp')}

Je ne trouve pas la solution, malgré de multiples essais... :nonono:

Sinon, j'ai respecté tout ce que vous m'aviez conseillé, le doctype, le validateur... je suis tout près du but, nan? :hypocrite:

Ce message a été modifié par Monique - 17 juillet 2009 - 16:46.
Raison de l'édition : Merci d'utiliser codebox pour plus de 10 lignes de code :)

Ici, c'est mieux qu'ailleurs, et ça c'est grâce à Internet
qui offre les avantages de la promiscuité sans les inconvénients.

Haut

#25 Ernestine

Groupe : Fondatrice
Messages : 1 034
Inscrit(e) : 21-août 03
Genre:Femme

Posté 17 juillet 2009 - 16:07

Salut,

Je n'avais pas vu ton message précédent plus tôt, mais il était parfaitement normal que ça ne fonctionne pas, puisque la largeur totale était de 600px, que les colonnes de droite et de gauche faisaient 100px chacune et celle du milieu faisait 500, soit un total de 700px. Impossible de le faire rentrer dans un conteneur de 600

Et même sans l'overflow ça ne fonctionnait pas, c'était juste une impression (la div centrale passait sous la colonne de droite).

D'une manière générale, et je suppose que ça vaut pour ton dernier message, sache qu'il est inutile (et même gênant) d'attribuer une width à la div centrale. La div centrale, tu lui donnes un margin-left égal à la largeur de la colonne de gauche, et un margin-right égal à la largeur de la div de droite, et tu ne lui donnes pas de largeur : elle s'étirera naturellement entre les deux (qu'il y ait un overflow ou pas).

Sinon, je vois que tu sous Internet Explorer. Je te recommande chaudement d'utiliser Firefox avec le pluggin Webdevelopper Toolbar : il offre des tas de fonctionnalités pour faire du CSS proprement. Il permet par exemple d'entourer les divs dans la page (ce qui t'aurait permis de constater le dépassement de la div contenu par dessous la div droite dans ton exemple précédent

)

Ce message a été modifié par Ernestine - 17 juillet 2009 - 16:19.

Haut

#26 Floy

Groupe : Membre
Messages : 12
Inscrit(e) : 02-juin 09
Genre:Homme
Localisation:77

Posté 17 juillet 2009 - 18:47

Oui, ma première version ne fonctionnait effectivement pas, je m'en suis aperçu entre temps et j'ai corrigé le problème.

L'intéret d'un width fixe, c'est pour l'image d'arrière plan. Et l'overflow ne serait d'ailleurs que vertical. Mais c'est ce dernier qui ne va pas, mais alors pas du tout.

Oui je suis principalement sous IE mais je vérifie toujours la compatibilité avec chrome et firefox =)

Merci de ta réponse, et j'aimerais bien supprimer mon avant dernier post, mais je ne trouve pas le panel de gestion ( ça la fout mal quand on est soi-même admin de forum

Donc dans mon cas , l'overflow s'avèrerait indispensable, du moins à mes yeux. Bonne soirée! Floy

Ici, c'est mieux qu'ailleurs, et ça c'est grâce à Internet
qui offre les avantages de la promiscuité sans les inconvénients.

Haut

#27 Floy

Groupe : Membre
Messages : 12
Inscrit(e) : 02-juin 09
Genre:Homme
Localisation:77

Posté 18 juillet 2009 - 14:06

Edit, j'ai résolu le probleme d'overflow, je vous soumettrais la page en ligne d'ici peu =)

Floy

Ici, c'est mieux qu'ailleurs, et ça c'est grâce à Internet
qui offre les avantages de la promiscuité sans les inconvénients.

Haut

#28 Floy

Groupe : Membre
Messages : 12
Inscrit(e) : 02-juin 09
Genre:Homme
Localisation:77

Posté 05 janvier 2010 - 17:56

Bonsoir à tous, un peu moins de 6 mois après le dernier message, j'aurais simplement aimé avoir votre avis sur le site qui a pas mal changé, et à mon avis intégré la plupart de vos nombreux conseils.

http://www.stunerase.com

Bon je devance, toujours une page tunnel, mais qui mène à la page d'accueil au bout de 10 secondes grâce au javascript.

J'ai pris en compte les conseils esthétiques, entre autres par rapport à la charte graphique du site et au choix des polices, mais c'est toujours le cêté ergonomique qui me pousse à me tourner vers vous.

voila =)

Ici, c'est mieux qu'ailleurs, et ça c'est grâce à Internet
qui offre les avantages de la promiscuité sans les inconvénients.

Haut

#29 Nullette

Groupe : Membre+
Messages : 1 453
Inscrit(e) : 25-août 04
Genre:Femme
Localisation:Paris

Posté 05 janvier 2010 - 18:34

Bonjour,
je donne juste mon avis de "lectrice" lambda : j'ai du mal à lire le texte. Même les phrases en blanc sur le fond bleu foncé sont, pour moi, peu lisibles, surtout où il y a un fond de notes (musicales).

Mieux connaître la Bulgarie