CSS Seite für Handys gestalten?

[Piktogramm]

Danke! Ich bräuchte eigentlich nur was Tabellenmäßiges.

Keine Tabellen! Auch nichts was nur annähernd einer Tabelle ähnlich ist. Flexboxen hingegen wären eine garnicht so schlechte Idee:
https://www.w3schools.com/csS/css3_flexbox.asp

Beachte das Beispiel auf der Seite mit der Bildergalerie(!)

@media (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

Durch das bedingte Überschreiben von nur 1-2 Eigenschaften wird der ganze Kram Responsive, behält ansonsten aber die Eigenschaften, die im CSS-File vorher festgelegt wurden. Damit bekommst du was du willst und minimierst den redundanten Code im CSS!
Was deinen Aufwand beim Erstellen / Warten der Seite minimiert und sich bei größeren CSS-Files auch auf die Performance der Besucher positiv auswirken kann.


Ansonsten noch ein Hinweis: Ich mag es ja sehr, wenn anstatt "px" als "Maßeinheit" gleich "em" genutzt wird.
https://developer.mozilla.org/en-US/docs/Web/CSS/length#em
Das Festzurren von Größen mittels px geht regelmäßig schief, wenn Nutzer zoomen oder die Schriftgröße verstellen(*). Dann ragt Schrift / sonstige Elemente gern mal übers Layout hinaus. Wenn die Fontgrößen jedoch das relevante Maß sind, springt im Zweifelsfall das Layout einfach um und erhält so die Nutzbarkeit der Seite.


(*) Oder einfach generell, weil jede Betriebssystem + Browserkombination sich alle 2 Updates anders Verhält..

 

[LeanderAT]

Vielen Dank!

 

[LeanderAT]

Ich habe noch eine Frage bitte.

Momentan teste ich abgesehen von einer mobilen Version auch die Desktopversion auf Handys und Tablets bzw. wie sie dort aussieht.

Die Desktopversion benötigt 1024x768 als Minimum. Ich kann http://www.seelenpuls.at/hpneu/neues_de.php

Wenn ich die Seite auf einem kleinen Handy und im Portraitmodus anschaue, so ist das Menü nicht drauf. Auf dem Ipad eines Freundes ist es auch nicht drauf. Im Landscapemodus hingegen ist alles ok.
Das Menü wird abgeschnitten...wie hier bei 800x600 auch am PC:

https://abload.de/img/kleine8f0z.jpg

Ich hätte gerne, dass man die gesamte Waagrechte scrollen kann, falls die Width des Displays zu klein ist...man kann immer nur den Content-Div scrollen...so wird das Menü/die Navigation abgeschnitten...und ich finde nicht raus, wie ich einstellen kann, dass die Navigation auch mitscrollt...und IMMER sichtbar ist, egal, wie klein das Display ist. Weiß jemand die Lösung?

Ich habe die wichtigen Bereiche, wo der Fehler sein müsste, fett markiert.
Die CSS ist:

* { padding: 0; margin: 0; }

body
{
font-family: Verdana, Arial, sans-serif;
color: #000000;
scrollbar-face-color: #003300;
scrollbar-highlight-color: #006633;
scrollbar-3dlight-color: #006633;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #000000;
}

#center {

position: absolute;
top: 50%;
left: 50%;
width: 934px;
height: 572px;
margin-left: -467px;
margin-top: -286px;
background: #ffffff;
box-sizing: border-box;
background-image: url(img/bg_con_res4.jpg);
background-repeat: no-repeat;
border: 2px solid black;
}

ul {
display: flex;
flex-direction: column;
justify-content: center;
align-item: center;
list-style-type: none;
margin: 0;
padding: 0;
}

#navi
{
position: absolute;
left: 16px;
top: 280px;
width: 100px;
height: 165px;
overflow: auto;
font-size: 15px;
line-height: 20px;
}

#navi A
{
color: #808080;
background-color: transparent;
text-decoration: none;
}

#navi A:VISITED
{
color: #808080;
background-color: transparent;
text-decoration: none;
}

#navi A:ACTIVE
{
color: #ffffff;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

#navi A:HOVER
{
color: #ffffff;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

#navi HR
{
color: #808080;
background-color: transparent;
text-decoration: none;
}

#content
{
left: 157px;
top: 231px;
width: 715px;
height: 320px;
position: absolute;
padding: 0px 60px 0px 0px;
color: #000000;
font-size: 12px;
overflow: auto;
}

#version
{
position: absolute;
left: 16px;
top: 532px;
width: 60px;
height: 13px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
color: #ffffff;
}

#language
{
position: absolute;
left: 16px;
top: 552px;
width: 52px;
height: 13px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#links
{
position: absolute;
left: 16px;
top: 465px;
height: 50px;
width: 50px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#zitat
{
left: 0px;
top: 554px;
width: 930px;
height: 13px;
position: absolute;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#footer
{
position: absolute;
right: 7px;
top: 552px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

p
{
margin-top: 10px;
}

small
{
font-size: 10px;
}

small2
{
font-size: 10px;
}

h1
{
color: #ffffff;
font-size: 12px;
text-decoration: underline overline;
font-weight: bold;
}

h2
{
color: #ffffff;
font-weight: bold;
font-size: 12px;
}

h2 span
{
color: #000000;
}

.menuepunkt
{
color: #006633;
font-size: 12px;
font-weight: bold;
margin-top: 0px;
}

.greenerror
{
color: #990000;
margin-top: 0px;
}

a.class1:link
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:visited
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:hover
{
color: #006633;
font-weight: normal;
text-decoration: underline;
}

a.class2:link
{
color: #006633;
text-decoration: none;
}

a.class2:visited
{
color: #006633;
text-decoration: none;
}

a.class2:hover
{
color: #006633;
text-decoration: underline;
}

a.class3:link
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:visited
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:hover
{
color: #669900;
text-decoration: underline overline;
}

a.class4:link
{
color: #ffffff;
text-decoration: none;
}

a.class4:visited
{
color: #ffffff;
text-decoration: none;
}

a.class4:hover
{
color: #ffffff;
font-weight: bold;
}

 

[Bagbag]

Versuche mal position: fixed für navi

 

[LeanderAT]

Danke, funktioniert aber leider nicht. Dann schwebt die Navi fixed rum bzw. kann man den Hintergrund scrollen.

Ich habe gesehen, dass eine Änderung im Center-Div was bringt.

#center {

position: absolute;
top: 50%;
left: 50%;

...

Wenn man da left auf z.B. 80% stellt, so kann man waagrecht alles gut scrollen und es wird ganz angezeigt. Ist der Screen aber größer, bleibt links ein weißer Rand, rechts aber gar nichts (außerhalb des Hintergrunds).
Das

top: 50%;
left: 50%;
width: 934px;
height: 572px;
margin-left: -467px;
margin-top: -286px;

bewirkt, dass die Homepage zentriert wird und überall gleich viel weißer Rand ist...das Fenster also füllt.

===========

EDIT: Ich habe nun mal die alte Herangehensweise verwendet, die ich früher hatte.
Da sieht der Center so aus:

#center {

background-color: #FFFFFF;
border: 2px solid black;
width: 1437px;
height: 880px;
position: relative;
margin: 20px auto;
background-image: url(img/bg_con_res1.jpg);
background-repeat: no-repeat;
}

Der Unterschied ist, dass die Homepage nicht mehr komplett zentriert ist auf allen Seiten, dafür aber in zu kleinen Fenstern aber die korrekte Scrollbar bekommt über die gesamte Seite, auch für die Navi!
Zentriert wird sie dafür nur links und rechts...oben wird ein Fixwert angegeben mit der Margin 20px. Die alte Version sieht so aus: http://www.seelenpuls.at/neues.php

Da ist die HP 1024x768 groß und hängt in der Luft...ist also nicht mehr ganz zentriert.

 

[Piktogramm]

Bette Code mal bitte in <CODE></CODE> ein. Die Lesbarkeit im Forum leidet sonst ungemein.

Was dein CSS angeht, beschäftige dich mit den Debugmöglichkeiten deines Browsers! Die Devtools nerreichst zu bei Firefox zum Beispiel mittels <Ctrl> + <Shift> + <I> (oder in den Menüs suchen). Damit kannst du dir u.a. für div. Elemente anzeigen lassen welche Eigenschaften vom .css wirksam sind. Genauso wie du div. Bildschirmgrößen simulieren kannst.

Anders würde ich das jetzt auch nicht versuchen und ich habe gerade keine Muse für zu unbezahltem css Gefummel

 

[LeanderAT]

Ok!