Tabula_Rasa
Mitglied
Guten Tag,
ich bin neu hier, also wäre es nett, wenn ihr Rücksicht nehmen könntet, falls ich gegen eine Regel verstoßen sollte.
Ich habe 3 Fragen:
1. Wie passt man die Seite an verschiedenen Auflösungen an? Ich habe die Breite und Höhe alles mit "px" bestimmt. Nun habe ich gelesen, dass die Höhe und Breite gleich bleiben auch bei kleineren Bildschirmen. Das möchte ich vermeiden. Ich müsste also % wählen, aber wie rechne ich jetzt alles um? Um die "Navigations-Leiste" (Home, ZweiteSeite, DritteSeite, Vierteseite) so hinzubekommen, dass sie so angezeigt wird, wie sie mir gefällt, hab ich einiges an Zeit gebraucht, da ich ständig ausprobieren musste. Jetzt möchte ich nicht wieder mit % nochmal alles ausprobieren. Gibt es eine bestimmte Weise auf % zu rechnen?
2. Falsche Anwendung des Befehls "float:right;"? Unter "lastreleasedcontent" habe ich drei Video, dich ich nebeneinander angezeigt haben möchte. Für das erste Video brauch ich diesen Befehl nicht. Für das zweite schon. Es klappt wie erwartet, das Video wird mit einer kleinen Lücke neben das erste Video gestellt. Beim dritten Video funktioniert der Befehl nicht ganz. Das dritte Video wird zwar neben das zweite gestellt, aber es fehlt die Lücken zwischen den beiden Videos. Wie erzeuge ich die Lücken? Und wie könnte ich diese Lücke sogar vergrößern?
3. Ich bin ein Anfänger und habe dementsprechend nicht viel Ahnung. Die Seite wird genau so angezeigt, wie ich sie mir vorgestellt habe. Der Code ist nicht wirklich optimiert. Das ist mir zunächst auch nicht wirklich wichtig. Hauptsache die Seite sieht so aus, wie ich sie haben möchte, aber falls euch Teile meines Codes auffallen, die wirklich schrecklich sind (wahrscheinlich fast der ganze Code :)), wäre ich Euch sehr verbunden, mir diese zu nennen und, falls nicht zu viel verlangt, kurz erklären, wie man das richtig macht.
Der HTML-Code etwas angepasst
Der CSS-Code:
Huch, sehr viel Text. Ich danke Euch für eure Zeit und freue mich über jede Anregung. Frage 1 ist mir persönlich am wichtigsten. Falls ihr nicht die Zeit habt, auf jede meiner Frage eine Antwort zu liefern, dann würde ich mir wünschen, dass Ihr die 1. Frage beantwortet.
PS: Ihr könnt den Code speichern und dann die Seite abrufen. Ich möchte, dass die Seite von den Verhältnissen her genauso aussieht wie bei einer Auflösung von 1920x1080.
Vielen Dank im Voraus.
EDIT: Huch, der CSS-Tag funktioniert nicht ganz. Könnte ein Moderator nochmal drüberschauen?
ich bin neu hier, also wäre es nett, wenn ihr Rücksicht nehmen könntet, falls ich gegen eine Regel verstoßen sollte.
Ich habe 3 Fragen:
1. Wie passt man die Seite an verschiedenen Auflösungen an? Ich habe die Breite und Höhe alles mit "px" bestimmt. Nun habe ich gelesen, dass die Höhe und Breite gleich bleiben auch bei kleineren Bildschirmen. Das möchte ich vermeiden. Ich müsste also % wählen, aber wie rechne ich jetzt alles um? Um die "Navigations-Leiste" (Home, ZweiteSeite, DritteSeite, Vierteseite) so hinzubekommen, dass sie so angezeigt wird, wie sie mir gefällt, hab ich einiges an Zeit gebraucht, da ich ständig ausprobieren musste. Jetzt möchte ich nicht wieder mit % nochmal alles ausprobieren. Gibt es eine bestimmte Weise auf % zu rechnen?
2. Falsche Anwendung des Befehls "float:right;"? Unter "lastreleasedcontent" habe ich drei Video, dich ich nebeneinander angezeigt haben möchte. Für das erste Video brauch ich diesen Befehl nicht. Für das zweite schon. Es klappt wie erwartet, das Video wird mit einer kleinen Lücke neben das erste Video gestellt. Beim dritten Video funktioniert der Befehl nicht ganz. Das dritte Video wird zwar neben das zweite gestellt, aber es fehlt die Lücken zwischen den beiden Videos. Wie erzeuge ich die Lücken? Und wie könnte ich diese Lücke sogar vergrößern?
3. Ich bin ein Anfänger und habe dementsprechend nicht viel Ahnung. Die Seite wird genau so angezeigt, wie ich sie mir vorgestellt habe. Der Code ist nicht wirklich optimiert. Das ist mir zunächst auch nicht wirklich wichtig. Hauptsache die Seite sieht so aus, wie ich sie haben möchte, aber falls euch Teile meines Codes auffallen, die wirklich schrecklich sind (wahrscheinlich fast der ganze Code :)), wäre ich Euch sehr verbunden, mir diese zu nennen und, falls nicht zu viel verlangt, kurz erklären, wie man das richtig macht.
Der HTML-Code etwas angepasst
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="outer">
<div class="home">
<a href="home.html"> <font color="white"> Home </font></a>
</div>
<div class="ZweiteSeite">
<a href="ZweiteSeite.html"> <font color="white"> ZweiteSeite </font></a>
</div>
<div class="DritteSeite">
<a href="DritteSeite.html"> <font color="white"> DritteSeite </font></a>
</div>
<div class="VierteSeite">
<a href="VierteSeite.html"> <font color="white"> VierteSeite </font></a>
</div>
<div class="lastreleased">
<font color="white"><strong> Last Released </strong> </font>
</div>
<div class="lastreleasedcontent">
<br><br><br>
<iframe width="263" height="157" src="youtubelink" frameborder="0" allowfullscreen> </iframe>
<iframe width="263" height="157" src="youtubelink" frameborder="0" allowfullscreen style="float:right;">></iframe>
<iframe width="263" height="157" src="youtubelink" frameborder="0" allowfullscreen style="float:right;">></iframe>
</div>
<div class="bow">
<font color="white"><strong> Best of the Week </strong> </font>
</div>
<div class="bowcontent">
<br><br><br>
<video src="video.mp4" width="260" height="160" controls="controls" preload>
Ihr Browser kann dieses Video nicht wiedergeben.<br/>
Dieser Film zeigt eine Demonstration des video-Elements.
Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
</video>
</div>
</div>
</body>
</html>
Der CSS-Code:
CSS:
body{font-family:arial;
background-color: grey;
background-size: cover;
z-index:-1;
}
.home {
padding: 5px;
border: 3px solid;
text-align: center;
margin: 0px 930px 15px 15px;
background-color: royalblue;
margin-top: -3px;
}
.ZweiteSeite {
padding: 5px;
border: 3px solid;
text-align: center;
margin: 0px 795px 75px 150px;
background-color: royalblue;
margin-top: -49px;
}
.DritteSeite {
padding: 5px;
border: 3px solid;
text-align: center;
margin: 0px 645px 75px 285px;
background-color: royalblue;
margin-top: -109px;
}
.VierteSeite {
padding: 5px;
border: 3px solid;
text-align: center;
margin: 0px 450px 75px 435px;
background-color: royalblue;
margin-top: -109px;
}
.lastreleased {
padding: 5px;
border: 3px solid;
text-align: center;
margin: 100px 250px 50px 3500px;
background-color: royalblue;
margin-left: -3px;
z-index: 5000;
}
.lastreleasedcontent {
height: 300px;
padding: 3px;
border: 2px solid;
margin: -50px 250px 50px 290px;
background-color: royalblue;
margin-top: -50 px;
margin-left: -3px;
z-index: 5000;
}
.bow{
padding: 5px;
border: 3px solid;
text-align: center;
margin: 100px 250px 50px 3500px;
background-color: royalblue;
margin-left: -3px;
z-index: 5000;
}
.bowcontent {
height: 300px;
padding: 3px;
border: 2px solid;
margin: -50px 250px 50px 290px;
background-color: royalblue;
margin-left: -3px;
}
.outer {
margin: auto;
border: 3px solid;
width: 1050px;
height: 1300px;
background-color: black;
}
Huch, sehr viel Text. Ich danke Euch für eure Zeit und freue mich über jede Anregung. Frage 1 ist mir persönlich am wichtigsten. Falls ihr nicht die Zeit habt, auf jede meiner Frage eine Antwort zu liefern, dann würde ich mir wünschen, dass Ihr die 1. Frage beantwortet.
PS: Ihr könnt den Code speichern und dann die Seite abrufen. Ich möchte, dass die Seite von den Verhältnissen her genauso aussieht wie bei einer Auflösung von 1920x1080.
Vielen Dank im Voraus.
EDIT: Huch, der CSS-Tag funktioniert nicht ganz. Könnte ein Moderator nochmal drüberschauen?
Zuletzt bearbeitet von einem Moderator: