Darstellung der "Eigenen Seite" auf Smartphones

05.04.2024 11:25

Andreas Lipske
#1 Darstellung der "Eigenen Seite" auf Smartphones

Hallo allerseits,
ich teile hier mit euch mal folgende "Testseite", die ein Kopfbild und eine Navigation beinhaltet:
Testseite.

Mit dem PC-Browser geöffnet, verschiebt sich der Seiteninhalt immer in die Bildschirmmitte, egal wie breit man das Browserfenster einstellt .
Auf dem iPad wird immer der volle Bildschirm genutzt, egal ob im Quer-o. Hochformat...very nice .

Doch nun zur Katastrophe:
Auf einem Smartphone ist die Dartellung ein einziges Desaster

Mit was für einem "HTML-Code" oder "CSS-Code" kann man die Darstellung auf den Smartphones verbessern ?

Hier der Code dieser Seite:

<!DOCTYPE html>
<html>
<head>
<center><a href="https://www.andili.de/"><img src="https://files.homepagemodules.de/b782117/resize/1280x187/pictures_u4137_ZrQCqtWL.png" alt="" width="1280" height="187" /></a></center>
<meta charset="UTF-8">
<title>Startseite-Berichte</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

#menu {
display:flex;
justify-content:center;
}

#menu a {
display:block;
padding:10px;
text-decoration:none;
color:#000;
}

#menu .active {
font-weight:bold;
}

@media screen and (max-width: 680px) {
#menu {
flex-direction:column;
flex-basisi:80%;
}

#menu a {
width:100%;
text-align:center;
}
}
#menu{
position:relative;
padding-bottom:0px;
}

#menu ul{
margin:0px;
padding:0px;
list-style:none;
float:left;
position: relative;

}

#menu ul li{
margin:0;
padding:1px 0 0;

}

#menu ul li:hover{
position:relative;
}

#menu ul ul{
position:absolute;
left:-9999px;
}

#menu a{
font:normal 25px Avenir;
display:block;
color:white;
background:#a12d2e;
text-decoration:none;
margin:0;
padding:2px 35px 2px 35px;
border:1px ridge #ddd;
border-color:#ccc #444 #444 #ccc;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

#menu a.flydn{
background:#a12d2e url(../images/arrow-df.gif) no-repeat right center;
}

#menu a.fly{
background:#a12d2e url(../images/arrow-rf.gif) no-repeat right center;
}

#menu ul li:hover > a{
color:#fff;
background:#2f327b;
}

#menu ul li:hover > a.fly{
color:#fff;
background:#2f327b url(../images/arrow-rf-w.gif) no-repeat right center;
}

#menu ul li:hover > a.flydn{
color:#fff;
background:#2f327b url(../images/arrow-df-w.gif) no-repeat right center;
}

#menu ul :hover ul{
left:0px;
}

#menu ul :hover ul :hover ul,
#menu ul :hover ul :hover ul :hover ul{
left:100%;
margin-top:-24px;
}

#menu ul :hover ul ul,
#menu ul :hover ul :hover ul ul{
left:-9999px;
}
</style>
</head>
<body>

<div id="menu">
<ul>
<li><a class="flydn" href="#nix">Gehe_zu</a>
<ul>
<li><a href="https://www.andili.de/page-782117-194.html">Seminare_2024</a></li>
<li><a href="https://www.andili.de/page-782117-160.html">SchachTools</a></li>
<li><a href="https://www.andili.de/page-782117-198.html">nuLiga_HSC08</a></li>
<li><a href="../page-782117-6.html">Nachrichten_YouTube</a></li>
<li><a href="https://www.andili.de/page-782117-174.html">Geschichte_Bildung</a></li>
<li><a href="https://www.andili.de/page-782117-17.html">TOP 100</a></li>
<li><a href="https://www.andili.de/donations.html">Spende</a></li>
<li><a href="../page-782117-92.html">Impressum</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="flydn" href="#nix">Turniere</a>
<ul>
<li><a class="fly" href="#nix1">Vereinsturniere</a>
<ul>
<li><a href="../page-782117-91.html">Vereinsmeisterschaft</a></li>
<li><a href="../page-782117-98.html">Vereinspokal</a></li>
<li><a href="../page-782117-101.html">Blitzmeisterschaft</a></li>
<li><a href="https://www.andili.de/page-782117-114.html">KFP 2021</a></li>
<li><a href="https://www.andili.de/page-782117-191.html">Turnierverwaltung</a></li>
</ul>
</li>
<li><a class="fly" href="#nix1">Bezirksturniere</a>
<ul>
<li><a href="https://www.andili.de/page-782117-15.html">Ostereier-2024</a></li>
<li><a href="https://www.andili.de/page-782117-196.html">QRR 2023</a></li>
<li><a href="https://www.andili.de/page-782117-166.html">Ostereier-2023</a></li>
<li><a href="https://www.andili.de/page-782117-65.html">Ostereier-2022</a></li>
<li><a href="https://www.andili.de/page-782117-197.html">BBMM 2023</a></li>
<li><a href="https://www.andili.de/page-782117-158.html">BBMM-2022</a></li>
<li><a href="https://svunna.de/unna-open-2023/">Unna Open</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><a class="flydn" href="#nix">Liga</a>
<ul>
<li><a href="../page-782117-43.html">Saisonkalender</a></li>
<li><a href="../page-782117-3.html">HSC-Jugend</a></li>
<li><a href="https://www.andili.de/page-782117-13.html">Verbandsliga</a></li>
<li><a href="https://www.andili.de/page-782117-180.html">Bezirksklasse</a></li>
<li><a href="https://www.andili.de/page-782117-182.html">Kreisliga</a></li>
<li><a href="https://www.andili.de/page-782117-184.html">Kreisklasse</a></li>
<li><a href="https://www.andili.de/page-782117-199.html">Partien_NRW_Klasse</a></li>
<li><a href="../page-782117-106.html">Spielorte</a></li>
<li><a class="fly" href="#nix1">Turnierordnungen</a>
<ul>
<li><a class="fly" href="#nix1">SB Hamm</a>
<ul>
<li><a href="../page-782117-156.html">Senioren</a></li>
<li><a href="../page-782117-157.html">Jugend</a></li>
</ul>
</li>
<li><a href="../page-782117-162.html">Ruhrgebiet</a></li>
<li><a href="../page-782117-163.html">SB NRW</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><a class="flydn" href="#nix">Training</a>
<ul>
<li><a href="https://www.andili.de/page-782117-186.html">Aufgaben</a></li>
<li><a href="../page-782117-161.html">Tägliche Taktik</a></li>
<li><a href="../page-782117-169.html">Schach lernen</a></li>
<li><a href="../page-782117-108.html">Anfänger</a></li>
<li><a href="../page-782117-109.html">Fortgeschrittene</a></li>
<li><a href="../page-782117-178.html">Experten</a></li>
<li><a href="../page-782117-9.html">Eröffnungen</a></li>
<li><a href="../page-782117-170.html#oben">Mittelspiel</a></li>
<li><a href="../page-782117-4.html">Endspiele</a></li>
<li><a href="../page-782117-168.html">Schachschule_64</a></li>
<li><a href="../page-782117-171.html">Hausarbeiten</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="flydn" href="#nix">Über_uns</a>
<ul>
<li><a href="../page-782117-172.html">Warum Schach ?</a></li>
<li><a href="../page-782117-76.html">Schachregeln</a></li>
<li><a href="../page-782117-71.html">Spielbetrieb</a></li>
<li><a href="../page-782117-120.html">Ansprechpartner</a></li>
<li><a href="../page-782117-113.html">Mitglieder</a></li>
<li><a href="../page-782117-72.html">Vereinsgeschichte</a></li>
<li><a href="https://www.hammer-sportclub-08.de/der-verein/mitgliedschaft/">Mitgliedschaft</a></li>
<li><a href="https://hammer-sportclub-08.de/der-verein/mitgliedschaft/#anmeldung">Online_Anmeldung</a></li>
<li><a href="https://www.andili.de/page-782117-107.html">Protokolle</a></li>
<li><a href="https://hammer-sportclub-08.de/abteilungen/schach/">Hauptverein</a></li>
</ul>
</li>
</ul>
</div>

Danke vorab für eure Unterstützung !
Andreas

Antworten

Beitrag melden

05.04.2024 11:49

Ingmar
#2 RE: Darstellung der "Eigenen Seite" auf Smartphones

Ingmar

Die Anzeige der Webseite für verschiedene Endgeräte zu optimieren ist leider alles andere als trivial.
Letztendlich musst du die Seite so aufbauen, dass für verschiedene Auflösungen klare Vorgaben bestehen, was wie angezeigt werden soll.

Hier findest du einen ganz guten Einstieg in die Materie:
https://kinsta.com/de/blog/responsiven-webdesign/

Viele Grüße,
Ingmar

Technik · Homepagemodules.de · Miranus GmbH

Antworten

Beitrag melden

05.04.2024 11:57 (zuletzt bearbeitet: 05.04.2024 12:00)

Mike48
#3 RE: Darstellung der "Eigenen Seite" auf Smartphones

Mike48

Wenn man Code in einem Beitrag einfügt sollte man das nicht nur in einen Spoiler sondern auch in [code] . . .[/code] fassen.

Deine Seite ist nicht responsiv erstellt worden. Ist für Smartphon also nicht geeignet.
So weit ich sehe, hat dein Forum das Template V4 Business.
Wenn du auch die mobile Ansicht aktiviert hast, dann wäre es sinnvoll, den Code für V4 und V6 getrennt auf der Seite zu splitten mit den Variablen

1
2
3
4
5
6
7
 
{{templat==144.start}}
<!-- Code für V4 ->
{{templat==144.end}}
 
{{templat==177.start}}
<!-- Code für V6 (mobile Ansicht ->
{{templat==177.end}}
 

Dazu müsstest du dich aber mit responsivem Design mal auseinder setzten.
Dir den fertigen Code zu geben würde meines Erachtens zu weit führen.

Edit:
Hat sich mit Ingmar überschnitten, er hat schneller die Return Taste gedrückt

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

05.04.2024 12:44

Ingmar
#4 RE: Darstellung der "Eigenen Seite" auf Smartphones

Ingmar

Zitat von Mike48 im Beitrag #3
So weit ich sehe, hat dein Forum das Template V4 Business.

In diesem Fall will er ja eine eigene Seite ganz ohne Foren-Header und Footer erstellen. Daher muss er keine Rücksicht auf das verwendete Template nehmen