IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Comment positionner un div après 3 lignes de texte?


Sujet :

Positionnement en CSS

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Septembre 2005
    Messages : 105
    Points : 68
    Points
    68
    Par défaut Comment positionner un div après 3 lignes de texte?
    Bonjour,

    je souhaiterais positionner un div contenant du texte après p.ex 3 lignes d'un texte contenant 10-20 lignes.

    Par exemple:

    texte texte texte texte texte texte texte texte
    texte texte texte texte texte texte texte texte
    texte texte texte texte texte texte texte texte
    | DIV | texte texte texte texte texte texte
    texte texte texte texte texte texte texte texte
    texte texte texte texte texte texte texte texte
    ....

    le "texte" est également contenu dans un div. Ce texte n'est pas en dur dans le code html, il est importé depuis une base de données, donc pas possible de placer le div en dur dans le code html.

    Est-ce que quelqu'un peu m'aider ? j'ai essayer avec des float, ... mais je n'y arrive pas.

    Merci d'avance.
    skeut

  2. #2
    Inactif   Avatar de Deallyra
    Profil pro
    Étudiant
    Inscrit en
    Février 2007
    Messages
    1 997
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2007
    Messages : 1 997
    Points : 1 769
    Points
    1 769
    Par défaut
    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    je souhaiterais positionner un div contenant du texte après p.ex 3 lignes d'un texte contenant 10-20 lignes.
    je suis désolée mais je ne comprends pas ce que tu veux nous dire.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Septembre 2005
    Messages : 105
    Points : 68
    Points
    68
    Par défaut
    Bonjour MimiCracra44

    je vais essayé d'être plus clair:

    depuis une BD, j'affiche des news; le texte de la news est contenu dans un div que l'ont peut appeler "story".

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="story">
    ici le texte de la news
    </div>
    A l'intérieur de cette news (donc du div "story"), je souhaite afficher un autre div ("links-box") contenant des liens.

    Le div links-box ne doit pas être affiché en haut à gauche, ni à droite, etc mais après quelques lignes de texte de la news, graphiquement comme ceci:

    texte de la news texte de la news texte de la news
    texte de la news texte de la news texte de la news
    texte de la news texte de la news texte de la news
    | links-box | texte de la news texte de la news
    texte de la news texte de la news texte de la news
    texte de la news texte de la news texte de la news
    .....

    Je n'ai pas réussi à faire cela et je demande donc si l'un d'entre-vous pourrais me fournir le css des 2 div:
    - story
    - links-box

    voilà, j'espère avoir été plus clair.

    Merci à vous.
    skeut

  4. #4
    Inactif   Avatar de Deallyra
    Profil pro
    Étudiant
    Inscrit en
    Février 2007
    Messages
    1 997
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2007
    Messages : 1 997
    Points : 1 769
    Points
    1 769
    Par défaut
    Tu veux dire quelque chose comme ça?


    bien sûr, avec un ou deux modifications de position dans le container
    ton container serait story et links blocks serait block news à positionner à gauche

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Septembre 2005
    Messages : 105
    Points : 68
    Points
    68
    Par défaut
    oui, plus ou moins comme cela, sauf que dans ton exemple, la boite rouge est tout en haut, je souhaiterais par exemple qu'elle soit 3 lignes plus basse, avec pour ton exemple, le texte qui rempli l'espace en dessus, à gauche et en bas.

    est-ce que c'est possible de faire cela, sachant que le texte de la news ne figure pas en dur dans le code html?

    a+ et merci.
    skeut

  6. #6
    Inactif   Avatar de Deallyra
    Profil pro
    Étudiant
    Inscrit en
    Février 2007
    Messages
    1 997
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2007
    Messages : 1 997
    Points : 1 769
    Points
    1 769
    Par défaut
    ben oui...
    tu as toi meme dis que tu avais des div non?

    http://pbnaigeon.developpez.com/tuto...-page-CSS/#LIV

    modifies le css à ta guise

  7. #7
    Membre du Club
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Septembre 2005
    Messages : 105
    Points : 68
    Points
    68
    Par défaut
    Merci MimiCracra44

    on approche du but. Donc ma question était:

    Comment dois-je modifier le div pour qu'il n'y ait pas d'espace jaune en haut du bloc news rouge mais que le texte du contenu aille jusqu'au bord droit?
    (voir fichier joint boites.jpg)


    Ici, j'ai mis mais je souhaiterais que le texte du contenu aille jusqu'au bord droit en dessus de du div rouge.

    merci et a+.
    skeut
    Images attachées Images attachées  

  8. #8
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 52
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    On pourrait imaginer quelque chose du genre:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 nom</title>
    </head>
     
    <body>
    	<div style="padding-top:3.75em;">
    		<img src="carre.png" alt="image" width="100" height="100" style="float:left;" />
    		<p style="line-height:1.25em; margin-top:-3.75em;">
    		Quam ob rem circumspecta cautela observatum est deinceps et cum edita montium petere coeperint grassatores, loci iniquitati milites cedunt. ubi autem in planitie potuerint reperiri, quod contingit adsidue, nec exsertare lacertos nec crispare permissi tela, quae vehunt bina vel terna, pecudum ritu inertium trucidantur.
    		Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.
    		Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
    		Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.</p>
    	</div>
    </body>
    </html>

    Mais ça marche pas sur IE (version 7 comprise par contre ça passe sur la béta d'IE8, ma première expérience positive avec ! ). Le simple ajout d'un position:relative, typique pour règler les problème de margin négatif ne fonctionne pas et creuser du côté du haslayout semble compromis puisqu'il induit un nouveau contexte de formatage ce que l'on veut justement éviter ici.

    Après, on se trouve en face d'un cass-tête. Opéra ne laisse que 2 lignes au-dessus à moins d'augmenter légérement la valeur du margin/padding (genre 3.8). Seulement augmenter le margin fait passer une 4ème ligne par-dessus l'image sur FF Seul IE8 semble s'en tirer dans les 2 cas (flemme de tester sur mac).

    Bref, cette solution ne me semble pas exploitable et pas le temps d'expérimenter autre chose

  9. #9
    Membre du Club
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Septembre 2005
    Messages : 105
    Points : 68
    Points
    68
    Par défaut
    Bonjour Candygirl

    merci pour la réponse et le début de réflexion. Comme tu l'as dit, ça n'est pas une solution tout à fait satisfaisante car ne fonctionne pas pour IE7.

    Pour l'instant, j'ai résolu le problème avec php; pour ceux que ça intéresserait, j'ai mis le contenu de la news dans un array puis explode() du contenu après chaque balise </p>.

    C'est beaucoup moins élégant que le css mais ça me dépanne.

    Merci à tous ceux qui se sont penchés sur ma question et si quelqu'un a une idée, je suis toujours preneur.

    skeut

Discussions similaires

  1. Afficher une DIV après chargement du document ?
    Par tjoce05 dans le forum jQuery
    Réponses: 3
    Dernier message: 23/03/2015, 16h27
  2. [C#] Comment cacher un div après x secondes
    Par jbrasselet dans le forum ASP.NET
    Réponses: 10
    Dernier message: 17/03/2011, 10h16
  3. Réponses: 5
    Dernier message: 20/04/2009, 12h11
  4. Comment positionner une div par rapport à une autre
    Par solorac dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 17/07/2008, 21h08
  5. Comment positionner un div a coté de l'autre
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/01/2007, 18h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo