Autor Beitrag
Csharp-programmierer
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: Di 07.02.17 23:44 
Hallo Leute,
ich habe auf einer Website 3 DIVs nebeneinander. Auf meinem 27 Zoller wird alles richtig angezeigt. Wenn ich aber die Website kleiner mache, werden alle in einer anderen Höhe dargestellt. Ich habe es schon mit height="...px" probiert, es haut zwar hin, aber wenn ich jetzt mit dem Handy die Website aufrufe, dann wird alles komplett anders dargestellt. Hier einmal der Code:

ausblenden HTML-Dokument
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
<div id="element-ce7c1faa-e82b-4754-a869-bd5a3b53906e" data-platform-element-id="694046499467037623-1.2.6" class="platform-element-contents" >
  <div class="callout-box-wrapper">
  <div class="callout-box--standard item">
      <div class="element-content">
          <div style="width: auto;><div></div><div><div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="
uploads/8/3/1/2/83128648/x2.png" alt="Bild" style="width:auto;max-width:100%" />
</a>
<div style="
display:block;font-size:90%"></div>
</div></div>

<div class="
wsite-spacer" style="height:10px;"></div>

<div class="
paragraph" style="text-align:center;"><font size="5">Freundlicher Support</font></div>

<div class="
paragraph" style="text-align:center;"><span><font size="4">Egal was Ihr Anliegen ist, unser Support wird sich jederzeit um Ihre Supportanfrage kümmern. Und das vollkommen kostenlos.</font></span></div></div>
      </div>
  </div>
</div>
</div>


Wie kann ich es machen, dass die Höhe auf allen Monitoren gleich aussieht?

Moderiert von user profile iconNarses: Beiträge zusammengefasst

Bzw ich habe ein Formular mit padding-left: 10%. Wenn die Website auf dem Handy geöffnet wird, soll das padding-left aber nur 1% haben. Wie kann ich das machen?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
jfheins
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 874
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: Mi 08.02.17 23:33 
Ohne Stylesheet kann ich da wenig nachvollziehen. Ich habe mal ein Minimaldokument erzeugt und
ausblenden Cascading Style Sheet
1:
2:
3:
div {
  border1px solid red;
}
eingefügt. Und da sind ne Menge divs :lupe: Alle untereinander oder ineinander.


Für responsive design habe ich gerne bootstrap genutzt - kann ich empfehlen. Das ist eine irre umfangreiche Bibliothek, die ein Grid-System mitbringt: getbootstrap.com/css/#grid
Du kannst die Spalten so definieren, dass die bei einer bestimmten Schwelle automatisch umbrechen und untereinander angezeigt werden. Es gibt drei Schwellwerte, die du auch selbst anpassen kannst.
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: Fr 10.02.17 11:39 
Vielen Dank. Ich werde mir das mal genauer ansehen.

Jetzt hapert es nur noch an einer Sache: ich habe das padding-left eines Formulars auf 10% gestellt. Wenn man mit dem Handy auf dieses Formular zugreift, soll das padding-left aber nur 1% betragen. Wie kann ich das einstellen?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
hydemarie
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: Fr 10.02.17 12:10 
Nein, nimm bitte nicht Bootstrap. Einfach ein gigantisches Framework auf ein Problem zu werfen, dessen Funktionsweise man nicht versteht, war noch nie eine verantwortungsvolle Lösung. "Grids" (Flexbox) kann CSS schon selbst.

Tipp: Lies dich mal zu Browser-Viewports (ist ein Einzeiler im HTML-Header) und Mediaquerys ein. Bootstrap macht auch nicht viel mehr, nur mit wesentlich mehr überflüssigem Code.


Zuletzt bearbeitet von hydemarie am Fr 10.02.17 12:14, insgesamt 1-mal bearbeitet
hydemarie
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: Fr 10.02.17 12:11 
user profile iconCsharp-programmierer hat folgendes geschrieben Zum zitierten Posting springen:
Wenn man mit dem Handy auf dieses Formular zugreift, soll das padding-left aber nur 1% betragen. Wie kann ich das einstellen?


Genau das kannst du mit einem CSS-Mediaquery erreichen. :)

css-tricks.com/snipp...or-standard-devices/