Autor Beitrag
xjonasx
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Sa 01.04.17 11:14 
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:

ausblenden 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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 888
Erhaltene Danke: 149

Win7
VS 2013, VS2015
BeitragVerfasst: Sa 01.04.17 12:10 
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:
ausblenden volle Höhe 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:
ausblenden 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 {
    floatleft;
    width33.3333%;
  text-align: center;
}

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

div.col p {
  text-alignleft;
}

#Bild1 {
  background-color#ffd;
}

#Bild2 {
  background-color#fdf;
}

#Bild3 {
  background-color#dff;
}
xjonasx
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: 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?

ausblenden volle Höhe 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>


ausblenden volle Höhe 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 {
    width20%;
    max-width200px;
    overflow: hidden;
}

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

.vertical-menu a {
    background-color#eeeeee;
    display: block; 
    padding12px
    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 {
         width100%;
         max-width: auto;
      }
      .vertical-menu a:not(:first-child) {display: none;}
      .vertical-menu a.icon {
            floatright;
            display: block;
      }
}

@media screen and (max-width: 600px) {
    .vertical-menu.responsive {
        position: relative;
    }
  .vertical-menu.responsive a.icon {
        position: absolute;
        right0;
        top0;
  }
  .vertical-menu.responsive a {
        float: none;
        display: block;
        text-alignleft;
    }
}
Christian S.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20449
Erhaltene Danke: 2263

Win 10
C# (VS 2019)
BeitragVerfasst: Di 04.04.17 22:28 
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".

Für diesen Beitrag haben gedankt: Narses
Dieses Thema ist gesperrt, Du kannst keine Beiträge editieren oder beantworten.

Das Thema wurde von einem Team-Mitglied geschlossen. Wenn du mit der Schließung des Themas nicht einverstanden bist, kontaktiere bitte das Team.