Hallo zusammen,
ich hoffe, ihr könnt mir helfen.
Da ich leidenschaftlich fotografiere wollte ich mir eine Homepage zulegen. Diese wollte ich aber selbst "schreiben" und habe angefangen mich in HTML und CSS einzulesen.
Leider hänge ich nun an einem ziemlich gravierenden Problem: Der Bildschirmgröße. Ich habe einen Gaminglaptop mit entsprechend großem Bildschirm (1920x1080). Dummerweise habe ich vergessen, dass die meisten Bildschirme tatsächlich kleiner sind. Wenn ich meine Webseite (http://www.marcovogel108.de) nun auf kleineren Bildschirmen starte, verschieben sich die Bilder auf den Text. Selbes passiert auch, wenn ich einfach mein Browserfenster verkleiner. Ideal wäre es, wenn bei kleineren Bildschirmen alles so bleibt wie es ist (also dass man dann halt auf die Seite scrollen muss):D. Oder gibt es eine Möglichkeit wie sich die Seite automatisch an die Fenstergröße anpasst ohne dass sich alles verschiebt?
Wie kann ich das verhindern? Habt ihr vielleicht andere Ansätze bei diesem Problem an die ich im Moment nicht denke?
Hier mal noch der HTML-Code von einer dieser Seiten (in diesem Falle: http://www.marcovogel108.de/Literaturempfehlungen.html:
HTML
<!DOCTYPE html><html><head><link rel="STYLESHEET" type="text/CSS" href="Literaturempfehlungen.css"><meta name="viewport" content="width=1920" /><meta name="viewport" content="width=device-width, initial-scale=1.5"><meta charset="utf-8" /><title>Literaturempfehlungen</title></head><body>
<div id="Nav"><nav> <ul> <li><a href="Willkommen.html">Willkommen</a></li> <li><a href="Uebermich.html">Über mich</a></li> <li><a href="Kontakt.html">Kontakt</a></li> <li> <a href="meineBilder.html">Portfolio</a> <ul> <li><a href="portraitgalerie.html">Portraits</a></li> <li><a href="menschengalerie.html">Menschen</a></li> <li><a href="wintergalerie.html">Winter</a></li> <li><a href="wassergalerie.html">Wasser</a></li> <li><a href="nachtgalerie.html">Fotografien bei Nacht</a></li> <li><a href="bauwerkegalerie.html">Bauwerke</a></li> <li><a href="landschaftsgalerie.html">Landschaftsfotografie</a></li> <li><a href="lostplacesgalerie.html">Lost Places</a></li> <li><a href="verschiedenesgalerie.html">Verschiedenes</a></li> </ul> </li> <li> <a href="TfP.html">Portraitfotografie</a></li> <li> <a href="Blog.html">Blog</a> <ul> <li><a href="ausschreibungen.html">Ausschreibungen und Planungen</a></li> <li><a href="gedanken.html">Eigene Gedanken</a></li> <li><a href="erfahrungsberichte.html">Erfahrungsberichte</a></li> <li><a href="reiseberichte.html">Reiseberichte</a></li> </ul> </li> <li> <a href="Literaturempfehlungen.html">Empfehlungen</a></li> </ul></nav>
</div><div id="Container" width="100%"; ><div id="Text"><h1>Empfehlungen</h1><p>Gerade als Anfänger ist es extrem wichtig, dass man die Theorie der Fotografie schnell lernt. Dies erreicht man<br>einerseits durch viel üben und dem genauen lesen der Gebrauchsanweisung der eigenen Kamera. Doch spätestens wenn man<br>sich genauer auf ein Gebiet spezialisieren möchte, benötigt man Bücher, mit denen man gut arbeiten kann.</p><p>Auf dieser Seite möchte ich nun ein paar Bücher und andere Medien vorstellen, die mir sehr geholfen haben und die<br> ich demnach weiterempfehlen kann:</p>
<ul> <li>"Lost Places fotografieren: Von der Vorbereitung über das Shooting bis zur Nachbearbeitung" von Peter Untermaierhof</li> <li>"Gesichter fotografieren: Ausdrücke einfangen und inszenieren (Edition Espresso)" von Georg Banek und Cora Banek</li> <li>"Landschaftsfotografie" von Rainer Mirau</li></ul>
<p>Da ich aber selbst jemand bin, der häufig mit Videotutorials besser lernen kann als mit Büchern, schaue ich mir regelmäßig<br>Youtube-Videos von <a href="https://www.youtube.com/channel/UCd-3cAoPoDrw9LBJmXVB20g"target="_blank">Benjamin Jaworskyj</a> an.<br>Neben super erklärten Fotografietutorials kann man auch seine interessanten Abenteuervideos ansehen um<br> Inspirationen für eigene Fotoreisen zu gewinnen.Da man speziell auch in der Fotografie viel Geld für Technik und<br> Equipment liegen lassen kann, gibt Benjamin Jaworskyj auch häufig Tipps für günstiges Equipment mit guter Qualität,<br> welches er selbst benutzt.</p>
</div><div id="BildSkater"><img src="Bilder_Homepage/skater_beweungsunschärfe_final.jpg" alt="Skater" width="400px"></div>
</div><div id="BildNacht"><img src="Bilder_Homepage/DSCF2546.JPG" alt="Málaga bei Nacht" width="400px"></div> </div> </body></html>Und nun noch der CSS-Code:
Code
body{background-image: url("Wallpaper_blau1.jpg");
background-size: cover;
}
a:link {
color: white;
}
a:visited {
color: white;
}
nav {
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
z-index: 1000;
background: #FE9A2E;
background: linear-gradient(top, #FE9A2E 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #FE9A2E 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #FE9A2E 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: #000;
width: 400px;
height: 300px;
}
#Text{
float: left;
width: 900px;
text-align:justify;
margin-top: 10px;
margin-left: 200px;
}
#BildSkater{
position: absolute;
top: 150px;
right: 20px;
}
#BildNacht{
position: absolute;
top: 500px;
right: 20px;
}
#Container{
width:1024px;
}Ich bin am verzweifeln, hoffentlich könnt ihr mir helfen:(
Viele Grüße,
lpspprkut