28220 sujets

CSS et mise en forme, CSS3

Carre pour les news

Pages :
(reprise du message précédent)

Pour faire une mise en page en css, il ne faut plus raisonner comme avec les tables.

D'abord, il faut mettre en place des "zones principales", lesquelles vont correspondre à des div "de structure", dans lesquels tu insèreras éventuellement d'autres div, comme par exemple : tes petits carrés.

Dans ton site, nous avons :

- 1 header
- 1 colonne de gauche, dans laquelle il y a les carrés
- 1 colonne à droite, pour le contenu

Ce qui correspond à ce gabarit : http://css.alsacreations.com/modeles/modele4.htm

Ne tiens pas compte de ce qu'il y l'intérieur des modèles proposés, donné pour exemple ...

Il faut que tu récupères uniquement le squelette, à savoir :


#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

<div id="conteneur">

	  <div id="header">
          </div>
	  
          <div id="gauche">
	  </div>
	  
	  <div id="centre">
  	  </div>
	  
	  <div id="pied">
          </div>
</div>


Et c'est à l'intérieur de ces conteneurs principaux (qui délimite les parties de la page) que tu vas définir tes carrés :



<div id="gauche">
    <div id="carre1">contenu de carré 1 <div>
    <div id="carre2">contenu de carré 2 <div>
    <div id="carre3">contenu de carré 3 <div>
</div>


ou, si tes carrés ont tous la même apparence :


<div id="gauche">
    <div class="carre">contenu de carré 1 <div>
    <div class="carre">contenu de carré 2 <div>
    <div class="carre">contenu de carré 3 <div>
</div>


Et dans ta css, tu vas définir les styles de tes carrés :

soit un style particulier pour chaque carré (exemple 1 : chaque carré a été identifié de façon unique avec : id="carre1", id="carre2", id="carre3" :



#carre1 {
styles de carrés 1
}

#carre2 {
styles de carré 2
}

#carre3 {
styles de carre3
}


ou, si tu as définis tes carrés avec une classe :


.carre {
stayles de tes carrés
}


Comprends-tu le principe ?

Avant de chercher à obtenir exactement le résultat visuel que tu attends, fais fonctionner un peu tout cela.

Car, à travers ces exemples, je t'ai "mâché" tout le travail d'aprentissage que tu aurais découvert tout seul dans les liens que nous t'avons donnés.

Alors, fais un petit effort, maintenant !
Smiley cligne Smiley smile
Modifié par Vero (10 Apr 2006 - 19:57)
Pourquoi ces div :


<div class="hautgauche"></div><div class="hautmilieu"></div><div class="hautdroit"></div>
				<div class="cotegauche"></div><div class="contenu"></div><div class="cotedroit"></div>
				<div class="basgauche"></div><div class="basmilieu"></div><div class="basdroit"></div>


Pour mettre tes images en arrière plan ?

Une habitude à perdre, aussi : la découpe d'image en petits morceaux.

Tu peux faire :

1 image qui se répète en fond de ton div corpsmenu ( puisque tu as défini le conteneur parent en pixel (150px)) ce div corpsmenu peut l'être aussi (140px, par exemple), de la largeur d'une image de fond, de 1px de hauteur (par exemple), laquelle va englober les bordures gauche et droite.

Ensuite, dans ton div corspmenu, tu vas avoir du contenu.
Lequel va être balisé, par un titre par exemple : <h2>compteur<h2>.

Pour ce h2, tu vas définir une image de fond, de la largeur de la première image (celle de div corpsmenu) pour l'encadrement du haut.
Cette image va se placer au dessus de celle du div corspmenu, en haut.

Ensuite, il faut faire des réglages, avec les marges, les hauteurs etc.

En fait, tu prévois mal ton découpage : inutile d'ajouter des div pour les images de fond ... enfin, pas de façon systématique.

<edit> Tu peux aussi utiliser les styles bordures en css (propriété border) et définir une couleur de fond pour reproduire le design de ton image, ce qui serait beaucoup plus leger ... et plus facile !

Prends le temps de découvrir les possibilités des styles en css ...

Smiley cligne
Modifié par Vero (10 Apr 2006 - 21:40)
a écrit :
En fait, tu prévois mal ton découpage : inutile d'ajouter des div pour les images de fond ... enfin, pas de façon systématique.

<edit> Tu peux aussi utiliser les styles bordures en css (propriété border) et définir une couleur de fond pour reproduire le design de ton image, ce qui serait beaucoup plus leger ... et plus facile !

Ben justement c'est ca que je veut savoir depuis le debut Smiley decu Smiley decu Smiley decu !!!!!
Alors, rendez-vous sur cette page, qui présente de multiples ressources pour apprendre à utiliser les styles.

Il faut que tu recherches, en particulier : background et border.

Smiley cligne

Pour rappel, les div internes que tu as définis sont inutiles ...
Parfait c'est super ca je vais bien trouve mon bonheur, par contre si j'orai aimer une page avec un exemple de ce que je veut faire en gros avec des bordures, si j'avai vous en avez un sous la main Smiley smile !
Merci beaucoup
SVP un petit indice car je me prend la tete la dessus Smiley decu Smiley decu Smiley decu
Et SVP regarde sous IE ce que cela donne aussi car c'est ca aussi ma prise de tete!
Merci
Modifié par cerede2000 (12 Apr 2006 - 18:41)
J'ai le sentiment que toutes mes explications précédentes n'ont pas été prises en compte.

Ce que tu veux faire nécessite peut-être un peu plus de maîtrise que tu ne l'imagines ... il faut acquérir les bases indispensables que nous t'avons suggérer tout au long de ce topic, mais qu'à priori tu n'as pas le courage d'appréhender...

Voici un essai de ce que tu veux faire, perfectible bien sûr, pour que tu es une idée du principe et bien que ce type de design soit un peu dépassé. En effet, tes carrés pourraient être mis en valeur en css pur, peut-être pas exactement comme cela ...

Admettons : c'est didactique ...

En commentaires : quelques explications

A noter : l'économie de styles et de div !

J'ai préféré identifié tes conteneurs par des classes, plutôt que par des ID, pour qu'ils puissent être réutilisés dans la même page pour un autre carré .... 

<style type="text/css">

body {
font: 80% black verdana, sans-serif;
}

.cadre {
	width: 15em;
	background : url(barre.gif) repeat-x;
}

.cadre h2 {
	height : 30px; /*de la hauteur de l'image de fond*/
	line-height : 30px; /*pour centrer le titre verticalement*/
	background : url(coin-hd.gif) no-repeat top right; /*enlever la transparence de fond à l'image*/
	margin : 0;
	padding : 0;
	font-size : 1em;
	text-align : center;
}

.cadre span {
		display : block; /*pour qu'il prenne 100% de la largeur*/
}

.cadre h2 span {
	background : url(coin-hg.gif) no-repeat top left; /*enlever la transparence de fond à l'image*/
}

.cadre p {
	border-left : 3px groove #3369c1; /*pour éviter des images, il y a peut-être des styles de bordures susceptibles de reproduire ce que tu veux*/ 
	border-right : 3px ridge #3369c1; /*jouer sur les types, la couleur, l'épaisseur ...*/
	margin : 0;
	padding : 0.5em;
}

p.bas {
	background : url(coin-bg.gif) repeat-x bottom; /* modifier l'image : pour une image qui se répète */
	padding-bottom : 15px;
}




</style>
</head>
<body>
<div class="cadre">
	<h2><span>Titre de mon cadre</span></h2>
		<p>Texte de contenu</p>
		<p>Texte de contenu</p>
		<p class="bas">Texte de contenu</p>
</div>



Mieux pour t'aider, je ne peux pas !
Modifié par Vero (12 Apr 2006 - 20:54)
Parfais, je voulais une base pour bosser j'adore!!!! A moi maintenant de bosser la dessus.
Je te remercie enormement!!
Modifié par cerede2000 (12 Apr 2006 - 21:08)
Une toute petite derniere choses apres on pourra clore le sujet.
Voici deja ce que j'obtient:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
body {
	font: 80% black verdana, sans-serif;
}
.cadre {
	width: 200px;
	height: 30px;
	background : url(coin-hg.gif) no-repeat top left;
}
.cadre h2 {
	height : 30px; /*de la hauteur de l'image de fond*/
	line-height : 30px; /*pour centrer le titre verticalement*/
	background : url(barre.gif) repeat-x top;
	margin-left: 6px;
	padding: 0;
	font-size : 1em;
	text-align : center;
}
.cadre span {
	display: block;
}
.cadre h2 span {
	background : url(coin-hd.gif) no-repeat top right;
}
</style>
</head>
<body>
	<div class="cadre">
		<h2><span>Titre de mon cadre</span></h2>
	</div>
</body>
</html>

Mais avec ceci on voit dans le haut droit l'image de fond du h2, je n'arrive pas a faire en sorte que le coin droit qui est dans le span n'est pas cette image en fon derriere.
Merci
Il faut que tes images représentant les coins aient un fond non transparent, c'est à dire de la couleur du fond de page (pour recouvrir l'image de fond)

Je te l'ai mis en commentaire ...

Tu as du mal avec la lecture ?
Smiley cligne Smiley biggrin
Pages :
Sujet clos
Aller à