+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: Rund um HTML (https://forum.juergens-workshops.de/forumdisplay.php?fid=83)
+--- Thema: Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster (/showthread.php?tid=37534)
Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster - sonnenlicht - 28.12.2017
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
Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster - Unkraut - 28.12.2017
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
Webseite soll sich mit "verkleinern" + "vergrößern" mit dem Browserfenster - sonnenlicht - 28.12.2017
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%;
}