Entwickler-Ecke :: Thema anzeigen - Responsitive Design für Webseiten

Delete - Sa 01.04.17 11:14
Titel: Responsitive Design für Webseiten

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:

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 - Sa 01.04.17 12:10

Hallo und erst mal herzlich willkommen ;-)

Zunächst meinst du vermutlich Responsive web design [https://en.wikipedia.org/wiki/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:

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:

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;
}

Delete - Di 04.04.17 20:05

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?

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>

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;
    }
}

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!