Jump to content

About html code with too many spaces - Help

CarlosLima

By CarlosLima
in Web App CSS

 Share
Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

CarlosLima   148

Posted
Posted 
    <div class="Personal-Links" style="top:100px;text-align:center;position:relative;">
                <a is="emby-linkbutton" class="button-link" href="URL1" target="_blank" style="text-decoration: none;color: #D3D3D3" "margin: 0.7em;">Tv ao Vivo</a>
                <a is="emby-linkbutton" class="button-link" href="URL2" target="_blank" style="text-decoration: none;color: #D3D3D3" "margin: 0.7em;">Pedidos</a>
                <a is="emby-linkbutton" class="button-link" href="URL3" target="_blank" style="text-decoration: none;color: #D3D3D3" "margin: 0.7em;">Planos</a>
                <a is="emby-linkbutton" class="button-link" href="URL4" target="_blank" style="text-decoration: none;color: #D3D3D3" "margin: 0.7em;">Site</a>
                <a is="emby-linkbutton" class="button-link" href="URL5" target="_blank" style="text-decoration: none;color: #D3D3D3" "margin: 0.7em;">Suporte</a>
        </div>

Hi
I use external links on the home page and have noticed that between them contains a lot of space, breaking the line on smartphone screens.
I would like some help, as I believe that something happened to the code to present this problem.
Thanks for any tips.

download.png

Link to comment
Share on other sites
Happy2Play

Happy2Play   8279

Posted
Posted

You could adjust your "margin: 0.7em" you have set per link.  Or change from em to %.

  • Thanks 1
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hey,
Thank you so much for your attention.
See the new image. I've tested it with several numbers but nothing has changed.
I plan to have 2 or 3 blank spaces between each link.
Thanks again.

links.jpg

Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited) 
    <div class="Personal-Links" style="top:60px;text-align:center;position:relative;">
			    <a is="emby-linkbutton" class="button-link" href="LINK1" target="_blank" style="text-decoration: none;color: #D3D3D3">TEXT1</a>&emsp;&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK2" target="_blank" style="text-decoration: none;color: #D3D3D3">TEXT2</a>&emsp;&emsp;
                <a is="emby-linkbutton" class="button-link" href="LINK5" target="_blank" style="text-decoration: none;color: 
#D3D3D3">TEXT3</a>
        </div>

SOLVED ....After several edits in the code I managed to make it work with this code.
I just removed "margin: 0 .7em" and applied one command &emsp; for each blank.
As far as I've tested it worked fine now and I hope it doesn't conflict with the other codes.
Thanks for all your help.

Edited by CarlosLima
Link to comment
Share on other sites
  • Solution
Happy2Play

Happy2Play   8279

Posted
  • Solution
Posted

Your previous style code was actually broken.  Missing semicolon and additional quotes 

    <div class="Personal-Links" style="top:100px;text-align:center;position:relative;">
                <a is="emby-linkbutton" class="button-link" href="URL1" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Tv ao Vivo</a>
                <a is="emby-linkbutton" class="button-link" href="URL2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Pedidos</a>
                <a is="emby-linkbutton" class="button-link" href="URL3" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Planos</a>
                <a is="emby-linkbutton" class="button-link" href="URL4" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Site</a>
                <a is="emby-linkbutton" class="button-link" href="URL5" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Suporte</a>
        </div>

 

Link to comment
Share on other sites
  • 4 months later...
CarlosLima

CarlosLima   148

Posted
  • Author
Posted
On 8/13/2021 at 6:03 PM, Happy2Play said:

Your previous style code was actually broken.  Missing semicolon and additional quotes 

    <div class="Personal-Links" style="top:100px;text-align:center;position:relative;">
                <a is="emby-linkbutton" class="button-link" href="URL1" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Tv ao Vivo</a>
                <a is="emby-linkbutton" class="button-link" href="URL2" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Pedidos</a>
                <a is="emby-linkbutton" class="button-link" href="URL3" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Planos</a>
                <a is="emby-linkbutton" class="button-link" href="URL4" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Site</a>
                <a is="emby-linkbutton" class="button-link" href="URL5" target="_blank" style="text-decoration: none;color: #D3D3D3;margin: 0.7%;">Suporte</a>
        </div>

 

Hello again broke on emby server stable version 4670.
Thanks again if you can help fix the code.
What I need is to have the texts with only 2 blank spaces between them.
I am gratefull for that.

Link to comment
Share on other sites
Happy2Play

Happy2Play   8279

Posted
Posted
1 hour ago, CarlosLima said:

Hello again broke on emby server stable version 4670.
Thanks again if you can help fix the code.
What I need is to have the texts with only 2 blank spaces between them.
I am gratefull for that.

What is broke?  All I had to do is adjust top.

As for space between links adjust or remove the margin per link.

image.thumb.png.9f72d2ef160a32afba866af26c44d1ff.png

  • Thanks 1
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted 
    <div class="Personal-Links" style="top:90px;text-align:center;position:relative;text-decoration:none;color:#D3D3D3;">
                <a is="emby-linkbutton" class="button-link" href="LINK1" target="_blank;">TEXT1</a>
                <a is="emby-linkbutton" class="button-link" href="LINK2" target="_blank;">TEXT2</a>
                <a is="emby-linkbutton" class="button-link" href="LINK3" target="_blank;">TEXT3</a>
                <a is="emby-linkbutton" class="button-link" href="LINK4" target="_blank;">TEXT4</a>
                <a is="emby-linkbutton" class="button-link" href="LINK5" target="_blank;">TEXT5</a>
                <a is="emby-linkbutton" class="button-link" href="LINK6" target="_blank;">TEXT6</a>
        </div>

I'm trying to start over from scratch.
Can you let me know if there is something wrong with this code?

Link to comment
Share on other sites
Happy2Play

Happy2Play   8279

Posted
Posted
1 hour ago, CarlosLima said: 
    <div class="Personal-Links" style="top:90px;text-align:center;position:relative;text-decoration:none;color:#D3D3D3;">
                <a is="emby-linkbutton" class="button-link" href="LINK1" target="_blank;">TEXT1</a>
                <a is="emby-linkbutton" class="button-link" href="LINK2" target="_blank;">TEXT2</a>
                <a is="emby-linkbutton" class="button-link" href="LINK3" target="_blank;">TEXT3</a>
                <a is="emby-linkbutton" class="button-link" href="LINK4" target="_blank;">TEXT4</a>
                <a is="emby-linkbutton" class="button-link" href="LINK5" target="_blank;">TEXT5</a>
                <a is="emby-linkbutton" class="button-link" href="LINK6" target="_blank;">TEXT6</a>
        </div>

I'm trying to start over from scratch.
Can you let me know if there is something wrong with this code?

Seem to work fine for me.  Only adjusted top.

image.thumb.png.1427c608840cb5102338cee08a0e73c9.png

home.html

Spoiler

<div class="view flex flex-direction-column withTabs">

    <div class="tabContent flex flex-grow" data-index="0">

        <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow focuscontainer-down" data-bindheader="true">
        
        <div class="Personal-Links" style="top:150px;text-align:center;position:relative;text-decoration:none;color:#D3D3D3;">
                <a is="emby-linkbutton" class="button-link" href="LINK1" target="_blank;">TEXT1</a>
                <a is="emby-linkbutton" class="button-link" href="LINK2" target="_blank;">TEXT2</a>
                <a is="emby-linkbutton" class="button-link" href="LINK3" target="_blank;">TEXT3</a>
                <a is="emby-linkbutton" class="button-link" href="LINK4" target="_blank;">TEXT4</a>
                <a is="emby-linkbutton" class="button-link" href="LINK5" target="_blank;">TEXT5</a>
                <a is="emby-linkbutton" class="button-link" href="LINK6" target="_blank;">TEXT6</a>
        </div>

            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></div>
        </div>

    </div>
    <div class="tabContent flex flex-grow" data-index="1">
        <div is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-forcescrollbar="true" class="scrollFrameY flex flex-direction-column flex-grow focuscontainer-down" data-bindheader="true">

            <div class="scrollSlider flex-grow padded-top-page sections">
            </div>
            <div class="padded-bottom-page"></div>
        </div>
    </div>

</div>

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...