Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster
#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



Nachrichten in diesem Thema
Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster - von sonnenlicht - 28.12.2017, 12:03

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