HTML Editor changes code location

chroneas

Member
Jun 10, 2019
5
0
1
Estonia
cPanel Access Level
Website Owner
Hi everyone!

I've a problem with HTML Editor in Cpanel. I uploaded my files to Cpanel and tried to make some minor changes with HTML Editor. After saving my file I found out that All of the icons/link elements changed their location on the webpage. I also added comments inside my icon tag but this didn't help. In the code sample below the language menu changes it location to where menu comment is.

What could be the reason(s) for this problem and how can I solve this?


HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Hotel- Menu</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/Navigation-Clean.css">
    <link rel="stylesheet" href="assets/css/Product-Slider-9.css">
    <link rel="stylesheet" href="assets/css/Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
  <header>
        <div class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000" data-pause="false" id="carousel-1">
                <div>
                    <nav class="navbar navbar-light navbar-expand-lg default" style="font-family: Quicksand, sans-serif;" data-spy="affix" data-offset-top="200">
                        <div class="container"><a class="navbar-brand text-uppercase" href="index.html" style="font-family: 'Playfair Display', serif;font-size: 24px;">MENU</a>
                          <button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                            <div class="collapse navbar-collapse" id="navcol-1" style="padding: 5px 0px;text-align: center;">

       <!-- MENU -->
      <ul class="nav navbar-nav" style="margin: auto;display:block;">

        <!-- LANGUAGE MENU-->

         <div class="language no-mobile">
           <a href="est/menu-1.html"><span class="language-item">EST</span></a>
           <a href="menu-1.html"><span class="language-item">ENG</span></a>
           <a href="ru/menu-1.html"><span class="language-item">RU</span></a>
         </div>

       <!-- END OF LANGUAGE MENU -->
 

chroneas

Member
Jun 10, 2019
5
0
1
Estonia
cPanel Access Level
Website Owner
Hi, thanks for a reply.

I will post code before and after the changes. I modified only a few letters in paragraph element. As you might see, the "Language item" have changed its position after the modification.
BEFORE:

Code:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Antonius - Menu</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/Navigation-Clean.css">
    <link rel="stylesheet" href="assets/css/Product-Slider-9.css">
    <link rel="stylesheet" href="assets/css/Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body style="background-color: #f6faf5;">
 
  <header>
        <div class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000" data-pause="false" id="carousel-1">
                <div>
                    <nav class="navbar navbar-light navbar-expand-lg default" style="font-family: Quicksand, sans-serif;" data-spy="affix" data-offset-top="200">
                        <div class="container"><a class="navbar-brand text-uppercase" href="index.html" style="font-family: 'Playfair Display', serif;font-size: 24px;">MENU</a>
                          <button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                            <div class="collapse navbar-collapse" id="navcol-1" style="padding: 5px 0px;text-align: center;">
                              
                              <!-- MENU -->
                                <ul class="nav navbar-nav" style="margin: auto;display:block;">
                                  <!-- LANGUAGE MENU -->
                                  <div class="language no-mobile">
                                    <a href="est/menu-1.html"><span class="language-item">EST</span></a>
                                    <a href="menu-1.html"><span class="language-item">ENG</span></a>
                                    <!--<a href="ru/menu-1.html"><span class="language-item">RU</span></a>-->
                                  </div>
                                  <!-- END OF LANGUAGE MENU -->
                                    <li class="brand-link brand-link nav-item" role="presentation">
                                      <a class="nav-link" href="index.html">
                                        <img src="assets/img/resto-logo.png" height="100px">
                                      </a>
                                    </li>
                                    <li class="nav-item dropdown" role="presentation">
                                      <a class="nav-link nav-item dropdown-toggle mobile-only" href="about.html" data-toggle="dropdown">HOTEL</a>
                                      <ul class="dropdown-menu d-lg-none submenu">
                                        <li class="nav-item"><a class="nav-link nav-item" href="about.html">ABOUT</a></li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="history.html">HISTORY</a></li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="rooms.html">ROOMS</a></li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="services.html">SERVICES/INFO</a></li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="packages.html">PACKAGES</a>
                                          <ul class="dropdown-menu d-lg-none submenu">
                                            <li class="nav-item"><a class="nav-link nav-item" href="packages.html">PACKAGES</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="salon-evenings.html">SALONG EVENINGS</a></li>
                                          </ul>
                                        </li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="giftcard.html">GIFT CARD</a></li>
                                        <li class="nav-item"><a class="nav-link nav-item dropdown-toggle mobile-only" data-toggle="dropdown">MEETINGS</a>
                                          <ul class="dropdown-menu d-lg-none submenu">
                                            <li class="nav-item"><a class="nav-link nav-item" href="meetings.html">MEETINGS</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="group.html">GROUPMENU</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="coffee-breaks.html">COFFEE BREAKS</a></li>
                                          </ul>
                                        </li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="weddings.html">WEDDINGS</a></li>
                                      </ul>
                                    </li>
                                    <li class="nav-item dropdown" role="presentation">
                                      <a class="nav-link nav-item dropdown-toggle no-mobile" href="about.html">HOTEL</a>
                                    </li>
                                    <li class="nav-item dropdown" role="presentation">
                                      <a class="nav-link nav-item dropdown-toggle mobile-only" href="restaurant.html" data-toggle="dropdown">RESTAURANT</a>
                                      <ul class="dropdown-menu d-lg-none submenu">
                                        <li class="nav-item"><a class="nav-link nav-item" href="restaurant.html">ABOUT</a></li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="menu-1.html">MENU</a></li>
                                        <li class="nav-item dropdown"><a class="nav-link nav-item dropdown-toggle mobile-only" href="champagne.html"  data-toggle="dropdown">WINE LIST</a>
                                          <ul class="dropdown-menu d-lg-none submenu">
                                            <li class="nav-item"><a class="nav-link nav-item" href="champagne.html">CHAMPAGNE</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="white-wine.html">WHITE WINE</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="rosé-wine.html" style="text-transform:uppercase;">Rosé WINE</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="red-wine.html">RED WINE</a></li>
                                            <li class="nav-item"><a class="nav-link nav-item" href="wine-by-glass.html">WINE BY THE GLASS</a></li>
                                          </ul>
                                        </li>
                                        <li class="nav-item"><a class="nav-link nav-item" href="reserve.html">RESERVE</a></li>
                                      </ul>
                                    </li>
                                    <li class="nav-item dropdown" role="presentation">
                                      <a class="nav-link nav-item dropdown-toggle no-mobile" href="restaurant.html">RESTAURANT</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                      <a class="nav-link nav-item" href="meetings.html">SEMINARS</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                      <a class="nav-link nav-item" href="gallery.html">GALLERY</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                      <a class="nav-link nav-item" href="contact.html">CONTACT</a>
                                    </li>
                                    <li class="nav-item" role="presentation" style="display:;">
                                      <a class="nav-link book-now" href="https://online.bookvisit.com" style="letter-spacing: 4px; margin: 0px 45px; padding: 6px;">BOOK NOW</a>
                                    </li>
                                  
                                    <!-- SOCIAL ICONS -->
                                    <div class="footer-main-info">
                                        <a href="https://www.tripadvisor.com" target="_blank">
                                            <i class="fab fa-tripadvisor hero-icon"></i>
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank">
                                            <i class="fab fa-instagram hero-icon"></i>
                                        </a>
                                        <a href="https://www.facebook.com/" target="_blank">
                                            <i class="fab fa-facebook-square hero-icon"></i>
                                        </a>
                                      
                                      <div class="mobile-only">
                                       <a href="est/menu-1.html"><span class="language-item">EST</span></a>
                                       <a href="menu-1.html"><span class="language-item">ENG</span></a>
                                       <!--<a href="ru/menu-1.html"><span class="language-item">RU</span></a>-->
                                     </div>
                                    </div>
                                  <!-- END OF SOCIAL ICONS -->
                                
                                </ul>
                               <!-- END OF MENU -->
                            </div>
                        </div>
                    </nav>
                  
                  <!-- 'A' svg -->
                   <img src="assets/img/A.png" class="sidebar" height="101%">
                  </div>
        
         <div class="carousel-inner" role="listbox">
                <div class="carousel-item active text-center slide-cover"  style="background-image: url('assets/img/banner/Restoran1.jpg');"><img class="img-fluid d-block slide-image">

                </div>
          
                <div class="carousel-item slide-cover" style="background-image: url('assets/img/banner/Restoran13.jpg');"><img class="d-block slide-image">

                </div>
            </div>
            <a class="mobile-hero-logo-container mobile-only " href="index.html">
                 <img class="img-fluid mobile-logo" src="assets/img/resto-logo.png">
            </a>
          
          
            <!-- MOUSE ANIMATION -->
            <span class="mouse"></span>
          
            <span class="mouse-text">READ MORE</span>
            <span class="no-mobile" style="position:absolute;bottom:6%;left:7%;font-family:'Playfair Display', sans-serif;color:#fff;color: #ffffffe6;font-size: 40px;">MENU</span>
          
          
            <!-- END OF MOUSE ANIMATION -->
          
            <div><a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"><span class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carousel-1" role="button"
                    data-slide="next"><span class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
            <ol class="carousel-indicators"  style="display:none;">
                <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-1" data-slide-to="1"></li>
                <li data-target="#carousel-1" data-slide-to="2"></li>
            </ol>
        </div>
    </header>
<!-- SUBMENU -->
AFTER:

Code:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Antonius - Menu</title>
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/fonts/fontawesome-all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
    <link href="assets/css/Navigation-Clean.css" rel="stylesheet" />
    <link href="assets/css/Product-Slider-9.css" rel="stylesheet" />
    <link href="assets/css/Simple-Slider.css" rel="stylesheet" />
    <link href="assets/css/styles.css" rel="stylesheet" />
</head>
<body style="background-color: #f6faf5;">
<header>
<div class="carousel slide carousel-fade" data-interval="6000" data-pause="false" data-ride="carousel" id="carousel-1">
<div>
<nav class="navbar navbar-light navbar-expand-lg default" data-offset-top="200" data-spy="affix" style="font-family: Quicksand, sans-serif;">
<div class="container"><a class="navbar-brand text-uppercase" href="index.html" style="font-family: 'Playfair Display', serif;font-size: 24px;">MENU</a><button class="navbar-toggler" data-target="#navcol-1" data-toggle="collapse"><span class="sr-only">Toggle navigation</span></button>
<div class="collapse navbar-collapse" id="navcol-1" style="padding: 5px 0px;text-align: center;"><!-- MENU -->
<div class="language no-mobile"><a href="est/menu-1.html"><span class="language-item">EST</span></a> <a href="menu-1.html"><span class="language-item">ENG</span></a> <!--<a href="ru/menu-1.html"><span class="language-item">RU</span></a>--></div>

<div class="footer-main-info">
<div class="mobile-only"><a href="est/menu-1.html"><span class="language-item">EST</span></a> <a href="menu-1.html"><span class="language-item">ENG</span></a> <!--<a href="ru/menu-1.html"><span class="language-item">RU</span></a>--></div>
</div>

<ul class="nav navbar-nav" style="margin: auto;display:block;"><!-- LANGUAGE MENU --><!-- END OF LANGUAGE MENU -->
    <li class="brand-link brand-link nav-item" role="presentation"><a class="nav-link" href="index.html"><img height="100px" src="assets/img/resto-logo.png" /> </a></li>
    <li class="nav-item dropdown" role="presentation"><a class="nav-link nav-item dropdown-toggle mobile-only" data-toggle="dropdown" href="about.html">HOTEL</a>
    <ul class="dropdown-menu d-lg-none submenu">
        <li class="nav-item"><a class="nav-link nav-item" href="about.html">ABOUT</a></li>
        <li class="nav-item"><a class="nav-link nav-item" href="history.html">HISTORY</a></li>
        <li class="nav-item"><a class="nav-link nav-item" href="rooms.html">ROOMS</a></li>
        <li class="nav-item"><a class="nav-link nav-item" href="services.html">SERVICES/INFO</a></li>
        <li class="nav-item"><a class="nav-link nav-item" href="packages.html">PACKAGES</a>
        <ul class="dropdown-menu d-lg-none submenu">
            <li class="nav-item"><a class="nav-link nav-item" href="packages.html">PACKAGES</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="salon-evenings.html">SALONG EVENINGS</a></li>
        </ul>
        </li>
        <li class="nav-item"><a class="nav-link nav-item" href="giftcard.html">GIFT CARD</a></li>
        <li class="nav-item"><a class="nav-link nav-item dropdown-toggle mobile-only" data-toggle="dropdown">MEETINGS</a>
        <ul class="dropdown-menu d-lg-none submenu">
            <li class="nav-item"><a class="nav-link nav-item" href="meetings.html">MEETINGS</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="group.html">GROUPMENU</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="coffee-breaks.html">COFFEE BREAKS</a></li>
        </ul>
        </li>
        <li class="nav-item"><a class="nav-link nav-item" href="weddings.html">WEDDINGS</a></li>
    </ul>
    </li>
    <li class="nav-item dropdown" role="presentation"><a class="nav-link nav-item dropdown-toggle no-mobile" href="about.html">HOTEL</a></li>
    <li class="nav-item dropdown" role="presentation"><a class="nav-link nav-item dropdown-toggle mobile-only" data-toggle="dropdown" href="restaurant.html">RESTAURANT</a>
    <ul class="dropdown-menu d-lg-none submenu">
        <li class="nav-item"><a class="nav-link nav-item" href="restaurant.html">ABOUT</a></li>
        <li class="nav-item"><a class="nav-link nav-item" href="menu-1.html">MENU</a></li>
        <li class="nav-item dropdown"><a class="nav-link nav-item dropdown-toggle mobile-only" data-toggle="dropdown" href="champagne.html">WINE LIST</a>
        <ul class="dropdown-menu d-lg-none submenu">
            <li class="nav-item"><a class="nav-link nav-item" href="champagne.html">CHAMPAGNE</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="white-wine.html">WHITE WINE</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="rosé-wine.html" style="text-transform:uppercase;">Ros&eacute; WINE</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="red-wine.html">RED WINE</a></li>
            <li class="nav-item"><a class="nav-link nav-item" href="wine-by-glass.html">WINE BY THE GLASS</a></li>
        </ul>
        </li>
        <li class="nav-item"><a class="nav-link nav-item" href="reserve.html">RESERVE</a></li>
    </ul>
    </li>
    <li class="nav-item dropdown" role="presentation"><a class="nav-link nav-item dropdown-toggle no-mobile" href="restaurant.html">RESTAURANT</a></li>
    <li class="nav-item" role="presentation"><a class="nav-link nav-item" href="meetings.html">SEMINARS</a></li>
    <li class="nav-item" role="presentation"><a class="nav-link nav-item" href="gallery.html">GALLERY</a></li>
    <li class="nav-item" role="presentation"><a class="nav-link nav-item" href="contact.html">CONTACT</a></li>
    <li class="nav-item" role="presentation" style="display:;"><a class="nav-link book-now" href="https://online.bookvisit.com/accommodation/list?channelId=0ec12619-f8c0-4640-a8ea-b7c6321aaa80" style="letter-spacing: 4px; margin: 0px 45px; padding: 6px;">BOOK NOW</a></li>
    <!-- SOCIAL ICONS --><!-- END OF SOCIAL ICONS -->
</ul>
<!-- END OF MENU --></div>
</div>
</nav>
<!-- 'A' svg --><img class="sidebar" height="101%" src="assets/img/A.png" /></div>

<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center slide-cover" style="background-image: url('assets/img/banner/Restoran1.jpg');"><img class="img-fluid d-block slide-image" /></div>

<div class="carousel-item slide-cover" style="background-image: url('assets/img/banner/Restoran13.jpg');"><img class="d-block slide-image" /></div>
</div>
<a class="mobile-hero-logo-container mobile-only " href="index.html"><img class="img-fluid mobile-logo" src="assets/img/resto-logo.png" /> </a> <!-- MOUSE ANIMATION --> <span class="mouse-text">READ MORE</span> <span class="no-mobile" style="position:absolute;bottom:6%;left:7%;font-family:'Playfair Display', sans-serif;color:#fff;color: #ffffffe6;font-size: 40px;">MENU</span> <!-- END OF MOUSE ANIMATION -->

<div><a class="carousel-control-prev" data-slide="prev" href="#carousel-1" role="button"><span class="sr-only">Previous</span></a><a class="carousel-control-next" data-slide="next" href="#carousel-1" role="button"><span class="sr-only">Next</span></a></div>

<ol class="carousel-indicators" style="display:none;">
    <li class="active" data-slide-to="0" data-target="#carousel-1"></li>
    <li data-slide-to="1" data-target="#carousel-1"></li>
    <li data-slide-to="2" data-target="#carousel-1"></li>
</ol>
</div>
</header>