Hallo,
das geht nicht mit CSS.
Du kannst eine Grafik erstellen und an der gewünschten Stelle einfügen. Am sinnvollsten erscheint mir eine SVG-Grafik, deren Größe als Vektorgrafik flexibel angepasst werden kann und die auf vielfältige Weise in eine HTML-Datei eingebunden werden kann.
Gruss
MrMurphy
Hallo,
entweder ist die Datei nicht hochgeladen
oder
der Pfadname stimmt nicht
../pics/Kühe.jpgvs.
Kühe.jpgoder
der Dateiname macht Probleme, hier das ü
oder
der Dateiname stimmt in Groß-/Kleinschreibung nicht mit der Angabe in der CSS-Datei überein.
Pfad-, Datei- und Ordnernamen sollten nur aus Buchstaben des englischen Alphabets, Zahlen und dem Unterstrich bestehen, das vermeidet viele Probleme im Vorfeld. Noch mehr Probleme werden vermieden wenn von den Buchstaben nur die Kleinbuchstaben verwendet werden, also die Kleinbuchstaben des englischen Alphabets, Zahlen und der Unterstrich.
Gruss
MrMurphy
Hallo
Wo habe ich einen Fehler drin?
Dein Grundproblem sind deine veralteten Vorstellungen von HTML und CSS. Mit aktuellem HTML5 und CSS3 hat dein Quelltext leider eher wenig zu tun.
Durch
* {
margin: 0px;
padding: 0px;
}werden alle Abstände auf Null gesetzt. Das war vor 15 Jahren mal angesagt, hat sich aber inzwischen als nachteilig herausgestellt. Die meisten Abstände der Browser-Stylesheets sind durchaus sinnvoll und sollten genutzt werden. Wenn du die Eigenschaften trotzdem behalten willst musst du natürlich alle Abstände mit eigenen Werten belegen.
Andererseits vergibst du unnötigerweise Höhenangaben (height), die das Layout einschränken. Die Höhe von Containern wird durch deren Inhalt bestimmt und soll vom Browser selbst bestimmt werden.
bei den Menüpunkten einen Abstand nach oben hinzubekommen
Wenn du dem umgebenden Container .navigation eine Höhe von 2em gibst bleibt bei einer Schriftgröße von 1.5em nur wenig Platz für Abstände. Da du zudem die li-Elemente zu inline-Elementen bestimmst werden die Möglichkeiten Abstände zu bestimmten weiter eingeschränkt. Eine weitere Einschränkung ist das veraltete und überflüssige center-Element.
Von daher ist die gesamte CSS-Konstruktion zu überdenken.
Momentan kannst du nur die Höhe von .navigation vergrößern, zum Beispiel auf 4em und den li-Elementen ein line-height von 4em hinzufügen. Oder halt statt der 4em andere dir passende Werte einsetzen.
Spätestens bei kleineren Fenstern wird dir das Layout aber um die Ohren fliegen.
Durch das setzen von "display: inline;" reagieren die li-Elemente nicht mehr auf Abstände wie padding oder margin.
Insgesamt wäre es sinnvoller das Menü mit "display: block;" zu definieren und die Menüpunkte mit float, oder aktueller flex, nebeneinander zu setzen sowie das height bei .navigation und das center-Element wegzulassen. Dazu benötigst du aber mehr Hintergrundwissen.
Gruss
MrMurphy
Hallo
Ich dachte es gäbe eine Möglichkeit diese Liste in einer extra-Datei zu schreiben und dann in allen HTML-Dateien einfach nur einen Verweis zu dieser Datei zu setzen.
Es gibt verschiedene Möglichkeiten, mit denen Anfänger aber häufig überfordert sind, da sie mehr als nur HTML und CSS verlangen.
Aktuell sinnvoll und gebräuchlich:
1. Verwendung eines Content-Management-Systems (CMS) wie zum Beispiel Joomla, die es als Freeware gibt.
oder
2. Verwendung eines Editors der das Auslagern von Seiteninhalten zulässt. Der kostenpflichtige Dreamweaver kann das zum Beispiel. Oder eines Editors der das gleichzeitige Ändern von mehreren Dateien gleichzeitig zulässt wie das kostenpflichtige UltraEdit. Mir sind leider keine Freeware-Editoren bekannt die sowas unterstützen.
oder
3. Die zusätzliche Verwendung der Programmiersprache PHP. Für das Auslagern reichen ein paar einfache Befehle wie include, es muss also nicht die gesamte Sprache gelernt werden.
Bei Joomla oder PHP muss der der Provider allerdings PHP unterstützen. In den billigsten Vertragsstufen ist PHP häufig nicht vorhanden, häufig muss deshalb in einen etwas teueren Vertrag gewechselt werden. Zum Testen reichen aber Freeware-Anbieter wie bplaced.net. Auf dem eigenen Rechner wird ein Webserverprogramm wie XAMPP benötigt, das es als Freeware-Variante gibt.
Von älteren Lösungen wie Framesets kann nur abgeraten werden. Die werden von HTML5 nicht mehr unterstützt.
Gruss
MrMurphy
Hallo
Das geht nicht direkt.
Du musst die Worte in geeignete Inline-Elemente einfügen und kannst die dann mit CSS gestalten. Dazu ist zum Beispiel das span-Element geeignet. Zum Beispiel
<p>Von <span>Microsoft</span> werden keine Updates mehr bereitgestellt.</p>Das CSS dazu könnte so aussehen:
p span {
background-color: yellow;
}Wenn du unterschiedliche Hintergrundfarben verwenden möchtest kannst du den span-Elementen Klassen zu weisen und dazu passende im CSS verwenden.
Gruss
MrMurphy
Hallo
Das komische an der Geschichte, dies passiert nur auf der Startseite.
Auf den Unterseiten war bereits bei jedem vierten div ein clear gesetzt um das float global aufzuheben. Auf der Startseite vor deiner Änderung offensichtich nicht.
Für gleichhohe Boxen gibt es flexbox, auch als Flexbox-Modell bekannt. Ich weiß allerdings nicht in wie weit das bei dem von dir verwendeten XHTML 1.0 funktioniert. Da XHTML bereits 2008 offiziell zu Grabe getragen wurde und seitdem nicht mehr weiterentwickelt wird benutze ich es seitdem nicht mehr.
Irgendwann werden auch die Browserhersteller XHTML als unnützen Ballast abwerfen. Das wird zwar noch einige Zeit dauern, trotzdem solltest du dir Gedanken machen mittelfristig auf HTML5 umzusteigen. Zumal auch Google Seiten mit veraltetem HTML4 bzw. XHTML 1.0 bereits abwertet. Das kommt grade für gewerbliche Seiten nicht gut.
Gruss
MrMurphy
Hallo
dass das css überhaupt nicht berücksichtigt/angezeigt wird
Dann stimmt in der Regel der Datei- und / oder Pfadname nicht. Das ist deinen Angaben aber nicht zu ernehmen.
Bei dem background-image hab ich keinen Plan wie das funktioniert.
Eventuell ist die Ursache dass du keine Dateiendung angegeben hast.
Gruss
MrMurphy
Hallo,
du hast leider falsche Vorstellungen wie in HTML mit CSS Elemente angeordnet werden beziehungweise aufeinander reagieren. Deshalb wäre es am sinnvollsten du würdest erst einmal die Grundlagen lernen.
So werden mit position:absolute Elemente aus dem Fluss einer Webseite genommen und können nicht mehr auf andere Elemente reagieren. Damit ist jede Berechnung sinnlos.
Weiterhin bestimmt sich die Höhe von Elementen aus ihrem Inhalt. Es ist schlechter Stil in Webseiten unnötige Höhenangaben zu machen. Außerdem führt das immer wieder zu Problemen, wenn sich der Inhalt ändert.
Wenn zwei nebeneinanderliegende Spalten gleich hoch werden sollen muss entweder auf "faux column" zurückgegriffen werden oder sie müssen mit dem "Flexbox-Modell" ausgerichtet werden.
Wenn Seiten sich auch bei wenig Inhalt mindestens bis zum unteren Fensterrand erstrecken sollen solltest du nach "sticky footer" suchen.
Ohne grundlegende Änderungen an deinem CSS-Code wird aber keine der Lösungen funktionieren.
Gruss
MrMurphy
Hallo
Ich möchte dass außerhalb von diesem Rahmen der Background geändert werden kann ohne dass die Header Sidebar und die überschrift davon abhängig sind. Wie ihr seht ändert sich auch der Inhalt vom Wrapper.
Dann darfst du nicht dem Sternchen ( * ) die Hintergrundfarbe geben. Das ist sowieso schlechter Stil. Sondern dem body.
Das margin und padding beim Sternchen auf Null setzen hat sich auch nicht bewährt und sollte vermieden werden. Viele Abstände, die die Browser von sich mitliefern, sind sinnvoll und können problemlos übernommen werden.
Das Menü soll runter bis zum Footer gehn und der Content soll genauso runter bis zum Footer. Leider habe ich das bisher nicht geschafft.
Das geht auch nicht so einfach, sondern erfordert einiges an Hintergrundwissen.
Bis vor ein, zwei Jahren ging das nur mit optischen Tricks. Dazu kannst du nach "faux column" googeln. Das sollte jede Menge Infos liefern, so dass ein ellenlanger Text von mir sinnlos wäre.
Als weitere Möglichkeit kannst du den Hintergrund mit "background-image linear-gradient" füllen.
Oder du must dich mit dem Flexbox Modell beschäftigen. Dazu wirst du deine Datei aber komplett neu aufbauen müssen. Das wäre zwar in die Zukunft gerichtet sinnvoll, grade wenn deine Seite auch auf Smartphones und Tablets funktionieren soll. Aber dazu wird dir noch das Hintergrundwissen fehlen. Wenn es dich interessiert kannst du nach "flexbox" googeln. Dazu gibt es inzwischen auch einige deutschsprachige Seiten.
Gruss
MrMurphy
Hallo,
ja, für Listenelemente mit einem Aufzählungszeichen, also li. Andere Elemente haben andere display-Vorgaben.
Gruss
MrMurphy
Hallo,
so genau ist noch nicht klar geworden worum es dir überhaupt geht.
Mit "display: none;" werden Elemente versteckt und ihr Platz frei gegeben. Warum reicht dir das nicht aus?
Gruss
MrMurphy
Hallo,
das geht nicht. Wenn der Link im HTML-Quelltext ist kann er mit CSS nicht entfernt werden. Er kann nur versteckt werden, ist aber immer noch im Quelltext und damit für den Besucher auffindbar.
Gruss
MrMurphy
Hallo
Da schreibst du nämlich ausdrücklich, dass der content_wrap eine Ausnahme ist.
Aber doch mit Flexbox und nicht mit height oder min-height. Darum ging es doch die ganze Zeit.
Dann mach ich das wohl mit der min-height...
Deine Entscheidung.
Gruss und viel Erfolg
MrMurphy
Hallo
Was hab ich falsch gemacht?
Keine Ahnung. Es gibt verschiedene Möglichkeiten einen Sticky Footer mit Flexbox zu erreichen. Und die Vorlage deiner Quelle zeigst du trotz Nachfrage nicht. So ist Hilfe natürlich schwer möglich.
Und ich frage mich natürlich warum ich
#content_wrap {
...
min-height: 70%;
}lese, obwohl ich
Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.
geschrieben habe. Mit solchen Angaben zwingst du die Browser dazu anders zu rechnen als vorgesehen. Dann bekommst du natürlich manchmal auch unerwartete Ergebnisse.
Aber wenn ich z.B. einen zweiten Artikel hinzufüge, also mehr Content hab, sieht es so aus
Deshalb schreibe ich mir doch die Finger wund, erst mal den Inhalt zu erstellen und dann das Layout.
Gruss
MrMurphy
Hallo
Ok, das bedeutet, dass ich die Höhe nur mit der Eigenschaft flex: 1; (Beispiel) bestimmen kann.
Nein. Du kannst die Höhe natürlich auch anders bestimmen. Es ist in der Regel nur weder nötig noch sinnvoll.
Weil ich möchte ja nicht, dass die Flexbox alle Container automatisch gleichgroß darstellt.
Nein. Flexbox gibt den Containern automatisch nur den Platz den ihr Inhalt erfordert. Damit ein Container mehr Platz bekommt musst du eingreifen. Siehe zum Beispiel
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox 01</title>
<meta name="description" content="HTML5, CSS3, Flexbox">
<style>
body {
display: flex;
}
body>* {
border: 1px solid silver;
}
</style>
</head>
<body>
<header>
<h2>header</h2>
</header>
<main>
<h2>main</h2>
</main>
<footer>
<h2>footer</h2>
</footer>
</body>
</html>Du hast die Frage
Wo gefunden?
noch nicht beantwortet.
Gruss
MrMurphy
Hallo
Ich hab einmal eine Variante gefunden, wo man dem Wrapper die min-height: 100vh;
Wo gefunden? Wrapper sind nur "erfunden" worden um Webseitenentwickler zu nerven und sollten in der Regel weggelassen werden. Sie sind, von Ausnahmen abgesehen, schlicht unnötig. Ein natürlicher und immer vorhandener Wrapper ist das body-Element.
Gibt man den Flex-Items, also z.B. Header etc., eine Höhe in Prozent
Die Höhe eines Containers richtet sich nach seinem Inhalt. Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.
Von Ausnahmen abgesehen. Eine solche Ausnahme ist das Element (und nur das) welches den footer bei wenig Inhalt nach unten drücken soll.
Das ist in deinem Fall das div "content_wrap". Welches ich persönlich einfach mit der id "inhalt" bedenken würde. Eine id ist inhaltsleer und warum kompliziert wenn es auch einfach geht.
Dein "content_wrap" bzw. mein "inhalt" bekommt zum Ausdehnen die Anweisung
flex: 1 0 auto;
-ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */Hinweis:
flex: 1;reicht vornehmlich auch, aber das ist technisch doch etwas anderes als nur
flex: 1 0 auto;und kann in bestimmten Konstellationen zu Problemen führen.
Ähnliches gilt dafür, dass die Anweisung mit dem Prefix hinter der Anweisung ohne Prefix steht. Das ist im Regelfall unsinnig, hat in diesem Fall aber technische Gründe.
Gruss
MrMurphy
Hallo,
es gibt unterschiedliche Möglichkeiten per CSS oder per JavaScript. Welche davon für dich am geeignetsten ist kann ich deiner Frage nicht entnehmen.
Wenn es darum geht das Bild beim Anklicken nur etwas zu vergrößern solltest du dich mit CSS, transform und transition beschäftigen.
Beispiele mit Quellcode zum Beispiel auf
[[[LINK GING AUF DOMAIN, DIE ES SO NICHT MEHR GIBT, daher wurde der Link gelöscht]]]
Für's Anklicken brauchst du nur :hover durch :active ersetzen.
Gruss
MrMurphy
Hallo
klar ist noch kein inhalt drinnen
Nee, ist überhaupt nicht klar. Und vernünftiges Layout kannst du so auch nicht lernen.
was ist an dem div aufbau schlecht?
Erst mal fehlt die Semantik.
Und dann wird durch die vielen schließenden div der Quelltext auch für den Webseitenersteller selbst ganz schnell unübersichtlich.
habe viele aktuelle videos gesehen die einen solchen aufbau machen?
Die sind entweder nicht aktuell (das Internet vergisst nie) oder die Ersteller haben von aktuellem HTML / CSS keine Ahnung. Davon gibt es leider sehr viele. Nur weil jemand ein Video bei YouTube veröffentlichen kann ist er noch lange kein Spezialist für Webseiten.
html5 grundgerüst? oder hat es auch einen fachbegriff?
Es gibt kein immer passendes Grundgerüst. Das Grundgerüst hängt vom Inhalt ab. Und der ...
Gruss
MrMurphy
Hallo,
es wäre besser du wärst bei deinem Thema geblieben oder hättest ein neues eröffnet, da die Überschrift deins Alten zu deinen aktuellen Fragen nicht passt.
ich habe jetzt mal grundgerüst für responsive webdesign gemacht und hoffe, es stimmt so?
Das kann dir niemand beantworten. Denn, da du es noch immer nicht verstanden hast:
Der Inhalt bestimmt das Layout und damit auch das responsive Design.
Also: Erst Inhalt, dann Layout und Design. Der Inhalt fehlt bei dir noch komplett. Deshalb
also bevor ich weiter bastel, wollte ich fragen ob ich das so richtig und "sauber" mache?
kann man dich nur auf einige strukturelle Mängel hinweisen. Nein, das ist nicht sauber.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">XHTML ist bereits vor 8 Jahren für tot erklärt worden und wird seitdem offiziell nicht mehr weiter entwickelt. Aktuell sinnvoll ist nur HTML5, also
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
...<div id="wrapper">Ein Wrapper ist überflüssig wie ein Tropf. Weg damit.
<div ...Du leidest unter Divits, auch Diveritis genannt. Besser mit HTML5 die dafür vorgesehenen Container wie header, nav, main, footer u.s.w. verwenden. Und div nur, wenn es nichts besseres gibt.
@media screen and (max-width: 350px){
...
@media screen and (min-width: 350px){
...Ganz schlecht.
Zunächst werden die CSS-Anweisungen erstellt, die für alle Fenstergrößen gelten sollen.
Dann sollte man sich entscheiden, ob man nach Mobile-First oder Desktop-First vergehen will. Technisch sind beide Vorgehensweisen vollkommen gleichwertig. Anfängern wird gerne zu Mobile-First geraten, da auf Smartphones häufig nicht der gesamte Inhalt der Seite angezeigt werden soll.
Die min-width bzw. max-width-Angaben richten sich dann nach dem Inhalt der Seite - der bei dir noch komplett fehlt. Für 350px eine Media Query zu erstellen ist heutzutage meist nicht notwendig.
#wrapper {
max-width: 950px;
}Warum soll der Inhalt höchstens 950px breit werden? Solche Einschränkungen stammen aus dem letzten Jahrtausend und das Responsive Design soll auch dazu dienen, Desktop-Fenster mit Inhalt zu füllen und den Usern grade kein halbleeres Fenster vorzusetzen. Den insgesamt überflüssigen Wrapper habe ich bereits erwähnt.
max-height: 258px;height-Angaben sollten so weit wie möglich unterbleiben. Die Höhe richtet sich nach dem Inhalt und die können die Browser selbst bestimmen.
Dabei funktioniert "auto" ja auch und geht für alle Größen?
auto ist in der Regel sinnvoller, funktioniert aber nicht in allen Situationen. Es gibt also kein entweder .. oder.
Gruss
MrMurphy
Hallo
Ein Bootstrap(Grids)-Aufbau ersetzt also das Grundgerüst mit Containern komplett, ja?
Kann, muss aber nicht. Jede Webseite benötigt ein Grundgerüst, das du aber selbst zusammenbauen kannst.
Ich teste jetzt mal Aptana Studio 3, Scriptly hat mir manchmal zu wenig Hilfsvorlagen und Texterkennungen. Einwende? :-).
Auch bei den Editoren gibt es kein richtig oder falsch. Ein einfacher Editor, den der Anwender in und auswendig kennt ist häufig sinnvoller als ein anspruchsvoller, mit dem der Anwender aber überfordert ist.
Scriptly hat das Problem seit 3 Jahren nicht mehr weiterentwickelt zu werden und teilweise HTML5 bzw. CSS3 Regeln nicht umsetzen zu können. Ich hatte es schon in anderen Foren, das bestimmte Lösungen damit schlicht nicht möglich waren. Von daher kann ich den nicht mehr empfehlen.
Gruss
MrMurphy