• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anpassung an verschiedenen Bildschirmen

T

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

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:
Werbung:
Um es kurz zu machen: Für "Responsive Webdesign" kommen CSS3 Media Queries zum Einsatz, um die Seitendarstellung für die unterschiedlichen Ausgabemedien anzupassen.

Hier eine kleine Auswahl an "Media Queries"-Quellen:
Weitere gibt's natürlich via https://www.google.de/search?q=css+media+queries :)

Tabula_Rasa schrieb:
EDIT: Huch, der CSS-Tag funktioniert nicht ganz. Könnte ein Moderator nochmal drüberschauen?
Zum Vergrößern anklicken....
[CSS][/CSS] gibt's unter der Forensoftware xenForo nicht als Syntax-Highlighter, dafür aber [code=CSS][/code] :cool:

Neben "CSS" kann eine Vielzahl von Sprachen genannt werden:
4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, php, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic
Zum Vergrößern anklicken....

Moderation: Thema von HTML nach CSS verschoben.
 
Vielen Dank für deine Antwort! Ich lese mich mal ein. Bitte den Thread nicht schließen, bräuchte zur Frage 2 noch eine Antwort :)
 
Werbung:
Tabula_Rasa schrieb:
Vielen Dank für deine Antwort! Ich lese mich mal ein. Bitte den Thread nicht schließen, bräuchte zur Frage 2 noch eine Antwort :)
Zum Vergrößern anklicken....
Nutze anstelle von float das Flexbox-Modell :)

Wie gehabt..., der Lesestoff dürfte dir nicht so schnell ausgehen:
Sowie https://www.google.de/search?q=css3+flexbox
 
Werbung:
:D Wenn ich es richtig verstanden habe, hat man unterschiedliche CSS-Dateien oder in einer CSS-Datei definiert, bei welchem Gerät welcher Teil ausgeführt werden soll. Wie teste ich das auf meinem Handy, wenn ich die Seite noch nicht Online stellen möchte?
 
Tabula_Rasa schrieb:
Wie teste ich das auf meinem Handy, wenn ich die Seite noch nicht Online stellen möchte?
Zum Vergrößern anklicken....
(Unabhängig vom Smartphone) Einen lokalen Webserver als Entwicklungsumgebung einrichten:
So oder so, nur zu empfehlen, und unabdingbar, sobald PHP und Datenbanken ins Spiel kommen.

Alternative: Auf Entwicklerumgebungen zurückgreifen, die die Speicherung auf deren Server ermöglicht, und einen URL generiert:
Die nutze ich persönlich seit jeher (Schwerpunkt liegt auf JSFiddle), um in den diversen Foren, in denen ich "tätig" bin (oder einst mal war), Praxislösungen zu den vorgetragenen Problemen demonstrieren zu können - ohne dafür meinen Server in Anspruch nehmen zu müssen :cool:
 
Habe zwar XAMPP aber verstehe immer noch nicht, wie ich mit XAMPP die Website auf meinem Handy bzw. nur das Format testen kann :confused:
 
Werbung:
Tabula_Rasa schrieb:
Oft weiß ich ja nicht wonach ich suchen soll :D. Du bist mir dabei eine große Hilfe :D
Zum Vergrößern anklicken....
Der Suchbegriff / -term entscheidet über den Miß|Erfolg in den Suchergebnissen.

Je nach Thematik sollte er detailierter definiert werden, um den Sachverhalt präziser auf den Punkt zu bringen, und so irrelevante Treffer rauszufiltern.

Und wenn's die Fremdsprachenkenntnisse hergeben, mit englischen Begriffen hantieren; das steigert die Trefferzahl immens.

Rund um IT, Programmierung, Webdesign, usw. führt da oft eh kein Weg vorbei - besonders, wenn man richtig tief / speziell in die Materie abtauchen muss, wo es dann oft an (guten, brauchbaren) deutschen Quellen hapert.

Klar, als im letzten Jahrtausend die ersten Suchmaschinen nach und nach an den Start gingen, war ich gleichermaßen unerfahren, und hab öfters viel Frust geschoben - weil ich instinktiv wusste, dass die Suchmaschine mir nicht alles gezeigt hat, was dazu im Netz existiert :D

Aber, Übung macht ja bekanntermaßen den Meister :)
 
Werbung:
Das hoff ich doch mal :D. Jetzt habe ich das Problem das ein Teil der Config einfach nicht da ist. Ich soll meine IP erlauben in unter LocationMatch aber nichts zu sehen.

Code: 
#
# XAMPP settings
#

<IfModule env_module>
    SetEnv MIBDIRS "C:/xampp/php/extras/mibs"
    SetEnv MYSQL_HOME "\\xampp\\mysql\\bin"
    SetEnv OPENSSL_CONF "C:/xampp/apache/bin/openssl.cnf"
    SetEnv PHP_PEAR_SYSCONF_DIR "\\xampp\\php"
    SetEnv PHPRC "\\xampp\\php"
    SetEnv TMP "\\xampp\\tmp"
</IfModule>

#
# PHP-Module setup
#
LoadFile "C:/xampp/php/php7ts.dll"
LoadFile "C:/xampp/php/libpq.dll"
LoadModule php7_module "C:/xampp/php/php7apache2_4.dll"

<FilesMatch "\.php$">
    SetHandler application/x-httpd-php
</FilesMatch>
<FilesMatch "\.phps$">
    SetHandler application/x-httpd-php-source
</FilesMatch>

#
# PHP-CGI setup
#
#<FilesMatch "\.php$">
#    SetHandler application/x-httpd-php-cgi
#</FilesMatch>
#<IfModule actions_module>
#    Action application/x-httpd-php-cgi "/php-cgi/php-cgi.exe"
#</IfModule>


<IfModule php7_module>
    PHPINIDir "C:/xampp/php"
</IfModule>

<IfModule mime_module>
    AddType text/html .php .phps
</IfModule>

ScriptAlias /php-cgi/ "C:/xampp/php/"
<Directory "C:/xampp/php">
    AllowOverride None
    Options None
    Require all denied
    <Files "php-cgi.exe">
          Require all granted
    </Files>
</Directory>

<Directory "C:/xampp/cgi-bin">
    <FilesMatch "\.php$">
        SetHandler cgi-script
    </FilesMatch>
    <FilesMatch "\.phps$">
        SetHandler None
    </FilesMatch>
</Directory>

<Directory "C:/xampp/htdocs/xampp">
    <IfModule php7_module>
        <Files "status.php">
            php_admin_flag safe_mode off
        </Files>
    </IfModule>
    AllowOverride AuthConfig
</Directory>

<IfModule alias_module>
    Alias /licenses "C:/xampp/licenses/"
    <Directory "C:/xampp/licenses">
        Options +Indexes
        <IfModule autoindex_color_module>
            DirectoryIndexTextColor  "#000000"
            DirectoryIndexBGColor "#f8e8a0"
            DirectoryIndexLinkColor "#bb3902"
            DirectoryIndexVLinkColor "#bb3902"
            DirectoryIndexALinkColor "#bb3902"
        </IfModule>
        Require local
        ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
   </Directory>

    Alias /phpmyadmin "C:/xampp/phpMyAdmin/"
    <Directory "C:/xampp/phpMyAdmin">
        AllowOverride AuthConfig
        Require local
        ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>

    Alias /webalizer "C:/xampp/webalizer/"
    <Directory "C:/xampp/webalizer">
        <IfModule php7_module>
            <Files "webalizer.php">
                php_admin_flag safe_mode off
            </Files>
        </IfModule>
        AllowOverride AuthConfig
        Require local
        ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>
</IfModule>
Wo soll ich meine IP eintragen?
 
Vielen Dank Tronjer für den tollen Tipp! Es wäre aber auch schön, wenn ich die Seite von meinem Handy aus aufrufen könnte.
 
Werbung:
Wie ich sehe, ist es wirklich sehr viel Arbeit. Habt ihr Tipps, wie ich das bestmöglich hinkriege ohne zu verzweifeln? :)
 
Ich bin gerade im Biergarten und schreiben auf dem iPhone ist suboptimal.

Aber prinzipiell gibt es da mehrere Möglichkeiten, bsw. die Seite per Github Pages oder Heroku zu deployen. Dann ist sie online erreichbar.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben