Pascal/Feuerwehr-webseite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Facebook Plugin hinzugefügt, aber nicht perfekt zentriert

Browse Source
This commit is contained in:
Pascal 2025-06-01 16:23:08 +02:00
parent 7d53ee99d9
commit 7538b6fac2
2 changed files with 169 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
index.html
View File

@ -1,28 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Feuerwehr Stadt Wehlen</title> <title>Feuerwehr Stadt Wehlen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="nav.css">
<!-- Bootstrap-CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<!-- Deine bestehende nav.css -->
<link rel="stylesheet" href="nav.css" />
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-custom"> <nav class="navbar navbar-expand-lg navbar-custom">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="#"> <a class="navbar-brand d-flex align-items-center" href="#">
<img src="ffw_transp_72.gif" alt="Feuerwehr Stadt Wehlen" style="height: 3em; width: auto; margin-right: 10px;"> <img
src="ffw_transp_72.gif"
alt="Feuerwehr Stadt Wehlen"
style="height: 3em; width: auto; margin-right: 0.5rem;"
/>
<span>Feuerwehr Stadt Wehlen</span> <span>Feuerwehr Stadt Wehlen</span>
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item"> <li class="nav-item"><a class="nav-link" href="#">Aktuelles</a></li>
<a class="nav-link" href="#">Aktuelles</a>
</li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Über uns Über uns
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@ -31,22 +60,46 @@
<li><a class="dropdown-item" href="#">Mitglieder</a></li> <li><a class="dropdown-item" href="#">Mitglieder</a></li>
</ul> </ul>
</li> </li>
<li class="nav-item"> <li class="nav-item"><a class="nav-link" href="#">Veranstaltungen</a></li>
<a class="nav-link" href="#">Veranstaltungen</a> <li class="nav-item"><a class="nav-link" href="#">Kontakt/Impressum</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt/Impressum</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</head> <!-- Facebook-SDK laden -->
<body> <div id="fb-root"></div>
<script
async
defer
crossorigin="anonymous"
src="https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v23.0"
></script>
<!-- Facebook-Plugin -->
<div class="fb-super-wrapper">
<div class="fb-align-center">
<div class="fb-page"
data-href="https://www.facebook.com/ffw.stadtwehlen/?locale=de_DE"
data-tabs="timeline"
data-height="700"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="false">
<blockquote cite="https://www.facebook.com/ffw.stadtwehlen/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/ffw.stadtwehlen/">Feuerwehr Stadt Wehlen</a>
</blockquote>
</div>
</div>
</div>
<!-- Bootstrap-JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body> </body>
</html> </html>

104
nav.css
View File

@ -1,12 +1,26 @@
.navbar-custom { /* ======================================================
background-color: #900000; 1. Grundlegende Einstellungen
padding-top: 1rem; ====================================================== */
padding-bottom: 1rem; html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
} }
.navbar-brand span { /* ======================================================
font-size: 1.7rem; /* Adjust the size as needed */ 2. NAVBAR-DESIGN
====================================================== */
.navbar-custom {
background-color: #b30000;
background-image: url('logo2.jpeg');
background-size: 7em;
background-repeat: repeat;
padding: 1rem 0;
color: #900000;
} }
.navbar-custom .navbar-brand, .navbar-custom .navbar-brand,
.navbar-custom .nav-link { .navbar-custom .nav-link {
color: #ffffff; color: #ffffff;
@ -16,71 +30,52 @@
color: #000000; color: #000000;
} }
.navbar-custom .dropdown-menu { .navbar-custom .dropdown-menu {
background-color: #900000; background-color: #900000;
background-image: url('logo2.jpeg'); background-image: url('logo2.jpeg');
background-size: 9em; /* oder eine feste Größe */ background-size: 9em;
}
.navbar-custom {
color: #900000;
} }
.navbar-custom .dropdown-item:hover { .navbar-custom .dropdown-item:hover {
background-color: #ffffff00; background-color: transparent;
color: #000000; color: #000000;
} }
a.dropdown-item { a.dropdown-item {
color: #fff; color: #ffffff;
}
.navbar-custom {
background-image: url('logo2.jpeg');
background-size: 7em;
background-repeat: repeat;
} }
.navbar-brand { .navbar-brand {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; gap: 0.75rem;
overflow: visible; margin: 0 auto;
white-space: normal; white-space: nowrap;
width: auto;
} }
/* logo alig*/
.navbar-brand img { .navbar-brand img {
height: 3em; height: 3rem;
width: auto; width: auto;
margin-right: 10px;
vertical-align: middle;
} }
/*text aligns with the logo */
.navbar-brand span { .navbar-brand span {
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.2em; line-height: 1.2;
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* Adjust layout on small screens */ /* Responsive Anpassungen */
@media (max-width: 370px) { @media (max-width: 370px) {
.navbar-brand { .navbar-brand {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.navbar-brand img { .navbar-brand img {
margin-right: 0; margin-bottom: 0.5rem;
margin-bottom: 5px;
} }
.navbar-brand span { .navbar-brand span {
text-align: center; text-align: center;
} }
@ -88,6 +83,43 @@ a.dropdown-item {
@media (min-width: 520px) { @media (min-width: 520px) {
.navbar-brand span { .navbar-brand span {
font-size: 2rem; /* Größere Schriftgröße */ font-size: 2rem;
} }
} }
/* ======================================================
3. FACEBOOK-PLUGIN (ADAPTIVE BREITE)
====================================================== */
.fb-super-wrapper {
width: 100%;
padding: 2rem 0;
background-color: #f8f9fa;
text-align: center; /* wichtig für das inline-block Verhalten */
}
.fb-align-center {
display: inline-block;
text-align: left; /* Inhalt innen linksbündig, Box selbst zentriert */
max-width: 700px;
width: 100%;
}
.fb-outer-container {
width: 100%;
max-width: 700px;
padding: 0 1rem;
}
.fb-inner-container {
width: 100%;
}
/* Facebook-spezifische Elemente */
.fb-page,
.fb-page > span,
.fb-page > span > iframe {
width: 100% !important;
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
}