Проблема с нежелательной полосой прокрутки

ProgramBox

Проблема с нежелательной полосой прокрутки

Post author:admin
Запись опубликована:21 октября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Проблема, с которой я сталкиваюсь, заключается в том, что у меня где-то есть поле или контейнер, который создает нежелательную полосу прокрутки по горизонтали внизу моих веб-страниц. Я использую свою страницу контактов, так как это моя страница с наименьшим объемом контента, даже несмотря на то, что у меня возникают проблемы на всех других моих 5 страницах, связанных на этом сайте. Я знаю, что это будет что-то простое, и мне бы понравилась дополнительная пара глаз, которые могли бы пролить свет на проблему. Заранее спасибо. Пожалуйста, дайте мне знать, если есть что-нибудь еще, что я могу предоставить для получения дополнительной информации. Заранее спасибо.

     <!doctype html>
    <html>
    <head>
    
    <meta charset="utf-8" name="viewport"  content="width=device-width, initial-scale=1.0">
    <title>index.html</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"><link rel="preconnect" 
    href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@500amp;display=swap" rel="stylesheet">
    </head>

    
    

    <div class="IMGLogo">
    <img src="images/RJL photography_Logo.svg" alt="LOGO" width="370.026" height="65.492" ></div>
    
    
    <div id="wrapper">      

    <nav role="navigation">
    <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click reciever,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />
    
    <!--
    Some spans to act as a hamburger.
    
    They are acting like a real hamburger,
    not that McDonalds stuff.
    -->
    <span></span>
    <span></span>
    <span></span>
    
    <!--
    Too bad the menu has to be inside of the button
    
    -->
    <ul id="menu">
     <a href="index.html"><li>Home</li></a>
      <a href="projects.html"><li>Projects</li></a>
      <a href="lofts.html"><li>Lofts</li></a>
      <a href="balcony.html"><li>Balcony/Rooftop</li></a>
      <a href="contact.html"><li>Contact</li></a>
     
    </ul>
    </div>
    </nav>

    
    </div>  
    <div>
    
    

    <main>
    <br>
        
    <br><h1>Contact</h1>
    
    <p class="pbox"> The folks at RJL Photography are eager to make your moments last a lifetime. Inquire 
    below.</p>
         
        
    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
   awesome.min.css">

   <div class="card">
   <img src="images/New/Contact/RyanBio.JPG" alt="Ryan Bio" style="width:100%">
   <h1>Ryan Luber</h1>
   <p class="title">CEO amp; Founder, RJL Photography</p>
    <p>Frederick, MD</p>
   <p>443-222-3333</p>
    <p>RJLPhoto@RJLP.COM</p>
   <i class="fa fa-dribbble"></i>
   <i class="fa fa-twitter"></i>
   <i class="fa fa-linkedin"></i>
   <i class="fa fa-facebook"></i>
  
   </div>   

        <br>
        
        <div class="container">
    <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      
      <label for="pnumber">Phone Number</label>
      <input type="text"
             id="pnumber"
             name="phonenumber"
             placeholder="Your phone number..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="usa">USA</option>
      <option value="canada">Canada</option>
      
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Description of your desired Photoshoot." 
    style="height:200px"></textarea>

    <input type="submit" value="Submit">

    </form>
    </div>
     
    
    
    </main> 


    
    <!--wrapper--></div>
    <footer>amp;#169; RJLPhotography 2020 </footer>
    </html>

 wrapper {
    margin: auto;
    width: 100%;
}

body {
    align-content: center;
    margin-top: 0;
    margin-left: 30;
    margin-bottom: 0;
}

article {
    background-image: url("../images/BAR.svg");
    width: 82%;
    padding: 20px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}

h1 {
    font-family: 'Lora', serif;
}

h2 {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -200px;
}


/* Container holding the image and the text */

.container {
    position: relative;
}


/* Bottom right text */

.text-block {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

body {
    margin: 20px;
    position: relative;
    /* make it look decent enough */
    background: white;
    color: gray;
}

.IMGLogo {
    margin: 0 0 0 0;
    width: 370.026px;
    height: 65.492px;
    position: absolute;
    left: 40px;
    top: -40px;
}

p.pbox {
    margin-left: 400px;
    margin-right: 400px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

img {
    /*display: block;
     object-fit:cover;
    */
    width: 80%;
    height: 90%;
    margin-top: 80px;
    margin-right: 80px;
    margin-left: 0;
    margin-bottom: 80px;
    max-width: 1000px;
    border-radius: 8px;
}

.center {
    /*display: block;*/
    margin-left: auto;
    margin-right: auto;
    width: 76%;
}

main {
    padding-left: 65px;
    position: static;
    margin-top: 40px;
    width: 100%;
}

#BARcenter {
    width: 60%;
    height: 100%;
    position: relative;
    top: -100px;
    left: 60px;
    z-index: 50;
}

#BARcenter img {
    width: 40%;
    height: 40%;
}

#menuToggle {
    display: block;
    position: relative;
    top: 130px;
    left: 30px;
    z-index: 100;
    -webkit-user-select: none;
    user-select: none;
    right: auto;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
}


/*
 * Just a quick hamburger
 */

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}


/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}


/*
 * But let's hide the middle one.
 */

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}


/*
 * Ohyeah and the last one should go the other direction
 */

#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}


/*
 * Make this absolute positioned
 * at the top left of the screen
 */

#menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5)!important;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 10px 0;
    font-size: 22px;
}


/*
 * And let's slide it in from the left
 */

#menuToggle input:checked~ul {
    transform: none;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
}

.title {
    color: black;
    font-size: 18px;
}

button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

a {
    text-decoration: none;
    font-size: 22px;
    color: black;
}

button:hover,
a:hover {
    opacity: 0.4;
}


/* Style inputs with type="text", select elements and textareas */

input[type=text],
select,
textarea {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Some padding */
    border: 1px solid #ccc;
    /* Gray border */
    border-radius: 4px;
    /* Rounded borders */
    box-sizing: border-box;
    /* Make sure that padding and width stays in place */
    margin-top: 6px;
    /* Add a top margin */
    margin-bottom: 16px;
    /* Bottom margin */
    resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
}


/* Style the submit button with a specific background color etc */

input[type=submit] {
    background-color: black;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* When moving the mouse over the submit button, add a darker green color */

input[type=submit]:hover {
    background-color: gray;
}


/* Add a background color and some padding around the form */

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

footer {
    text-align: center;
}

#myBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 0px;
    /* Place the button at the bottom of the page */
    left: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: black;
    /* Set a background color */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 25px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    font-size: 18px;
    /* Increase font size */
}

#myBtn:hover {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

Ответ №1:

В вашем главном теге удалите отступы-слева: 65 пикселей;

и в вашем меню удалить left: 30px;

Это устраняет проблему с наличием горизонтальной полосы прокрутки.

Затем вам придется поиграть с меню гамбургеров и текстом контакта. Попробуйте использовать абсолютную позицию, а не относительную в вашем меню.

1. Отлично, я попробую их и отчитаюсь. Спасибо за вставку.

2. overflow-x не работал. потому что на самом деле это просто обрезает содержимое с правой стороны, где оно переполняется. Не могли бы вы предложить попробовать установить контейнер и поле или что-то в этом роде для содержимого, в котором оно переполняется?

3. Не могли бы вы опубликовать свой css, и тогда мы сможем увидеть, что происходит. Я думаю, это потому, что ширина вашего контейнера или формы будет слишком большой.

4. Я обновил css, теперь извините за задержку.

5. Если это сработало для вас, Райан Любер, не могли бы вы принять ответ. Я потратил свое время, чтобы помочь вам, поэтому был бы признателен, если бы он исправил вашу проблему, а затем щелкнул зеленую галочку, чтобы это помогло моей репутации. Спасибо.