Hallo
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
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
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
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
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
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
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:
h2>a {
color: blue;
text-decoration: underline;
}Gruss
MrMurphy
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
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
Hallo
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.
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:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Layout 02</title>
<meta name="description" content="Überschrift mit Hintergrundbild">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<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>Hallo,
meinst du so:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Obere linke Ecke</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<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>Verzichte auf "position: absolute;" und negative Abstandswerte - da kommt nur Stress rüber.
Gruss
MrMurphy
Hallo
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.
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:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Layout 02</title>
<meta name="description" content="Überschrift mit Hintergrundbild">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<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>Gruss
MrMurphy
Hallo
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
Hallo,
wir haben keinen Zugriff auf deine Grafiken, können also nicht wissen, was du erreichen willst. Du musst uns die Grafiken also zeigen.
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
Hallo
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.
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
Hallo
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
Hallo,
mit deinem Quellcodeschnipseln ist bei mir alles ok.
Gruss
MrMurphy
Hallo
Nennt sich 'drop down' menü
Eher nicht:
ich möchte kein Ausklapp-Menü
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
Hallo
du verzichtest auf feste Breiten wie "width: 820px;".
Das ist in Zeiten von Responsive Design schlicht veraltet. Webseiten haben schlicht keine Größe sondern sollen sich flexibel und dynamisch so anpassen, das ein seitliches Scrollen so weit wie möglich vermieden wird.
Gruss
MrMurphy
Hallo,
die Texte "Höhe Kaution" und "Laufzeit" befinden sich jeweils innerhalb eines strong-Elements, bei dem als Hintergrundfarbe
color: #253F4E !important;
bestimmt ist. Da sich das strong-Element näher am Text als der umgebende div-Container befindet muss du die Schriftfarbe dort auch ändern.
Gruss
MrMurphy
Hallo,
eine konkrete Hilfe ist nicht möglich da wir deine Bilder nicht kennen.
Deine Problembeschreibung ist leider auch nicht eindeutig. Du schreibst von einem Bild und einer Taballe, dein Bild enthält aber zwei Bilder und zwei Tabellen.
Zudem enthalten deine Tabellen keine Tabellendaten und werden damit zum Layouten "mißbraucht". Das ist grundsätzlich falsch.
Die Tabellen sind zusätzlich mit veralteten Attributen wie dem "width"-Attribut gestaltet, die nicht mehr verwendet werden sollen. Auch sollte auf Inline-CSS grundsätzlich verzichtet werden.
Dein Quelltext enthält 33 sachliche Fehler, die bereinigt werden müssen, da sie Auswirkungen auf andere Elemente enthalten können. Um die zu finden kannst du den Quelltext bei
http://validator.w3.org/#validate_by_input
eingeben und prüfen lassen.
Es gibt Regeln die zwar nicht vor- oder festgeschrieben sind, die aber aber trotzdem eingehalten werden sollen. So sollten innerhalb von p-Elementen keine Container wie div-Elemente verwendet werden.
Insgesamt solltest du aber aktuelles HTML und CSS verwenden und auf Tabellen zum Gestalten verzichten.
Gruss
MrMurphy