Geckozone

vous l'aurez voulu !

J'ai fait une petite page pour me lancer dans le CSS. Attention, il s'agit d'une véritable oeuvre d'art, jugez plutôt

: http://www.barf.ch/css_test/css.html

Voici le code html :

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>

<h1>Voici mon titre</h1>

<div class="rouge">
<p>Rectangle rouge</p>
</div>

<div class="bleu">
<p>rectangle bleu</p>
</div>

<h1>Voici mon deuxieme titre</h1>

<div="image"></div>

</body>
</html>

et celui de ma CSS :

Code : Tout sélectionner

div.rouge {   border: solid red 2px;
	      font-family: verdana;
              padding: 30px;
	      width: 80px;
	      background-color: #dfdfdf
} 	

body h1 { color: blue;
      font-family: verdana;
}

div.bleu {    position: absolute;
	      left: 220px;
              top: 68px;
              border: solid blue 2px;
	      font-family: verdana;
              padding: 30px;
	      width: 80px;
	      background-color: #dfdfdf
}

div.image { background-image: url("http://www.geckozone.org/forum/templates/geckozone/images/geckozone_logo.png")
}

Déjà là, plusieurs questions me turlupinent :

1) pour aligner le rectangle bleu avec le rectangle rouge, je lui ai attribué une position absolue et j'ai cheché à tatons le nombre de pixels qu'il fallait mettre pour la position en hauteur (top: 68px;), ce que me plaît moyennement. Il dois sûrement y avoir une autre méthode. Quelle est-elle ?

2) je n'aime pas travailler avec des positions absolues. Y a t-il une autre manière de procéder ?

3) mon image ne s'affiche pas. Pourquoi ?

Merci de votre aide.

Emma.

EmmaZL a écrit : <div="image"></div>

3) mon image ne s'affiche pas. Pourquoi ?

<div class=image> ?

quelle nouille je fais !!

Merci !

ah ben non, ça marche pas non plus : http://www.barf.ch/css_test/css.html

oui, c'est parceque l'image est une image de fond. Comme il n'y a pas de contenu, ben y'a pas d'image de fond. Si tu écris qqc dans ton div, tu verras l'image apparaitre.

EmmaZL a écrit :vous l'aurez voulu !

J'ai fait une petite page pour me lancer dans le CSS. Attention, il s'agit d'une véritable oeuvre d'art, jugez plutôt : http://www.barf.ch/css_test/css.html

Eh bien pour le moment c'est très bien

EmmaZL a écrit :
Code : Tout sélectionner
snip
Déjà là, plusieurs questions me turlupinent :

1) pour aligner le rectangle bleu avec le rectangle rouge, je lui ai attribué une position absolue et j'ai cheché à tatons le nombre de pixels qu'il fallait mettre pour la position en hauteur (top: 68px;), ce que me plaît moyennement. Il dois sûrement y avoir une autre méthode. Quelle est-elle ?

Moi je dirais 67px plutôt.
En effet, si tu réduis le "left" de div.bleu (à 100px disons), tu peux les aligner plus facilement.

Outil utile : Web Developer. Installe, redémarre. Ouvre ton site et fait : "CSS" > "Edit CSS". Tu peux manipuler en direct tes CSS, génial non ?

Sinon une autre possibilité c'est de positionner également le bloc rouge, avec les même dimensions.

EmmaZL a écrit :2) je n'aime pas travailler avec des positions absolues. Y a t-il une autre manière de procéder ?

Avec les flottants. Ça dépend de ce que tu veux faire, dans certaines conditions un absolu est préférable, dans d'autres un flottant

Code : Tout sélectionner

.rouge {
float:left;
}

EmmaZL a écrit :3) mon image ne s'affiche pas. Pourquoi ?

Arno a déjà répondu, mais je vais compléter. Maintenant que tu as la barre Web Developer, tu peux aisément et facilement valider ton code en faisant "Validation" > Valider HTML (ou CSS).
Cela t'aurais en plus permis de remarquer que

Il manque un doctype à ta page. Prend un doctype HTML 4.01 strict ça va très bien :
Code : Tout sélectionner
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
Il manque une balise <title> dans le head pour définir le titre de la page.

Tu peux également utiliser l'extension HTML Validator pour avoir une validation en direct dans la barre d'état et des messages d'erreurs dans la visualisation du code source.

meciiiiiiiiiiiiiii calimo !

comment j'ai pu vivre sans cette extension ?

EmmaZL a écrit :comment j'ai pu vivre sans cette extension ?

Pas trop mal on dirait

tu peux directement mettre à la place de :

Code : Tout sélectionner

<div class="rouge">
<p>Rectangle rouge</p>
</div>

ceci :

Code : Tout sélectionner

<p class="rouge">Rectangle rouge</p>

l'attribut class comme id sont commun à toutes les balises de (x)html ... donc inutile de mettre le div dans ce cas-ci.

Et bien sur, mettre .rouge à la place de div.rouge dans ton fichier CSS

Anonymous a écrit :tu peux directement mettre à la place de :
Code : Tout sélectionner
<div class="rouge">
<p>Rectangle rouge</p>
</div> 
ceci :
Code : Tout sélectionner
<p class="rouge">Rectangle rouge</p>
l'attribut class comme id sont commun à toutes les balises de (x)html ... donc inutile de mettre le div dans ce cas-ci.

Et bien sur, mettre .rouge à la place de div.rouge dans ton fichier CSS

merci. en effet ça économise du code.

Je trouve quand même que c'est difficile le CSS. J'ai essayé de faire un menu, mais c'est pas gagné...

Oui, pour cela je te conseille de lire les tutoriels CSS d'alsacréations (le site a récemment été remanié et depuis c'est le bordel

), tu as entre autres une galerie de menus CSS dans laquelle tu va surement trouver de l'inspiration

Merci calimo !

Je viens de lire ton tutoriel, ainsi que les 3 d'OpenWeb sur le positionnement et j'avoue que c'est vraiment pas évident. Tous ces trucs de positions flottantes, relatives, absolues, fixes, ça se mélange dans mon petit cerveau... Difficile d'imaginer une page et de quelle façon positionner tous les éléments afin d'arriver à ce que je veux...
C'est pas gagné.

Si tu t'embrouilles (ce qui est compréhensible au début) , je te propose ce billet :
Quel positionnement choisir.
J'espère qu'il te sera utile

calimo a écrit :Oui, pour cela je te conseille de lire les tutoriels CSS d'alsacréations (le site a récemment été remanié et depuis c'est le bordel )

Ah bon ? Je suis avide de critiques justement

On peut aussi signaler les modèles de mise en page en CSS

Pour les critiques en fait je pense que c'est plus par déstabilisation due à la nouveauté...
Il y a quand même par exemple "Tutoriels > Derniers articles" qui pointe vers le plan du site (

) alors qu'en plus je cherchais un lien "Tous les tutoriels", c'est assez déstabilisant

mais en fait il semblerait qu'il y ait bel et bien tous les articles et pas seulement les derniers...

Geckozone

Premiers pas CSS

Premiers pas CSS

Re: Premiers pas CSS

Re: Premiers pas CSS