• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Beim verkleinern des Browsers entsteht ein Rand

MagicMike

Neues Mitglied
Hallo zusammen,

ich bin neuling im Bereich Html und Css. Für einen Bekannten habe ich eine einfache Homepage erstellt. Das Problem ist das beim Verkleinern des Browsers ein Rand an der rechten Seite entsteht, und auf dem Smartphone der Background kleiner wird.

Die Seite ist unter boschtransporte.de zu finden
Kann mir vielleicht einer Helfen Bitte!


HTML CODE:
HTML:
<!doctype html>
<html lang="en" dir="ltr">
    <head>
          <meta name="viewport" content="width=device-width,initial-scale=1.0">
          <meta charset="utf-8">
          <title>Bosch Transporte GmbH</title>
          <script src="https://kit.fontawesome.com/a076d05399.js"></script>
          <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,300;1,400&display=swap');
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
  $(document).ready(function(){
    $('burger').click(function(){
      $('ul').toggleClass('show');
    });

  });
</script>
<script>
$(window).scroll(function(){

  if($(window).scrollTop()){
    $("nav").addClass("black");
  }
  else{
    $("nav").removeClass("black");
  }
})
</script>


          <link rel="stylesheet" href="style.css">
    </head>
    <body  style="margin: 0px;">
      
          <header>
        
            <nav>
            
              <div class="logo" ><img src="logo.jpg" alt="Bosch Transporte">
              </div>
              
              <ul class="navbar">
              <li><a href="#überuns">Über uns</a></li>
              <li ><a href="#fuhrpark">Fuhrpark</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#karriere">Karriere</a></li>
            </ul>
        
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
          </nav>
        </header>
    

<script src="app.js"></script>


    <div class="über_uns" id="überuns">
      <h2>
          Bosch Transporte
      </h2>
          
            <p>Wir machen Transport besser</p>
</div>

<div class="fuhrpark_content" id="fuhrpark">
      
      <div class="boxa"><a href="img1.jpg"><img src="image\img1.jpg" width="400px" height="300px" alt="1"></a></div>
      <div class="boxb"><a href="img2.jpg"><img src="image\img2.jpg" width="400px" height="300px" alt="2"></a></div>
      <div class="boxc"><a href="img3.jpg"><img src="image\img3.jpg" width="400px" height="300px" alt="3"></a></div>
      <div class="boxd"><a href="img4.jpg"><img src="image\img4.jpg" width="400px" height="300px" alt="4"></a></div>
      <div class="boxe"><a href="img5.jpg"><img src="image\img5.jpg" width="400px" height="300px" alt="5"></a></div>
    
    
 
</div>

<div class="news_content" id="news">

  <rssapp-wall id="LC0IX0YMDuDC4L14"></rssapp-wall><script src="https://widget.rss.app/v1/wall.js" type="text/javascript" async></script>

</div>


<div class="karriere_content" id="karriere">
  <div class="text-part-karriere">
    
    
    <p>Momentan keine offenen Stellen</p>
        

</div>


</div>

    



<footer>
  <div class="main-content">
    <div class="left box">
      <h2>
Impressum</h2>
<div class="content">
 
<div class="social">
          <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
          <a href="https://instagram.com/coding.np" style="color: #8a3ab9;"><span class="fab fa-instagram"></span></a>
      
        </div>
</div>
</div>


<div class="center box">
      <h2>
Address</h2>
<div class="content">
        <div class="place">
        <a href="https://www.google.de/maps/place/Weilstetter+Str.+22,+72336+Balingen" style="color: black;" ><span class="fas fa-map-marker-alt"></span></a>
          <span class="text">Weilstetter Straße 22, 72336 Balingen </span>
        </div>
<div class="phone">
          <span class="fas fa-phone-alt"></span>
          <span class="text">+49 7433 2106989</span>
        </div>
<div class="email">
         <a href="mailto:[email protected]" style="color: black;"><span class="fas fa-envelope"></span></a>
          <span class="text">[email protected] </span>
        </div>
        <div class="bottom">
          <center>
            
    
                <script>type="text/javascript">
                  document.write(new Date().getFullYear() +"|"+ "Bosch Transporte"); </script>
                
              </center>
          </div>
</div>
</div>
<div class="right box">
      <h2>
Kontaktieren Sie uns</h2>
<div class="content">
        <form action="#">
          <div clss="email">
            <div class="text">Email *</div>
<input type="email" required></div>
<div class="msg">
            <div class="text">Nachricht *</div>

<textarea id=".msgForm" rows="2" cols="25" required></textarea>
          
          <br />
<div class="btn">
<button type="submit">Senden</button>
          </div>


</footer>

    </body>
</html>
 
Werbung:
musste es auf zwei teilen. Hier der CSS CODE:

CSS:
*{

  margin: 0;
  padding: 0;


}






@font-face {
  font-family: Marienthal;
  src: url(Marienthal.ttf);
}

body{
  width: 100%;
  height: 100vh;
  background: url(header.jpg) no-repeat 50% 50%;
  background-attachment: fixed;
  align-items: center;
  background-size: cover;
}

.über_uns{


  position: relative;
  display: block;
  top: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255,.0);
  padding:20px;
  width: 600px;

}

.über_uns  p{


  font-family: Rubik, sans-serif;
  font-size: 40px;
  text-align: center;
  color: white;
}

.über_uns h2{
 
  font-family: Rubik, sans-serif;
  font-size: 60px;
  text-align: center;
  color:white;
}

.fuhrpark_content{
  position: relative;
  height: 700px;
  display: grid;
  width: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top:1300px;
 
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content 1fr 1fr 1fr;
align-items: center;
padding-left: 70px;

background: rgba(255, 255, 255,.0);

 
}

.fuhrpark_content img{

  transition: 1s;
  padding: 20px;

}

.fuhrpark_content img:hover{


 transform: scale(1.1);
}

.news_content{
  margin-left:60px;
  margin-right:60px;
  margin-bottom:200px;
  background: rgba(255, 255, 255,.0);
}

.karriere_content{
  margin-top: 200px;
  margin-left:60px;
  margin-right:60px;
  margin-bottom:400px;
  background: rgba(255, 255, 255,.0);

}

.text-part-karriere, .text-part p{
  width: 100%;
  font-family: Rubik, sans-serif;
  font-size: 40px;
  text-align: center;
}

.logo{

  
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  
    }


nav{
position: fixed;
width: 100%;
height: 200px;
z-index: 1;
justify-content: space-around;
text-align: center;

}
    
nav.black {
background: rgb(94, 91, 91);

}
.navbar {

  list-style: none;
  transition: 2s;
  top: 85%;
  left: 52%;
  transform: translate(-50%, -50%);
 position: relative;
 text-decoration: none;
width: 100%;


}


nav ul li{

  display: inline;
  padding: 20px;
  letter-spacing: 3px;
  margin: auto;
 
 
}
 
.line1, .line2, .line3{

  width: 30px;
    height: 2px;
    margin: 5px;
    background-color: white;
}

  .burger {
 

    right: 5%;
    top: 12px;
    position: absolute;
    display: none;
    transition: 0.3s ease;

  }
 
  nav ul li a{

    text-decoration: none;
    color: white;
    font-size: 20px;
    font-family: Oswald, sans-serif;
 

  }


.navbar a:hover{

  border: 2px solid white;
}
 


html{
  scroll-behavior: smooth;
}

.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}


/* Footer Anfang*/


footer{
  position: relative;
  bottom: 0px;
  width: 100%;
 
  background: rgb(94, 91, 91);
}


.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: white;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #69c204;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;

}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: white;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #69c204;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: white;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #69c204;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: white;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form .msgForm{
  width: 100%;
  font-size: 1.0625rem;
  background:white;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form .msgForm:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height:30px;
  width: 100%;
  border: none;
  outline: none;
  background: #69c204;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: rgb(252, 25, 25);
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
 
  align-items: center;
}
.bottom center span{
  color: white;
}
.bottom center a{
  color: white;
  text-decoration: none;
}

@media screen and (max-width: 900px) {
  footer{
    margin-top:252px;
margin-bottom:5px;
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }

  .burger{
    display: block;
    cursor: pointer;
    
  }

.logo img{
width: 400px;
height: auto;

}

.über_uns  p{


  font-family: Rubik, sans-serif;
  font-size: 20px;
  text-align: center;
  color: white;
}

.über_uns h2{
 
  font-family: Rubik, sans-serif;
  font-size: 30px;
  text-align: center;
  color:white;
}

  .news_content{
    
   display: block;
 
  }

  .karriere_content{

    margin-top:252px;
margin-bottom:5px;
margin-left:50px;
margin-right:50px;
display: block;
margin: 5px;

  }

  .fuhrpark_content{

    grid-template-rows: auto;
    grid-template-columns: 10px 10px;
    display: block;
    position: relative;
  height: 1200px;
  margin-top:1400px;
  margin-bottom:-50px;
  background: rgba(255, 255, 255,.0);
  align-items: center;
  }

  .fuhrpark_content img{

    transition: 1s;
    width: 100%;
    height: auto;
    padding-right: 70px;
  }
 
  .fuhrpark_content img:hover{
 
 
   transform: scale(1.1);
  }

.navbar{
position: absolute;

height: 300px;
background-color: #333;
width: 80%;
margin-top: 220px;
transform: translate(-50%, -700px);
transition: 0.5s ease-in;

}

nav ul li a {

  display: block;
 
  letter-spacing: 1px;
  margin: 0px;
  font-size: 30px;
 
 
 
}
.navbar-active{

 
  transform: translate(-50%, -149px);

}



.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
transition: all 0.3s ease;

}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
  transition: all 0.3s ease;
}


  a:hover{

    color: coral;
    border: none;
  }
}
 
Werbung:
Werbung:
Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.
 
Zurück
Oben