Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS Same code different file name, different displays?

F

fotogary

Coder
Hi everyone
I’m working on a dual language website, set up one language page perfectly, but when I save the same page with another name, the two display differently .
All I do differently is change the text and the page links. Links work correctly on both, but sizing and positioning are totally off!
Any thoughts would be greatly appreciated
Thanks
Gary Soskin
 
Sort by date Sort by votes
And how exactly do you imagine that we should help you without code or examples e.g. screenshots?

Anyway, you must have forgotten to adjust some path, because the name of a file is irrelevant for the web server.
 
Upvote 0 Downvote
Hi
I thought that I couldn't present the whole page. That said here it is.
And I'm not viewing it on a web server, just checking it in the inspect mode of Chrome browser.


HTML: 
<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

     <title>Fotoforum Zug</title>

     <!-- Bootstrap CSS -->

    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">

<link rel="stylesheet" href="style4.css">

 

  </head>

<body class="home">

  <div class="container">

    <div class="header">

    

        <div class="logo"><img src="images/logo.gif" width="450" height="auto" alt=""></div>

        <nav class="navbar-about navbar-expand-lg navbar-light ">

          <div class="container-fluid">

          

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

              <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                  <a class="nav-link active" aria-current="page" href="index.html">Home</a>

                </li>


                <li class="nav-item">

                  <a class="nav-link " href="about.html">About</a>

                </li>

                <li class="nav-item dropdown">

                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                   Photographers

                  </a>

                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

                    <li><a href="https://www.garysoskin.ch">Gary Soskin</a></li>

                    <li><a href="http://www.foto-pefro.ch">Peter Frommenwiler</a></li>

                    <li><a href="http://www.alexandrawey.com">Alexandra Wey</a></li>

                    <li><a href="http://www.arte-natur.ch">Wener Morelli</a></li>

                     <li><a href="https://www.schumacher.photo">Christoph Schumacher </a></li>

                    <li><a href="https://www.stefankaiserphoto.com">Stefan Kaiser </a></li>

                     <li><a href="https://www.andreasbusslinger.ch">Andreas Busslinger </a></li>

                     <li><a href="https://www.patrickhuerlimann.ch">Patrick Hürlimann </a></li>

                     <li><a href="https://www.reginegiesecke.ch">Regine Giesecke </a></li>

                  </ul>

                </li>

                <li class="nav-item dropdown">

                  <a class="nav-link dropdown-toggle" href="#" id="navbar-Dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                    Gallery

                  </a>

                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

                    <li><a href="huerlimann/gal.html">Current Exhibition</a></li>

               <li><a href="huerlimann/statement.html">Current Exhibition Text</a></li>

            

              <li><a href="previous.html">Previous Exhibions</a></li>

                  </ul>

                

                </li>

              

              

                <li class="nav-item">

                  <a class="nav-link" href="resources.html">Resources</a>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="press.html">Press</a>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="mailto:[email protected]">Contact</a>

                  <li class="nav-item dropdown">

                  <a class="nav-link dropdown-toggle" href="#" id="navbar-Dropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                   Language

                  </a>

                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

                    <li><a href="index.html">English</a></li>

               <li><a href="index_d.html">German</a></li>

            

            

                  </ul>

                

                </li>

                <li></li>

                </li>

              

              </ul>

          

            </div>

          </div>

        </nav>

    

    </div>

  <div class="main">

 

 

  

    

        <col class="caro">

        <div id="carouselExampleSFade" class="carousel slide carousel-fade" data-bs-ride="carousel">

         <div class="carousel-inner">

           <div class="carousel-item active">

             <img src="hp/garyhp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/pesche_hp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/christoph_hp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/werner_hp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/alexandra_hp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/hpstefankaiser.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/andy_hp.jpg" class="d-block  img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/Patrick_hp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

           <div class="carousel-item">

             <img src="hp/regine_hp.jpg" class="d-block img-fluid w-55" alt="...">

           </div>

        

         </div>

        

       </div>

      

    


    

    </div>

   </div>

 



 

  <!-- <footer2>

    <row>

      <col class="footer">

        <p class="footer">  42 Bellevueweg,CH 6300, Switzerland<br/>tel. no. +41 (0)79 695 5924<br/> Instagram:https://www.instagram.com/garysoskin/</p>

    </row>

  </footer> -->

        

 


<!-- This is the B ootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

</body>

</html>
 
Last edited by a moderator:
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
HTML: 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Fotoforum Zug</title>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style4.css">
  
  </head>
<body class="home">
  <div class="container">
    <div class="header">
    
        <div class="logo"><img src="images/logo.gif" width="450" height="auto" alt=""></div>
        <nav class="navbar-about navbar-expand-lg navbar-light ">
          <div class="container-fluid">
          
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link " href="about.html">About</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   Photographers
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a href="https://www.garysoskin.ch">Gary Soskin</a></li>
                    <li><a href="http://www.foto-pefro.ch">Peter Frommenwiler</a></li>
                    <li><a href="http://www.alexandrawey.com">Alexandra Wey</a></li>
                    <li><a href="http://www.arte-natur.ch">Wener Morelli</a></li>
                     <li><a href="https://www.schumacher.photo">Christoph Schumacher </a></li>
                    <li><a href="https://www.stefankaiserphoto.com">Stefan Kaiser </a></li>
                     <li><a href="https://www.andreasbusslinger.ch">Andreas Busslinger </a></li>
                     <li><a href="https://www.patrickhuerlimann.ch">Patrick Hürlimann </a></li>
                     <li><a href="https://www.reginegiesecke.ch">Regine Giesecke </a></li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbar-Dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Gallery
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a href="huerlimann/gal.html">Current Exhibition</a></li>
               <li><a href="huerlimann/statement.html">Current Exhibition Text</a></li>
            
              <li><a href="previous.html">Previous Exhibions</a></li>
                  </ul>
                  
                </li>
                
                
                <li class="nav-item">
                  <a class="nav-link" href="resources.html">Resources</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="press.html">Press</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="mailto:[email protected]">Contact</a>
                  <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbar-Dropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   Language
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a href="index.html">English</a></li>
               <li><a href="index_d.html">German</a></li>
            
            
                  </ul>
                  
                </li>
                <li></li>
                </li>
                
              </ul>
            
            </div>
          </div>
        </nav>
      
    </div>
  <div class="main">
 
 
    
      
        <col class="caro">
        <div id="carouselExampleSFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
         <div class="carousel-inner">
           <div class="carousel-item active">
             <img src="hp/garyhp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/pesche_hp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/christoph_hp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/werner_hp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/alexandra_hp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/hpstefankaiser.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/andy_hp.jpg" class="d-block  img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/Patrick_hp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
           <div class="carousel-item">
             <img src="hp/regine_hp.jpg" class="d-block img-fluid w-55" alt="...">
           </div>
        
         </div>
        
       </div>
      
      
 
    
    </div>
   </div>
  
 

 
  <!-- <footer2>
    <row>
      <col class="footer">
        <p class="footer">  42 Bellevueweg,CH 6300, Switzerland<br/>tel. no. +41 (0)79 695 5924<br/> Instagram:https://www.instagram.com/garysoskin/</p>
    </row>
  </footer> -->
        
 

<!-- This is the B ootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Funny enough, not changing the language of the titles, but saving the file with another name (eg. index-d.html) caused the change too???

The text on that page is only the navigation link-titles to the other pages. Would that push everything around? I did a work around where I re-labeled all the div's and added a -d to their names. Then just doubled up the CSS with and added -d.( I'm doing English and German). And that worked but I thought there must be an easier way.
 
Upvote 0 Downvote
I did not look into your code, but if the only change you made is that you changed the text, the problem probably comes from that xD. Could you show us a screenshot before/after?
 
Upvote 0 Downvote
@fotogary As already said the name of the file is completely irrelevant for the content.
Your problem must lie somewhere in the content, as @LTomy already says show us what the problem is in the first place. Or upload the files to a webserver and send us the link, then you can see the whole thing live.

I have already created some pages in multiple languages and never needed multiple CSS files for them.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom