How would I move the 3 lower texts up?

HTML & CSS
1 
<span style="color:#b45f06;font-weight:700;line-height:35px;">Text:</span><br>

Text<br>
Text<br>
Text<br>
<br>
2

Move them up in what sense? Are you trying to close the gap under the first “Text”?

Your code structure has no semantic meaning, so it is impossible to work out your intent from that.

3

Maybe by taking a class and learning the basics of HTML and CSS.

4

Yes, close the gap.

5

If there is no good reason why you have set your line-height here to 35px, try reducing it to something smaller, like 20px.

1 Like
6

I set it to 35px.

7

I know you did, but why? If you make it 20px, the other ‘text’ lines will move up closer to the first one.

8

Is there any way to move the 3 lower texts as a whole up?

9

There’s text above it.

This:

<span style="display:inline-block;text-indent: 38px "><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;"></span>Blue,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span>Green,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span>Pink,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span>Grey</span><br>
10

@asasass: as we keep explaining, one section of code will affect the next, so to get a prompt reply which meets your requirements, please post the whole code. That will eliminate an awful lot of unnecessary toing anf froing, while we try to get the full picture.

11

Could you please give me the entire code together, so that I can see how everything affects the whole picture? When you just post pieces of the code, it is hard to figure out how the different pieces react to each other.

1 Like
12 
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>

<span style="display:inline-block;text-indent: 38px "><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;"></span>Blue,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span>Green,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span>Pink,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span>Grey</span><br>

<span style="color:#b45f06;font-weight:700;line-height:35px;">Text</span><br>

Text<br>
Text<br>
Text<br>
<br>
13

That is a very strange use of so many <span> tags and <br> tags. I would change that first before trying to move anything where you want it to go. Have you read through any books or tutorials on the proper use of HTML tags?

The list of colours with the coloured boxes in front of them seems to me to be more like a list, so I would do the following instead of all the spans:

<ul style="list-style: none;">
	<li style="display:inline-block;margin-left: 38px ">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;">
		</span>
		Blue,
	</li>
	<li style="display:inline-block;">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;">
		</span>
		Green,
	</li>
	<li style="display:inline-block;">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;">
		</span>
		Pink,
	</li>
	<li style="display:inline-block;">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;">
		</span>
		Grey
	</li>
</ul>

Then the first ‘Text’, from the looks of your styling, seems to me to be some kind of a title, or header. Is that right? if so, instead of [quote=“asasass, post:12, topic:253228”]
<span style=“color:#b45f06;font-weight:700;line-height:35px;”>Text</span><br>
[/quote]

I would use

<h3 style="color: #b45f06; font-weight: 700; line-height: 20px;">Text</h3>

Note I reduce the line height from 35px to 20px.

What are the next three lines meant to be - a list of items or three lines of plain text?

Normally, of course, I would avoid all those inline styles and use a separate stylesheet instead.

2 Likes
14

Can I add that to this?

15

Yes, just replace your code

<span style="display:inline-block;text-indent: 38px "><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;"></span>Blue,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span>Green,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span>Pink,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span>Grey</span><br>

with the code I gave you.

It will be a new list though after your first list. Do not add it inside the first <ul> … <ul>

What exactly are you trying to accomplish here? What will be the final result of all this code? Is it some sort of order form?

16

I want the discs to show on the first 7 and have the last one with no disc.

<ul style="list-style: disc;">


<ul tyle="list-style: disc;">Text</ul>
<ul>Text</ul>
<ul>Text</ul>
<ul>Text</ul>
<ul>Text</ul>
<ul>Text</ul>
<ul>Text</ul>


	<li style="display:inline-block;margin-left: 38px ">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;">
		</span>
		Blue,
	</li>
	<li style="display:inline-block;">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;">
		</span>
		Green,
	</li>
	<li style="display:inline-block;">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;">
		</span>
		Pink,
	</li>
	<li style="display:inline-block;">
		<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;">
		</span>
		Grey
	</li>
</ul>
17

@asasass, why did you change the code for your first list? It was correct before, now it is all wrong. Change it back to

<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>

And this list does have the discs. You do not need to have the style "list-style: disc;" inside your first unordered list <ul> tag. That list will have discs by default.

That is why in my list (the one with the colours) I added style="list-style: none;" to take away the default discs from the colour list.

Also, you did not copy my code correctly. Where is the <ul style="list-style: none; "> at the beginning of it, and the <ul> at the end?

18

Where Can I put this that goes above the colors. Available in 4 colors:
There would be a disc showing for that one?

19

Think about it: Is that sentence (“Available in 4 colors:”) part of the list of things, or is it just an instruction?

20

<li>Available in 4 colors:</li>