Rahmen inkl. Navigation über und um das Bild

[Jnnbo]

Moin,

ist es möglich folgende Vorlage (die derzeit selbstverständlich scheiße aussieht) mit allen mit CSS ohne Grafiken umzusetzten? Damit meine ich vor allem die Navigation, das Titelbild und die zwei abgeschnitten Vierecke rechts unten und links oben nach dem Bild?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

ist es möglich folgende Vorlage (die derzeit selbstverständlich scheiße aussieht) mit allen mit CSS ohne Grafiken umzusetzten? Damit meine ich vor allem die Navigation, das Titelbild und die zwei abgeschnitten Vierecke rechts unten und links oben nach dem Bild?

bestimmt.

Die abgeschnittenen Vierecke könnten etwa absolut positionierte Pseudoelemente sein oder auch geschickt angeordnete box-shadows.

Matthias

[Jnnbo]

Hallo Matthias,

Die abgeschnittenen Vierecke könnten etwa absolut positionierte Pseudoelemente sein oder auch geschickt angeordnete box-shadows.

ich bin jetzt zwar 3 Stunden an dem CSS und HTML gesessen, aber ich habe es hinbekommen. Ob sich der ganze Aufwand allerdings lohnt ist eine andere Frage.

Mein HTML

    <aside class="test">
        <img src="img/1.jpg" alt="Titelbild">
    </aside>

Mein CSS

.test:after {
     content: '';
    position: absolute;
    top: 95px;
    right: 120px;
    width: 80px;
    height: 80px;
    background-color:transparent;
    transform: rotate(0deg);
	border-right:10px solid #003;
	border-top: 10px solid #003;
}

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Glückwunsch!

> .test:after {
>      content: '';
>     position: absolute;
>     top: 95px;
>     right: 120px;
>     width: 80px;
>     height: 80px;
>     background-color:transparent;
>     transform: rotate(0deg);
> 	border-right:10px solid #003;
> 	border-top: 10px solid #003;
> }
> 

warum so kompliziert?

.test {
  position: relative;
  border: 1em solid white;
}
.test::after {
  content: '';
  position: absolute;
  background: #003;
}

width, height, top, right müsstest du entsprechend anpassen.

Wobei deine Lösung natürlich auch funktioniert, wenn beispielsweise das HTML-Element ein Foto als Hintergrund hat.

Matthias

[Jnnbo]

Hallo Matthias,

ich habe noch eine weitere Frage, wie kann ich es anstellen, dass ich auf der linken unteren Ecke ebenfalls so einen Kasten habe? :after ist ja schon verbraucht, oder kann ich dem mehrere Ecken zuweisen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

ich habe noch eine weitere Frage, wie kann ich es anstellen, dass ich auf der linken unteren Ecke ebenfalls so einen Kasten habe? :after ist ja schon verbraucht, oder kann ich dem mehrere Ecken zuweisen?

Zwei Doppelpunkte für Pseduoelemente!

Pseudoelemente für generierten Content

Matthias

[Jnnbo]

Hallo Matthias,

Zwei Doppelpunkte für Pseduoelemente!

Pseudoelemente für generierten Content

habe ich verbessert. mein Problem ist damit leider noch nicht behoben.

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Pseudoelemente für generierten Content

habe ich verbessert. mein Problem ist damit leider noch nicht behoben.

Und auch den verlinkten Artikel gelesen?

Matthias

[Jnnbo]

Hallo Matthias,

Und auch den verlinkten Artikel gelesen?

nö natürlich nicht :/ Jetzt aber und ich habe es mit ::before umgesetzt. Nur mal rein theoretisch, wenn ich jetzt sagen würde, ich möchte auch noch eines links oben? :) Mehr als ::before und ::after gibt es ja nicht?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Nur mal rein theoretisch, wenn ich jetzt sagen würde, ich möchte auch noch eines links oben? :) Mehr als ::before und ::after gibt es ja nicht?

Korrekt, dann bieten sich geschickt positionierte box-shadows an. Oder zur Not ein zusätzliches Element

<aside>
  <div>
    <img>
  </div>
</aside>

Matthias

[Linuchs]

Ich nenne die drei grossen Vierecke von oben nach unten A, B und C. Den linken Winkel 1 und den rechts stehenden Winkel 2.

1 und 2 sehen für mich aus wie Vierecke, die durch das darüber liegende B (mit weissem border) abgedeckt werden.

Das Überdecken kann man mit einem negativen margin-top machen.

Dabei kommt allerdings 2 z-index-mässig vor B und deckt es ab,es soll aber ja gerade umgekehrt sein.

Der z-index von 2 muss also kleiner sein als der von B. Und ein z-index lässt sich nur für positionierte Elemente setzen.

Du musst mal ausprobieren, ob es klappt, wenn du um 1, B und 2 ein relativ positioniertes Element (z.B. div) setzt. B braucht einen entsprechenden margin, um Abstand zu diesem Element zu schaffen. Und dorthinein positionierst du 1 absolut links oben und 2 absolut rechts unten.

Linuchs

[Jnnbo]

Moin,

ich habe den ersten HTML Code umgesetzt wie ich mir denken, dass es richtig sein könnte. Laut validator.w3.org scheint kein Fehler vorhanden zu sein.

<body>
<header>
  <h1>Titel der Seite</h1>
</header>
<main>
  <section>
    <h2>Titel der Section</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>... weiterlesen</p>
    </article>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>... weiterlesen</p>
    </article>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>... weiterlesen</p>
    </article>
  </section>
</main>
<footer> </footer>
</body>

Die Frage ist nun, wie und wo platziere ich das Bild das zwischen den beiden blauen Ecken eingeschlossen werden soll sowie die Navigation, die so ausschaut:

<nav>
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

Meine Einfache Zeichnung, wie es ausschauen soll, habe ich ja bereits im gezeigt.

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Die Navigation vor main, welche Funktion hat das Bild? Nur Schmuck? Dann könnte es Hintergrundbild von main oder nav sein. Transportiert es Informationen, wie etwa ein Foto vom Betriebsgelände, dann als Teil eines Headers vielleicht.

Matthias

[Jnnbo]

Hallo Matthias,

Die Navigation vor main, welche Funktion hat das Bild? Nur Schmuck? Dann könnte es Hintergrundbild von main oder nav sein. Transportiert es Informationen, wie etwa ein Foto vom Betriebsgelände, dann als Teil eines Headers vielleicht.

wie sieht dieser Aufbau aus? Denn das Titelbild soll später vielleicht ein kleiner Slider werden, also kann ich diesen nicht als Background einbinden.

<header>
  <h1>Titel der Seite</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

<main>
    <aside>
        <img src="img/bild.jpg" alt="Titelbild">
    </aside>

    <h2>Titel der Section</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>... weiterlesen</p>
    </article>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>... weiterlesen</p>
    </article>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>... weiterlesen</p>
    </article>
  </section>
</main>
<footer> </footer>

[Jnnbo]

Moin,

CSS ist wohl einfach zu hoch für mich. Bis gerade dachte ich, dass ich auf meiner Seite kein kompliziertes CSS habe, so dass jeder Browser dieses richtig verstehen sollte. 7

Allerdings hat mich meine Freundin darauf aufmerksam gemacht, dass mein Grunddesign im Firefox Fehler hat.

Die Frage ist nun, warum versteht der Firefox die Positionierung meiner Rahmen um das Bild falsch? Im Chrome sieht es richtig aus:

Hier die URL zum Projekt: http://jnnbo.bplaced.net/test123.php

Habt Ihr eine Idee bzw. wisst wo der Fehler ist?

[Jnnbo]

Mir ist etwas anderes aufgefallen, beide Browser stellen es wohl richtig da, aber die Ecken richten sich nach der Bildschirmgröße. Ich habe mal meinen Browser in den Vollbildmodus versetzt, da habe ich auch den „Fehler“ dass die Ecken nicht an der Stelle stehen, wo sie hingehören.

Wie kann ich erreichen, dass die immer da stehen wo ich diese hinsetzte und nicht mit dem Bildschirm wandern?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Wie kann ich erreichen, dass die immer da stehen wo ich diese hinsetzte und nicht mit dem Bildschirm wandern?

position richtig verwenden

Matthias

[Jnnbo]

Hallo Matthias,

position richtig verwenden

ok, so sollte es nun in allen Auflösungen richtig funktionieren (noch kein responsives Design)

.slider {
	position: relative;
	padding: 0;
}

.slider::before {
    content: '';
	position: absolute;
	top: 208px;
	left: -27px;
	width: 80px;
	height: 80px;
	background-color: transparent;
	transform: rotate(0deg);
	border-left: 10px solid #0b1751;
	border-bottom: 10px solid #0b1751;
}

.slider::after {
    content: '';
	position: absolute;
	top: -27px;
	right: -28px;
	width: 80px;
	height: 80px;
	background-color: transparent;
	transform: rotate(0deg);
	border-right: 10px solid #0b1751;
	border-top: 10px solid #0b1751;
}

Wer möchte, kann es gerne hier nochmals testen und mir eine Rückmeldung geben, sollte noch ein Fehler vorhanden sein: http://jnnbo.bplaced.net/test123.php