nicht angemeldet hmm
Gunnar Bittersmann
marctrix
hmm
Matthias Apsel
hmm
marctrix
hmm
Matthias Apsel
hmm
Hi Leute,
ich möchte ein Hintergrundbild so positionieren, dass es in der mitte der linken bildschirmseite angezeigt wird. außerdem möchte ich es so verkleinern dass es auf die seite passt.
MudGuard html {
background: url(ressourcen/willkommen_geschenk.jpg) left bottom 10px;
background-repeat:no-repeat;
background-position:25px 10%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
wie muss ich meinen code anpassen? ich habe in der uni das wahlfach webTech belegt, dort benutzen wir cloud 9 und machen gerade etwas mit bootstrap. frage zu botstrap: in cloud 9 wird alles sauber angezeigt, aber wenn ich den code runterlade und auf meinem rechner ausführe, sind einige botstrapsachen verformt. warum?
@@hmm
ich möchte ein Hintergrundbild so positionieren, dass es in der mitte der linken bildschirmseite angezeigt wird. […]
html { background: url(ressourcen/willkommen_geschenk.jpg) left bottom 10px;
Das ist die Abkürzung für background-image: url(ressourcen/willkommen_geschenk.jpg) und background-position: left bottom 10px sowie das Setzen der übrigen, nicht angegebenen background-*-Eigenschaften auf ihre jeweiligen Ausgangswerte.
Wenn du mit „in der mitte der linken bildschirmseite“ linksbündig meinst, ist left wohl richtig. Wenn du damit vertikal zentriert meinst, ist bottom 10px wohl nicht richtig.
background-position:25px 10%;
Hier überschreibst du den obigen Wert. Das ist wohl auch nicht richtig.
außerdem möchte ich es so verkleinern dass es auf die seite passt.
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Für „dass es auf die seite passt“ ist cover wohl auch nicht richtig.
Außerdem sind die Verdor-Präfixe für diese Eigenschaft längst überholt. Weg damit!
frage zu botstrap: in cloud 9 wird alles sauber angezeigt, aber wenn ich den code runterlade und auf meinem rechner ausführe, sind einige botstrapsachen verformt. warum?
Wegen der starken Erdstrahlung.
LLAP 🖖
Hej Gunnar,
Wegen der starken Erdstrahlung.
Was ist eigentlich aus Cheetah geworden? Irgendeine Chance, dass der sich hier wieder blicken lässt?
Marc
danke!
hier mein aktueller code:
<!DOCTYPE html>
<html>
<head>
<title>Kaffee</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
<style>
/* http://css-tricks.com/perfect-full-page-background-image/ */
html {
background: url(ressourcen/willkommen_geschenk.jpg) left 10px;
background-size: 100%;
}
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.9);
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1>Kaffee Game</h1>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Willkommen</a></a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Registrieren</a></li>
<li class=" btn-danger nav navbar-nav"><a href="anmelden.html">Anmelden</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-6 col-offset-3 panel">
<p class="help-block text-center"><small>Kaffee Game</small></p>
<main>
<articale>
<header>
<h1>Herzlich Willkommen liebe Kaffee Freunde!</h1>
</header>
<p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu präsentieren
und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p>
</articale>
</main>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/zxmED9JTPaA" frameborder="0" allowfullscreen>
</iframe><br>
<h1 class="margin-base-vertical">Kaffee-Shoppen und Game-Zocken</h1>
<p>
Registriert euch einfach auf dieser Seite und erfreut euch an unserem Kaffee-Online Game.
</p>
<p>
Wenn ihr die Weiterentwicklung des games unterstützen wollt, wo kauft über die angegebenen Links
bei unseren Partnern ein.
</p>
<p>
Wollt ihr stets auf dem laufenden bleiben über alle Updates auf dieser Seite? Dann tragt euch hier für unsere Newsletter ein:
</p>
<form class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" />
</p>
<p class="help-block text-center"><small>Wir senden Ihnen keinen Spam und geben Ihre E-Mail nicht weiter.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-large">Anmelden für Newsletter</button>
</p>
</span>
</form>
<div class="margin-base-vertical">
<small class="text-muted"> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</small>
</div>
</div><!-- //main content -->
</div><!-- //row -->
</div> <!-- //container -->
</body>
</html>
hier meine fragen:
mich regt cloud 9 auf, da ist vieles nicht so ausgereift wie mein prof meinte. welche ide kann ich für html, php, javascript verwenden? eine ide bei der ich nicht seperat xamp starten muss wär super, eine die wie nodepade die den code färbt aber zusätzlich noch die einzelnen ordner und unterordner des projekts anzeigt. ansonsten brauch ich nix in der ide, idealerweise eine die wenig arbeitsspeicher verbraucht (html in eclipse zu programmieren würde mir keinen spass machen)
ihr könnt den code oben direkt ausführen, dann seht ihr mein nächsten probleme: a. Bootstrap macht die seite langsam, wie kann ich das beschlenigen? b. Bootstrap funktioniert auch nicht richtig, z.b. wird die schrift nicht so dargestellt wie in cloud 9, was muss ich tun?
ich möchte eine startseite bauen die so aussieht:
a. header zeile, mit login rechts und links ein Text "Kaffeegeschenke" b. auf der rechten Seite des Bildschrims möchte ich meinen div Container haben. c. auf der linken Seite das Bild, nur dass das bild viel zu groß ist, das minimieren klappt überhaupt nicht.
ich glaube mein erster codeversuch ist fürn arsch und ich hätte auch gerne einen saubereren code. können wir das so machen, dass ihr mir sagt welche verbesserung ich zuerst schreiben soll ich das dann hier poste und ihr mir dann den nächsten schritt sagt? anstelle einer verbesserung kann ich auch nochmal neu anfangen
Hallo hmm,
ich glaube mein erster codeversuch ist fürn arsch und ich hätte auch gerne einen saubereren code. können wir das so machen, dass ihr mir sagt welche verbesserung ich zuerst schreiben soll ich das dann hier poste und ihr mir dann den nächsten schritt sagt? anstelle einer verbesserung kann ich auch nochmal neu anfangen
Bis demnächst
Matthias
hi, danke!!!
umlaute sind korrigiert:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kaffee</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
<style>
/* http://css-tricks.com/perfect-full-page-background-image/ */
html {
background: url(ressourcen/willkommen_geschenk.jpg) left 10px;
background-size: 100%;
}
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.9);
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1>Kaffee Game</h1>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Willkommen</a></a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Registrieren</a></li>
<li class=" btn-danger nav navbar-nav"><a href="anmelden.html">Anmelden</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-6 col-offset-3 panel">
<p class="help-block text-center"><small>Kaffee Game</small></p>
<main>
<article>
<header>
<h1>Herzlich Willkommen liebe Kaffee Freunde!</h1>
</header>
<p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu präsentieren
und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p>
</article>
</main>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/zxmED9JTPaA" frameborder="0" allowfullscreen>
</iframe><br>
<h1 class="margin-base-vertical">Kaffee-Shoppen und Game-Zocken</h1>
<p>
Registriert euch einfach auf dieser Seite und erfreut euch an unserem Kaffee-Online Game.
</p>
<p>
Wenn ihr die Weiterentwicklung des games unterstützen wollt, wo kauft über die angegebenen Links
bei unseren Partnern ein.
</p>
<p>
Wollt ihr stets auf dem laufenden bleiben über alle Updates auf dieser Seite? Dann tragt euch hier für unsere Newsletter ein:
</p>
<form class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" />
</p>
<p class="help-block text-center"><small>Wir senden Ihnen keinen Spam und geben Ihre E-Mail nicht weiter.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-large">Anmelden für Newsletter</button>
</p>
</span>
</form>
<div class="margin-base-vertical">
<small class="text-muted"> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</small>
</div>
</div><!-- //main content -->
</div><!-- //row -->
</div> <!-- //container -->
</body>
</html>
jetzt weiß ich endlich für das die utf-8 geschichte gut ist :D
@@hmm
<html>
Die Angabe der Sprache des Inhalts fehlt.
font-family: "Open Sans",serif;
Du willst, wenn Open Sans nicht zur Verfügung steht, den Text in einer Serifenschrift setzen?
font-family: "Abel", Arial, sans-serif;
Warum soll Text in Arial gesetzt werden, wenn Neue Helvetica oder Helvetica auf dem System verfügbar sind?
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <h1>Kaffee Game</h1> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Willkommen</a></a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Partner</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Registrieren</a></li> <li class=" btn-danger nav navbar-nav"><a href="anmelden.html">Anmelden</a></li> </ul> </div> </nav>
Ist „Kaffee Game“ die Überschrift der Navigation oder die der Website? Ich vermuste letzteres. Dann sollte das Markup so aussehen:
<header>
<h1>Kaffee Game</h1>
<nav>
<ul>…</ul>
</nav>
</header>
Hinzufügen von div und Bootstrap-Klassen nach Belieben. 😨
<article> <header> <h1>Herzlich Willkommen liebe Kaffee Freunde!</h1> </header> <p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu präsentieren und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p> </article>
Das ist kein article. Wenn du da einen Container brauchst, dann div. Vermutlich brauchst du da keinen Container.
BTW, bei dem denglischen „Kaffee Game“ mag das Leerzeichen durchgehen; bei dem deutschen „Kaffee Freunde“ tut es das nicht!
Ist die Seite für Schweizer Zielpublikum oder warum der „Spass“ nicht mit ß?
</main>
Da Nachfolgende gehört nicht mehr zum Hauptinhalt der Seite …
<h1 class="margin-base-vertical">Kaffee-Shoppen und Game-Zocken</h1>
… hat aber eine dem denglischen „Kaffee Game“ gleichgestellte Hauptüberschrift?
Mir scheint, das main-Element ist falsch gesetzt und die Überschriftenhierarchie nicht richtig.
<p class="input-group"> <span class="input-group-addon"><span class="icon-envelope"></span></span> <input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" /> </p>
Das Eingabefeld hat keine Beschriftung. Es muss aber eine haben.
<small class="text-muted"> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</small>
Im Kleingedruckten: Hier finden Sie unseren Deppenapostroph.
Es müsste „AGBs“ lauten. Tut es aber nicht, da „AGB“ schon der Plural ist.
jetzt weiß ich endlich für das die utf-8 geschichte gut ist :D
BTW, deutsche Umlaute konnten auch schon in ISO 8859-1 codiert werden.
LLAP 🖖
Hej Gunnar,
<small class="text-muted"> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</small>Im Kleingedruckten: Hier finden Sie unseren Deppenapostroph.
Ach ja, Impressum im Kleingedruckten kann Ärger geben...
Marc
@@marctrix
<small class="text-muted"> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</small>Im Kleingedruckten: Hier finden Sie unseren Deppenapostroph.
Ach ja, Impressum im Kleingedruckten kann Ärger geben...
??
Du meinst die Schriftgröße darf nicht so klein sein, dass man den Link nicht mehr erkennen kann? Ja, sicher.
Dennoch ist das small-Element hierfür richtig: “Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.” [Spec]
LLAP 🖖
Hej Gunnar,
Im Kleingedruckten: Hier finden Sie unseren Deppenapostroph.
Ach ja, Impressum im Kleingedruckten kann Ärger geben...
Du meinst die Schriftgröße darf nicht so klein sein, dass man den Link nicht mehr erkennen kann? Ja, sicher.
Nein, ich meine, die Schriftgröße muss so groß sein, wie andere Lnks, die Hervorhebung muss in manchen Fällen sogar genauso deutlich sein, wie die zu anderen Seiten und ebenso leicht zu finden (wodurch es fast unmöglich ist, das Impressum NICHT im Menü unterzubringen).
Der Link zum Impressum muss leicht zu finden sein. Die Klasse "text-muted" scheint aber für das Gegenteil zu sorgen...
Dennoch ist das
small-Element hierfür richtig: “Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.” [Spec]
Jein, die HTML-Spec formuliert ja die international übliche Vorgehensweise und standradisiert diese. Mit bundesdeutschem Recht muss das nciht konform sein - ohne jetzt Rechtsberatung machen zu kööen - ist einfach so die Essenz dessen, was ich so mitgenommen habe aus Veröffentlichungen zum Thema Impressum...
Marc
@@marctrix
Ach ja, Impressum im Kleingedruckten kann Ärger geben...
Du meinst die Schriftgröße darf nicht so klein sein, dass man den Link nicht mehr erkennen kann? Ja, sicher.
Nein, ich meine, die Schriftgröße muss so groß sein, wie andere Lnks, […]
small steht für das „Kleingedruckte“. Nicht dafür, dass dieses zwangslaüfig auch kleingedruckt erscheint.
Dafür ist CSS da: small { font-size: inherit } – und schon ist das „Kleingedruckte“ trotz richtiger Auszeichnung so groß wie alles andere. (Von Überschriften mal abgesehen.)
LLAP 🖖
PS: Weil mir das öfter ins Auge sticht: Vor „wie“ steht genauso selten ein Komma wie vor „als“.
Hej Gunnar,
@@marctrix
smallsteht für das „Kleingedruckte“. Nicht dafür, dass dieses zwangslaüfig auch kleingedruckt erscheint.
Es ging nicht um small, sondern .text-mute... ;-)
PS: Weil mir das öfter ins Auge sticht: Vor „wie“ steht genauso selten ein Komma wie vor „als“.
In, kleinen, Dingen, bin, ich, großzügig. ,-)
Marc
Hi,
PS: Weil mir das öfter ins Auge sticht: Vor „wie“ steht genauso selten ein Komma wie vor „als“.
Das hängt doch von der Bedeutung ab. Bei "so <Adjektiv> wie" und bei "<Komparativ> als" stimmt das. Aber wenn "als" als zeitliche Bestimmung genutzt wird, sieht das ganz anders aus. Und bei "wie" ohne "so <Adjektiv>" auch.
Beispiel:
"Er setzte ein Komma, als er den Nebensatz begann, um zu zeigen, wie gut er die Kommaregeln beherrschte." ;-)
cu,
Andreas a/k/a MudGuard
@@Gunnar Bittersmann
<p class="input-group"> <span class="input-group-addon"><span class="icon-envelope"></span></span> <input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" /> </p>Das Eingabefeld hat keine Beschriftung. Es muss aber eine haben.
Placeholder sind keine Beschriftung.
Und eins war mir noch durch die Lappen gerutscht: Dieses Eingabefeld sollte type="email" sein (nicht "text").
LLAP 🖖
danke, ich versuch das passend einzubauen und poste dann den code.
Hier ein paar Handybilder wie die Seite mit Bootstrap in Cloud 9 aussieht:
und nach anmeldung auf der seite habe ich als test ein snake reingeklickert:
das mit dem nutzen nicht verfügbarer schrieftarten habe ich nicht bedacht, reicht es da land="de" einzutragen oder muss ich das anders angehen?
@@hmm
Hier ein paar Handybilder wie die Seite mit Bootstrap in Cloud 9 aussieht:
Ein Link zur problematischen Seite sagt mehr als 1000 Bilder.
das mit dem nutzen nicht verfügbarer schrieftarten habe ich nicht bedacht
Wenn Open Sans aus irgendeinem Grund nicht geladen wird und der Text dann in der serifenlosen Standardsystemschrift erscheinen soll:
font-family: "Open Sans", sans-serif;
Wenn Abel nicht verfügbar ist und der Text dann lieber in der Neuen Helvetica bzw. Helvetica (soderfn auf dem jeweikigen System verfügbar) als in Arial bzw. der serifenlosen Standardsystemschrift erscheinen soll:
font-family: "Abel", "Helvetica Neue", Helvetica, Arial, sans-serif;
reicht es da land="de" einzutragen oder muss ich das anders angehen?
die lang-Angabe („Ja, das könnte einen G haben.“) hat hier nichts mit Schriftarten zu tun. Dafür mit den anderen im verlinkten Artikel genannten Dingen.
LLAP 🖖
Hej hmm,
dein HTML ist viel zu aufgebläht. Wenn du Bootstrap weiter nutzen möchtes, brauchst du das alles, wenn nicht reicht folgendes:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kaffee</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <header> <h1>Kaffee Game</h1> </header <nav> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a>Willkommen</a></a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Partner</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Registrieren</a></li> <li class="login"><a href="anmelden.html">Anmelden</a></li> </ul> </div> </nav> <p class="help-block text-center"><small>Kaffee Game</small></p> <!-- Was ist das? --> <main> <article> <header> <h1>Herzlich Willkommen liebe Kaffee Freunde!</h1> </header> <p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu präsentieren und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p> </article> </main> <iframe width="560" height="315" src="https://www.youtube.com/embed/zxmED9JTPaA" frameborder="0" allowfullscreen> </iframe> <h1 class="margin-base-vertical">Kaffee-Shoppen und Game-Zocken</h1> <p> Registriert euch einfach auf dieser Seite und erfreut euch an unserem Kaffee-Online Game. </p> <p> Wenn ihr die Weiterentwicklung des games unterstützen wollt, wo kauft über die angegebenen Links bei unseren Partnern ein. </p> <p> Wollt ihr stets auf dem laufenden bleiben über alle Updates auf dieser Seite? Dann tragt euch hier für unsere Newsletter ein: </p> <form> <input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" /> <p class="help-block">Wir senden Ihnen keinen Spam und geben Ihre E-Mail nicht weiter.</p> <button type="submit" class="btn btn-success btn-large">Anmelden für Newsletter</button> </form> <footer> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</footer> </body> </html>
Habe das hier im Forums-Editor bearbeitet, also nicht getestet - nur um dir eine Idee zu geben, was du sparst, wenn du nicht auf Bootstrap setzt...
Vielleicht lässt sich sogar noch mehr sparen, vielleicht ist der eine oder andere div noch nötig, hängt dann von deinem Layout ab...
Marc
danke!
ich bekomme bei bootstrap (wenn es auch außerhalb von cloud 9 funktionieren würde), z.b. sowas:
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
und das ist dann auch noch responsive.
und das bekomme ich mit diesem simplen code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1>Kaffee Game</h1>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Willkommen</a></a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Registrieren</a></li>
<li class=" btn-danger nav navbar-nav"><a href="anmelden.html">Anmelden</a></li>
</ul>
</div>
</nav>
@@hmm
Posting auf. „Bootstrap“. „w3schools“. Posting zu. 😱
LLAP 🖖
@@hmm
Posting auf. „Bootstrap“. „w3schools“. Posting zu. 😱
wie meinst du das?
@@hmm
Posting auf. „Bootstrap“. „w3schools“. Posting zu. 😱
wie meinst du das?
Bootcrap ist nichts für mich und w3schools nicht gerade die seriöseste Quelle.
LLAP 🖖
Hej hmm,
danke!
ich bekomme bei bootstrap (wenn es auch außerhalb von cloud 9 funktionieren würde), z.b. sowas:
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
und das ist dann auch noch responsive.
und das bekomme ich mit diesem simplen code:
Der Code ist nicht simpel. Der ist überfrachtet mit unnötigem presentational markup und verschweigt das gesamte CSS, welches nämlich das tut, wovon du behauptest, dass es in dem gezeigten HTML steckt. ;-)
DAS ist simpel und responsiv:
.grid {
display: flex;
}
.grid > * {
flex: 1 0 10em;
}
Marc
@@marctrix
DAS ist simpel und responsiv:
.grid { display: flex; } .grid > * { flex: 1 0 10em; }
Fukol. Da isser wieder, der Heydon.
Mensch, hab ich doch glatt verpasst, ihn zu fragen, ob das nicht Verarsche war, das „Framework“ zu nennen – für die Leute, die sich gern verarschen lassen. ;-)
LLAP 🖖
Hej hmm,
Code-Editor: Da das Geschmackssache ist, kann dir keiner sagen, welcher Editor am besten zu Dir passt. Außer es geht rein um Frontend, da würde ich brackets empfehlen, aber du hast ja schon php und xamp erwähnt...
Ein paar beliebte zum ausprobieren: jEdit (plugIns und Einarbeitung nötig), Atom, Sublime Text - kommt auch etwas auf Dein System an. Windows, nehme ich an?
ich glaube mein erster codeversuch ist fürn arsch und ich hätte auch gerne einen saubereren code. können wir das so machen, dass ihr mir sagt welche verbesserung ich zuerst schreiben soll ich das dann hier poste und ihr mir dann den nächsten schritt sagt? anstelle einer verbesserung kann ich auch nochmal neu anfangen
Mach einfach neu. Elemente (responsiv) nebeneinander anordnen geht am besten mit flexbox.
Sieht für mich aus, als würdest du mit Bootstrap mit Kanonen auf Spatzen schießen - bin eh kein Freund von Bootstrap.
Marc
So Leute,
danke für die kommentare, hier mein neues code versuch:
Meine, aktuell an das Design von facebook angelehnte, neue Willkommensseite:
<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset="utf-8">
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<title>Coffee Game</title>
</head>
<body>
<header id="page-header">
<h1><p>Coffee Game</p></h1>
<form action="" method="get" accept-charset="utf-8">
<div style="position:absolute; right: 20px; top: 20px;">
<table>
<tr>
<th>E-Mail-Adresse</th>
<th>Passwort</th>
</tr>
<tr>
<th><input name="name" type="text" required></th>
<th><input name="password" type="password" required><br></th>
<th><input type="button" onclick="check(this.form)" value="Anmelden"/></th>
</tr>
</table>
</div>
</form>
</header>
<div id="page-content">
<img src="img/present-307984_1280.png" width="300" height="300" align="left">
<form method="post">
<table border="0" cellspacing="0" cellpadding="2" align="right">
<tr>
<td>
<input checked="checked" name="Anrede" type="radio" /> Männlich
<input name="Anrede" type="radio" /> Weiblich
</td>
</tr>
<tr>
<td>
<input id="reg" maxlength="50" name="Vorname" size="25" type="text" value="Vorname" required/>
<input id="reg" name="Nachname" size="25" type="text" value="Nachname" required/>
</td>
</tr>
<tr>
<td>
<input id="reg" name="Email" size="56" type="text" value="E-Mail-Adresse" required/>
</td>
</tr>
<tr>
<td>
<input id="reg" name="Pass" size="56" type="text" value="Neues Passwort" required/>
</td>
</tr>
<tr>
<td>
<h2>Geburtstag</h2>
</td>
</tr>
<tr>
<td>
<input id="reg" id="reg" type="date" id="gebdat">
</td>
</tr>
<tr>
<td>
<input id="submit" type="button" onclick="#" value="Registrieren" />
</td>
</tr>
</table>
</form>
</div>
<footer id="page-footer">
<nav>
<a href="#">AGB's</a> |
<a href="#">Impressum</a>
</nav>
</footer>
</body>
</html>
ich habe einen Ordner css erstellt und dort das hier als screen.css eingepackt:
#page-header {
display: block;
top:0px;
left:0px;
right:0px;
height:20px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:left;
font-weight:bold;
color:#FAFAFA;
background: #3b5998;
width: 100%;
height: 82px;
z-index:3;
h1 { font-size: 4em;}
}
#page-header_2 {
display: block;
top:0px;
left:0px;
right:0px;
height:20px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:left;
font-weight:bold;
color:#FAFAFA;
background: #3b5998;
width: 100%;
height: 41px;
z-index:3;
h1 { font-size: 4em;}
}
input[type=button] {
background:#045FB4;
border:1px solid black;
border-style:inset;
font-weight:bold;
color:#FAFAFA;
}
input[id="reg"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input [id="submit"] {
background-color: #31B404;
-moz-border-radius:7px;
cursor: pointer;
color: white;
}
#page-content {
padding: 100px 0 400px;
background-color: white;
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
color: black;
}
#page-footer {
background-color: #F2F2F2;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
color: #045FB4;
}
Hallo hmm,
was sollte ich an am code verbessern?
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
text/css ist der Standardwert, kann weg. media="screen, projection" ist imho auch verkehrt, eine CSS-Ressource reicht.
<form action="" method="get" accept-charset="utf-8">
Wenn die aktuelle Seite das Ziel ist, kann das action-attribut weg, get ist Standard
<div style="position:absolute; right: 20px; top: 20px;">
Absolute Postionierung ist meist nicht notwendig, macht mehr Schaden als Nutzen, inline-styles unterlässt man besser, das div ist zudem überflüssig, du könntest der Tabelle einen entsprechenden Außendabstand geben.
<input type="button" onclick="check(this.form)" value="Anmelden"/>
Das button-Element existiert, Attribute mit "on" sollten nicht verwendet werden. Was soll da gecheckt werden? required ist ausreichend. Du musst die Anmeldung ohnehin auf dem Server prüfen.
<div id="page-content">
Das sollte das main-Element werden
<img src="img/present-307984_1280.png" width="300" height="300" align="left">
align ist obsolet
#page-header {
h1 { font-size: 4em;}
}
Das geht in normalem CSS nicht.
Pixelgenaues CSS ist meist wenig sinnvoll.
Meine Sachen im Header und im page-content sind zuweit auseinander, die will ich mehr mittig haben. wie mache ich das?
Wo kann man sich die Seite anschauen?
übrigens habe ich ein open source bild dazugenommen und unter img als present-307984_1280.png eingebunden. wenn ihr euch die seite mal ungucken wollt könnt ihr einfach einen ordner img erstellen und dort ein passend benamtes bild reinpacken.
Das wird wohl nicht passieren - online-Beispiel bitte.
leider ist das css nur für meinen bildschirm angepasst, bei jedem anderen bildschirm ist alles verformt, wie ändere ich das?
Indem du auf jede Anpassung für deinen Bildschirm verzichtest. Dazu zählt auch absolute Positionierung, Tabellenlayout und die Angabe fester Abmessungen.
Bis demnächst
Matthias
danke, ich konnte das problem lösen in dem ich bei der position im css relativ hingeschrieben habe.
ich seite hab ich aktuell nur in meiner cloud entwicklungsumgebung, online habe ich sie leider noch nicht.