Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster
#1
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![ATTACH=CONFIG]12978[/ATTACH]

Gruß,
sonnenlicht


Angehängte Dateien Thumbnail(s)
   
Zitieren
#2
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

Betriebssystem / Grafik-Software: Win 7
Zitieren
#3
Hallo, dankeschön!
[HTML]<!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>
[/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%;
}
Zitieren



Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Link-Leiste öffnet sich nicht kawa 4 3.416 09.12.2013, 19:50
Letzter Beitrag: kawa
  PHP Probleme ... fertige software läßt sich nicht hochladen bernerbalu 3 2.392 24.11.2010, 07:42
Letzter Beitrag: bernerbalu
  FileZilla Setup Datei lässt sich nicht löschen Pywi 3 2.763 22.07.2009, 18:01
Letzter Beitrag: Kuddl83
  Nvu. PDF-Dokument als Download auf Webseite stellen mit Nvu Katja 2 4.567 16.07.2009, 15:49
Letzter Beitrag: prm
  Lässt sich das Menü erweitern? Andreas69 10 2.470 04.11.2008, 14:33
Letzter Beitrag: Andreas69
  Webseite gestalten Katjuscha 2 1.496 25.06.2008, 20:10
Letzter Beitrag: Katjuscha
  Webseite an Bildschirmauflösung anpassen? Iceangel 4 2.396 09.04.2007, 18:08
Letzter Beitrag: prm
  Hilfe meine Webseite hüpft! haddy 23 4.550 15.01.2007, 21:47
Letzter Beitrag: haddy
  Startseite Ändert sich selbst ! seu 10 3.757 12.01.2007, 22:08
Letzter Beitrag: seu
  Iframe soll sich der Höhe des Inhalts anpassen benschy 2 1.837 11.12.2006, 18:51
Letzter Beitrag: benschy