Beiträge von MrMurphy

MrMurphy · 19. August 2015

Hallo,

das wird zum Beispiel hier beschrieben:

http://www.html-seminar.de/auf…sung-css3-farben-hsla.htm

Gruss

MrMurphy

MrMurphy · 16. August 2015

Hallo,

deine Frage war und ist leider nicht verständlich.

Du musst dich zunächst entscheiden, ob du die Seite für dich oder deine Benutzer erststellen willst.

Wenn du die für dich, deinen Monitor und deine Fenstergröße erstellen willst kannst du machen was du willst.

Wenn du die Seite für deine Besucher erstellen willst solltest du die Seite von Anfang an so erstellen, dass die Seite deren Fenster ausfüllt. Die ziehen ihr Fenster schließlich so groß auf, wie es ihnen genehm ist. Die dann mit leeren Flächen oder seitlichem scrollen zu bestrafen ist unhöflich.

Zitat

Ich möchte bei einem responsive Design, das auf den Viewport 1280x720 ausgelegt ist und bei allen anderen Auflösungen sich automatisch vertikal und horizontal zentriert,

Der Satz ist unsinnig. Entweder willst du ein responsive Design oder starre Größen. Beides zusammen widerspricht sich.

Code

einen Sticky Footer haben.

Wo soll der "Sticky Footer" sein? Ohne weitere Infos gehört er an den unteren Fensterrand.

Insgesamt willst du noch viel zuviel Einfluß auf Größen nehmen. Internetseiten haben aber im Gegensatz zu Papierseiten keine Größe.

Von daher solltest du dich darauf beschränken, die Breite so zu begrenzen, das die Besucher weder seitwärts scrollen müssen noch seitlichen Leerflächen haben. Die Höhe bestimmen dann die Inhalte selbst.

Einen Container in der Breite und der Höhe zu begrenzen und ihn dann im Fenster zu zentrieren hat mit aktuellem HTML / CSS und den Besuchererwartungen nichts zu tun. Das war vor 20 Jahren mal groß in Mode und ist ganz schnell wieder verschwunden, weil es niemand haben wollte. Daran hat sich bis heute nichts geändert.

Gruss

MrMurphy

MrMurphy · 15. August 2015

Hallo,

das funktioniert so nicht.

Du willst einen Holzvergaser in eine aktuelle Karosserie einbauen und erwartest die Umweltfreundlichkeit und die Fahrleistungen eines Neufahrzeugs.

Wenn du von einer Webseite ein bestimmtes Aussehen und Verhalten erwartest solltest du auch zu aktuellem HTML / CSS greifen und die "Grammatik" beachten. Sonst wird das nichts.

Da du dass durch deinen Beitrag aber schon gleich mal ablehnst wäre eine Antwort mehr oder weniger sinnfrei.

Ich bin deshalb draußen.

Gruss

MrMurphy

MrMurphy · 13. August 2015

Hallo

Zitat

Bedeutet, wenn ich dem Hintergrundbild erst einen Text oder der gleichen geben würde, wäre das dann behoben, oder kann man das auch anders regeln?

Kein Ahnung. Ich habe doch geschrieben

Zitat

Deshalb kann ich nur raten.

Auch mit deinen zusätzlichen Angaben kann ich dein Problem nicht nachvollziehen. Bei mir wird das Hintergrundbild immer gekachelt angezeigt.

Gruss

MrMurphy

MrMurphy · 13. August 2015

Hallo,

deine paar Quellcodeschnipsel helfen bei der Problemlösung nicht weiter. Deshalb kann ich nur raten.

Hast du mal versucht dem div eine Breite (width) mit auf den Weg zu geben?

Erläuterung: Auf Desktop-PCs werden Blockelemente standardmäßig mit einer Breite von 100% angezeigt.

Smartphones (genauer: deren Browser) sind darauf getrimmt, den verfügbaren geringen Platz so effektiv wie möglich zu nutzen. Deshalb kann es sein das leere Blockelemente in ihrer Breite begrenzt werden. Und ein div mit nur einem Hintergrundbild hat halt keinen Inhalt.

Gruss

MrMurphy

MrMurphy · 1. August 2015

Hallo,

die Frage lässt sich nicht so einfach beantworten.

Das Hauptproblem ist die rechtliche Seite. Du darfst auf fremde Seiten so verlinken, dass sie sich in einem neuen Tab oder neuen Fenster öffnen.

Den Inhalt einer fremden Seite in deine Seite einzubinden, so dass für Besucher nicht mehr erkennbar ist, dass es sich um fremden Inhalt handelt, ist verboten und eine Straftat.

Deshalb musst du dich mit dem Betreiber der Fremdseite in Verbindung setzen und mit ihm klären, ob und wie du seinen Inhalt übernehmen kannst.

Technisch hängt die Datenübernahme von deiner Seite und der Fremdseite ab. Die müssten wir also schon beide kennen um dir direkt helfen zu können.

Gruss

MrMurphy

MrMurphy · 26. Juli 2015

Hallo,

das letzte Semikolon eines CSS-Anweisungsblocks kann wohl weggelassen werden. Also das Semikolon direkt vor der schließenden Klammer.

In deinem zweiten Beispiel sollte also auch das Weglassen des Semikolons hinter dem dotted keine Auswirkungen haben. Entsprechend kann das Semikolon bei einer einzelnen CSS-Anweisung, wie in deinem ersten Beispiel, auch weggelassen werden.

Ich habe mir allerdings angewöhnt hinter jeder CSS-Anweisung ein Semikolon zu setzen. So gibt es keine Probleme wenn ich die CSS-Anweisungen umsortiere oder zum Schluß neue hinzufüge.

Mit der border-Funktion hat das nichts zu tun, das gilt für alle CSS Anweisungen.

Gruss

MrMurphy

MrMurphy · 16. Juli 2015

Hallo,

dann kannst du leider auch nichts anpassen. Wobei mir nicht bekannt ist, das ein Homepagebaukasten den Zugriff per FTP verbietet.

Ich weiß leider auch nicht wie so ein Homepage-Baukasten von 1&1 funktioniert. Wenn der keine individuellen Anpassungen zulässt musst du halt mit dem Vorhandenen leben.

Gruss

MrMurphy

MrMurphy · 16. Juli 2015

Hallo,

du kannst du allgemeinen Angaben der a-Elemente mit denen der h2-Überschrift überschreiben, in dem du in deiner css-Datei z. B. folgendes hinzufügst:

CSS

h2>a {
color: blue;
text-decoration: underline;
}

Gruss

MrMurphy

MrMurphy · 3. Juli 2015

Hallo,

du greifst in die Höhenverhältnisse mit height ein anstatt das wie vorgesehen den Browsern zu überlassen.

Der header hat eine Höhe von 150px, die beiden Überschriften sind jedoch höher.

Die Höhe der Überschriften (und aller anderen Block-Elemente) setzt sich aus der eigentlichen Höhe und den Außenabständen padding, border und margin zusammen. Wenn padding und margin nicht angegeben sind wird von den Browsern ein eigener Abstand hinzugefügt.

Wenn du bei h1 und h2 padding und margin, jeweils zumindest oben und unten, auf Null setzt passen sie auch in den header.

Wenn du die Höhe von Containern eingrenzt musst du also immer auch dafür sorgen, das der Inhalt überhaupt hineinpasst.

Gruss

MrMurphy

MrMurphy · 3. Juli 2015

Hallo,

du öffnest zwei div, schließt aber nur eins.

Und beim header h2 fehlt die schließende Klammer.

Das ist aber nicht die Ursache des Problems.

Wenn du aus deinen eigenen hier veröffentlichten Quelltextschnipseln eine Webseite erstellst (und border oder eine Hintergrundfarbe hinzufügst) wirst du feststellen, das h1 und h2 innerhalb des headers dargestellt werden. Also so, wie es sein soll. Das Problem liegt also in dem Quelltext (HTML oder CSS) den du uns unsinnigerweise verheimlichst.

So ist eine Hilfe durch uns leider nicht möglich.

Gruss

MrMurphy

MrMurphy · 3. Juli 2015

Hallo

Zitat

ich sehe teilweise Begriffe in dem Code, die ich noch nie gesehen habe

Kann ich nachvollziehen, mit HTML5 / CSS3 gab es einen ähnlichen Entwicklungssprung wie im Jahr 2000 mit der Einführung von HTML4 und CSS2. Um die neuen Möglichkeiten zu nutzen muss man sie natürlich lernen und ihre Eigenarten kennen.

Insgesamt sind damit viele Probleme leichter zu lösen, für die früher mühsam rumgetrickst werden musste. Dies gilt grade in Bezug auf die "neuen kleinen" Bildschirmgrößen von Smartphones und Tablets. Oder auch beim Sticky Footer.

Wer sich den Möglichkeiten von HTML5 und CSS3 verschließt hat die Zukunft schon verschlafen. Das ist die Realität, auch wenn viele Webseitenersteller das mit für Experten eher albernen Ausreden (IE 8 und ähnliches) leugnen.

Jeder kann sich seine Seiten natürlich selbst erstellen. Er sollte sich dann aber auch bewußt sein, das er keine Begeisterungsstürme ernten wird und viele Möglichkeiten entweder gar nicht genutzt werden können oder zusätzlichen Aufwand erfordern.

Zitat

Aber durch die fest definierte Größe von "850px" was in dem Tutorial notwendig war, ändert er mir jetzt auch den header auf diese Größe, ich hoffe ihr versteht ein bisschen was ich meine. Hab das gleiche eigentlich auch mit dem Footer vor

Das war bei mir in den ganzen Beiträgen untergegangen. header, nav und footer sollen also 100%-Breite haben, der Inhaltsbereich aber "nur" 850px breit sein. Ich habe mal so ein Layout erstellt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 02</title>
<meta name="description" content="Überschrift mit Hintergrundbild">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/* Hack für IE 10 und IE 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
html {
height: 100%;
}
}
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
/*Grundeinstellungen*/
@media all {
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
}
body {
height: 100%;
min-height: 100vh;
padding: 0;
margin: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
header,
main,
footer {
padding: 0;
margin: 0;
}
main {
flex: 1;
-ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
}
}
@media all {
header {
background-image: linear-gradient(to bottom, #2381f6 0%, #023d85 100%);
padding: 0;
}
header h2 {
/*background-color: green;*/
color: white;
/*background-image: url("john_raider_header_02.png");*/
background-size: 20px;
padding: 2rem 1rem;
margin: 0;
}
nav {
background-color: #303030;
box-shadow: 0 5px 10px darkslategray;
z-index: 1; /*wegen box-shadow*/
padding: 0.5rem;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
nav a {
display: block;
color: white;
text-decoration: none;
font-variant: small-caps;
padding: 0 1rem;
}
nav a:hover {
color: white;
}
main {
background-color: brown;
width: 850px;
margin: 0 auto;
}
main article {
padding: 0 1rem;
}
footer {
background-color: aqua;
}
footer p {
text-align: center;
}
}
@media only screen and (max-width: 1000px) {
body {
margin: 0;
}
}
@media only screen and (max-width: 850px) {
main {
width: 100%;
}
}
@media only screen and (max-width: 550px) {
nav>* {
flex: 1 0 40%;
}
}
/* Vorlage zum Kopieren für Media-Query */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header>
<h2>Seitentitel</h2>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Referenzen</a>
<a href="#">Kontakt</a>
<a href="#">Service</a>
</nav>
<main>
<article>
<h2>Inhalt</h2>
<p>Inhalt</p>
<p>Inhalt</p>
<p>letzte Zeile vom inhalt</p>
</article>
</main>
<footer>
<p>ww.html-seminar.de</p>
</footer>
</body>
</html>

Alles anzeigen

MrMurphy · 2. Juli 2015

Hallo,

meinst du so:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Obere linke Ecke</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
line-height: 0.8;
}
body {
margin: 0;
}
ul {
height : 50px;
width : 100px;
color : #575757;
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
padding: 0 0 5px 0;
}
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>tee</li>
<li>wasser</li>
</ul>
</body>
</html>

Alles anzeigen

Verzichte auf "position: absolute;" und negative Abstandswerte - da kommt nur Stress rüber.

Gruss

MrMurphy

MrMurphy · 2. Juli 2015

Hallo

Zitat

Ich hab mir das auf html-seminar jetzt schon ein paar mal angeschaut, dennoch komme ich damit irgendwie nicht so ganz zurecht,

Ist auch nicht optimal zum lernen. Umsonst gibt es halt höchstens Durchschnitt.

Zitat

ich bräuchte einfach mal ein Beispiel anhand meiner Sachen

Foren sind eher als Hilfe zur Selbsthilfe gedacht. Und ob dir ein Beispiel ohne Grundlagenwissen weiterhilft?

Ich habe trotzdem mal ein Beispiel mit etwas Responsive Design erstellt. Obwohl es eher sinnfrei ist Webseiten ohne Inhalt zu erstellen.

Abstände, Farben u.s.w. können natürlich noch angepasst werden. Für die Praxis sollten für ein paar CSS-Angaben noch Prefixe vergeben werden, aber dafür gibt es Seiten, die das mehr oder weniger automatisch erledigen.

Ansonsten ist es eine sinnvolle Grundlage mit aktuellem HTML5 / CSS3:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 02</title>
<meta name="description" content="Überschrift mit Hintergrundbild">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/* Hack für IE 10 und IE 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
html {
height: 100%;
}
}
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
/*Grundeinstellungen*/
@media all {
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
}
body {
height: 100%;
min-height: 100vh;
padding: 0;
margin: 0 15%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
header,
main,
footer {
padding: 0;
margin: 0;
}
main {
flex: 1;
-ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
}
}
@media all {
header {
background-image: linear-gradient(to bottom, #2381f6 0%, #023d85 100%);
z-index: 20;
}
header h2 {
padding: 1rem;
}
nav {
background-color: #303030;
box-shadow: 0 5px 10px darkslategray;
padding: 0.5rem;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
nav a {
display: block;
color: white;
text-decoration: none;
font-variant: small-caps;
padding: 0 1rem;
}
nav a:hover {
color: white;
}
main {
background-color: brown;
/*margin-top: 5px;*/
z-index: 10;
}
main article {
padding: 0 1rem;
}
footer {
background-color: aqua;
}
footer p {
text-align: center;
}
}
@media only screen and (max-width: 1000px) {
body {
margin: 0;
}
}
@media only screen and (max-width: 550px) {
nav>* {
flex: 1 0 40%;
}
}
</style>
</head>
<body>
<header>
<h2>Seitentitel</h2>
<nav>
<a href="#">Home</a>
<a href="#">Referenzen</a>
<a href="#">Kontakt</a>
<a href="#">Service</a>
</nav>
</header>
<main>
<article>
<h2>Inhalt</h2>
<p>Inhalt</p>
<p>Inhalt</p>
<p>letzte Zeile vom inhalt</p>
</article>
</main>
<footer>
<p>ww.html-seminar.de</p>
</footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MrMurphy · 2. Juli 2015

Hallo

Zitat

Zudem hab ich einen Header, bei dem ich bezweifel, dass man den komplett nur über CSS erstellen kann.

Eine veraltete Vorstellung. Niemand besucht eine Seite wegen ihres Layouts. Entscheidend ist nur der Inhalt. Ob der Header wie mit Photoshop aussieht oder nur ähnlich oder ganz anders interessiert die Besucher kein bißchen.

Das beste Layout ist jenes, welches von den Besuchern überhaupt nicht wahrgenommen wird. Wahrgenommen wird es nämlich nur wenn es stört oder sogar nervt.

Gruss

MrMurphy

MrMurphy · 1. Juli 2015

Hallo,

wir haben keinen Zugriff auf deine Grafiken, können also nicht wissen, was du erreichen willst. Du musst uns die Grafiken also zeigen.

Zitat

aber würde natürlich gerne besser, bzw. neuerer arbeiten wollen.

Dann solltest du dich mit HTML5 und CSS3 beschäftigen.

So soll zum Beispiel die Höhe von Containern nicht festgelegt werden, sondern sich dem Inhalt anpassen.

Die Breite einer Webseite soll sich der Fensterbreite anpassen und auch nicht starr festgelegt werden.

Gruss

MrMurphy

MrMurphy · 1. Juli 2015

Hallo

Zitat

sogar aus mehreren "Div's" d.h. zum Beispiel den Schatten nochmal als extra "div" usw.

Das Vorgehen ist veraltet, damit kommst du etwa 15 Jahre zu spät. Heutzutage werden der Inhalt und das Layout getrennt, also auch keine unnötigen div erstellt. Deine Krankheit ist auch unter divitis bekannt, die solltest du in Ruhe auskurieren.

Zitat

dass es bessere alternative angeblich zu dem Sticky Footer gibt.

Quatsch. Die Lösung hängt davon ab, was du erreichen willst. Entsprechend kann ein Sticky Footer sinnvoll sein - oder auch nicht. In jedem Fall ist er lediglich ein optisches Gimmick und damit prinzipiell unnötig.

Du gehst nach der veralteten Reihenfolge vor, das Layout vor dem Inhalt zu erstellen. Das hat sich als Irrweg erwiesen.

Erstelle erst den Inhalt und packe ihn in semantisch korrekte HTML-Elemente. Die werden dann anschließend mittels CSS formatiert und dazu noch einige wenige (sehr wenige) Container hinzugefügt.

Gruss

MrMurphy

MrMurphy · 29. Juni 2015

Hallo

Zitat

Gibt es da eine Sammlung, auf die ihr achtet oder irgendwas ähnliches?

Nein. Ich habe schlicht die Grundlagen gelernt (aktuell HTML5 / CSS3) sowie mich mit Responsive Design und Media Queries beschäftigt und wende sie an. Also ganz klassisch.

Gruss

MrMurphy

MrMurphy · 28. Juni 2015

Hallo,

mit deinem Quellcodeschnipseln ist bei mir alles ok.

Gruss

MrMurphy

MrMurphy · 28. Juni 2015

Hallo

Zitat

Nennt sich 'drop down' menü

Eher nicht:

Zitat

ich möchte kein Ausklapp-Menü

Zitat

sondern will das "Ausklapp-Menü" sozusagen in das vertikale Menü packen

Diese Frage ist in einem Joomla-Forum besser aufgehoben. Um die Beantworten zu können muss man sich mit Joomla auskennen.

Du musst wahrscheinlich ein Modul erstellen, das dann die vertikale Navigation nur für die gewünschen Seiten enthält.

Gruss

MrMurphy

Beiträge von MrMurphy

Bild mit Text überschreiben - wie geht das in HTML?

Sticky Footer bei einem responsiven Design

Wie tabelle am rechten rand der content area fixieren?

Hintergrundbild repeat-x Problem

Hintergrundbild repeat-x Problem

Frage: Kann ich ein HTML-Element aus einer anderen Website einbinden?

Frage: Semikolon bei "border"-Funktion nicht immer notwendig?

Formatierungs-Konflikt h2 und a

Formatierungs-Konflikt h2 und a

h2 Außerhalb des Div-Containers Header

h2 Außerhalb des Div-Containers Header

Sticky-Footer Ersatz

Listen und Aufzählungen - LI - Style Issue (CCS) - Ausrichtung TOP & LEFT => 0PX

Sticky-Footer Ersatz

Anpassung an andere Browser

Sticky-Footer Ersatz

Sticky-Footer Ersatz

Anpassung an andere Browser

Navigation Hintergrund

Horizontale Navigation mit Unterpunkten in der vertikalen Navigation?