[SugarCube 2] Offset in the text

0 votes
asked Apr 11 by DrWhite (230 points)

Hello everyone, I apologize in advance if my remarks are not accurate I am not English.

One of the lines of my text is offbeat

pic : https://i.imgur.com/ZeLw5ss.jpg

<div style="float:left">\
<img src="file:///C:/Users/DrWhite/Desktop/DiscordiaGame/Images/Anubisface.jpg" style="border:solid 8px #000000;"/>\
</div>\
<div style="float:center;">\
Kuriosis ? Tu est ou ?
Je n'arrive plus a t'entendre.... Fait moi signe !
Ligne 3
Ligne 4
...
</div>\
<<if $dialog eq 0>>\
<<button "Répondre">>\
<<set $dialog to 1>><<goto "Dialogue Test">>\
<</button>>&#160;&#160;<<button "Ignorer">>\
<<set $dialog to 2>><<goto "Dialogue Test">>\
<</button>>\
<<else>>\
<</if>>\
<<if $dialog eq 1>>\
<div style="float:right">\
<img src="file:///C:/Users/DrWhite/Desktop/DiscordiaGame/Images/Kuriosisface.jpg" style="border:solid 8px #000000;"/>\
</div>\
<div style="float:center;">\
Ligne 1
Ligne 2
Ligne 3
Ligne 4
...
</div>
<</if>>

I think the problem is here.

<div style="float:center;">\
Ligne 1
Ligne 2
Ligne 3
Ligne 4
...
</div>

But I have no idea how to solve it ... yet the text is well between <div>

My CSS : https://pastebin.com/faus8cc2 (Tag Used in passage : "comu" and "nc")

Sugarcube 2.24.0

1 Answer

+1 vote
answered Apr 12 by greyelf (76,630 points)
selected Apr 12 by DrWhite
 
Best answer

NOTES: I am going to assume the following:
1. that the syntax errors in your CSS were introduced by either the cut-and-pasting or by the Paste-bin site.
eg. your CSS properties not having colons, your url() functions not having quotes, your focus  selectors missing a colon, etc...

2. that the strange web-browser specific -webkit-slider, -moz-range, etc.. are real, although I couldn't find them on Google.

3. that you know you will need to remove the "file:///C:/Users/DrWhite/Desktop/DiscordiaGame/" part of your image URLs sometime before releasing a version of your story.


There are a couple of issues with your HTML  and CSS:

1. The center value of your float CSS properties is invalid, you would generally use text-align: center to horizontal align text.

2. By default your floating left & right images are going to effect any text that appears on any line the image covers. This is why the "Ligne 1" is being pushed to the right, because it is being effected by the left image which is has enough height to overlap the line that text is on.

There are a number of ways you can correct this from: changing the display property of the div element containing second section of text from block to inline-block; to making the overall layout of both the top & bottom sections of text into a three panel layout.

Which you do depends on the overall layout you're looking for, which you haven't stated.

commented Apr 12 by DrWhite (230 points)
edited Apr 12 by DrWhite
For your supposition

1 : Do not hesitate to tell me syntax error, I am clearly not a pro in HTML & CSS but I try to get by. I always test it on 3 PCs and it still works.

2 : When I need lines of HTML or CSS code that I do not know, I look on the Internet, I found this, but I did not find to find it.

3 : Yes I know :D

As I said above, I'm far from an expert, I had more or less understood that the line was pushed because it was counted as a part of the image of the top.
But suddenly I think that you understood that it result I wanted to opt? Do you have any idea how I could have alleviated my code? I will try to create class for CSS time, but I have doubts ...

I'm still doing a lot of testing to embellish my interface
commented Apr 12 by DrWhite (230 points)

After working on it, I finally found how to create CSS class

https://i.imgur.com/kbNJ2k3.jpg

NEW HTML CODE :

<p class="imgface-gauche">\
    <img class="pic" src="file:///C:/Users/DrWhite/Desktop/DiscordiaGame/Images/Anubisface.jpg" style="border:solid 8px #000000;"/>\
Kuriosis ? Tu est ou ?
Je n'arrive plus a t'entendre.... Fait moi signe !
Ligne 3
Ligne 4
...
</p>\
<<if $dialog eq 0>>\
<<button "Répondre">>\
<<set $dialog to 1>><<goto "Dialogue Test">>\
<</button>>&#160;&#160;<<button "Ignorer">>\
<<set $dialog to 2>><<goto "Dialogue Test">>\
<</button>>\
<<else>>\
<</if>>\
<<if $dialog eq 1>>\
<p class="imgface-droite">\
    <img class="pic" src="file:///C:/Users/DrWhite/Desktop/DiscordiaGame/Images/Kuriosisface.jpg" style="border:solid 8px #000000;"/>\
Ligne 1
Ligne 2
Ligne 3
Ligne 4
...
</p>\
<</if>>

LINES ADDED TO CSS 

.imgface-gauche {
    overflow: hidden; /* empêche le dépassement des flottants */
    padding-left: 130px; /* Largeur de l'image + gouttière */
}
.imgface-gauche .pic {
    float: left;
    margin-left: -130px;
}

.imgface-droite {
    overflow: hidden; /* empêche le dépassement des flottants */
    padding-right: 130px; /* Largeur de l'image + gouttière */
}
.imgface-droite .pic {
    float: right;
    margin-right: -130px;
}

 

Thank you for the track that you found me, but do not hesitate to tell me what can be wrong in my CSS,

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...