mise en page avec nvu ?

jibéo · Message par **jibéo** » 24 janv. 2007, 16:45

c'est vraiment bien comme logiciel,
j'apprécie de plus en plus,
mais je ne dois connaître que 5-10 % du log !

ma question est : j'ai une page classique avec colonnes et lignes,
sur la colonne de gauche j'ai un texte
sur celle de droite une image

est-il possible de faire un peu de mise en page de façon à ce que le texte morde un peu sur la photo par ex ?

je donne le lien pour mieux me faire comprendre
(c'est un site que j'ai fabriqué, mais ce n'est pas moi dont on parle) :

http://marcellinkpeou.free.fr/

merci d'avance !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **chinon37** » 24 janv. 2007, 17:19

c'est possible en mettant la photo en fond du conteneur avec non répétition de cette image de fond

Message par **Ymai** » 24 janv. 2007, 17:48

Bonjour
J'ai une autre méthode qui fait appel à CSS.
Je définis deux blocs: l'un à gauche de la page, l'autre à droite pour contenir l'image.
Dans le bloc de droite, je positionne l'image en "relatif" et je la décale sur le texte de gauche.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>le titre</title>
  <style type="text/css">
.blocGauche {
width: 400px;
float: left;
}
.blocDroit {
float: left;
}
.imageDebordante {
position: relative; 
left:-50px
}
  </style>
</head>
<body>
<div class="blocGauche">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Proin nonummy
nunc non ligula. Duis orci eros, dapibus in, pharetra id, suscipit vel,
quam. Nullam faucibus rutrum enim. Praesent neque lorem, sodales non,
tempor vitae, dapibus ac, mi. </div>
<div class="blocDroite"><img
 style="width: 400px; height: 300px;" class="imageDebordante"
 alt="image" src="image.jpg"></div>
</body>
</html>

Message par **chinon37** » 24 janv. 2007, 18:23

Dans ton exemple, chez moi, l'image se retrouve sur le texte ?! et non au dessous.
Et chez toi?

Message par **Ymai** » 24 janv. 2007, 18:40

C'est, ma foi, fort exact.

Et le pire c'est qu'en jouant sur l' Index Z de l'onglet "Boîte" de KaZcadeS, je n'arrive à rien de mieux.
Mettons que je n'ai rien dit, donc.

jibéo · Message par **jibéo** » 24 janv. 2007, 18:52

merci chinon pour la réponse ... et serait-ce trop demander que de traduire en quelque chose que je puisse utiliser ?
je suis débutant hein

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **chinon37** » 25 janv. 2007, 10:39

je vais essayer:
Soit un conteneur générique <div> que nous appellerons "cadre1" pour l'occasion.
On crée dans la feuille de style un id :#cadre1
dans l'onglet fond,
- ligne "image", on va chercher l'image: par ex: pt_marcellin_noir.gif
- pas de répétition
- la position peut être ajustée (Kazcades uniquement): gauche, centrée, droite... ou, en passant par l'onglet "général", en entrant une valeur du type:

Code : Tout sélectionner

background-position:100px 20px;

où la première valeur est le décalage vers la droite et la 2eme valeur le décalage vers le bas (par rapport au coin haut gauche du conteneur)
Si l'éditeur css est celui d'origine de Nvu (c'est une grave erreur!!), il faut modifier la feuille de style à la main dans le code source.

- on applique l'id #cadre1 au div concerné par un clic droit sur <div> dans la barre d'état en bas de l'écran.
l'image sera en fond et il sera possible d'écrire par dessus.
Nb: les valeurs de positionnement du background peuvent être des %, des em, px, etc.

jibéo · Message par **jibéo** » 28 janv. 2007, 16:34

merci Chinon pour ta longue réponse fournie ...

hélas je suis encore trop débutant pour bien comprendre tout ce que tu as dit
serait-ce possible de me montrer à quoi ça ressemble une fois codé afin que je comprenne mieux en fonction de ce que tu dis ?

sinon il y a ça que je n'ai pas compris :

Si l'éditeur css est celui d'origine de Nvu (c'est une grave erreur!!), il faut modifier la feuille de style à la main dans le code source.

merci !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

odin · Message par **odin** » 28 janv. 2007, 16:52

jibéo a écrit :
Si l'éditeur css est celui d'origine de Nvu (c'est une grave erreur!!), il faut modifier la feuille de style à la main dans le code source.

merci !

L'éditeur CSS d'origine implanté dans NVU présente des bugs, ...il vaut mieux utiliser Kompozer où KaZcadeS est nativement bien implanté.

Et tout bug de codage doit être corrigé à la main

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Geckozone

mise en page avec nvu ?

mise en page avec nvu ?

Qui est en ligne ?