Ergebnis 1 bis 3 von 3

Thema: Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster

  1. #1
    Neuer Benutzer Newbie
    Registriert seit
    27.12.2017
    Beiträge
    2

    Standard Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster

    Hallo zusammen,
    Ich habe ein Problem und zwar möchte ich gerne, dass sich wenn ich das Browserfenster verkleinere meine Seite und der Inhalt sich mit verkleinert. Das tut er auch (teilweise) aber auch nur bis zu einem bestimmte Grad, dann bekomme ich einen riesigen weißen Balken an der rechten Seite. Hoffe ihr könnt mir weiterhelfen!Bildschirmfoto 2017-12-28 um 09.59.11.png

    Gruß,
    sonnenlicht

  2. #2
    Moderator Profi Member Avatar von Unkraut
    Registriert seit
    19.11.2007
    Beiträge
    4.216

    Standard

    Hallo Sonnenlicht,
    willkommen im Forum und eine gute Zeit hier.

    Um Dir bei Deiner Frage helfen zu können, brauchen wir html +css der Seite.

    Viele Grüße vom Unkraut

    Unkraut ist die Opposition der Natur gegen die Regierung der Gärtner. (Oskar Kokoschka)


  3. #3
    Neuer Benutzer Newbie
    Registriert seit
    27.12.2017
    Beiträge
    2

    Standard

    Hallo, dankeschön!
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	
    	<title>Unsere Bar</title>
    
    	<link href= "{{ siteUrl }}/barstyle.css" rel="stylesheet">
          
    
        
    </head>
       <body> 
        <header> 
            
            <div class="nav">
         <ul>
              <a href= '#'> Logo </a>
             <a href= '#'> Home </a>
            <a href= '#'> Karte </a>
             <a href= '#'> Galerie </a>
             <a href= '#'> FAQ </a>
             <a href= '#'> Reservierung </a>
             <a href= '#'> Kontakt </a>
         </ul>
    </div>
           
            <div id="bildtext">
            <br> 
                <br> 
                <br> 
                
                <p class="Ihrfragt"> Ihr fragt</p>
                <p classs="Wirantworten"> Wir antworten</p>
                <hr>
           <br>
            </div>
               
           
             
             
           
           
           
            
            
    
     
            
               
    
        </header>
        
    
        
    
    
        
     
    <main>
    <div id="topbar">
      <div id="f1">{{entry.faq_frage1}}</div>
      <div id="sections_btn_holder">
        <button onclick="toggleNavPanel('sections_panel')"> <span id="navarrow"> + </span></button>
      </div>
      <div id="sections_panel">
        <div>
          {{ entry.faq_antwort1 }} 
        </div>
      </div>
    </div>   
        
        
        
        
        
                <script>
    function toggleNavPanel(x){
        var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="130%";
        if(panel.style.height == maxH){
            panel.style.height = "0%";
            navarrow.innerHTML = "+";
        } else {
            panel.style.height = maxH;
            navarrow.innerHTML = "-";
        }
    }
                
    </script>
                
       
    
        
        
         
     
          
            <p class="frage2"> 
               
               {{ entry.faq_frage2 }}
            <br>
            {{ entry.faq_antwort2  }}
            
            </p> 
           
            <p class="frage3">
               {{ entry.faq_frage3  }}
            <br>
             {{ entry.faq_antwort3 }}
            
            </p>
        
            <p class="frage4"> 
              {{ entry.faq_frage4 }}
            <br>  
            {{ entry.faq_antwort4 }}
            
            </p>
           
            
            <p class="frage5"> 
            {{ entry.faq_frage5 }}
            <br>
            {{ entry.faq_antwort5 }}
           
            </p>
           
            
           
            
            
    
        
        
        
        
        
        </main>
    <footer>
        <div>
            <br> 
            <h1>Kontakt</h1>
        
        <h2>Öffnungszeiten</h2>
    
        <p class="oeffnungstag1"> {{ entry.kontaktformular_oeffnungstag1}} {{ entry.kontaktformularzeit1 }}</p>
         
    
      
        <p class="oeffnungstag2"> {{ entry.kontaktformular_oeffnungstag2 }} {{ entry.kontaktformularzeit2 }}</p> 
        
        
        <div class="Kontaktformular">       
        
     {% macro errorList(errors) %}
        {% if errors %}
            <ul class="errors">
                {% for error in errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endmacro %}
    
    {% from _self import errorList %}
    
    <form method="post" action="" accept-charset="UTF-8">
        {{ getCsrfInput() }}
        <input type="hidden" name="action" value="contactForm/sendMessage">
        <input type="hidden" name="redirect" value="contact/thanks">
    
        
        <div class="Name">   
        <h3 class="n"><label for="fromName"> Name* </label></h3>
        <input id="fromName" type="text" name="fromName" size="50" maxlength="120"value="{% if message is defined %}{{ message.fromName }}{% endif %}">
        {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
    </div>
        
        <br>
        <br>
        
        
        <div class="Email"> 
        <h3 class="e"><label for="fromEmail">E-mail*</label></h3>
        <input id="fromEmail" type="email" name="fromEmail" size="50" maxlength="120" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}">
        {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
     </div>
        
        <br>
        <br>
        
        
        
        
        
        <div class="Subject"> 
        
        <h3 class="b"><label for="subject">Betreff*</label></h3>
        <input id="subject" type="text" name="subject" size="50" maxlength="120" value="{% if message is defined %}{{ message.subject }}{% endif %}">
        {{ message is defined and message ? errorList(message.getErrors('subject')) }}
        
          </div>
    
         <br>
        <br>
        
        
        <div class="Nachricht"> 
        <h3 class="na"><label for="message">Nachricht*</label></h3>
        <textarea rows="10" cols="40" id="message" name="message">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
        {{ message is defined and message ? errorList(message.getErrors('message')) }}
    </div>
        
        <div class="Senden">  
        <input type="submit" value="Send" style="background-color: blue">
             </div>
            
        
        
            
    </form>
          </div>
         
        <br> 
        
        <hr>
          
         <br>
            <br> 
            <br> 
            
        <p class="Impressum"> Alle Rechte Vorehalten | Unsere Bar Gmbh c |
            {{entry.impressum_adresse}} {{entry.impressum_telefonnummer}}</p>
              
        <br>  
            <p class="I"> Impressum </p>
            <br> 
            
        </div>
        
        
      
        
        </footer>
    
    </body>
    </html>




    Code:
     body
    {
        margin: 0%; 
    width: 100%; 
    }
    
    main 
    
    {
     position: relative;
     text-align: left;
     min-width: 600px;
     max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
     width: expression(document.body.clientWidth > 1400 ? '1400px' : 'auto');
    }
    
    /*Links*/
    
    .Links
    a:visited 
    { color:beige;}
    a:link 
    { color:black;}
     
    
    
    /*Dropdown menu Frage 1*/
    div#topbar{
    	background:darkgray;
    	background:darkgray; 
    	height:60px; 
        margin-left: 10%; 
        margin-right: 10%;
    }
    div#topbar > #f1{
    	margin-top: 5%; 
    
    text-align: center; 
    	font-size:100%;
    	color:white;
    }
    div#topbar > #sections_btn_holder{
    	float:right;
    margin-right: 1%;
    
    	 
    }
    div#topbar > #sections_btn_holder > button
    { 
        background:white; 
    
    }
    div#topbar > #sections_panel{
    	position:relative;
    	height:0%;
    	
        margin-right:0%; 
      
    	background:darkgray;
    	text-align: center; 
     
    	
    	overflow:hidden;
    	
    	transition: height 0.3s linear 0s;
    }
    div#topbar > #sections_panel > div{
    	background:darkgray;
    	padding:20px;
    	margin-left: 10%; 
        margin-right: 20%;
    	color:white;
    }
     
    
    /*Hauptteil Fragen*/
    
    
    .frage1 {
        font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
        text-align: center;
        color: white;
        border: 20% solid;
       margin-left: 10%;
        margin-right: 10%; 
        background-color: darkgray; 
        
    }
    
    .frage2
    {  font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
        text-align: center;
        color: white;
        margin-left: 10%;
        margin-right: 10%; 
        background-color: darkgray; 
        
    
    }
    
    .frage3
    { 
    font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
        text-align: center;
        color: white;
        margin-left: 10%;
        margin-right: 10%; 
        background-color: darkgray;
    }
    
    
    .frage4
    
    { 
        font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
        text-align: center;
        color: white;
        border: 20% solid;
      margin-left: 10%;
        margin-right: 10%; 
        background-color: darkgray;
    
    }
    
    .frage5 
    {  
     font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
        text-align: center;
        color: white;
        border: 20% solid;
     margin-left: 10%;
        margin-right: 10%; 
        background-color: darkgray;
        
        
        
    }
    
    /*Navigation*/
    header
    { 
    background-color: white;
    margin-top: 0%; 
         
    }
    
     .nav
    { text-align: center;
     
       
        
    }
    
    
    
    
    
    /*Header Bild und Überschriften*/
    
    div#bildtext
    {
        background-image: url(bilder_karte/weinglass_hintergrund1.jpg);
       color:white; 
       background-repeat: no-repeat; 
     margin: 0 auto; 
        text-align: center; 
     background-size: 120%;
        background-size: auto 300px; 
        padding: 0; 
    }
    
    
    
    .Ihrfragt
    { 
        font-family: 'champagne__Limousinesitalic', arial, sans-serif; }
    
    .Wirantworten
    
    { 
    font-size: 10%; }
    
    hr
    { 
    color:white; 
       
    }
    
    
    
    
    /*Footer*/
    
    footer 
    
    
    {   
        background-color: black;
        color: white;
        margin:0%; 
       
        
    }
     
    
    
    
    
    
    h1
    { font-size: 150%;
    text-align: center;
        font-family: 'midnight_valentineregular', serif; 
    } 
    
    
    h2 
    { font-size: 60%;
        text-align: center; 
    }
    
    
    
    .oeffnungstag1
    { 
    font-size: 60%; 
        text-align: center;
    }
    
    .oeffnungstag2
    { 
    font-size: 60%; 
    text-align: center; 
    }
    
    
    /*Kontaktformular Namefeld und Überschrift*/
    
    
    .n
    { 
    padding-right: 17em; 
        
    }
    
    .Name
    { 
     text-align:center; 
      
        font-family: Verdana, 'Lucida Sans Unicode', sans-serif; 
        font-size:80%; 
    
    }
     
    /*Kontaktftmular E-mail feld und Überschrift*/
    
    .e 
    
    { 
    padding-right: 17em; }
    
    
    .Email
    { 
    text-align:center; 
      
        font-size: 80%;
        font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
    }
        
    /*Kontaktftmular Betreff feld und Überschrift*/
    
    .b 
    {
        padding-right: 17em; 
    
    }
    
    
    .Subject
    { 
    text-align:center; 
    
        font-size:80%;
        font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
       
    }
    
    /*Kontaktftmular Nachrichtfeld und Überschrift*/
    
    .na
    { padding-right: 14.5em; 
    
    }
    
    .Nachricht
    {
          
        text-align:center; 
        font-size: 80%;
        text-align: center; 
        font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
    }
    
    .Senden
    {
       padding-left: 9em;  
        font-size: 500%; 
    
        
      
    }
    
    /*Impressum*/
    
    .Impressum
    { 
    text-align: center;
    font-size: 60%; 
    }
    
    .I
    { text-align: center; 
        font-size:60%; }
    
    
    
    /*Icons Impressum */
    
    
    
    /*Trennlinie Footer*/
    
    hr 
    { 
        width: 50%; 
    }

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 14.08.2014, 13:34
  2. Reifenspur soll in eine Kurve "fahren"
    Von ArtMaverick im Forum Corel Draw
    Antworten: 9
    Letzter Beitrag: 25.05.2011, 14:11
  3. "Kiss Forever Band" + Support "Shotgun Express" 11.09.09
    Von MURDOCthePSYCHO im Forum Digi-World
    Antworten: 0
    Letzter Beitrag: 12.09.2009, 16:33
  4. Antworten: 9
    Letzter Beitrag: 16.02.2007, 11:00
  5. Antworten: 4
    Letzter Beitrag: 09.08.2006, 21:13

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •