28173 sujets

CSS et mise en forme, CSS3

Votre avis sur la structure de ma page

Bonjour à tous,
Je fais la refonte complète de la structure HTMl de ma page car ça devenait le bazarre.
Donc j'ai entrepris de me faire un masque que voici

(design à 3 colonnes)

Voici le code HTML simplifié

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">


<head>
	<title></title>
	
	
</head>
<body>
	<div id="global">
	
	<!-- HEADER -->
	<div id="header">
		<div id="header_stats">
		</div>				
    </div>
					
	<div id="menu-horizontal">
	
	</div>
	
	
	<div id="menu-gauche">
		
				
	</div>
	

	
 	<!-- Corps de la page -->
	<div id="corps">
		<div id="pagetitle">   
			<p><!-- titre de la page --></p>
		</div>

		<div class="corps-sp">  	<!-- Sous partie du corps -->

			
		</div>
				
		<div class="corps-sp1">  	<!-- Sous partie du corps -->
		<div class="corps-sp-title"> <!--  TITRE Sous partie du corps --> </div> >


			
		</div>
		
			<div class="corps-sp2"> <!-- Sous partie du corps -->
		<div class="corps-sp-title"> <!--  TITRE Sous partie du corps --> </div> >

				
			</div>
				
				

		<!-- Colonne droite -->
		<div id="colonne_droite">
						
			 
				<div class="cd-s"> <!-- Sous partie -->
					<div class="cd-titre"><!-- TITRE Sous partie --></div>
					<p></p>
					<p></p>
				</div>

					
				<div class="cd-s">
				<div class="cd-titre">Menu de l'équipe</div>
				<p></p>
				</div>
		</div>

	</div>

	
    <div id="footer">

    </div>
  </div>
</body>
</html>



J'aimerais bien vous mettre le code CSS mais ça risque de faire un gros paté, donc j'attends vos premiers avis et je vous poste par la suite le CSS simplifié qui va avec.

Merci beaucoup

Bon week end


EDIT : J'ai mis le sujet dans cette catégorie la, car c'est surtout la partie CSS ou j'aimerais votre avis Smiley smile
Modifié par Snipy (20 Oct 2007 - 14:41)
Salut,

Snipy a écrit :
EDIT : J'ai mis le sujet dans cette catégorie la, car c'est surtout la partie CSS ou j'aimerais votre avis Smiley smile

Si c'est la partie CSS qui t'intéresse, il serait bon d'avoir le code CSS de la page. Ou mieux, une page en ligne.

Sinon on peut déplacer ton sujet vers le salon "HTML, XHTML, sémantique web" si tu préfère des conseils concernant la structure de ton site.

A toi de voir. Smiley cligne
Modifié par Mikachu (20 Oct 2007 - 13:38)
Salut,

Je trouve que c'est difficile de juger de la pertinence de la structure sans savoir a quoi va ressembler le site final (donc sans voir le css) car selon les impératifs du design tu peux vraiment avoir besoin de div qui dans d'autre design seraient inutiles...
Donc là je vais présumer d'un design "simple".

Je pense que tu as bcp de div inutiles ou sémantiquement injustifiés, c-a-d que tu pourrais remplacer par des éléments plus pertinents.
- menu horizontal : une liste en display line fera l'affaire
- titres (de pages, de titres de sous partie, de menu) : une balise h fera l'affaire.

Tu as aussi bcp de classes pour des élement qui sont uniques, utilise des id. De plus tu peux surement styler ses classes (ou id donc) ensemble car je ne pense pas que leur design soit très différents les unes des autres.

Bref, commence par remplacer tous les divs qui peuvent l'être par des éléments sémantiquement juste (si c'est un titre c'est un h, un menu c'est une liste, ...), met des id pour les éléments uniques et limite le nombre de classes, les sélecteurs CSS te permettront de cibler les éléments et après avoir alléger ton code tu verras que tu allègeras ta feuille de style.
Mikachu a écrit :
Si c'est la partie CSS qui t'intéresse, il serait bon d'avoir le code CSS de la page. Ou mieux, une page en ligne.

+1 (et un peu Smiley lol tout de même, sans vouloir être méchant... Smiley cligne )

Sinon, c'est normal que tu indiques l'anglais comme langue de traitement de ton document, alors que le contenu semble être en français?

Par ailleurs, Alsacréations propose un tutoriel sur la réalisation d'un design à trois colonnes: Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Modifié par Florent V. (20 Oct 2007 - 13:51)
Merci tout d'abord pour vos réponses Smiley smile

Voici comme vous l'avez demandé un prmeier jet de la base de mon nouveau css

body {

font-size: 75%;
margin: 0em auto;
padding: 0em;
background: url(../images/back.jpg) top repeat;
font-family: Verdana,Tahoma,Arial,sans-serif;

}

#global {

width: 80.0em;
margin: 0em auto;
padding: 0em;
background-color: rgb(255,255,255);

}




#header {

width: 100%;
height: 11em;
float: left;
margin: 0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
background: url(../images/) no-repeat;

}



#header_stats {

float: right;
margin: 0.7em 0.2em 0em 0em;
padding: 0.4em;
border: 1px solid #dadada;
background-color: #e9e9e9;
color: rgb(100,100,100);

}

/* A modifier ici */
div#menu_horizontal {
width : 768px;
background-image: url("../images/barre_header.png");
background-repeat: no-repeat;
background-position: left bottom;
border : 1px;
margin-bottom: 20px;
overflow: auto
}



#menu_gauche {

clear: both;
float: left;
width: 12em;
padding: 0em;
border-right: solid 0.1em rgb(200,200,200);
list-style-type: none;

}

#corps
{

float: left;
width: 62.0em;
margin: 0em;
padding: 0em 2.0em 0em 2.0em;
background-color: inherit;
color: rgb(100,100,100);

}


#pagetitle {

width: 100%;
margin: 0.3em 0em 1.0em 0em;
padding: 0em 0em 0.5em 0em;
background-color: inherit;
color: rgb(100,100,100);
border-bottom: solid 0.1em rgb(215,215,215);
font-weight: bold;
font-size: 1.3em;
height: 100%;
overflow: auto;

}


#pagetitle p {

margin: 0;
padding: 0;

}

.corps-sp1 {

clear: left;
float: left;
width: 50em;
margin: 0em 0em 0em 0em;
padding: 0em;
background-color: rgb(255,255,255);
color: rgb(100,100,100);

}

.corps-sp2 {

float: left;
width: 100%;
margin: 0em 0em 2.0em 0em;
padding: 0em;
background-color: rgb(255,255,255);
color: rgb(100,100,100);

}



.corps-sp-title {

display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.3em;
background-color: #dadada;
color: #710101;
font-weight: bold;
font-size: 1.2em;

}



#colonne_droite {
float: right;
width: 17.0em;
margin-top: 0em;
margin-left: 0.5em;
margin-bottom: 0em;
margin-right: 0em;
padding: 0em;
}


.cd-s {

width: 100%;
margin: 0em 0.8em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
border-radius: 0.6em;
-moz-border-radius: 0.6em;
background-color: rgb(255,255,255);
color: rgb(100,100,100);	

}



.cd-title {

display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.2em;
border-bottom: solid 0.1em #710101;
color: #710101;
font-weight: bold;
font-size: 1em;

}



#footer {

clear: both;
width: 100%;
height: 2.5em;
margin: 1.0em 0em 0em 0.0em;
padding: 0.5em 0em 0.5em 0em;
border-top: solid 0.1em rgb(200,200,200);
border-bottom: solid 0.1em rgb(200,200,200);	
background-color: rgb(255,255,255);
text-align: center;
color: rgb(100,100,100);
font-size: 1.1em;

}


J'attends vos nouvelles opinions Smiley smile

Merci encore


Florent > J'ai modifié Smiley langue Et pour le tuto a la base je mettais basé dessus. Mais la je tente de tout modifier.
Modifié par Snipy (20 Oct 2007 - 14:42)
Mouais, ça me semble mal barré, là.

Tu travailles avec trois flottants ayant des largeurs en EM. Argh. Smiley biggol
Il suffit d'augmenter un peu la taille du texte (un petit Ctrl+Plus) pour que les colonnes s'élargissent, et risquent de ne plus tenir dans leur conteneur. Ou bien elles ne tiendront pas si la fenêtre n'est pas assez large (je doute qu'un total d'environ 100em tienne sur du 800x600... ou même en 1024px de large).
Et si ça ne tient pas en largeur, les flottants ça passe allègrement à la ligne. Mauvais plan.

Je ne prononce pas sur le reste sans avoir vu le détail sur une page en ligne (suis un peu flemmard, pas trop envie de reconstituer la page, la feuille de styles, etc.), mais ces deux éléments me semblent casse-gueule:
- le fait d'utiliser trois flottants plutôt que deux;
- le fait d'utiliser des largeurs en EM.
Je vois tout à fait ce que tu veux dire,

Mais en fait la première version de ce que j'avais fait (en me basant sur le tuto à 3colonnes) était assez bancale.

Les largeurs étaient effectivement fixes ou en % par contre la taille du texte en px.
Donc tout n'avait rien à voir avec cela.

Mais comme je n'arrivais pas à faire ce que je voulais, je me suis basé sur une structure d'un site qui ressemble (par sa structure) au résultat que je voulais atteindre Et dont vous avez vu le code Smiley smile

Donc d'un coté j'ai ma première version +ou- bon sémentiquement mais dont je n'arrive pas à en tirer tout ce que je veux et d'un autre coté ce code la qui comme tu le dis doit être bancale, mais qui répond à mes attentes.

La grosse différence est que dans cette version j'ai un flottant gauche (menu gauche) et mon corps de la page (ou dedans il y a la partie centrale + le menu droit => flottant droit). Ce qui change d'avant ou j'avais 3 blocs séparés.

Ton avis ? Mieux vaut que je revienne comme avant en essayant de régler mes problèmes un par un?
Modifié par Snipy (20 Oct 2007 - 16:48)
Snipy a écrit :
Ton avis ? Mieux vaut que je revienne comme avant en essayant de régler mes problèmes un par un?

Là je ne sais pas trop...

- j'ai du mal à lire ton code HTML (espaces vides, mauvaise indentation du code...);
- j'ai du mal à lire ton code CSS (ou plus précisément: je lis très bien le code, mais je n'ai pas un moteur de rendu greffé dans le cerveau, donc je ne visualise pas très bien...);
- je ne sais pas quels étaient les problèmes que tu avais avec ton ancienne version (qui reprend le tutoriel d'Alsa).

Pour ma part, vu que je connais bien la structure à trois colonnes proposé par le tuto d'Alsa, j'aurais plus de facilités à te conseiller pour corriger d'éventuels problèmes. Smiley cligne
AfPour le problème du manque de lisibilité du code XHTMl, j'ai l'impression que c'est la balise code qui me bouge tout ça

Mais voici un screen commenté pour que tu puisses voir la tete de la page Smiley smile
http://www.snipy.info/masque.png

Ne te fie pas par contre aux tailles du texte car comme j'avais commencé à passer de em a px (et donc mettre une taille de base à tout le body font-size: 75%;)
c'est pas du tout terrible actuellement Smiley smile

Merci beaucoup Smiley cligne
Modifié par Snipy (22 Oct 2007 - 12:13)
Sujet clos
Aller à