Responsitive Design für Webseiten

Ehemaliges Mitglied Erhaltene Danke: 1

hallo forum, ich bin neu hier. ich habe eine website mit 3 divs, die nebeneinander sind. auf meinem pc läuft alles, aber auf meinem handy sieht die website doof aus. hier der code für die divs:

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

<div class ="Bild1">
<center>
<img src="/upload/bild1.png" width="auto" height="100" alt="Bild">

<h2>Überschrift 1</h2>
</center>
<div id="A1T1">
<p align="center">Text1</p>
</div>
</div>

<div id ="Bild2">
<center>
<img src="/upload/bild2.png" width="auto" height="100" alt="Bild">
<h2>Überschrift 2</h2>
</center>
<div id="A1T2">
<p align="center">Text 2</p>
</div>
</div>

<div id ="Bild3">
<center>
<img src="/upload/bild3.png" width="auto" height="100" alt="Bild">
<h2>Überschrift 3</h2>
</center>
<div id="A1T3">
<p align="center">Text 3</p>
</div>
</div>

Wie kann ich es machen, dass die divs und der enthaltende text auf meinem handy angepasst sind?

jfheins · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

Hallo und erst mal herzlich willkommen ;-)

Zunächst meinst du vermutlich Responsive web design. Das Wichtigste daran sind sogenannte media-queries, mit denen du die Gültigkeit bestimmter CSS Regeln von der Bildschirmgröße abhängig machen kannst.

Um deine Frage insgesamt zu beantworten, wäre es hilfreich wenn du skizzieren würdest, wie es am Ende aussehen sollte. Sonst muss ich leider etwas raten, was für dich "angepasst" bedeutet.
Aus Erfahrung würde ich jetzt mal die divs auf dem Desktop nebeneinander anordnen, weil da genug Platz ist, und auf dem Handy untereinander. Das kannst du beispielsweise so erreichen:

HTML:

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:

<html>
<head>
<link rel="stylesheet" type="text/css" href="t.css">
<meta charset="UTF-8">
</head>
<body>



<div id="Bild1" class="col">
  <img src="ags.png" width="auto" height="100" alt="Bild">
  <h2>Überschrift 1</h2>
  <div id="A1T1">
  <p>Text 1</p>
  </div>
</div>

<div id="Bild2" class="col">
  <img src="demo.png" width="auto" height="100" alt="Bild">
  <h2>Überschrift 2</h2>

  <div id="A1T2">
  <p>Text 2</p>
  </div>
</div>

<div id="Bild3" class="col">
  <img src="ags.png" width="auto" height="100" alt="Bild">
  <h2>Überschrift 3</h2>
  <div id="A1T3">
  <p>Text 3</p>
  </div>
</div>

</body>
</html>

CSS Datei:

markieren

Cascading Style Sheet

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

div.col {
    float: left;
    width: 33.3333%;
  text-align: center;
}

@media (max-width: 800px) {
  div.col {
    width: 100%;
  }
}

div.col p {
  text-align: left;
}

#Bild1 {
  background-color: #ffd;
}

#Bild2 {
  background-color: #fdf;
}

#Bild3 {
  background-color: #dff;
}

Ehemaliges Mitglied Erhaltene Danke: 1

Vielen Dank für die Antwort. Aber so ganz verstehe ich die Art von Design nicht.

Jetzt möchte ich eine Menüleiste auf großen Bildschirmen links vertikal positionieren. Auf Handys soll dann oben die Menüleiste sein. An sich klappt das ja schon, aber wie positioniere ich den Inhalt der Website jetzt rechts neben der Menüleiste?

markieren

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:

<html>
<head>
  <title>Startseite</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="main.css" />
</head>


<body>
    <table>
    <tr>
    <td>
        <div class="vertical-menu" id="nav">
            <a href="#" class="active">Home</a>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction();">☰</a>
        </div>
    </td>
    <td><div>
    <script>
        function myFunction() {
            var x = document.getElementById("nav");
            if (x.className === "vertical-menu") {
                x.className += " responsive";
            } else {
                x.className = "vertical-menu";
            }
        }
    </script>

    <h1>Test</h1></div>
    </tr>
    </table>
</body>
</html>

markieren

Cascading Style Sheet

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:

.vertical-menu {
    width: 20%;
    max-width: 200px;
    overflow: hidden;
}

.vertical-menu .icon {
    display: none;
}

.vertical-menu a {
    background-color: #eeeeee;
    display: block; 
    padding: 12px; 
    text-decoration: none; 
}

.vertical-menu a:hover {
    background-color: #FF4045;
}

.vertical-menu a.active {
    background-color: red;
    color: white;
}

@media screen and (max-width: 600px) {
      .vertical-menu {
         width: 100%;
         max-width: auto;
      }
      .vertical-menu a:not(:first-child) {display: none;}
      .vertical-menu a.icon {
            float: right;
            display: block;
      }
}

@media screen and (max-width: 600px) {
    .vertical-menu.responsive {
        position: relative;
    }
  .vertical-menu.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
  }
  .vertical-menu.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Auf Grund von Vorgängen "hinter den Kulissen" habe ich diesen Thread gesperrt.

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme