Rockcrusher
Lt. Junior Grade
- Registriert
- Aug. 2019
- Beiträge
- 260
Hallo, ich versuche mir grad selbst eine Homepage zu bauen. (Bin Anfänger will es aber unbedingt lernen) Ich selbst Fotografier sehr gerne und will mir eine Fotoseite erstellen. (nutze ganz primitiv den Windows Texteditor)
Hab mir jetzt einen einfachen Rahmen gebaut. html Seite und style.css separate Dateien. So weit so gut. Code sieht dann in etwa so aus. (<head> lass ich beim erklären mal weg.)
<div class="rahmen">
<div class="gal"> <img src="img/bild1.jpg"></div>
</div>
In der CSS hab ich dann die Parameter von "rahmen" fixiert:
.rahmen {
border: 1px;
border-color: #000000;
border-style: solid;
margin-left: auto;
margin-right: auto;
width: 1250px;
height: auto;
background-color: #ffffff;
}
Und die Bilder:
div.gal {
text-align: center;
background-color: #ffffff;
}
Die Bilder sind in 1200px Breite hinterlegt in einem Unterodner img/bild1.jpg
Das Problem ist jetzt, am PC 4K Monitor sieht alles super toll aus, wenn ich es aber am Smartphone oder ipad öffne muss ich Links und Rechts scrollen und es öffnet halt nicht in Vollbild sondern eingezoomt.
Ich kann jetzt natürlich den width: Befehl deutlich kleiner machen zb 600px. Dann muss ich die Bilder verkleinern und am 4k Monitor muss ich die Bilder mit der Lupe suchen. Ich hätte sie schon gerne mit 1200px Seitenlänge und zwischen Rahmen und Bild soll auch noch ein bisschen platz sein.
Ich hab dann ein bisschen gesucht und den <meta name="viewport" content="width=device-width"> Befehl für die .html Datei gefunden, der scheint das Problem nicht zu lösen. Vielleicht steh ich als Anfänger aber nur irgendwo am Schlauch. Kennt sich wer damit aus?
Hab mir jetzt einen einfachen Rahmen gebaut. html Seite und style.css separate Dateien. So weit so gut. Code sieht dann in etwa so aus. (<head> lass ich beim erklären mal weg.)
<div class="rahmen">
<div class="gal"> <img src="img/bild1.jpg"></div>
</div>
In der CSS hab ich dann die Parameter von "rahmen" fixiert:
.rahmen {
border: 1px;
border-color: #000000;
border-style: solid;
margin-left: auto;
margin-right: auto;
width: 1250px;
height: auto;
background-color: #ffffff;
}
Und die Bilder:
div.gal {
text-align: center;
background-color: #ffffff;
}
Die Bilder sind in 1200px Breite hinterlegt in einem Unterodner img/bild1.jpg
Das Problem ist jetzt, am PC 4K Monitor sieht alles super toll aus, wenn ich es aber am Smartphone oder ipad öffne muss ich Links und Rechts scrollen und es öffnet halt nicht in Vollbild sondern eingezoomt.
Ich kann jetzt natürlich den width: Befehl deutlich kleiner machen zb 600px. Dann muss ich die Bilder verkleinern und am 4k Monitor muss ich die Bilder mit der Lupe suchen. Ich hätte sie schon gerne mit 1200px Seitenlänge und zwischen Rahmen und Bild soll auch noch ein bisschen platz sein.
Ich hab dann ein bisschen gesucht und den <meta name="viewport" content="width=device-width"> Befehl für die .html Datei gefunden, der scheint das Problem nicht zu lösen. Vielleicht steh ich als Anfänger aber nur irgendwo am Schlauch. Kennt sich wer damit aus?
