Paludis: Problem mit Bild-Positionierung

0 59

Problem mit Bild-Positionierung

  1. 0
    1. 0
      1. 1

        Problem mit Bild-Größe

      2. 1

        Nochmal Bildgröße

  2. 1
    1. 1
      1. 0
        1. 0
          1. 6
            1. 0
              1. 0
            2. 1
              1. 1
                1. 0
                  1. 0
                    1. 0
                      1. 0
              2. 3
                1. 0
                  1. 0
                2. 0
  3. 0
    1. 0
      1. 0
  4. 0
    1. 0
      1. 0
        1. 0
          1. 0
            1. 0
              1. 0
                1. 0
            2. 0
            3. 1
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                    2. 0
                      1. 0
                        1. 0
                          1. 0
                            1. 0
                            2. 0
                              1. 0
                                1. 0
                                  1. 0
                                    1. 0
                                      1. 0
                                        1. 0
                                          1. 0
                                            1. 0
                                              1. 0
                                                1. 1
                                                  1. 0
                                                    1. 0
                                                2. 0

Ich habe Probleme mit der Positionierung des Bildes IMG_5347_small.jpg im mainHeader (siehe unten). Es sollte eigentlich am rechten Rand angezeigt werden, bündig mit dem Inhalt. Ich habe jedoch keine Ahnung wie. Google hat auch nicht geholfen.

<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="body">
		<header class="mainHeader">
			<img src="resources/img/Content_variation_800_e.png" alt="Logo">
			<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
		</header>
		
		<div class="maincontent">
			<div class="content">
				<article class="topcontent">
					<header>
						<h2><a href="#" title="First post">First post</a></h2>
					</header>
                    
                    <footer>
                        <p class="post-info">This post is written by Christianh</p>
                    </footer>
                    
                    <content>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </content>
                
                </article>
                
                <article class="bottomcontent">
					<header>
						<h2><a href="#" title="Second post">Second post</a></h2>
					</header>
                    
                    <footer>
                        <p class="post-info">This post is written by Christianh</p>
                    </footer>
                    
                    <content>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </content>
                
                </article>
                
            </div>
		</div>
        
        <aside class="top-sidebar">
            <article>
                <h2>Top sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
        
        <aside class="middle-sidebar">
            <article>
                <h2>Middle sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
        
        <aside class="bottom-sidebar">
            <article>
                <h2>Bottom sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
            </article>
        </aside>
        
        <footer class="mainFooter">
            <p>Copyright &copy; <a href="#" title="couture-anni">couture-anni.ch</a></p>
        </footer>
        
    </body>


</html>
body {
    background-image: url('img/tape-measure.jpg');
    color: #000305;
    font-size: 87.5%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
    
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

.mainHeader img {
    max-width: 30%;
    height: auto;
}

.mainHeader img .Margrit {
	max-width: 30%;
	height: auto;
}

.mainHeader nav {
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li {
    display: inline;
    float: left;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
}

.content {
    width: 70%;
    float: left;
}

.topcontent {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.bottomcontent {
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 90%;
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 2% 3%;
}

.middle-sidebar {
    width: 21%;
    float: left;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;

}

.bottom-sidebar {
    width: 21%;
    float: right;
    background-color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;
}

.mainFooter {
    width: 100%;
    height: 40px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #666;
    margin: 2% 0;
}

.mainFooter p {
    width: 92%;
    margin: 10px auto;
    color: #fff;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
    .body {
        width: 90%;
        font-size: 95%;
    }
    
    .mainHeader img {
        width: 100%;
    }
    
    
    .mainHeader nav {
        height: 160px;
    }

    .mainHeader nav ul {
        padding-left: 0;
    }

    .mainHeader nav ul li {
        width: 100%;
        text-align: center;
        
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        padding: 10px 25px;
        height: 20px;
        display: block;
    }

    .content {
        width: 100%;
        float: left;
        margin-top: 2%;
    }
    
    .post-info {
        display: none;
    }

    .topcontent {
        background-color: #fff;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        margin-top: 3%;
    }
    
    
    .top-sidebar, . middle-sidebar, .bottom-sidebar {
        width: 94%;
        margin: 2% 0 2% 0;
        padding: 2% 3%;
    }
}
  1. Hallo Paludis,

    Willkommen im Forum.

    Ich habe Probleme mit der Positionierung des Bildes IMG_5347_small.jpg im mainHeader

    Zeig bitte ein online-Beispiel, z.B. bei bplaced.net.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Danke für deine Antwort. Besuche einfach https://www.couture-anni.ch und du solltest sehen, was ich meine.

      1. Hi,

        Danke für deine Antwort. Besuche einfach https://www.couture-anni.ch und du solltest sehen, was ich meine.

        IMG_5347_small.jpg (JPEG Image, 3456 × 5184 pixels)

        Huch - die kleine Version hat knapp 18 Millionen Pixel? Wie groß ist denn dann die normale oder gar die big-Version?

        Warum hat das Bild ca. die 6-fache Breite und die 6-fache Höhe der Darstellungsgröße, also die 36-fache Fläche?

        Das kostet nur unnötig Datenvolumen.

        cu,
        Andreas a/k/a MudGuard

      2. Hallo Paludis,

        das tape_measure.jpg habe ich gerade mal mit Irfan View auf 1920x1266 runterskaliert und mit 75% Bildqualität gespeichert - ich find's dann immer noch ansehnlich und es belegt 313KB statt 1834KB. Annis User werden es Dir danken :)

        Das Bild auf der Homepage ist jetzt UNTER dem Menü. Wenn das dein angestrebtes Ziel war, dann entschuldige mein Missverständnis von gestern.

        Rolf

        --
        Dosen sind silbern
  2. @@Paludis

    <li class="active"><a href="#">Home</a></li>
    

    Die aktuelle Seite sollte im Menü mit aria-current="page" gekennzeichnet werden. Das kann man dann auch zum Stylen nutzen; eine Klasse active braucht man nicht:

    <li><a href="#" aria-current="page">Home</a></li>
    

    I.a.R. ist es sinnvoll, die aktuelle Seite im Menü nicht zu verlinken, dann ohne href (dafür aber mit tabindex="0"):

    <li><a tabindex="0" aria-current="page">Home</a></li>
    

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hi there,

      Die aktuelle Seite sollte im Menü mit aria-current="page" gekennzeichnet werden. Das kann man dann auch zum Stylen nutzen; eine Klasse active braucht man nicht:

      ich nehm einmal an diesen Witz kennst Du?

      1. Hej Klawischnigg,

        Die aktuelle Seite sollte im Menü mit aria-current="page" gekennzeichnet werden. Das kann man dann auch zum Stylen nutzen; eine Klasse active braucht man nicht:

        ich nehm einmal an diesen Witz kennst Du?

        Seit wann ist es nutzlos Webseiten benutzbar zu machen? Übrigens hat der Tipp im Witz letzten Endes ja doch geholfen.

        Marc

        1. Hi there,

          Die aktuelle Seite sollte im Menü mit aria-current="page" gekennzeichnet werden. Das kann man dann auch zum Stylen nutzen; eine Klasse active braucht man nicht:

          ich nehm einmal an diesen Witz kennst Du?

          Seit wann ist es nutzlos Webseiten benutzbar zu machen? Übrigens hat der Tipp im Witz letzten Endes ja doch geholfen.

          Da ist sie wieder, die Mirkosaft-Hotline. Ich bin jedenfalls froh, daß ich mich mit Problemen nicht an dieses Forum wende…

          1. Hej Klawischnigg,

            Seit wann ist es nutzlos Webseiten benutzbar zu machen? Übrigens hat der Tipp im Witz letzten Endes ja doch geholfen.

            Da ist sie wieder, die Mirkosaft-Hotline. Ich bin jedenfalls froh, daß ich mich mit Problemen nicht an dieses Forum wende…

            So verschieden sind die Menschen halt. Wenn ich zurück denke an meine ersten Besuche bei SELFHTML, dann ist eine der ersten Erinnerungen, eine an den einleitenden Text von Stefan Münz. Da stand so was drin wie, es könne sein, dass man nach der Lektüre der Anleitung möglicherweise beruflich umsatteln möchte.

            Ich hatte nichts dergleichen im Sinn und fand das etwas anmaßend.

            Aber die Anleitung war toll. Stefan kann prima erklären. Außerdem war SELFHTML 1.0 auch in seiner Konsistenz einzigartig konsequent. Es war toll damit zu lernen.

            Aber mit der Zeit habe ich mich an kompliziertere Dinge gewagt und dann hatte ich trotz Lektüre noch Fragen.

            Oft war ich nicht der einzige oder auch nur der erste mit einem Anliegen, so dass die Suche im Forums-Archiv es oft unnötig machten, eine Frage hier selbst zu stellen.

            Aber auch das kam vor. Wie das im Leben so ist, möchte man ein Problem mit möglichst wenig Aufwand lösen. Wer hier eine Frage stellt hat in der Regel zwei Probleme:

            1. eine Website zu erstellen, ohne ein HTML-CSS-Guru zu sein (dieses Problem ist den wenigsten bewusst)
            2. einen konkreten Design- oder Funktionswunsch, den man nicht selbst umsetzen kann und am liebsten von jemand anderem erledigt haben will

            Wir Menschen sind nun mal Opportunisten. Dummerweise landet man immer und immer wieder bei Punkt zwei, wenn man sich nicht mit Punkt eins beschäftigt. @wahsaga, @cheatah, @MudGuard, @Christian Kruse, @Gunnar Bittersmann und viele viele andere haben mit ihren unterschiedlichen Erklärungsansätzen und viel Geduld dafür gesorgt, dass das erste Problem immer kleiner wurde und das zweite immer seltener auftrat.

            Heute bin ich hier häufiger als antwortender denn als Fragender, um etwas zurück zu geben.

            Denn so anmaßend mir die Andeutung damals schien, dass mich SELFHTML zum Webentwickler machen könnte: in meinem Fall hatte dieses Forum sicher einen großen Anteil daran!

            Einige der alten Hasen hatten dabei manchmal einen ruppigen Ton am Leibe. Oft zu recht, denn den hat man sich in der Regel eingefangen, wenn man übertriebene Ansprüche hatte oder eigenes Engagement verweigerte.

            Die Einsicht auch Probleme beheben zu müssen, die man nicht beheben will, weil „es funktioniert“ (irgendwie in irgendeinem Browser weil Browser halt fehlertolerant sind und das jetzt mühsam ist und irgendwie alles so kompliziert ist) — diese Einsicht sich durchbeißen zu müssen ist wichtig. Nicht nur in Bezug auf Webseiten, sondern immer im Leben. Was man macht, sollte man ordentlich machen. Ich würde sogar sagen, na sollte alles machen mit Zuneigung zu der Sache, der man es antut. Aber das ist ein Ideal und die Mühsal steht diesen ideal oft im Weg.

            Aber nur so verschwinden die Probleme 1 und 2 dauerhaft. Und das gilt nicht nur für HTML.

            Nach dieser langen Einleitung zur Mikrosoft-Hotline:

            Es sind die ständigen, ausdauernden und immer wieder in die Wunde gelegten Finger, die Antworten auf nicht gestellte Fragen, die das besondere dieses Forums ausmachen.

            Auch ich gebe diese Antworten, die oft Kritik an dem ersten „Baby“ eines werdenden Webentwicklers sind. Das tut weh. Ich bin mir aber sicher, wer einsieht, dass die Kritik berechtigt ist, der wird ein guter Entwickler und aus den ungebetenen Antworten mehr mitnehmen, als aus den erbetenen. Weil diese Antworten aufgrund eines Blicks auf das große Ganze gegeben werden, den ein Anfänger oft nicht hat.

            Diese nicht anzunehmen hat oft etwas mit der Unfähigkeit zu tun, die Erfahrung und das Wissen derjenigen anzuerkennen, die hier aktiv sind. Das ist weiter nicht schlimm, Fähigkeiten müssen erworben werden, man bekommt sie nicht geschenkt.

            SELFHTML hat mir dabei geholfen und aus dieser Erfahrung heraus gebe ich Antworten und Ratschläge in der Hoffnung anderen zu helfen, HTML und verwandte Techniken so gut zu verstehen wie ich — möglichst sogar einmal besser.

            Mit vielen anderen hier trage ich auf die Weise dazu bei, die mir geeignet scheint — wobei ich das im Wissen tue, nicht frei von Fehlern zu sein.

            Es ist cool wenn du auf deine Weise den Ratsuchenden zu Hilfe kommst. Es ist aber nicht nötig oder gar hilfreich die Art und Weise in Frage zu stellen, die andere aufgrund ihrer Erfahrungen für die richtige halten.

            Marc

            1. @@marctrix

              Warum darf ich hier nur ein Plus vergeben? Ich prangere das an.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hej Gunnar,

                @@marctrix

                Warum darf ich hier nur ein Plus vergeben? Ich prangere das an.

                Danke für die netten Worte. Ich lasse das als Doppel-Plus gelten.

                Marc

            2. Hi there,

              Danke für die ausführliche Antwort.

              Aber die Anleitung war toll. Stefan kann prima erklären. Außerdem war SELFHTML 1.0 auch in seiner Konsistenz einzigartig konsequent. Es war toll damit zu lernen.

              Unbestritten. Und eine ständiges Nachschlagwerk. Nicht umsonst sind die selfhtml-Kapitel meist die ersten Antworten, die man bei Google zu entsprechenden Fragen findet.

              Aber auch das kam vor. Wie das im Leben so ist, möchte man ein Problem mit möglichst wenig Aufwand lösen. Wer hier eine Frage stellt hat in der Regel zwei Probleme:

              1. eine Website zu erstellen, ohne ein HTML-CSS-Guru zu sein (dieses Problem ist den wenigsten bewusst)

              Ja, aber auch den wenigsten der hier Antwortenden ist bewusst, daß die meisten gar keine HTML-Gurus werden wollen...

              1. einen konkreten Design- oder Funktionswunsch, den man nicht selbst umsetzen kann und am liebsten von jemand anderem erledigt haben will

              ... sondern wie Du schreibst, ein konkretes Problem erledigt wissen wollen.

              Einige der alten Hasen hatten dabei manchmal einen ruppigen Ton am Leibe. Oft zu recht, denn den hat man sich in der Regel eingefangen, wenn man übertriebene Ansprüche hatte oder eigenes Engagement verweigerte.

              Ich würde einmal sagen, daß was Du hier "ruppigen" Ton nennst, wies zumindest bei einem der von Dir erwähnten leicht pathologische Züge auf. Ich kann mich an ein Posting von Cheatah erinnern, wo er einen Fragestellenden für irgendetwas wortwörtlich einsperren lassen wollte, das zeigt bei aller fachlichen Kompetenz schon gewisse charakterliche, um es einmal so zu formulieren, Defizite auf.

              Die Einsicht auch Probleme beheben zu müssen, die man nicht beheben will, weil „es funktioniert“ (irgendwie in irgendeinem Browser weil Browser halt fehlertolerant sind und das jetzt mühsam ist und irgendwie alles so kompliziert ist) — diese Einsicht sich durchbeißen zu müssen ist wichtig. Nicht nur in Bezug auf Webseiten, sondern immer im Leben.

              Mag ja sein, aber wenn ich so wie der OP ein Bildpositionierungsproblem habe, dann pfeif' ich auf Lebensweisheiten.

              Was man macht, sollte man ordentlich machen. Ich würde sogar sagen, na sollte alles machen mit Zuneigung zu der Sache, der man es antut. Aber das ist ein Ideal und die Mühsal steht diesen ideal oft im Weg.

              Siehe meinen vorigen Satz.

              Es sind die ständigen, ausdauernden und immer wieder in die Wunde gelegten Finger, die Antworten auf nicht gestellte Fragen, die das besondere dieses Forums ausmachen.

              Ja eh, deswegen sinken auch die Besucherzahlen seit Jahren

              Auch ich gebe diese Antworten, die oft Kritik an dem ersten „Baby“ eines werdenden Webentwicklers sind. Das tut weh. Ich bin mir aber sicher, wer einsieht, dass die Kritik berechtigt ist, der wird ein guter Entwickler und aus den ungebetenen Antworten mehr mitnehmen, als aus den erbetenen. Weil diese Antworten aufgrund eines Blicks auf das große Ganze gegeben werden, den ein Anfänger oft nicht hat.

              Ich seh' hier immer mehr ein philosophisches Konzept. Das will ich aber, gerade als Anfänger vielleicht gar nicht (um ehrlich zu sein, das will ich unter Garantie nicht). Das ist ja auch meist an den Threads zu erkennen (wie hier auch;) - auf so tolle, weise, ungebetene Antworten gibts meistens keine Reaktion vom Fragesteller sondern nur Diskussionen von den immer gleichen Leuten, die so wie ich hier seit 15 Jahren oder mehr mitlesen. Der Fragesteller, der ist längst schon auf einer anderen Seite, dort, wo er erfährt, wie seine Bilder richtig positioniert werden.

              Diese nicht anzunehmen hat oft etwas mit der Unfähigkeit zu tun, die Erfahrung und das Wissen derjenigen anzuerkennen, die hier aktiv sind.

              Ich verstehe. Wer das nicht annehmen will, der ist einfach unfähig, die Genialität der hier Agierenden zu erkennen. Das ist ein interessantes pädagogisches Konzept. Das zu propagieren traut man sich wahrscheinlich nicht einmal bei der Mirkosaft-Hotline.

              Es ist cool wenn du auf deine Weise den Ratsuchenden zu Hilfe kommst. Es ist aber nicht nötig oder gar hilfreich die Art und Weise in Frage zu stellen, die andere aufgrund ihrer Erfahrungen für die richtige halten.

              Hast eh recht. Was reg' ich mich auf. Ich hab halt einfach Mitleid mit den Leuten, die ein technisches Problem haben und die dann eine Lebensweisheit als Antwort bekommen. Aber es ist auch schön zu wissen, daß es ein Forum gibt, in dem jeder zeigen kann, was er weiß. So ist wenigstens dem Antwortenden geholfen…

              1. @@Klawischnigg

                auf so tolle, weise, ungebetene Antworten gibts meistens keine Reaktion vom Fragesteller

                Das ist mir ziemlich Wurst.

                Wenn einer „tolle, weise, ungebetene Antworten“ dankbar aufnimmt, dann ist es das wert, sie zu geben, auch wenn zehn andere sie ignorieren.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. Hi there,

                  @@Klawischnigg

                  auf so tolle, weise, ungebetene Antworten gibts meistens keine Reaktion vom Fragesteller

                  Das ist mir ziemlich Wurst.

                  Wenn einer „tolle, weise, ungebetene Antworten“ dankbar aufnimmt, dann ist es das wert, sie zu geben, auch wenn zehn andere sie ignorieren.

                  Das erinnert mich an die Szene in diesem Werner Herzog Film, in dem jemand mit einem Glas Champagner in der Hand ausruft: ich trinke auf Fitzcarraldo, den Eroberer des Nutzlosen!

                  1. Hej Klawischnigg,

                    Das erinnert mich an die Szene in diesem Werner Herzog Film, in dem jemand mit einem Glas Champagner in der Hand ausruft: ich trinke auf Fitzcarraldo, den Eroberer des Nutzlosen!

                    Du liest entschieden zu viele Witze und schaust zu viele Filme! 😂

                    Marc

                    1. Hi there,

                      Das erinnert mich an die Szene in diesem Werner Herzog Film, in dem jemand mit einem Glas Champagner in der Hand ausruft: ich trinke auf Fitzcarraldo, den Eroberer des Nutzlosen!

                      Du liest entschieden zu viele Witze und schaust zu viele Filme! 😂

                      eigentlich gar nicht, ich war das letzte Mal 1993 in einem Kino, das war igendein Film mit Sauriern...😉 Aber die oben erwähnte Szene hab ich mir gemerkt, weil's auf so vieles passt (die war allerdings nicht in dem Film mit den Sauriern😉

                      1. Hej Klawischnigg,

                        Das erinnert mich an die Szene in diesem Werner Herzog Film, in dem jemand mit einem Glas Champagner in der Hand ausruft: ich trinke auf Fitzcarraldo, den Eroberer des Nutzlosen!

                        Du liest entschieden zu viele Witze und schaust zu viele Filme! 😂

                        eigentlich gar nicht, ich war das letzte Mal 1993 in einem Kino, das war igendein Film mit Sauriern...😉 Aber die oben erwähnte Szene hab ich mir gemerkt, weil's auf so vieles passt (die war allerdings nicht in dem Film mit den Sauriern😉

                        😉 Das Zitat ist ja auch cool.

                        Aus dem Film stammt einer von Kinskis berühmtesten Wutausbrüchen 😉

                        Vielleicht bin ich es jetzt der zu viele Filme guckt 😂

                        Marc

              2. Hej Klawischnigg,

                Danke für die ausführliche Antwort.

                Aber auch das kam vor. Wie das im Leben so ist, möchte man ein Problem mit möglichst wenig Aufwand lösen. Wer hier eine Frage stellt hat in der Regel zwei Probleme:

                1. eine Website zu erstellen, ohne ein HTML-CSS-Guru zu sein (dieses Problem ist den wenigsten bewusst)

                Ja, aber auch den wenigsten der hier Antwortenden ist bewusst, daß die meisten gar keine HTML-Gurus werden wollen...

                Deswegen habe ich geschrieben, was du hier nicht mehr zitierst. War dafür auch vielleicht zu viel, aber der Kern der Sache ist: ich wollte das auch nicht (und bin auch heute noch kein „Guru“).

                Vielleicht ist ein Fachforum auch der falsche Ort für Leute, die sich fachlich nicht für ein Thema interessieren?

                Ich frage nur, ich habe weder eine Antwort, noch nehme ich Deine Sicht auf die leichte Schulter! Es ist immer gut, mal eine fremde Perspektive einzunehmen.

                Aber ich gehe auch erst mal davon aus jemanden vor mir zu haben, der was über HTML, CSS, JS, PHP oder so wissen möchte.

                1. einen konkreten Design- oder Funktionswunsch, den man nicht selbst umsetzen kann und am liebsten von jemand anderem erledigt haben will

                ... sondern wie Du schreibst, ein konkretes Problem erledigt wissen wollen.

                Ja, am liebsten eine Bootstrap-Seite aus einem drübergestülpten schlecht gemachten Wordpress-Theme mit 50 installierten Plugins, den ganzen Code hier rein gepostet und so:

                „Da geht was nicht. Wer kann helfen?“

                Und wenn dann kein fertiger, hübsch eingerückter und in allen Browsern funktionierender responsiver Code kommt, ist das Forum halt sch... 😉

                Du weißt was ich meine. Du hast auch die Stelle nicht zitiert, wo ich sage, dass ich so einen Wunsch sogar legitim finde.

                Mein persönliches psychisches Problem ist, dass ich als Nutzer gerne ein gutes Web vorfinden möchte.

                Also trage ich meinen Teil dazu bei, Webseiten nutzbar zu machen. Da ich nicht alle Webseiten reparieren kann, versuche ich ein Bewusstsein für die Notwendigkeit zu schaffen, dass Webseiten, zugänglich, benutzerfreundlich, responsiv, schnell und hübsch sein müssen. Und zwar genau in dieser Reihenfolge.

                Sonst soll man eines der besseren Wordpress-Themes nehmen und die Finger von lassen. Oder es machen lassen.

                Natürlich kann ich niemanden zum Lernen bewegen, der dazu nicht bereit ist. Aber ich versuche durch meine Antworten diejenigen zu erreichen, die es anstreben, besser zu werden in Dingen die sie tun.

                Das mache ich auch an anderer Stelle, wie zum Beispiel in XING-Foren. Ich würde es nicht machen, wenn nicht immer wieder die Antwort käme, dass sich die Fragesteller mal die Tipps anschauen wollen.

                Natürlich machen das nicht einmal diejenigen alle, die das sagen. Aber auf die wenigen Interessierten kommt es an! - Auch Mitleser. Ich schreibe grundsätzlich nur für die Interessierten.

                In XING-Foren ist aus solchen Diskussionen übrigens schon der eine oder andere Auftrag entstanden — ohne dass das meine Absicht gewesen ist.

                Einige der alten Hasen hatten dabei manchmal einen ruppigen Ton am Leibe. Oft zu recht, denn den hat man sich in der Regel eingefangen, wenn man übertriebene Ansprüche hatte oder eigenes Engagement verweigerte.

                Ich würde einmal sagen, daß was Du hier "ruppigen" Ton nennst, wies zumindest bei einem der von Dir erwähnten leicht pathologische Züge auf. Ich kann mich an ein Posting von Cheatah erinnern, wo er einen Fragestellenden für irgendetwas wortwörtlich einsperren lassen wollte, das zeigt bei aller fachlichen Kompetenz schon gewisse charakterliche, um es einmal so zu formulieren, Defizite auf.

                Mir haben seine Ratschläge oft geholfen. Gerade bei konkreten Problemen. Ein Link auf eine Stelle, die eine Technik grundlegend erklärt beispielsweise ist eine Hilfe, dich ich ebenso zu schätzen weiß, wie Hinweise auf grundlegende konzeptionelle Probleme, die mich davor bewahren in eine Sackgasse zu rennen.

                Um das Bild von dem Fisch und der Angel mal wieder zu bemühen: Meine Angelausrüstung ist voller Gegenstände, die mir Cheatah geschenkt hat und ich finde es sehr schade, dass er hier nicht mehr postet!

                Die Einsicht auch Probleme beheben zu müssen, die man nicht beheben will, weil „es funktioniert“ (irgendwie in irgendeinem Browser weil Browser halt fehlertolerant sind und das jetzt mühsam ist und irgendwie alles so kompliziert ist) — diese Einsicht sich durchbeißen zu müssen ist wichtig. Nicht nur in Bezug auf Webseiten, sondern immer im Leben.

                Mag ja sein, aber wenn ich so wie der OP ein Bildpositionierungsproblem habe, dann pfeif' ich auf Lebensweisheiten.

                Du pickst dir einen Nebensatz raus, um vom Thema abzulenken…

                Was man macht, sollte man ordentlich machen. Ich würde sogar sagen, na sollte alles machen mit Zuneigung zu der Sache, der man es antut. Aber das ist ein Ideal und die Mühsal steht diesen ideal oft im Weg.

                Siehe meinen vorigen Satz.

                …und überliest meine dem real life geschuldete Relativierung. Absicht?

                Es sind die ständigen, ausdauernden und immer wieder in die Wunde gelegten Finger, die Antworten auf nicht gestellte Fragen, die das besondere dieses Forums ausmachen.

                Ja eh, deswegen sinken auch die Besucherzahlen seit Jahren

                Reine Spekulation.

                Ich glaube eher es ist das Fehlen von Leuten wie Cheatah. Es kommen auf viele Beiträge zu wenige Antworten. Was unter anderem daran liegt, dass es weniger Antwortende gibt.

                Auf jedenfall ist es der übermächtigen Konkurrenz von facebook-Gruppen, XING-Foren usw geschuldet.

                Vielleicht auch der Tatsache, dass einerseits Leute, die keine Gurus werden wollen mehr und mehr Baukästen zur Verfügung haben und andererseits Leute die schon wissen, dass sie etwas grundlegend verstehen wollen, direkt ganze Bücher lesen und wenig mit kleinen Problemen durch Foren tingeln.

                Aber auch das: reine Spekulation.

                Auch ich gebe diese Antworten, die oft Kritik an dem ersten „Baby“ eines werdenden Webentwicklers sind. Das tut weh. Ich bin mir aber sicher, wer einsieht, dass die Kritik berechtigt ist, der wird ein guter Entwickler und aus den ungebetenen Antworten mehr mitnehmen, als aus den erbetenen. Weil diese Antworten aufgrund eines Blicks auf das große Ganze gegeben werden, den ein Anfänger oft nicht hat.

                Ich seh' hier immer mehr ein philosophisches Konzept. Das will ich aber, gerade als Anfänger vielleicht gar nicht (um ehrlich zu sein, das will ich unter Garantie nicht).

                Das „philosophische Konzept“ gebe ich ja nicht als Antwort — jetzt stellste dich absichtlich ein bisschen dumm, oder? 😉

                Aber jeder Mensch handelt aufgrund seiner Erfahrungen, seines Wissens und seiner Überzeugungen. Wenn Du kurze Antworten gibst (bitte tu das!), dann machst du das ja auch aufgrund deiner Lebenseinstellung, deiner Weltanschauung oder meinetwegen deines philosophischen Konzeptes — ohne das jedesmal mitzuliefern.

                Das ist ja auch meist an den Threads zu erkennen (wie hier auch;) - auf so tolle, weise, ungebetene Antworten gibts meistens keine Reaktion vom Fragesteller sondern nur Diskussionen von den immer gleichen Leuten, die so wie ich hier seit 15 Jahren oder mehr mitlesen. Der Fragesteller, der ist längst schon auf einer anderen Seite, dort, wo er erfährt, wie seine Bilder richtig positioniert werden.

                Das haben ja auch einige versucht. Es ging aber nicht. Es war der Frage ja nicht einmal zu entnehmen, wo die Bilder hin sollen. Rückfragen wurden nicht beantwortet und ja, ich denke, der OP hat in einem anderen Forum längst eine Antwort gefunden, liest hier nicht mehr mit und steht bereits vor einem anderen Problem. Vielleicht sogar vor einem, das hier schon angesprochen wurde.

                Es wird ihm lästig sein, die Schriftgrafiken anzupassen und mit so manchem anderen umständlichen Ansatz den er gewählt hat!

                Hier bekommen Menschen Rückmeldungen zu Ihren Webseiten, die sie sonst niemals bekommen würden. So ziemlich das wertvollste überhaupt!

                Die hier gezeigte Webseite ist erst in der Entstehung. Ein ausgezeichneter Zeitpunkt um gleich von Anfang an Tipps zu kriegen, die spätere Mühen zu ersparen!

                Diese nicht anzunehmen hat oft etwas mit der Unfähigkeit zu tun, die Erfahrung und das Wissen derjenigen anzuerkennen, die hier aktiv sind.

                Ich verstehe. Wer das nicht annehmen will, der ist einfach unfähig, die Genialität der hier Agierenden zu erkennen.

                Wo habe ich "Genialität" geschrieben? Bitte füge diesen Teil meines Textes Deinem Zitat hinzu!

                Hatte ich überhaupt von anderen geschrieben? — Mir ist so, als hätte ich mich auf meine eigenen Erfahrungen bezogen? Und hatte ich geschrieben, dass ich genial bin? Oder dass ich mir meiner Fehlbarkeit durchaus bewusst bin?

                Offenbar weiß ich selber nicht mehr, was ich rede. Das liegt sicher da dran, dass ich so viele bin…

                Es ist cool wenn du auf deine Weise den Ratsuchenden zu Hilfe kommst. Es ist aber nicht nötig oder gar hilfreich die Art und Weise in Frage zu stellen, die andere aufgrund ihrer Erfahrungen für die richtige halten.

                Hast eh recht. Was reg' ich mich auf. Ich hab halt einfach Mitleid mit den Leuten, die ein technisches Problem haben und die dann eine Lebensweisheit als Antwort bekommen.

                Das liegt doch ganz allein an Dir! Statt diese philosophische Diskussion zu führen, gebe die Antworten, die du selber bekommen möchtest!

                Ich gebe Antworten, die ich selber gerne bekommen hätte. Was anderes kann ich nun mal nicht.

                Aber es ist auch schön zu wissen, daß es ein Forum gibt, in dem jeder zeigen kann, was er weiß. So ist wenigstens dem Antwortenden geholfen…

                Dann tu es doch einfach! Zeig in kurzen Antworten, was du alles weißt!

                Damit wirst du sicher diejenigen erreichen, an denen ich scheitere! Das ist mir vollkommen bewusst und ich habe nichts dagegen, dass du andere Ansichten vertrittst und anders antwortest. Wenn du nur kritisierst und selber keine besseren Antworten gibst, fände ich das aber ziemlich schwach.

                Es gibt nichts gutes, außer — na du weißt schon 😉

                Marc

                1. @@marctrix

                  dass Webseiten, zugänglich, benutzerfreundlich, responsiv, schnell und hübsch sein müssen. Und zwar genau in dieser Reihenfolge.

                  Ich würde schnell noch weiter vorne einordnen.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. Hej Gunnar,

                    @@marctrix

                    dass Webseiten, zugänglich, benutzerfreundlich, responsiv, schnell und hübsch sein müssen. Und zwar genau in dieser Reihenfolge.

                    Ich würde schnell noch weiter vorne einordnen.

                    Ja, fand ich schwer, am besten passt es wohl an die dritte Stelle, denn eigentlich ist die Reihenfolge so gedacht, dass die vorderen Einträge alle weiteren beinhalten. Ich kann mir beispielsweise keine langsame, zugängliche Webseite vorstellen, auch keine langsame benutzerfreundliche. Aber langsam und responsiv geht schon. Allerdings auch schnell und Desktop-only. Die beiden bedingen sich also nciht gegenseitig.

                    Responsiv und schnell sind aber beide Bestandteile von zugänglich und benutzerfreundlich…

                    Marc

                2. Hi there,

                  ... sondern wie Du schreibst, ein konkretes Problem erledigt wissen wollen.

                  Ja, am liebsten eine Bootstrap-Seite aus einem drübergestülpten schlecht gemachten Wordpress-Theme mit 50 installierten Plugins, den ganzen Code hier rein gepostet und so:

                  Ja grausam, aber so funktioniert das Web 2017 und so ist die Einstellung der Seitenbastler.

                  Und wenn dann kein fertiger, hübsch eingerückter und in allen Browsern funktionierender responsiver Code kommt, ist das Forum halt sch... 😉

                  Jein. Wir reden eigentlich drüber, daß da nicht nur "kein fertiger, hübsch eingerückter und in allen Browsern funktionierender responsiver Code kommt" (was ich ja durchaus vertretbar finde) sondern philosophische Betrachtungen zum Code an sich und vor allem Antworten auf Fragen, die überhaupt nicht gestellt wurden (was ich für ziemlich überflüssig halte)

                  Mein persönliches psychisches Problem ist, dass ich als Nutzer gerne ein gutes Web vorfinden möchte.

                  Ja ok, das versteh' ich, auch wenn mir der Zustand des Webs eher wurscht ist.

                  Also trage ich meinen Teil dazu bei, Webseiten nutzbar zu machen. Da ich nicht alle Webseiten reparieren kann, versuche ich ein Bewusstsein für die Notwendigkeit zu schaffen, dass Webseiten, zugänglich, benutzerfreundlich, responsiv, schnell und hübsch sein müssen. Und zwar genau in dieser Reihenfolge.

                  So kann und will halt nicht jeder durchs Leben gehen.

                  Einige der alten Hasen hatten dabei manchmal einen ruppigen Ton am Leibe. Oft zu recht, denn den hat man sich in der Regel eingefangen, wenn man übertriebene Ansprüche hatte oder eigenes Engagement verweigerte.

                  Ich würde einmal sagen, daß was Du hier "ruppigen" Ton nennst, wies zumindest bei einem der von Dir erwähnten leicht pathologische Züge auf. Ich kann mich an ein Posting von Cheatah erinnern, wo er einen Fragestellenden für irgendetwas wortwörtlich einsperren lassen wollte, das zeigt bei aller fachlichen Kompetenz schon gewisse charakterliche, um es einmal so zu formulieren, Defizite auf.

                  Mir haben seine Ratschläge oft geholfen.

                  Ja fein. Seine fachliche Kompetenz hab ich auch nicht in Zweifel gezogen. Hätte er sich nur darauf beschränkt.

                  Es sind die ständigen, ausdauernden und immer wieder in die Wunde gelegten Finger, die Antworten auf nicht gestellte Fragen, die das besondere dieses Forums ausmachen.

                  Ja eh, deswegen sinken auch die Besucherzahlen seit Jahren

                  Reine Spekulation.

                  Siehe vor allem die letzte Graphik

                  Ich glaube eher es ist das Fehlen von Leuten wie Cheatah.

                  Das darf ich jetzt in den Bereich der Spekulation verweisen. Zudem, wenn Du Dir den Thread im von Gunnar geposteten Link anschaust, wirst Du bemerken, daß von den damals Mitpostenden heute fast keiner mehr schreibt (und vermutlich auch nicht mehr liest)

                  Auf jedenfall ist es der übermächtigen Konkurrenz von facebook-Gruppen, XING-Foren usw geschuldet.

                  Kann ich nicht beurteilen, wenn ich soziale Kontakte suche, dann geh ich tarockieren oder mich mit Freunden betrinken. Ich hab' keinen Facebook-, Twitter- oder sonstigen Klickbuntiichmußüberalldabeisein-Account

                  Das „philosophische Konzept“ gebe ich ja nicht als Antwort — jetzt stellste dich absichtlich ein bisschen dumm, oder? 😉

                  Du nicht, und um Deine Antworten ist es im konkreten ja auch nicht gegangen.

                  Aber jeder Mensch handelt aufgrund seiner Erfahrungen, seines Wissens und seiner Überzeugungen. Wenn Du kurze Antworten gibst (bitte tu das!), dann machst du das ja auch aufgrund deiner Lebenseinstellung, deiner Weltanschauung oder meinetwegen deines philosophischen Konzeptes — ohne das jedesmal mitzuliefern.

                  eben, (vor allem der letzte Satz), beim Verfasser des für diesen jetzt schon leicht ausufernden Threads Verantwortlichen hab ich immer das Gefühl, daß er das mitliefern muß, und das, genau das, hab ich kritisiert.

                  Diese nicht anzunehmen hat oft etwas mit der Unfähigkeit zu tun, die Erfahrung und das Wissen derjenigen anzuerkennen, die hier aktiv sind.

                  Ich verstehe. Wer das nicht annehmen will, der ist einfach unfähig, die Genialität der hier Agierenden zu erkennen.

                  Wo habe ich "Genialität" geschrieben? Bitte füge diesen Teil meines Textes Deinem Zitat hinzu!

                  Nirgends. Ich habe mir die Freiheit erlaubt, "Erfahrung und Wissen" in dem eingeräumterweise plakativen Begriff "Genialität" zusammenzufassen.

                  Offenbar weiß ich selber nicht mehr, was ich rede. Das liegt sicher da dran, dass ich so viele bin…

                  Ja das versteh' ich;)

                  Damit wirst du sicher diejenigen erreichen, an denen ich scheitere!

                  Tja, ich hab hier gelegentlich Lösungen propagiert, die funktioniert haben, die haben dann aber oft Threads wie den vorliegenden ausgelöst, weil meine Lösung zu pragmatisch, zu unorthodox oder zu weit weg von der reinen Lehre war.

                  Wahrscheinlich ist mein Zugang einfach ein anderer. Hier gehts um Webseiten, nicht um Flugzeugsteuerungssoftware oder Kernkraftwerkbetriebssystem. Meine Kunden bezahlen mich für Ergebnisse, nicht für theoretische Überlegungen über meine Arbeitsweise oder akademische Kenntnis irgendwelcher semantischer Auszeichnungsregeln. Das funktioniert seit immerhin fast 35 Jahren so weit daß ich davon gut leben kann. Webseiten, die meinen Betrieb verlassen, müssen valide sein und funktionieren, aber das war's dann auch schon.

                  Es gibt nichts gutes, außer — na du weißt schon 😉

                  Dem stimm ich selbstredend zu...😉

  3. Hallo

    Probier mal folgendes CSS

    .mainheader {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: flex-end;
    }
    .mainheader img {
       min-width: 1px;
    }
    .mainheader nav {
       width: 100%;
       margin-top: 18px;
    }
    

    Gruss

    MrMurphy

    1. Wenn ich das so übernehme, werden die Bilder untereinander angezeigt.

      Edit: Ich habe wohl etwas falsch gemacht. Jetzt sind sie wieder in derselben Reihe, werden aber immer noch angezeigt wie vorher. Nur der Abstand nach unten wurde etwas grösser.

      1. Hallo Paludis,

        McMurphy hat versehentlich ein kleines h im mainHeader geschrieben. Macht man das groß, sind die Bilder nebeneinander und das Menü darunter.

        Das funktioniert wegen des flex-wrap und der 100% Angabe für das Menü, dadurch entsteht ein zweizeiliges Flex; in Zeile 1 sind die Bilder, in Zeile 2 das Menü.

        Aber - willst Du das? Ich hätte mir eher gedacht, Du willst sowas:

        *couture*                                       ***Anni*  
        * bild **                                       ** Anni*
        ********                                        ** Anni*
                                                        ** Anni*
        #### HOME ## ABOUT ## PORTFOLIO ## KONTAKT ###  ***Anni*
        

        Rolf

        --
        Dosen sind silbern
  4. Hej Paludis,

    bei mir sieht die Seite seltsam aus - ich iann gar nicht sehen, wodrum es geht…

    unverständliche Webseite mit hübschem Bild

    Marc

    1. Hallo marctrix,

      ist ja auch noch im Bau, gelle? Gestern war noch alles voller Lorem Ipsums. Keine Maßnahmen ergreifen solange das Maß noch nicht voll ist 😂

      Ich mag auch gar nicht über den komisch rumwandernden footer und das transparente Logo schimpfen. Ich gehe davon aus, dass Paludis daran noch arbeitet. Und wenn er dazu Vorschläge möchte, meldet er sich bestimmt...

      Rolf

      --
      Dosen sind silbern
      1. Hej Rolf,

        ist ja auch noch im Bau, gelle? Gestern war noch alles voller Lorem Ipsums. Keine Maßnahmen ergreifen solange das Maß noch nicht voll ist 😂

        Ich mag auch gar nicht über den komisch rumwandernden footer und das transparente Logo schimpfen. Ich gehe davon aus, dass Paludis daran noch arbeitet. Und wenn er dazu Vorschläge möchte, meldet er sich bestimmt...

        Ich dachte, es läge an meiner "komischen" Monitor-Auflösung, die Paludis ggfs. nicht bedacht hat (quadratisch) und wollte ihn nur auf einen möglicherweise noch nicht bemerkten Fehler hinweisen.

        Betrifft allerdings alle Seiten-Verhältnisse. Das hätte ich vorher mal prüfen sollen…

        Was nicht geht: Text als Bild einzusetzen. Dazu noch so (mit transparentem Hintergrund).

        Marc

        1. Vielen Dank für die vielen Antworten und regen Diskussionen. Die Seite ist tatsächlich noch im Bau und was noch erschwerend dazu kommt, ist dass ich noch ein kompletter Anfänger bin, darum sieht die seite so schrecklich aus. Ich werde heute noch den Beitrag überarbeiten, ich habe nämlich noch ein paar Fragen 😀

          1. Mein aktueller Code sieht so aus:

            <!DOCTYPE html>
            <html lang="de">
                <head>
            		<title>Couture Anni</title>
            		<meta charset="utf-8">
            		
                    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
                    <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
            		<meta name="viewport" content="width=device-width, initial-scale=1.0">
                </head>
                <body>
            		<header class="mainHeader">
            			<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
            			<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
            			
            			<nav>
            				
            				<ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Kontakt</a></li>
                            </ul>
            				
            		    </nav>
            			
            			
            			<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
            		</header>
            		
            		
                    
                    <footer class="mainFooter">
              			
                		<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
              			
            		</footer>
                    
                </body>
            
            
            </html>
            
            body {
                background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
                background-size: cover;
                height: 1000px;
                color: #000305;
                font-size: 100%;
                font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
                line-height: 1.5;
            }
            
            a {
                text-decoration: none;
            }
            
            a:link, a:visited {
                color: #CF5C3F;
            }
            
            a:hover, a:active {
                background-color: #CF5C3F;
                color: #fff;
            }
            
            .mainHeader {
                width: 90%;
                margin: 0 auto;
            }
            
            
            .mainHeader img.Logo {
                position: absolute;
                right: 5%;
                top: 54%;
                width: 15%;
                height: auto;
            }
            
            .mainHeader img.Margrit {
                position: absolute;
                right: 5%;
                top: 15%;
                width: 15%;
                height: auto;
            }
            
            
            .mainHeader nav {
                background-color: #9cb34f;
                
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
            }
            
            .mainHeader nav ul {
                list-style: none;
                overflow: auto;
                
            }
            
            .mainHeader nav ul li {
                text-align: center;
                float: left;
                width: 24%;
            }
            
            
            
            
            
            .mainHeader nav a:link, .mainHeader nav a:visited {
                color: #fff;
                background-color: #CF5C3F;
                
                
            }
            
            .mainHeader nav a:hover, mainHeader nav .active a:visited {
                background-color: #CF5C3F;
                text-shadow: none;
                
            }
            
            
            .mainHeader nav ul li a {
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                display: inline-block;
                height: 30px;
                padding: 10px 130px;
                
                
            }
            
            
            .mainHeader p {
                
            }
            
            
            .mainHeader p.inBearbeitung {
                position: absolute;
                top: 45%;
                left: 5%;
                font-size: 150%;
                color: #CF5C3F;
                font-size: 200%;
            }
            
            
            
            .mainFooter {
                position: absolute;
                bottom: 3%;
                width: 90%;
                left: 5%;
                right: 5%;
                height: 30px;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                background-color: #9cb34f;
            	display: table;
            
            }
            
            
            .mainFooter p {
                
                color: #fff;
                display: table-cell;
                vertical-align: middle;
                padding-left: 1%;
            }
            

            Das Problem ist:

            Der Text/die Überschriften sitzen nicht mittig in der Navigationsleiste und die Abstände/Aufteilung und Grösse der Hover-Effekte stimmt nicht wie man im Bild sehen kann.

            Die Seite ist bis jetzt nicht für andere Screen sizes als meine optimiert

            Und entschuldigt bitte, aber ich habe vor dem Erstellen dieser Antwort, den Beitrag bearbeiten Button nicht gefunden.

            1. Hallo

              Dann mach' ich mal den Anfang.

              <!DOCTYPE html>
              <html lang="de">
                  <head>
              		<title>Couture Anni</title>
              		<meta charset="utf-8">
              

              Setze <meta charset> vor jedes andere Head-Element. erstens muss es innerhalb der ersten 1024 Bytes des Dokuments stehen (was hier schon der Fall ist, mit einem längeren Titel aber fehlschlagen kann) und zweitens profitiert der Titel des Dokuments nicht von der Angabe.

              Also:

              <!DOCTYPE html>
              <html lang="de">
                  <head>
              		<meta charset="utf-8">
              		<title>Couture Anni</title>
              

              Weiter.

              			<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
              

              Wie kommt der kodierte Backslash (%5C = \) in den Dateinamen des Bildes?

              body {
                  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
              

              Die Richtung des Gradienten fehlt (to-bottom, to-top, to-left oder to-right) als erste Angabe in linear-gradient. Weiterhin fehlt die Ortsangabe, wo die jeweilige Farbangabe zutreffen soll. Und zu allerletzt sind beide vorhandenen Farbangaben identisch. So ergibt das keinen Sinn.

              body {
                  background-image: linear-gradient(to-bottom, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.8) 80%), url('img/tape-measure.jpg');
              

              In meinem Beispiel habe ich in einer Farbangabe zumindest den Wert der Transparenz verändert.

                  height: 1000px;
              

              Eine Höhenangabe ist in den meisten Fällen unnötig. Der Inhalt nimmt sich seinen Platz. Um eine Mindesthöhe festzulegen – z.B. wegen eines Hintergrundbildes – sollte man eine Mindesthöhe festlegen (min-height).

              .mainHeader nav {
                  border-radius: 5px;
                  -moz-border-radius: 5px;
                  -webkit-border-radius: 5px;
              }
              

              Man notiert solche Blöcke vom Speziellen zum Allgemeinen, eventuell mit vorangestelltem Fallback für gänzlich unfähige Browser, was allerdings speziell bei border-radius entfällt.

              Richtig herum wäre es also, zuerst die Angaben mit den Vendor-Präfixen (hier: -moz-, -webkit-) zu notieren, von denen die betroffenen Browser die für sie zutreffende Angabe benutzen, und hinten dran die allgemeine Angabe, die in den fähigen Browsern benutzt wird bzw. dort die Angabe mit Vendor-Präfix überschreibt.

              .mainHeader nav {
                  -moz-border-radius: 5px;
                  -webkit-border-radius: 5px;
                  border-radius: 5px;
              }
              

              Allerdings sind in diesemm Fall (border-radius) die Angaben mit Präfix gänzlich irrelevant. Der letzte Firefox, der -moz-border-radius brauchte und konnte, war der Firefox 3.6 aus dem Jahre 2010. Die letzten Browser, die den -webkit--Präfix benötigten waren Safari 4 (OS-X), Safari 3.2 auf iOS, Chrome 4 und der bei Android 2.1 mitgelieferte Stock-Browser. Keiner davon hat heutzutage auch nur die geringste Relevanz.

              Es bleibt also folgende Angabe übrig.

              .mainHeader nav {
                  border-radius: 5px;
              }
              

              Bei den anderen rundgefeilten Blöcken ist analog zu verfahren.

              Der Text/die Überschriften sitzen nicht mittig in der Navigationsleiste …

              Doch, doch, das tun sie. Erstens sind alle Links zur Mitte des Containers hin ausgerichtet und zweitens sitzen die Linktexte jeweils in der Mitte des Links.

              … und die Abstände/Aufteilung und Grösse der Hover-Effekte stimmt nicht wie man im Bild sehen kann.

              Auf einem nichtbeweglichen Bild sind Hovereffekte wohl eher nicht zu sehen. Eine Seite mit einem funktionierenden Beispiel mit dem beschriebenen Fehler wäre jetzt angebracht, um das tatsächliche Verhalten studieren zu können.

              Tschö, Auge

              --
              Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
              Toller Dampf voraus von Terry Pratchett
              1. @@Auge

                <!DOCTYPE html>
                <html lang="de">
                    <head>
                		<title>Couture Anni</title>
                		<meta charset="utf-8">
                

                Setze <meta charset> vor jedes andere Head-Element. erstens muss es innerhalb der ersten 1024 Bytes des Dokuments stehen (was hier schon der Fall ist, mit einem längeren Titel aber fehlschlagen kann)

                Das ist korrekt. Wenngleich so lange Seitentitel kaum vorkommen sollten. Das Problem sind eher noch andere Angaben im head, die die Zeichencodierungsangabe außerhalb der ersten 1024 Bytes rutschen lassen könnten.

                und zweitens profitiert der Titel des Dokuments nicht von der Angabe.

                Das ist falsch. Der Browser bestimmt zuerst die Zeichencodierung, dann interpretiert es den Inhalt gemäß dieser – auch den vor deren Angabe.

                Ansonsten dürfte

                <!DOCTYPE html>
                <html id="😀">
                	<head>
                		<meta charset="utf-8"/>
                		<style>#😀 { background: yellow }</style>
                

                nicht funktionieren; das tut’s aber.

                body {
                    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
                

                Die Richtung des Gradienten fehlt (to-bottom, to-top, to-left oder to-right) als erste Angabe in linear-gradient.

                Auch das ist nicht richtig. “It may be omitted; if so, it defaults to to bottom.” [Spec]

                Weiterhin fehlt die Ortsangabe, wo die jeweilige Farbangabe zutreffen soll.

                Auch das stimmt nicht. “While every color stop conceptually has a position, the position can be omitted in the syntax, in which case it gets automatically filled in by the user agent […] If the first color stop does not have a position, set its position to 0%. If the last color stop does not have a position, set its position to 100%.” [Spec]

                Und zu allerletzt sind beide vorhandenen Farbangaben identisch. So ergibt das keinen Sinn.

                Man kann eine so erzeugte einfarbige Fläche durch background-size auf einen Bereich beschränken; background-color hingegen füllt das gesamte Element.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. @@Gunnar Bittersmann

                  Die Richtung des Gradienten fehlt (to-bottom, to-top, to-left oder to-right) als erste Angabe in linear-gradient.

                  Auch das ist nicht richtig.

                  Außerdem: to bottom, to top, to left, to right – Leerzeichen, nicht '-'.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            2. Hallo Paludis,

              dass deine Menütexte nicht vertikal zentriert sind, liegt an der height-Angabe für die a Elemente. Guck es Dir in den Browser-Entwicklungswerkzeugen an. Die a sind vertikal zentriert, der Text ist in den a bündig oben und wirkt im Menü deshalb zu hoch. Verwende line-height:150% oder so, statt height.

              Du solltest die a Elemente auch nicht mit padding auf die gewünschte Breite bringen. Die a selbst sind bei Dir variabel breit - gemäß ihrem Text - und das führt zu den Lücken. Gib ihnen padding:10px 0 (damit du die Höhe aufpolsterst) und width:90% (damit sie auf Breite kommen und einen Abstand haben). Oder width:100%, wenn Du keinen Abstand willst :)

              Wenn der erste Menüpunkt nicht ganz links stehen soll, gib dem ul ein entsprechendes padding. Hier solltest Du ohnehin noch die margins/paddings vom Browser entfernen, also am ul sowas wie margin:0; padding:0 0 0 1em;

              Bei den Farben musst Du nochmal sortieren. Die :hover Effekte sieht man nicht, weil die Farben immer gleich sind.

              Ja, und dann musst Du entscheiden, wie das Menü sich bei Breitenänderungen des Viewport verhalten soll.

              • Menüpunkte sollen gleich breit bleiben und als Einheit zentriert werden. Wird der Viewport zu schmal, wird auf ein anderes Layout umgeschaltet (was Du noch festlegen musst)
              • Menüpunkte sollen gleich breit bleiben und am linken Rand des nav bleiben. Wird der Viewport zu schmal... siehe oben
              • Menüpunkte sollen ihre Breite proportional zur Viewportbreite ändern. Wird der Viewport zu schmal... siehe oben

              Deine aktuelle Lösung tut letzteres. Ob das so ist, weil Du es genau so willst, oder weil Du keine andere Möglichkeit gesehen hast, weiß ich nicht. Möglichkeiten gibt's schon.

              Rolf

              --
              Dosen sind silbern
            3. Hej Paludis,

              Das Problem ist:

              Der Text/die Überschriften sitzen nicht mittig in der Navigationsleiste und die Abstände/Aufteilung und Grösse der Hover-Effekte stimmt nicht wie man im Bild sehen kann.

              Tipp: fang immer beim innersten Element an, bei der untersten Verschachtelungsebene.

              In Deinem Layout hast du ja eine Vorstellung davon, wie groß die Buttons sein sollen.

              Zunächst die Höhe: die erreichst du durch hinzufügen von padding (Innenabständen) oben und unten.

              Die Elternelemente li werden niemals kleiner sein (wenn du das nicht explizit angibst).

              Ein wenig komplizierter wird es, die Links so zu gestalten, dass sie die gewünschte Breite haben (obwohl der code dafür einfach ist, braucht es eine Vorüberlegung):

              Wenn du möchtest, dass die Links alle zusammen die gesamte Breite ausfüllen und die Links alle gleich breit sind, möchtest du vielleicht 100% durch die Anzahl der Links teilen. Das funktioniert zwar, hat aber allerhand Nachteile:

              1. Du möchtest Rahmen und Abstände innen und außen, die du in Deine Berechnung mit einbeziehen musst, wenn du Prozente und em-Angaben mischst musst du Calc verwenden - ist kompliziert
              2. Kommt ein weiterer Menüpunkt hinzu oder fällt einer weg, fängst du mit dem ganzen Mist wieder an

              Also sorge dafür, dass Dein Layout-Wunsch auch ohne explizite Breitenangaben erfüllt wird, indem du eine Layout-Methode wählst, bei der der Browser eigenständig für gleich breite Kästen sorgt.

              Flexbox oder Grid eignen sich hierfür. Welches du präferierst hängt vom gewünschten Verhalten ab. Auch CSS-LAyout-Tabellen können hier hilfreich sein. In jedem Fall musst du mit media-Queries für ein vernünftiges Aussehen auf kleinen und großen Geräten sorgen.

              Der wichtigste Punkt ist aber: den Links kannst du nur eine Breite mitgeben, die sich auf das Elternelement li bezieht - was dir nichts nützt. (Es sei denn: Wenn du mit vw als Einheiten rechnest, aber dann bist du wieder bei Punkt 1 der oben beschriebenen Probleme).

              Also müssen die li die Breite vorgeben — wir gehen also vom niedrigsten Element eine Ebene höher, wenn wir nicht mehr weiterkommen.

              Die li haben einen schönen Vorteil: sie befinden sich in einer ul - hier kannst du später bequem die gewünschte Gesamtbreite des Konstrukts definieren. Aber bleiben wir erst einmal bei den Listeneinträgen:

              Das Standard-CSS-Box-Modell bezieht Angaben zur Ausdehnung der Elemente auf deren Inhalt, Innenabstand und Rahmen werden zusätzlich hinzugefügt. Das macht die Berechnung so kompliziert wie in 1. beschrieben. Abhilfe schafft box-sizing: border-box; — das sorgt dafür, dass sich Angaben wie Breite und Höhe auf das Element inklusive Innenabständen und Rahmen bezieht.

              Ich gebe das inzwischen für alle Elemente sowie CSS-generierten Content folgendermaßen standardmäßig an:

              *, *::before, *::after { box-sizing: border-box; }
              

              Nun kannst du getrost eine Breite in Prozent angeben.

              Bei fünf Elementen also

              li {
                  width: 20%;
              }
              

              Da du einen Abstand zwischen den Links möchtest, kannst du mit ein wenig padding im li dafür sorgen, dass sich die Links nicht berühren. Du möchtest den Abstand nur zwischen den Links. Also beispielsweise am Ende (rechts) von jedem li — außer am letzten.

              Hier hilft dir der not-Selektor:

              li:not(:last-child) {
                  padding-right: .125rem;
              }
              

              Jetzt haben die li die richtige Breite und sie sorgen dafür, dass die beinhalteten Links nicht aneinander stoßen können.

              Bleibt nur noch ein Problem: wie dafür sorgen, dass die Links die gesamte Breite ausfüllen? Inline-Elemente kann man nicht breiter ziehen. Inline-Block schon. Ein width: 100%; würde normalerweise wieder zu Problem 1 zu führen, was aber durch box-sizing: border-box für alle Elemente gelöst ist. Es geht aber noch einfacher: with: auto sorgt dafür dass ein Element die gesamte Breite einnimmt, ohne breiter als das Elternelement zu werden. Ud das schöne: es gibt eine Darstellungsart, die das standardmäßig tut. Nicht inline-block, sondern block.

              Der gesamte Code lautet also:

              *, *::before, *::after { box-sizing: border-box; }
              
              li {
                  width: 20%;
              }
              li:not(:last-child) {
                  padding-right: .125rem;
              }
              a {
                  display: block;
                  padding: .75em .25em; /* erster Wert: oben/unten - zweiter Wert: rechts/links */
              }
              

              CSS Grid und flexbox ließen sich für dieses Problem nicht kürzer schreiben und flexbox musst du die eigentliche Stärke verbieten, den Raum dynamisch und anteilmäßig auszufüllen, wenn du gleich breite Buttons haben möchtest. Bei unterschiedlich breiten Buttons dagegen würde ich flexbox bevorzugen. Vor allem wenn Umbrechen erlaubt ist (hängt von den Designvorgaben ab).

              Aber mit der gezeigten Lösung kommst du erst mal mit den dir bekannten Techniken und Eigenschaften hin. Eine schnelle und einfache Lösung für das konkrete Problem. Auf Dauer solltest du dich natürlich auch mit flexbox und CSS-Grid auseinandersetzen.

              Die Seite ist bis jetzt nicht für andere Screen sizes als meine optimiert

              Du solltest mit der Darstellung für die kleinsten Displays anfangen! Das wird dir die Arbeit sehr erleichtern!

              Marc

              1. @@marctrix

                Flexbox oder Grid eignen sich hierfür. […] In jedem Fall musst du mit media-Queries für ein vernünftiges Aussehen auf kleinen und großen Geräten sorgen.

                Nein. Weder bei Flexbox noch bei Grid braucht man Media-Queries. Das ist ja das Gute.

                Dann aber wohl nicht li { width: 20% }, sondern Mindest- und Maximalbreite in em angeben.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. Hej Gunnar,

                  @@marctrix

                  Flexbox oder Grid eignen sich hierfür. […] In jedem Fall musst du mit media-Queries für ein vernünftiges Aussehen auf kleinen und großen Geräten sorgen.

                  Nein. Weder bei Flexbox noch bei Grid braucht man Media-Queries. Das ist ja das Gute.

                  Dann aber wohl nicht li { width: 20% }, sondern Mindest- und Maximalbreite in em angeben.

                  Ich kann mir noch nicht vorstellen, wie das gehen soll - dadurch lassen sich gleich breite Button nicht sicherstellen…?!?

                  Zumal der benötigte Code länger sein dürfte. Ich vervollständige das Beispiel mal:

                  @media screen and (min-width: $sinnvollecontentabhängigeAngabe) {
                    li {
                      width: 20%;
                    }
                    li:not(:last-child) {
                      padding-right: .125rem;
                    }
                    a {
                      display: block;
                      padding: .75em .25em; /* erster Wert: oben/unten - zweiter Wert: rechts/links */
                    }
                  }
                  

                  Marc

                  1. @@marctrix

                    Ich kann mir noch nicht vorstellen, wie das gehen soll

                    Look Ma, no media queries!

                    LLAP 🖖

                    --
                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                    1. Vielen Dank, Eure Antworten sind mir aber ehrlich gesagt etwas zu kompliziert. Ich bin noch kompletter Anfänger.

                      Jedenfalls habe ich es so gelöst:

                      .mainHeader nav {
                          background-color: #9cb34f;
                          height: 40px;
                          border-radius: 5px;
                      }
                      
                      .mainHeader nav ul {
                          list-style: none;
                          
                      }
                      
                      .mainHeader nav ul li {
                        text-align: center;
                        display: inline-block;
                        width: 23%;
                        position: relative;
                        top: 8px;
                      }
                      
                      
                      .mainHeader nav a:link, .mainHeader nav a:visited {
                          color: #fff;
                          
                          
                      }
                      
                      .mainHeader nav a:hover,
                      .mainHeader nav a.Home:link,
                      .mainHeader nav a.Home:visited {
                        background-color: #CF5C3F;
                        text-shadow: none;
                        padding: 8px 125px;
                      }
                      
                      
                      .mainHeader nav ul li a {
                          border-radius: 5px;
                          
                          
                      }
                      

                      Korrigiert bitte alles, was falsch ist, wenn Ihr die Zeit dazu habt.

                      Ausserdem habe ich ein anderes Problem. Und zwar habe ich eine Media Query für das iPhone 6+ hinzugefügt. Allerdings sieht das dann so aus:

                      Code:

                      @media screen
                          and (device-width: 414px)
                          and (orientation: portrait) {
                              body {
                                  font-size: 85%;
                              }
                      
                      
                              .mainHeader img.Logo {
                                  right: 5%;
                                  top: 42%;
                                  width: 25%;
                              }
                      
                              .mainHeader img.Margrit {
                                  right: 5%;
                                  top: 35%;
                                  width: 25%;
                              }
                      
                      
                              .mainHeader nav {
                                  height: 120px;
                              }
                      
                              .mainHeader nav ul li {
                                display: block;
                                width: 100%;
                                top: 10px;
                              }
                      
                              .mainHeader nav a:hover,
                              .mainHeader nav a.Home:link,
                              .mainHeader nav a.Home:visited {
                                padding: 10px 150px;
                              }
                      
                      
                              .mainHeader p.inBearbeitung {
                                  top: 40%;
                                  left: 5%;
                                  font-size: 150%;
                              }
                      
                      
                      
                              .mainFooter {
                                  left: 5%;
                                  right: 5%;
                                  height: 20px;
                      
                              }
                      }
                      
                      1. Hej Paludis,

                        Vielen Dank, Eure Antworten sind mir aber ehrlich gesagt etwas zu kompliziert. Ich bin noch kompletter Anfänger.

                        Das verstehe ich ehrlich gesagt nicht. Meine Lösung und die von Gunnar musst du 1. nur kopieren und ich habe die auch noch sehr ausführlich erklärt. Wo hast du denn ein Verständnis-Problem?

                        Korrigiert bitte alles, was falsch ist, wenn Ihr die Zeit dazu habt.

                        Einfacher wäre, du würdest die fünf bis acht von mir gerosteten Zeilen übernehmen…

                        Ausserdem habe ich ein anderes Problem. Und zwar habe ich eine Media Query für das iPhone 6+ hinzugefügt. Allerdings sieht das dann so aus:

                        Code:

                        @media screen
                            and (device-width: 414px)
                            and (orientation: portrait) {
                        

                        Und ich sach noch, mach mobile first

                        Tut mir leid, aber bei Desktop first bin ich raus. Das ist mir zu aufwändig.

                        Auch hier: meine Lösung und die von Gunnar funktionieren doch?!?

                        Marc

                    2. Hej Gunnar,

                      @@marctrix

                      Ich kann mir noch nicht vorstellen, wie das gehen soll

                      Look Ma, no media queries!

                      Die Buttons sind nicht gleich groß. Schien mir im konkreten Fall eine Vorgabe zu sein.

                      Marc

                      1. @@marctrix

                        Look Ma, no media queries!

                        Die Buttons sind nicht gleich groß. Schien mir im konkreten Fall eine Vorgabe zu sein.

                        Welche genau nicht?

                        Bei Flexbox sind natürlich die Buttons jeweils einer Zeile gleich groß.

                        LLAP 🖖

                        --
                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                        1. Hej Gunnar,

                          @@marctrix

                          Look Ma, no media queries!

                          Die Buttons sind nicht gleich groß. Schien mir im konkreten Fall eine Vorgabe zu sein.

                          Welche genau nicht?

                          Bei Flexbox sind natürlich die Buttons jeweils einer Zeile gleich groß.

                          Willst du mir hier jetzt flexbox erklären? — Nicht nötig! 😂

                          Wenn ich das für einen gangbaren Weg gehalten hätte, hätte ich das schon vorgeschlagen. Ich hatte auch schon angesprochen, dass sowohl Flexbox, als auch Grid noch Optionen sein könnten. Es ist einfach schwierig von einem defekten Layout auf den gewünschten Endzustand zu schließen.

                          Einer der Gründe für meinen Code war übrigens, dass die mit den Mitteln umsetzbar ist, die Paludis bereits beherrscht. Ich bin kein Freund davon, eine Lösung zu präsentieren, die der Fragende nicht versteht. Du eigentlich auch nicht. 😉

                          Du hast mal wieder die Unterstützung für IE und Edge vergessen. Dann wird Dein Code deutlicher komplexer als ein media-query

                          Bei Deinem CSS-Grid bleiben am Ende Lücken (so was habe ich noch kein einziges Mal von einem Layouter als Design-Wunsch für eine Navigation bekommen) und wenn du die ohne media-query auffüllen willst, sieht es aus wie die flexbox-Lösung…

                          Marc

                          1. @@marctrix

                            Einer der Gründe für meinen Code war übrigens, dass die mit den Mitteln umsetzbar ist, die Paludis bereits beherrscht.

                            Wenn sie/er die Mittel beherrschen würde, gäbe es diesen Thread nicht. 😉

                            Ich bin kein Freund davon, eine Lösung zu präsentieren, die der Fragende nicht versteht.

                            Das Gute an Grid ist ja, dass es recht leicht verständlich ist. Leichter als manche Hacks, die man früher™ brauchte.

                            Du hast mal wieder die Unterstützung für IE und Edge vergessen.

                            Hach, ist der Edge 16 immer noch nicht raus‽ Was ist IE? 😉

                            Bei Deinem CSS-Grid bleiben am Ende Lücken

                            Die habe ich extra reingebaut, damit man die sieht, wo ein ähm „Button“[sic!] aufhört und der nächste anfängt. Einfach das padding bzw. grid-gap rausnehmen.

                            LLAP 🖖

                            --
                            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                            1. @@Gunnar Bittersmann

                              Bei Deinem CSS-Grid bleiben am Ende Lücken

                              Die habe ich extra reingebaut, damit man die sieht, wo ein ähm „Button“[sic!] aufhört und der nächste anfängt. Einfach das padding bzw. grid-gap rausnehmen.

                              Dann aber a nicht auf display: block setzen und stattdessen li den Hintergrund geben.

                              Das stiftet sonst Verwirrung, wenn man zwischen die Linktitel clicken kann und trotzdem irgendwohin kommt.

                              LLAP 🖖

                              --
                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                            2. Hej Gunnar,

                              @@marctrix

                              Ich bin kein Freund davon, eine Lösung zu präsentieren, die der Fragende nicht versteht.

                              Das Gute an Grid ist ja, dass es recht leicht verständlich ist. Leichter als manche Hacks, die man früher™ brauchte.

                              Sehe ich anders. Wenn man ie und Edge bis 15 unterstützt.

                              Du hast mal wieder die Unterstützung für IE und Edge vergessen.

                              Hach, ist der Edge 16 immer noch nicht raus‽ Was ist IE? 😉

                              Bei Deinem CSS-Grid bleiben am Ende Lücken

                              Die habe ich extra reingebaut, damit man die sieht, wo ein ähm „Button“[sic!] aufhört und der nächste anfängt. Einfach das padding bzw. grid-gap rausnehmen.

                              Das Ende des Grids ist nicht zwischen den „Button“ 😉

                              Wie gesagt gehe ich davon aus, dass auf dem Handy fünf Schaltflächen untereinander stehen sollten und sobald Platz genug dafür da ist, fünf gleich große Button nebeneinander, die die gesamte Breite ausfüllen. Das geben deine Beispiele nicht her.

                              Ich weise aber nochmals drauf hin, dass ich das nur vermuten kann, da meine Glaskugel gerade erkältet ist…

                              Marc

                              1. Ich habe versucht, eure Lösungen umzusetzen, habe aber wohl etwas falsch gemacht, denn es wird nur korrekt angezeigt, wenn ich mit der Maus über den Buttons bin. Gehe ich mit der Maus weg, rutscht der Text des Buttons wieder links runter. Ausserdem ist am Beispiel von "Home" zu sehen, dass es wieder nicht schön mittig im Balken sitzt.

                                *, *::before, *::after { box-sizing: border-box; }
                                
                                
                                
                                
                                body {
                                    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
                                    background-size: cover;
                                    min-height: 1000px;
                                    color: #000305;
                                    font-size: 100%;
                                    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
                                    line-height: 1.5;
                                }
                                
                                a {
                                    text-decoration: none;
                                }
                                
                                a:link, a:visited {
                                    color: #CF5C3F;
                                }
                                
                                a:hover, a:active {
                                    background-color: #CF5C3F;
                                    color: #fff;
                                }
                                
                                .mainHeader {
                                    width: 90%;
                                    margin: 0 auto;
                                }
                                
                                
                                .mainHeader img.Logo {
                                    position: absolute;
                                    right: 5%;
                                    top: 57%;
                                    width: 15%;
                                    height: auto;
                                }
                                
                                .mainHeader img.Margrit {
                                    position: absolute;
                                    right: 5%;
                                    top: 15%;
                                    width: 15%;
                                    height: auto;
                                }
                                
                                
                                .mainHeader nav {
                                    background-color: #9cb34f;
                                    height: 40px;
                                    border-radius: 5px;
                                }
                                
                                .mainHeader nav ul {
                                    list-style: none;
                                    margin: 2em;
                                    padding: 0;
                                    
                                }
                                
                                
                                nav:first-of-type ul {
                                    display: flex;
                                    flex-flow: row wrap;
                                }
                                
                                
                                nav:first-of-type li {
                                    flex: 1 0 15em;
                                    padding: 0.125em;
                                }
                                
                                
                                nav a {
                                    display: block;
                                    padding: 1em;
                                    text-decoration: inherit;
                                }
                                
                                
                                .mainHeader nav a:link, .mainHeader nav a:visited {
                                    color: #fff;
                                    
                                    
                                }
                                
                                .mainHeader nav a:hover,
                                .mainHeader nav a.Home:link,
                                .mainHeader nav a.Home:visited {
                                  background-color: #CF5C3F;
                                  text-shadow: none;
                                  padding: 8px 125px;
                                }
                                
                                
                                .mainHeader nav ul li a {
                                    border-radius: 5px;
                                    
                                    
                                }
                                
                                
                                .mainHeader p.inBearbeitung {
                                    position: absolute;
                                    top: 40%;
                                    left: 5%;
                                    font-size: 175%;
                                }
                                
                                
                                
                                .mainFooter {
                                    position: absolute;
                                    bottom: 3%;
                                    width: 90%;
                                    left: 5%;
                                    right: 5%;
                                    height: 20px;
                                    border-radius: 5px;
                                    background-color: #9cb34f;
                                	display: table;
                                    
                                }
                                
                                
                                .mainFooter p {
                                    
                                    color: #fff;
                                    display: table-cell;
                                    vertical-align: middle;
                                    padding-left: 1%;
                                }
                                
                                1. Hej Paludis,

                                  Ich habe versucht, eure Lösungen umzusetzen, habe aber wohl etwas falsch gemacht, denn es wird nur korrekt angezeigt, wenn ich mit der Maus über den Buttons bin. Gehe ich mit der Maus weg, rutscht der Text des Buttons wieder links runter. Ausserdem ist am Beispiel von "Home" zu sehen, dass es wieder nicht schön mittig im Balken sitzt.

                                  Ja, du änderst das padding beim überfahren mit der Maus.

                                  Dein eigentliches Problem ist aber, dass du deine Fehler kaum finden wirst, wenn du die Angaben für die Links im Menü nicht nur über das gesamte Stylesheet verteilst, sondern es dann auch noch zu Wechselwirkungen mit anderen Angaben kommt.

                                  Da du dich für die Lösung von @Gunnar Bittersmann entschieden hast, würde ich dir raten, erstelle erst mal eine neue HTML-Datei und kopiere nur den Code für die Navigation hinein.

                                  Dann funktioniert die schon mal.

                                  Danach fügst dann die wenigen Styles hinzu, die für die schon vorhandenen anderen formatierten Elemente nötig sind. Gehe dabei schritt für schritt vor und überprüfe das Ergebnis nach jeder Änderung. Schau dir die Seite so lange an, bis du auch wirklich siehst, was das neu eingefügte css machst. Nur so verstehst du, welche Angaben welche Wirkung haben.

                                  Verwerfe sofort, was nicht wie gewünscht funktioniert und gehe wieder schrittweise einen neuen Weg. Gerne immer wieder zwischendurch nachfragen. Dein Dokument ist noch nicht sehr komplex, aber schon so unaufgeräumt durch die vielen Fehlversuche und Korrekturen, dass einfach zu viel zusammenwirkt.

                                  Übrigens gib der ul keine Höhe. Die bekommt sie automatisch von dem Inhalt.

                                  1. Ok, ich habe es nun soweit hingekriegt, dass es mir gefällt. Aber wie kriege i h genau den Footer nach unten?

                                    *, *::before, *::after { box-sizing: border-box; }
                                    
                                    
                                    
                                    body {
                                        background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
                                        background-size: cover;
                                        min-height: 1500px;
                                        color: #000305;
                                        font-size: 100%;
                                        font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
                                        line-height: 1.5;
                                    }
                                    
                                    
                                    
                                    .mainHeader {
                                        width: 90%;
                                        margin: 0 auto;
                                    }
                                    
                                    
                                    
                                    .mainHeader nav {
                                        background-color: #9cb34f;
                                        border-radius: 5px;
                                    }
                                    
                                    .mainHeader nav ul {
                                        list-style: none;
                                        margin: 2em;
                                        padding: 0;
                                        
                                    }
                                    
                                    
                                    nav:first-of-type ul {
                                        display: flex;
                                        flex-flow: row wrap;
                                    }
                                    
                                    
                                    nav:first-of-type li {
                                        flex: 1 0 15em;
                                        padding: 0.125em;
                                    }
                                    
                                    
                                    nav a {
                                        display: block;
                                        padding: 1em;
                                        text-decoration: inherit;
                                    }
                                    
                                    
                                    .mainHeader nav a:link, .mainHeader nav a:visited {
                                        color: #fff;
                                        
                                        
                                    }
                                    
                                    .mainHeader nav a:hover,
                                    .mainHeader nav a.Home:link,
                                    .mainHeader nav a.Home:visited {
                                      background-color: #CF5C3F;
                                      text-shadow: none;
                                    }
                                    
                                    
                                    .mainHeader nav ul li a {
                                        border-radius: 5px;
                                        
                                        
                                    }
                                    
                                    
                                    
                                    .mainHeader img.Margrit {
                                        width: 20%;
                                        position: absolute;
                                        right: 5%;
                                        top: 20%;
                                    }
                                    
                                    
                                    .mainHeader img.Logo {
                                        width: 20%;
                                        position: absolute;
                                        right: 5%;
                                        top: 78%;
                                    }
                                    
                                    
                                    
                                    .mainHeader p.inBearbeitung {
                                        position: absolute;
                                        top: 40%;
                                        left: 5%;
                                        font-size: 175%;
                                    }
                                    
                                    
                                    
                                    .mainFooter {
                                        width: 90%;
                                        border-radius: 5px;
                                        background-color: #9cb34f;
                                    	display: table;
                                        margin: 0 auto;
                                    }
                                    
                                    
                                    .mainFooter p {
                                        
                                        color: #fff;
                                        display: table-cell;
                                        vertical-align: middle;
                                        padding-left: 1%;
                                    }
                                    
                                    1. Mit position: absolute; will das nicht so recht klappen. Der Footer soll nämlich zu sehen sein, wenn ich nach unten scrolle. Also er soll erst dann sichtbar sein.

                                      1. Hej Paludis,

                                        Mit position: absolute; will das nicht so recht klappen. Der Footer soll nämlich zu sehen sein, wenn ich nach unten scrolle. Also er soll erst dann sichtbar sein.

                                        Wahrscheinlich wird sich das Problem von alleine lösen, wenn du die Texte und Bilder erst mal drin hast. Die werden den Footer ja automatisch „runterdrücken“

                                        Marc

                                        1. Das Problem hat sich tatsächlich gelöst. Nun noch eine Frage: Wie optimiere ich meine Seite am besten, dass sie auch wirklich responsive ist? Mit media queries basierend auf meinem Content?

                                          1. Hej Paludis,

                                            Das Problem hat sich tatsächlich gelöst. Nun noch eine Frage: Wie optimiere ich meine Seite am besten, dass sie auch wirklich responsive ist? Mit media queries basierend auf meinem Content?

                                            Ja. Genau so!

                                            Weißt du denn, was das bedeutet? 😉

                                            Marc

                                            PS: mobile first!!!

                                            1. Ja. Genau so!

                                              Weißt du denn, was das bedeutet? 😉

                                              Marc

                                              Nein, nicht so ganz.

                                              PS: mobile first!!!

                                              Danke, ich werd' daran denken.

                                              1. Ich habe jetzt schon einige queries hinzugefügt, aber auf meinem iPhone 6S+ werden in landscape ein paar Dinge falsch angezeigt, obwohl unten stehende query drin ist:

                                                @media screen
                                                    and (min-device-width: 730px)
                                                    and (orientation: landscape) {
                                                        
                                                		.mainHeader nav {
                                                            font-size: 50%;
                                                        }
                                                        
                                                        nav:first-of-type li {
                                                            flex: 1 1 6em;
                                                        }
                                                        
                                                        nav a {
                                                            text-align: center;
                                                        }
                                                        
                                                        .mainHeader img.Margrit {
                                                            width: 15%;
                                                            right: 8%;
                                                            top: 30%;
                                                        }
                                                        
                                                        .mainHeader img.Logo {
                                                            width: 15%;
                                                            right: 8%;
                                                            top: 68%;
                                                        }
                                                        
                                                        .mainHeader p.inBearbeitung {
                                                            font-size: 160%;
                                                            top: 40%;
                                                            left: 8%;
                                                        }
                                                        
                                                        .mainFooter {
                                                            font-size: 10%;
                                                        }
                                                }
                                                

                                                Das Seltsame ist, dass ich mit den Entwicklertools das iPhone 6S+ anpassen kann und es auch Änderungen übernimmt, die ich im Editor in dieser query mache. Nur auf dem iPhone selbst will es nicht so, wie ich will. Ach und noch etwas: Wie kriege ich es hin, dass das Hintergrundbild auf kleineren Bildschirmen nicht herangezoomt wird?

                                                1. @@Paludis

                                                  @media screen
                                                      and (min-device-width: 730px)
                                                      and (orientation: landscape) {
                                                  

                                                  Nö, nicht min-device-width. Verwende min-width.

                                                  Und Breakpoints sollten sich nach dem Inhalt richten, nicht nach Geräten. Also in em angegeben werden, nicht in px.

                                                  LLAP 🖖

                                                  --
                                                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                  1. Ja, das habe ich verstanden, dass sie sich nach dem Inhalt richten sollten. Ich habe lediglich auf dem iPhone getestet und festgestellt, dass nicht alles stimmt. Und in em angeben kann ich nicht, da ich die Einheit nicht verstehe. Ich habe auch schon viel Zeit in die queries mit Pixelangaben investiert.

                                                    1. Hej Paludis,

                                                      Ja, das habe ich verstanden, dass sie sich nach dem Inhalt richten sollten. Ich habe lediglich auf dem iPhone getestet und festgestellt, dass nicht alles stimmt. Und in em angeben kann ich nicht, da ich die Einheit nicht verstehe. Ich habe auch schon viel Zeit in die queries mit Pixelangaben investiert.

                                                      Rechne mal für das erste 1rem = 16px - auch wenn hier berechtigterweise darauf hingewiesen werden wird, dass man das so einfach nicht umrechnen kann. In der Praxis geht das gut, wenn du keine individuelle schriftgröße für html angegeben hast. Aber gerade wenn die Umrechnung nicht stimmen sollte, macht rem genau das, was es soll: in die mobile Ansicht umschalten, wenn der Platz auszugehen droht oder mehr in den viewport holen, wenn der Platz reicht.

                                                      Marc

                                                2. Hej Paludis,

                                                  Das Seltsame ist, dass ich mit den Entwicklertools das iPhone 6S+ anpassen kann und es auch Änderungen übernimmt, die ich im Editor in dieser query mache. Nur auf dem iPhone selbst will es nicht so, wie ich will.

                                                  Bist du sicher dass du das in der Query machst? Ich glaube eher dass du dort in den Entwicklerwerkzeugen inline Styles schreibst. Die überschreiben dann Dinge die du in deiner CSS Datei hast. Weil diese stärker wirken (Spezifität).

                                                  Oder du kopierst diese Dinge dann später an die falsche Stelle in deinen Zeh ist es auch hier wird es sicherlich an der Spezifität liegen.

                                                  Ach und noch etwas: Wie kriege ich es hin, dass das Hintergrundbild auf kleineren Bildschirmen nicht herangezoomt wird?

                                                  Mit background-size

                                                  Marc