26784 sujets

CSS et mise en forme, CSS3

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

Stephan a écrit :
Très simple, le lien que je t'ai donné explique les fonctionnalités de ce forum. On peut y lire comment intégrer une image à notre message, et plus encore.

Voilà ! Smiley cligne


OK Stephan, merci, je vais bosser dessus.
Pas du tout !

À moins que je ne me trompe,<edit>Et je me trompe ! </edit> tu ne peux publier une image que si elle se trouve sur un serveur. Et le format psd (photoshop document) ne convient pas.

Une image jpg (ou gif) serait mieux.
Modifié le 26 Nov 2004 - 21:33
ElMoustiko a écrit :
Ahh oui mais là tu as utilisé la syntaxe BBcode pour insérer une image en ligne.

Pour joindre une image en local il faut utiliser le lien "Joindre une image" sous la zone de saisie de texte. Tu vas chercher ton image et ça roule.


J'ai testé ça aussi, mais rien n'y fait!!!!
Modérateur
ATLONIA a écrit :
EssaiPageWeb.psd
Comme ça, c'est bon ?

Je penses que cela vient du format psd qui ne doit pas être permis (et aussi pas plus de 200 ko). Enregistres plutôt ta capture en png, gif ou jpeg et cela devrait fonctionner.

edit: j'avais pas vu ta réponse Stephan Smiley cligne
Modifié le 26 Nov 2004 - 21:37
Stephan a écrit :
Pas du tout !

À moins que je ne me trompe,<edit>Et je me trompe ! </edit> tu ne peux publier une image que si elle se trouve sur un serveur. Et le format psd (photoshop document) ne convient pas.

Une image jpg (ou gif) serait mieux.


Merci Stephan, je teste immédiatement.
ATLONIA a écrit :
Peut-être...:

upload/236-EssaiPageWeb.gif

HOURRAH !!!!!

J'ai récupéré mes deux neurones...Glop! Glop!

Merci à tous, vous pouvez maintenant voir le résultat que j'obtiend à l'écran avec mon code.
Modifié le 26 Nov 2004 - 21:47
Alors maintenant que ton problème d'affichage est réglé, tu peux mettre un [Résolu] dans ton sujet !

Nan ! C'est une joke ! Smiley lol
Modérateur
ATLONIA a écrit :
HOURRAH !!!!!


Smiley pile

C'était quoi la question de départ? Smiley dehors
Modifié le 26 Nov 2004 - 21:55
Igor a écrit :


Smiley pile

C'était quoi la question de départ? Smiley dehors


La question était de savoir ou était l'erreur dans mon script.

Mon code XHTML:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
  <title>Programmation d&eacute;butant XHTML, CSS, JavaScript.</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <meta name="author" lang="fr" content="Jean-Marie ">
  <link href="Index2.css" rel="StyleSheet" type="text/css" />
</head>
<body>
<div class="conteneur">
<div id="head1"><h1>Que j'aimerais savoir!</h1></div>
<div id="gauche">ronron</div>
<div id="droite">nnnnnnnnn</div>
<div id="centre">
<p>blabla</p>
<p>blabla</p>
etc....
</div>
</body>
</div>
</html>


Mon code CSS:
.conteneur { /* définition du bloc conteneur (parent du bloc body) */
	 background-color:#CCCCCC;
     margin-left: auto;
     margin-right: auto;
     width: 770px; /* largeur obligatoire pour être centré */
     text-align: center; /* on rétablit l'alignement normal du texte */
     }
     
body { /* définition du bloc body (enfant du bloc conteneur) */
background-color:#88b9de;
margin: 0px;/* sans marges, la page sera collée aux bords */
text-align: left;
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
}

#head1 {
background-color: #a7b4e6 ;
margin: 116px;
width: 770px;
height: 91px;
}

#gauche {
position: absolute; /* on place le bloc gauche à gauche en position absolue */
left: 116px; 
background-color: #88b9de ;
width: 150px;
height: 337px;
}

#centre {
background-color: #d8f2f4 ;
margin-left: 266px; /* on place le bloc centre par rapport à la largeur du bloc gauche */
width: 470px;
height: 337px;
text-align:justify;
}

#droite {
position: absolute; /* on place le bloc droit à droite en position absolue par rapport an bloc centre */
margin-left: 470px; 
background-color: #88b9de ;
width: 150px;
height: 337px;
}

h1 {
margin-top: 20px;
color:blue;
text-align:center;
}


Le résultat:
upload/236-EssaiPageWeb.gif

Comment puis-je faire pour supprimer les décalages au dessus et en dessous de mon bloc de titre ?

Merci pour vos efforts.
Modérateur
#head1 {

background-color: #a7b4e6 ;

[b]margin: 116px;[/b]

width: 770px;

height: 91px;

}


En gras la marge externe de #head1 qui telle va ajouter un espace de 116px tout autour de cette div (haut, droite, bas et gauche).
Remplaces le par:
margin:0;
pour voir ce que cela donne.
Stephan a écrit :
Alors maintenant que ton problème d'affichage est réglé, tu peux mettre un [Résolu] dans ton sujet !

Nan ! C'est une joke ! Smiley lol


C'est vrais j'ai posé deux problèmes dans ce sujet!
Mon problème d'envoi d'image sur le forum est, lui résolu, mais pas mon problème d'affichage de mon site.

Alors puis-je continuer ici, ou dois-je ouvrir un autre sujet sur le même problème ?
Igor a écrit :
#head1 {

background-color: #a7b4e6 ;

[b]margin: 116px;[/b]

width: 770px;

height: 91px;

}


En gras la marge externe de #head1 qui telle va ajouter un espace de 116px tout autour de cette div (haut, droite, bas et gauche).
Remplaces le par:
margin:0;
pour voir ce que cela donne.


J'ai bien supprimé mes deux vides, mais mon bloc de titre se decale du coup complètement à gauche de ma page.

Y-a-il une autre façon de le centrer ?

Merci.
Modérateur
ATLONIA a écrit :

</div>
</body>
</div>
</html>[/code]

Cette div fermante ne devrais par être ici Smiley nono
Pour centrer l'élément tu peux utiliser les marges auto :

margin: 0 auto;


Mais pour les versions d'IE inférieure à la 6 ça va foirer, donc il faut faire un
text-align: center ;
sur l'élément parent (le body) et rétablir ensuite l'alignement normal avec
text-align: left ;
dans ton titre.

Voilà

Sinon pour centrer avec ta "bidouille",
margin: 0 116px ;
fonctionnerait mais uniquement pour cette résolution et cette taille de fenetre du navigateur, en effet si tu changes la dimension de la fenetre, tes marges de 116px ne voudront plus rien dire, d'où l'utilisation des marges auto Smiley cligne

PS je vais nettoyer les post inutile pour faire du ménage Smiley cligne
Voilà j'ai nettoyé un peu Smiley biggrin
Modifié le 26 Nov 2004 - 22:28
Modérateur
Bon reprenons depuis le début.
Tu souhaites un header, suivi de 3 colonnes, une pour ton contenu principal et deux pour des menus de part et d'autre par exemple, et je rajouterais personnellement un pied de page.
Tu souhaites d'autre part que tout ceci soit centré dans la page telle qu'elle sera restituée par le navigateur du visiteur. Une page centrée qui pourrait être soit fluide, c'est à dire s'adaptant à la résolution de l'écran du visiteur, soit de largeur fixe mais qui permette une restitution sans scroll vertical pour les résolution en 800x600 px. D'où le besoin d'un bloc conteneur.

En résumé:
#container
#header
#contenu
#menu1
#menu2
#footer

En utilisant des flottants tu peut parvenir à ce résultat. Dans le principe:
#container a une largeur fixe ou en pourcentage de la fenêtre, il est par exemple centré dans la page grâce à cette technique de marges automatiques
À l'intérieur de #container tu définis ton #header en définissant par exemple sa hauteur et des marges interne, sans t'occuper de sa largeur.
A la suite le principe est de définir d'une part tes #menus1 et #menu2 en les faisant flotter, l'un à gauche et l'autre à droite, ils seront bornés par #container. Ces deux menus devront être munis d'une largeur, prenons par exemple 20% de largeur.
Ton contenu principal (#contenu) pour être placé entre les deux menus devra être muni de marges gauche et droite équivalentes aux deux largeurs de #menu1 et #menu2.

Un pied de page #footer muni d'un clear:both pour qu'il se place sous les blocs flottants complétera la page.

Tu peux t'inspirer des modèles d'Alsacréations, consulter également Floatutorial et aller faire un tour sur les articles d'Openweb consacrés au positionnement.
Bravo Igor, là tu as fait du fort Smiley cligne

A mon avis les modèles d'alsa suffisent, mais ils utilisent le positionement absolu et je trouve (comme l'expliquait Igor) l'utilisation des flottant plus adaptée, surtout pour placer le pied de page Smiley cligne
Modérateur
ElMoustiko a écrit :
Bravo Igor, là tu as fait du fort Smiley cligne

Comme j'ai deux ou trois connaissances à convaincre par la pratique, j'en profite pour roder mon discours pratique. Smiley cligne
Merci à tous pour votre dévouement!

igor, je vais m'empresser de bosser ton tuto, je vois là une lueur d'espoir.

Je vous tiens au courant.

@+
Une heure du mat', et j'me prend à rever,

C'est mieux non ?

#conteneur { /* définition du bloc conteneur (parent du bloc body) */
	 background-color:#88b9de ;
     margin-left: auto;
     margin-right: auto;
     width: 770px; /* largeur obligatoire pour être centré */
     text-align: center; /* on rétablit l'alignement normal du texte */
     }
     
body { /* définition du bloc body (enfant du bloc conteneur) */
background-color:FFFFFF;
margin left: 0px;/* sans marges, la page sera collée aux bords */
text-align: center;
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
}

#head1 {
background-color: #a7b4e6 ;
margin left: auto;
margin right: auto;
height: 91px;
}

#gauche {
float: left;
width: 20%;
background-color: #88b9de ;
margin: 0;
height: 337px;


}

#centre {
background-color: #d8f2f4 ;
margin-left:20%; /* on place le bloc centre par rapport à la largeur du bloc gauche */
margin-right:20%;
height: 337px;
text-align:justify;
}

#droite {
float: right;
width: 20%;
background-color: #88b9de ;
margin: 0;
height: 337px;
}

h1 {
margin-top: 20px;
color:blue;
text-align:center;
}



mais pour le conteneur, n'est-il pas mieux d'utiliser un "div class" plutot qu'un "div id", les deux fonctionnent ?

en plus, en donnant la même couleur à mon #conteneur et à mes #menus,
je donne l'impression que les #menus sont parfaitement accolés au #centre et qu'ils descendent jusqu'en bas de ma page.

Mon resultat:
upload/236-EssaiPageWeb.gif
Modifié le 27 Nov 2004 - 01:26
Pages :