Beiträge von MrMurphy

MrMurphy · 3. September 2015

Hallo

Zitat

Wie kann ich die inneren Divs rahmen, ohne den Rahmen zu sprengen?

Nach dem normalen Box-Modell komme ich zur Zeit für die inneren div auf

750 px width
000 px padding
010 px border
050 px margin
=
810 px Gesamt

bei einem umgebenden Element von 800 px Breite.

Du wirst also width oder margin verringern müssen wenn border bestehen bleiben soll. Oder halt den umgebenden Container breiter machen.

Gruss

MrMurphy

Nachtrag: Nebenbei solltest du dir Gedanken über die Schriftgröße machen. Abgesehen davon das für Bildschirme die Einheit pt ungeeignet ist sind 50pt höher als die des umgebenden Elements mit 80px.

MrMurphy · 3. September 2015

Hallo,

Scriptly ist seit November 2010 nicht mehr weiter entwickelt worden und hat demnach den Wechsel zu HTML5 und CSS3 nur ansatzweise berücksichtigt.

Zitat

The current version of Scriptly is 0.8.95.6, which was released at: 2010-11-25

http://www.webocton.de/?cid=3&sid=104

Das liegt demnach an Scriptly.

Gruss

MrMurphy

MrMurphy · 27. August 2015

Hallo,

Zitat

So richtig einen Unterschied macht es zwar nicht, jedoch fehlt dann irgendwo die Logik dahinter.

Korrekte Lösungen als falsch oder unsinnig darzustellen, nur weil du sie nicht verstehst ist nicht grade das gelbe vom Ei.

Code

Es ist definitiv nicht verkehrt.

Das hört sich doch schon mal ganz anders an als in deinem vorigen Beitrag.

Zitat

H1 ist aber definitv nur ein mal pro Seite zu verwenden,

Komisch nur, das die offiziellen Entwickler vom HTML (WHATWG und W3C) das anders sehen:

Zitat

As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:

und direkt nachfolgend als korrekte Code-Beispiele

HTML

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h1>Diving in</h1>
</section>
<section>
<h1>Simple shapes</h1>
</section>
<section>
<h1>Canvas coordinates</h1>
<section>
<h1>Canvas coordinates diagram</h1>
</section>
</section>
<section>
<h1>Paths</h1>
</section>
</body>

Alles anzeigen

Ich finde es traurig, dass du korrekte Lösungen als falsch oder unsinnig darstellst, nur weil du damit überfordert bist.

Gruss

MrMurphy

MrMurphy · 27. August 2015

Hallo,

du hast aber schom mitbekommen, dass dir hier Menschen helfen, die dafür ihre Freizeit opfern?

Zitat

Ich hoffe, Du kannst etwas damit anfangen.

Nein, ich habe keine Lust mir aus deinen Angaben eine Seite zu basteln, die dann wahrscheinlich nicht mal das Problem zeigt, das du im übrigen trotz Nachfrage immer noch nicht genauer umschrieben hast.

Zumal du dir bei der Bereitstellung des Quelltextes nicht mal Mühe gibst. Dort scheint der Quellcode für zwei Seiten zu stehen, eventuell sogar vermischt.

Wenn ich jemanden um Hilfe bitte lege ich ihm keine zusätzlichen Steine in den Weg.

Gruss

MrMurphy

MrMurphy · 27. August 2015

Hallo,

benutze besser einen Freeware-Provider wie bplaced.net und zeige den Link zu der Seite. Die Veröffentlichung des Quellcodes ist nur die zweitbeste Lösung.

Gruss

MrMurphy

MrMurphy · 27. August 2015

Hallo,

also ist so eine Konstruktion mit aktuellem HTML nicht zulässig?

HTML

<nav>
<aside class="partner">
<h1>Partnerunternehmen</h1>
<a href="#">
<section>
<h1>Großautohandel</h1>
<p>Die besten Fahrzeuge.</p>
<p>Super Preise.</p>
</section>
</a>
<a href="#">
<section>
<h1>Fahrrad-Egon</h1>
<p>Elektrofahrräder fast geschenkt.</p>
<p>Kostenpflichtige Lieferung.</p>
</section>
</a>
<a href="#">
<section>
<h1>Gurken-Heini</h1>
<p>Frisch, frischer, frischest.</p>
<p>Sauber und rein - so soll die Gurke sein.</p>
</section>
</a>
<a href="#">
<section>
<h1>Hans Hartbeton</h1>
<p>Bettwäsche und mehr.</p>
<p>Wie man sich bettet so liegt man.</p>
</section>
</a>
</aside>
</nav>

Alles anzeigen

Gruss

MrMurphy

MrMurphy · 27. August 2015

Hallo,

zumindest ich weiß weder was "Kleinscrollen" noch was "kleinste Seite" ist. Wenn du dir Begriffe ausdenkst musst du die auch erklären.

Und schreib 100 mal auf ein Blatt Papier:

Ohne Link zur Seite oder den gesamten Quelltext ist keine Hilfe möglich.

Gruss

MrMurphy

MrMurphy · 26. August 2015

Hallo

Meinst du so:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.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%;
}
body {
padding: 0;
}
main {
width: 1200px;
padding: 0;
display: flex;
}
section {
width: 600px;
padding: 0.5rem;
border: 1px solid silver;
margin: 0.5rem;
display: flex;
}
section img {
display: block;
}
section>:nth-child(1) {
flex: 0 0 200px;
}
section>:nth-child(2) {
margin-left: 1rem;
flex: 1 0 1%;
}
dl {
overflow: hidden;
padding: 0;
margin: 0;
}
dt,
dd {
float: left;
margin: 0 0 0.3rem 0;
}
dt {
width: 40%;
clear: both;
}
dd {
width: 60%;
}
}
/* Vorlage zum Kopieren für Media-Query */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<main>
<section>
<img src="http://lorempixel.com/130/150/people" alt="Name der Person">
<dl>
<dt>Name:</dt>
<dd>Irina von Meuchtewitz-Zitzewitz zu Hallersleben</dd>
<dt>Geburtstag:</dt>
<dd>14.01.2015</dd>
<dt>Funktion:</dt>
<dd>Geschäftsführerin</dd>
</dl>
</section>
<section>
<img src="http://lorempixel.com/130/150/sports" alt="Name der Person">
<dl>
<dt>Name:</dt>
<dd>Max Meier</dd>
<dt>Geburtstag und Sternzeichen:</dt>
<dd>19.02.2013 / Löwe</dd>
<dt>Funktion:</dt>
<dd>Hilfsarbeiter</dd>
</dl>
</section>
</main>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MrMurphy · 26. August 2015

Hallo,

ich hatte das so verstanden, dass steve wissen wollte, wie die spezielle Navigation erstellt wurde. Und das kann halt erst nach Durchsicht des Quelltextes beurteilt werden. Das dann nur eine schlichte, schulmäßige Navigation übrigbleibt ist nicht direkt erkennbar.

Wenn es nur um die Funktion geht würde ich eine viel schlichtere Grundstruktur bevorzugen. Die könnte so aufgebaut sein:

HTML

<nav id="zbv">
<article>
<p>Menüpunkt</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://..." alt="Beispielbild">
</div>
</article>
</nav>

Ein nav-Element, in dem sich für jeden Menüpunkt ein article-Element befindet.

Die p-Elemente werden durch beliebige Inhalte ersetzt. Durch den umschließenden div-Container gibt es kaum Einschränkungen des Inhalts und seiner Gestaltung.

Das Bild direkt vor dem schließenden div ist absolut positioniert und kann beliebig verschoben werden.

Keine unnötigen id und class. Viel übersichtlicher geht es wohl kaum.

Farben, Rahmen, Schatten, Abstände können flexibel angepasst werden. Ein Resposive Design ist problemlos möglich.

Das CSS ist nicht sehr aufwändig:

CSS

nav#zbv {
padding: 0;
border: 1px solid silver;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#zbv>:first-child {
background-color: Orange;
flex: 0 0 2rem;
}
#zbv>* {
display: block;
text-align: center;
position: relative;
padding: 0;
border: 1px solid orange;
margin: 0;
flex: 1 0 auto;
}
#zbv article :nth-child(1) {
display: block;
padding: 0.3rem 0;
margin: 0;
}
#zbv div {
min-height: 210px; /*Für die Beispielbilder*/
border: 1px solid silver;
border-top: 5px solid red;
display: none;
}
#zbv article:hover div {
text-align: left;
display: block;
position: absolute;
width: 300%;
}
#zbv article:nth-last-child(-n+3) div {
right: 0;
}
#zbv div img:last-child {
position: absolute;
right: 0;
bottom: 0;
}

Alles anzeigen

Die gesamte Navigation mit aktuellem HTML/CSS könnte zum Beispiel so erstellt werden:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Navigation 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.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%;
}
body {
padding: 0;
}
nav#zbv {
padding: 0;
border: 1px solid silver;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#zbv>:first-child {
background-color: Orange;
flex: 0 0 2rem;
}
#zbv>* {
display: block;
text-align: center;
position: relative;
padding: 0;
border: 1px solid orange;
margin: 0;
flex: 1 0 auto;
}
#zbv article :nth-child(1) {
display: block;
padding: 0.3rem 0;
margin: 0;
}
#zbv div {
min-height: 210px; /*Für die Beispielbilder*/
border: 1px solid silver;
border-top: 5px solid red;
display: none;
}
#zbv article:hover div {
text-align: left;
display: block;
position: absolute;
width: 300%;
}
#zbv article:nth-last-child(-n+3) div {
right: 0;
}
#zbv div img:last-child {
position: absolute;
right: 0;
bottom: 0;
}
}
/* Vorlage zum Kopieren für Media-Query */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<nav id="zbv">
<article>
<p>H</p>
</article>
<article>
<p>Obst</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/food" alt="Beispielbild">
</div>
</article>
<article>
<p>Auto</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/transport" alt="Beispielbild">
</div>
</article>
<article>
<p>Stadt</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/city" alt="Beispielbild">
</div>
</article>
<article>
<p>Tier</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/animals" alt="Beispielbild">
</div>
</article>
<article>
<p>Vorname</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/people" alt="Beispielbild">
</div>
</article>
<article>
<p>Unternehmen</p>
<div>
<h2>Bezeichnungen</h2>
<p>Inhalt: Text, Container, Listen u.s.w.</p>
<img src="http://lorempixel.com/130/200/technics" alt="Beispielbild">
</div>
</article>
</nav>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MrMurphy · 25. August 2015

Hallo

Zitat

Das von MrMurphy ist aber Illegal

Nein, deine Aussage ist so absolut ausgedrückt nicht richtig.

Im Internet verbreiteten Quellcode darf sich jeder anschauen und ihn dazu speichern.

Geschützt sind zweifelsfrei die Bilder. Um die geht es aber überhaupt nicht. Die gehören nicht zur Navigation und werden gelöscht. Ich bin davon ausgegangen, dass das jedem bekannt ist.

Die Farbgestaltung der Navigation kann geschützt sein, wenn sie einen nicht unerheblichen schöpferischen Anteil besitzt. Das sehe ich nicht, hier ist nur eine Farbe und etwas Box-Shadow wie in hunderten Lehrbüchern und Internetartikeln nachzulesen verwendet worden.

Bleibt noch der HTML- und CSS-Quelltext selbst. Aber bei genauerem Hinschauen kannst du nachvollziehen, dass nur schlichter Lehrbuchquelltext verwendet wurde, dazu noch veraltet.

Die ganze Navigation befindet sich bei genauerem Hinschauen in einem nav-Element = keine schöpfersiche Leistung

Innerhalb des nav-Elements befindet sich eine ungeordnete Liste = keine schöpferische Leistung

Innerhalb des ul-Elements befindet sich für jeden Hauptmenüpunkt ein li-Element = keine schöpferische Leistung

Innerhalb der 6 li-Elemente befindet sich eine Tabelle mit einem weiteren ul-Element mit den Untermenüpunkten = Tabelle wird zum Layouten mißbraucht, ansonsten ein ganz normales Aufklappmenü = keine schöpferische Leistung

Die 6 Bilder sind per "position: absolute" positioniert = keine schöpferische Leistung

Auch die Gesamtkonzeption ist aus tausenden Artikeln zum Thema Aufklappnavigation mit hover-Effekt bekannt.

Entsprechendes gilt für das CSS, das sind Standardangaben. Da ist weder einzeln noch in dem Zusammenspiel aller CSS-Anweisungen irgendetwas außergewöhnlich.

Von daher ist an dieser Navigation selbst (also ohne die Bilder) nichts geschützt.

Gruss

MrMurphy

MrMurphy · 24. August 2015

Hallo

Zitat

Kann mir jemand sagen wie ich so eine Navigation erstellen kann ?

Das kann niemand einfach so nachvollziehen.

Du kannst zum Beispiel die Seite erst mal in ein leeres Verzeichnis speichern. Das geht mit dem Firefox recht gut.

Anschließend schnappst du dir den HTML-Quelltext und löscht alles, was mit der Navigation nichts zu tun hat.

Anschließend machst du das gleiche mit dem CSS-Dateien.

Nach jedem Löschvorgang kontrollieren, ob die Navigation noch funktioniert.

Übrig bleibt dann der notwendige HTML- und CSS-Quelltext.

Im Inspektor (bei Firefox: Element untersuchen) kann vor dem Löschen schon mal nachgeschaut werden, was wahrscheinlich gelöscht werden kann.

Das ist natürlich Fleißarbeit, aber anders können wir auch nicht vorgehen, wenn wir nicht grade eine sehr ähnliche Navigation kennen.

Gruss

MrMurphy

MrMurphy · 24. August 2015

Hallo,

.fieldset funktioniert nicht. Du musst den Punkt weglassen, da sonst eine gleichnamige Klasse gesucht wird.

Zu deinem Problem:

Du kannst spezielle Anweisungen für den Druck angeben, zum Beispiel:

CSS

@media all {
fieldset {
width: 700px;
border: 2px solid #000;
}
}
@media print {
fieldset {
display: none;
}
}

Alles anzeigen

Damit sollte das fieldset nicht mit ausgedruckt werden.

@media all = alle Ausgabegeräte

@media screen = nur Bildschirme

@media print = nur Drucker

Alle zugehörigen Anweisungen dann in geschweifte Klammern. Grade bei vielen CSS-Anweisungen wird die schließende Klammer oft vergessen oder als vermeintlich überflüssig gelöscht. Die muss dann aber doppelt sein.

Gruss

MrMurphy

MrMurphy · 23. August 2015

Hallo

Zitat

Kein Benutzer sollte sich websiten in weniger oder mehr als 100% ansicht ansehen.

Falsch. Mal abgesehen, das eine zu geringe Schriftgröße eine der meisten Klagen über Webseiten ist, sind viele Leute darauf angewiesen, in die Seite hineinzuzoomen. In 20, 30 Jahren wirst du dies wahrscheinlich auch praktisch nachvollziehen können.

Entweder hast du dich mit dem Thema Besucherfreundlichkeit und Zugänglichkeit noch nicht beschäftigt oder nicht verstanden. Und die Wortwahl

Zitat

Wenn er es doch macht ist er selnst schuld wenns scheiße aussieht, aber euch webmaster kann das doch echt n Dreck intressieren oder?

sagt eine Menge über dich aus, auch wenn du dich gleich hinter einem Smiley versteckst.

Gruss

MrMurphy

MrMurphy · 23. August 2015

Hallo

Zitat

deswegen hab ich mich dann dazu entschieden es erstmal sein zu lassen und dann vielleicht später irgendwann das Ganze zu überarbeiten

Nur mal eine kleine Info: Hast du mal die Fenterhöhe verringert oder in die Seite hineingezommt und geschaut, wie sich das Layout dabei verhält?

Gruss

MrMurphy

MrMurphy · 23. August 2015

Hallo,

die Mausposition kann zwar ermittelt aber nicht beeinflußt werden.

Es ist zudem ein Unding, wenn Webseitenersteller in die Rechner-/Browsereigenschaften ihrer Besucher eingreifen wollen. Mal abgesehen davon, dass das in deinen Fall zum Glück nicht möglich ist mögen das auch die Besucher überhaupt nicht.

Sei wollen und können erwarten, das ihr Rechner und ihre Software (in diesem Fall der Browser) wie gewohnt reagieren und benutzt werden können. Dazu gehört auch das der Mauszeiger sich nicht verselbstständigt.

Vor 20 Jahren waren ähnliche Eingriffe von den Webseitenerstellern sehr beliebt - bloß halt von sonst niemanden. Entsprechend sind solche Seiten dann auch schnell wieder verschwunden. Seiten zu erstellen, die dann niemand besucht, ist auch eher frustrierend.

Deshalb mein Rat: Unterlasse solche Bevormundungen deiner Besucher. Das ist Unhöflich und wird auch so erkannt und durch Abwesenheit bestraft.

Gruss

MrMurphy

MrMurphy · 23. August 2015

Hallo,

ich würde das aktuelle HTML5 / CSS3 nutzen und das Flexboxmodell ( display: flex; ) verwenden. Im Gegensatz zu den bislang vorhandenen Methoden ist es schließlich speziell zur Gestaltung des Layouts entwickelt worden.

Gruss

MrMurphy

MrMurphy · 23. August 2015

Hallo

das hängt von deinem gesamten Quelltext ab, den hier wohl niemand kennen kann.

Zudem sind

Zitat

Alles läßt sich schön mit Span oder Div verschieben

und

Zitat

aber Fieldset krieg ich nicht weg.

nicht aussagekräftig.

Das Beste wäre ein Link zur Seite, notfalls gibt es Freewareprovider wie bplaced.net.

Gruss

MrMurphy

MrMurphy · 20. August 2015

Hallo

Zitat

Um auf HTML5 zu wechseln:
Reicht es, die DOCTYPE umzuschreiben?

Ja mit gaaanz viel nein.

Ganz so einfach ist es natürlich nicht.

Insgesamt sollten beim Umstieg auf HTML5 auch die neuen Elemente wie header, nav, main, footer u.s.w. genutzt werden statt eine div-Wüste zu erzeugen. Bei kleinen Dateien ist das aber nicht so wichtig. Außerdem werden einige Elemente einfacher oder anders notiert.

XHTML ist zum Beispiel bereits 2006 zu Grabe getragen worden. Seitdem wird es nicht mehr weiterentwickelt und die Browser zeigen es nur noch aus Kompatibilitäsgründen an. Das kann aber jederzeit als Altlast gestrichen werden.

Gruss

MrMurphy

MrMurphy · 20. August 2015

Hallo

vergleich mal

CSS

background-color: hsla(0%, 100%, 0.5);

mit

CSS

background-color: hsla(0, 0%, 100%, 0.5);

Zitat

Kann ich eine zweite <span></span> in diesem Block unterbringen, die sich separat steuern lässt?

Grundsätzlich ja. Ob das mit dem veralteten XHTML auch geht weiß ich nicht. In HTML5 auf jeden Fall.

Gruss

MrMurphy

MrMurphy · 20. August 2015

Hallo,

ich habe das Beispiel grade mal nachgebaut und es funktioniert. Entweder hast du einen Tippfehler oder Angaben an anderer Stelle im CSS, die in die Transparenz reinpfuschen.

Ohne Link zur Seite ist eine konkrete Hilfe nicht möglich.

Gruss

MrMurphy

Beiträge von MrMurphy

Fehlermeldung: Beware of broken box size

CSS invalid Value "Flex"

Wie so eine Navigation erstellen ?

Seite gleitet beim Kleinzoomen im Browserfenster nach links statt in die Mitte

Seite gleitet beim Kleinzoomen im Browserfenster nach links statt in die Mitte

Wie so eine Navigation erstellen ?

Seite gleitet beim Kleinzoomen im Browserfenster nach links statt in die Mitte

Tabelle in Div-Bereich einsetzen

Wie so eine Navigation erstellen ?

Wie so eine Navigation erstellen ?

Wie so eine Navigation erstellen ?

Fieldset beim Drucken verschieben

Sticky Footer bei einem responsiven Design

Sticky Footer bei einem responsiven Design

Wie speichere ich die Auswahl meines Aufklappmenus?

Sticky Footer bei einem responsiven Design

Fieldset beim Drucken verschieben

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

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

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