Beiträge von MrMurphy

Hallo

Das ist möglich. Ob das HTML sinnvoll ist hängt aber auch von dem gewünschten Verhalten bei den unterschiedlichen Fensterbreiten ab, Stichwort: Responisve Design mit Media Queries. Davon wissen wir ja nichts.

Gruss

MrMurphy

Hallo

Flexbox dient der Anordnung der einzelnen Elemente. Damit ist es für die Darstellung sehr gut geeignet.

Die Hintergrundfarben haben nichts mit Flexbox zu tun. Die können aber mit CSS (linear-gradient) oder svg erzeugt werden.

Gruss

MrMurphy

Hallo

Es bringt dem Fragesteller in der Regel nichts wenn ihm Beispiele genannt werden, die mit seinem Quelltext nichts zu tun haben.

Um dir helfen zu können benötigen wir deshalb deinen Quelltext, am Besten einen Link zu der Seite. Ein paar Quelltextschnipsel bringen meist nichts, da Anfänger häufig entscheidende Angaben weglassen.

Gruss

MrMurphy

Hallo

Zitat

Kann mir jemand sagen ob ich in den Mediaqueries div#container oder div.klassen einsetzen soll?

Auf die Elemente / Container, die mit der Media Query geändert werden sollen. Also genau so im CSS ohne Media Queries. div sind in Zeiten von HTML5 eher zur Ausnahme geworden.

Zitat

wirkt sich das dann auch auf die anderen Mediaqueries aus

Das kommt auf die Art der anderen Media Queries an und wie sie verschachtelt sind. So läßt sich die Frage deshalb nicht beantworten.

Gruss

MrMurphy

Hallo

Zitat

Es sollte jetzt behoben sein

Ja. Wobei ich mir die Seite nur noch mal angeschaut und nicht getestet habe.

Zitat

Welcher Browser bzw. welche Version ist das?

Es handelt sich um Chrome Version 51.0 und noch ein paar Zahlen dahinter unter Windows 7.

Gruss

MrMurphy

Hallo

Zitat

Jetzt passt es in jedem Browser.

Ein mutigeres Wort ward selten gesprochen.

html-seminar.de/woltlab/attachment/1040/

Gruss

MrMurphy

Hallo

Mit deinem Vorgehen bringst du mehrere Problemfelder zusammen:

a) margin-top mit %-Werten
b) dazu display: flex
c) dazu display: inline-block
d) dazu collapsing-margins

Auch ohne das relativ neue "display: flex" wird von diesem Vorgehen bereits seit Jahren abgeraten.

Am sinnvollsten ist es bei margin-top und margin-bottom grundsätzlich auf %-Werte zu verzichten. Hier spielt zum Beispiel die seit Jahren eingeführte Einheit rem ihre Vorteile aus.

Gruss

MrMurphy

Hallo

Aus den Bildern kann ich dein Problem leider nicht nachvollziehen. Was heißt

Zitat

Das margin funktioniert nicht richtig.

Beschreibe bitte genauer was du erwartest und was daran nicht passt.

Gruss

MrMurphy

Hallo

Noch ein paar Infos zu deinem Problem:

Zitat

Die andere CSS die ich im Einsatz habe, dient lediglich der Optik

Das ist leider eine komplette Fehleinschätzung.

In Bootstrap wirken viele CSS-Angaben aufeinander abgestimmt. Bei Eingriffen sollte man schon genau wissen welche Auswirkungen daraus resultieren.

Anweisungen wie padding, border, margin, font-size, display (teilweise sogar mit negativen Werten) haben mit "lediglich der Optik" überhaupt nichts mehr zu tun. Das sind massive Layout-Eingriffe.

Bei Frameworks wie Bootstrap sollten die vorhandenen Klassen zudem nur ausnahmsweise überschrieben werden. Deine massenhaften Eingriffe in vorhandene Klassen wie navbar führen regelmäßig zu Problemen. Besser ist in solchen Fällen eigene, deutlich erkennbare, Klassen zu verwenden.

Wenn Problemlösungen mit vorhandenen Bootstrapmitteln nicht vorgesehen sind ist es zudem häufig sinnvoller komplett eigene CSS-Regeln zu erstellen, anstatt massenhaft Bootstrap-CSS zu überschreiben.

Dein Wunsch (großes Logo links und Navigation rechts daneben unten rechts) ist in Bootstrap nicht vorgesehen. Viele Bootstrapvorgaben stören dabei sogar. Deshalb ist es wahrscheinlich einfacher für die von dir gewünschte Darstellung komplett eigenes CSS zu verwenden. Wobei natürlich das adaptive / responsive Verhalten berücksichtigt werden muss.

Gruss

MrMurphy

Hallo

Ich habe grade erst gesehen dass du deinen letzten Beitrag geändert hast.

Das Grundproblem ist wohl, dass du mit veraltetem XHTML eine moderne Webseite mit responsive Design (welches sich der Fensterbreite anpasst) erstellen willst. Das funktioniert in der Regel leider nicht. XHTML wurde bereits vor über acht Jahren offiziell begraben und soll seitdem nicht mehr verwendet werden.

Für aktuelle Webseiten mit responsive Design sollte HTML5 mit CSS3 verwendet werden. Dazu müsstest du deine Seite natürlich entsprechend anpassen, zum Beispiel nur den Doctype zu ändern reicht nicht aus.

Gruss

MrMurphy

Hallo

Soweit ich es verstanden habe geht es bei dir um die Hintergrund- (dunkelblau) und obere Rahmenfarbe (hellblau) des Footers (div.#late_footer_wrapper).

Dem div#late_footer_wrapper sind die Hintergrund- und Rahmenfarbe zugewiesen. Zugleich aber eine Breite (width) von 100%. Die 100% beziehen sich immer auf die aktuelle Fensterbreite. Die beiden Farben werden also nicht breiter als 100% angezeigt. Natürlich auch nicht schmaler als 100%, sondern genau 100%.

Der innere Container div#late_footer hat eine Breite von 960px plus etwas padding.

Wenn die Fensterbreite jetzt zum Beispiel auf 800px verringert wird, wird der Container div#late_footer_wrapper in 800px Breite angezeigt, also auch die in ihm definierten Farben.

Der innere Container div#late_footer behält aber seine Breite von über 960px. Er erweitert den äußeren Container aber nicht, sondern ragt über ihn hinaus. Für den inneren Container wird deshalb die untere Scrolleiste eingeblendet.

Das kannst du auch nachvollziehen wenn du bei schmalem Fenster nur etwas seitlich scrollst und dann mit der Fensterbreite rumspielst. Die beiden Farben passen sich jeweils der Fensterbreite an.

Du musst also dafür sorgen, dass innere Container niemals breiter als die sie umgebenden Container werden.

Wenn du feste Breiten vergeben willst sollte also der äußere Container die feste / starre Breite bekommen und der innere eine prozentuale Breite.

Gruss

MrMurphy

Hallo

Zitat

Mittig ist das Bild auch nicht.

Stimmt, habe ich korrigiert.

Gruss

MrMurphy

Hallo

Entschuldigung, dass ich dir einen Quelltext zur Verfügung stelle, den du zum Testen einfach direkt komplett übernehmen kannst.

Gruss

MrMurphy

Hallo

Ich habe mal einen Beispiel-Quelltext erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" href="http://theuser1992.de/Shortcut_Icon.ico">
   <style>




   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
   }




   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 1rem auto;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
   }




   /*Navigation*/
   @media all {
      nav {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
      }
      nav a {
         background-color: #4D3B1D;
         color: #D2AF8C;
         font-size: 0.6rem;
         box-shadow: 0px 0px 0.7rem 0.2rem rgba(77, 59, 29, .45);
         padding: 0 0.5rem;
         border-width: 2px;
         border-style: solid;
         border-color: #A75E16;
         border-radius: 0.2rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: auto;
         margin-top: 0.3rem;
      }
      nav a:nth-child(1) {
      }
      nav a:nth-child(1n+2) {
         border-top-left-radius: 2.5rem 1rem;
         border-bottom-left-radius: 2.5rem 1rem;
         margin-left: 0.5rem;
      }
      nav a:nth-child(1n+2):hover {
         transform: scale(1.1);
      }
   }




   /*Spezielle Einstellungen*/
   @media all {
      body {
         background-color: rgb(214, 178, 143);
         background-image: url(http://theuser1992.de/Hintergrund.png);
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: center center;
         background-size: cover;
         background-clip: border-box;
         background-origin: padding-box;
      }
      figure {
         display: flex;
         justify-content: center;
         max-width: 80%;
      }
      img {
         box-shadow: 0 0 0.7rem 0.2rem rgba(77, 59, 29, .45);
         border-radius: 0.3rem;
      }
   }




   </style>
</head>
<body>
   <header>
   </header>
   <nav>
      <a href="#">sechstes</a>
      <a href="/Fotografien/GoT3">Game of Thrones: Staffel 3 (Blu-Ray)</a>
      <a href="/Fotografien">meine Fotografien</a>
      <a href="/">TheUser1992s Webseite</a>
   </nav>
   <main>
      <figure>
         <a href="07.html">
            <img src="http://theuser1992.de/Fotografien/GoT3/06.jpg" alt="Beispielbild">
         </a>
      </figure>
   </main>
   <footer>
   </footer>
</body>
</html>

Zitat

Davon habe ich auch noch nie etwas gehört. Ein paar weitere Hinweise wären freundlich.

Suchmaschine: css flexbox

Zitat

Die Abstände vom a-Element sind anklickbar.

Keine Ahnung wie ich dir das erklären soll: Das a-Element ist transparent (= unsichtbar) und geht über die gesamte Fensterbreite. Das Bild innerhalb des a-Elements ist 80% breit. Für die Verlinkung ist das a-Element zuständig. Das hat aber keinen Abstand.

Edit: Quelltext korrigiert

Gruss

MrMurphy

Hallo

Zitat

Die Abstände sind dort anklickbar.

Nein, nicht die Abstände, sondern das a-Element.

Zitat

Wie kann ich es hier erreichen, dass die Abstände links und rechts nicht anklickbar sind

Verwende HTML5 und füge das Bild in einen geeigneten Container ein, also einem figure-Element.

Bei CSS solltest du zudem darauf achten keine unsinnigen Angaben zu machen und nur CSS-Eigenschaften verwenden, deren Auswirkungen du auch kennst.

Du gibt dem ul-Element zum Beispiel eine Höhe von 32px, den darin enthaltenen li-Elementen aber eine Höhe von 52px.

Zum Layouten ist Flexbox zudem geeigneter als float.

Zitat

ohne andere Funktionalitäten zu verlieren?

Was verstehst du unter anderen Funktionalitäten?

Gruss

MrMurphy

Hallo

Keine Ahnung.

Im Gegensatz zur dir bekommen wir nur das Ergebnis der Ausgabe zu sehen.

Du musst halt die Rohdaten auf dem Server durchstöbern, da kommen wir nicht ran.

Die Ausgabe ist ja wohl ein Zusammenspiel von Wordpress, einem Wordpress-Theme, einem Script und zusätzlichen individuellen Einstellungen. Die br-Elemente können im Prinzip aus allen diesen Elementen stammen.

Gruss

MrMurphy

Hallo

Das name-Attribut gilt als veraltet und sollte nicht mehr verwendet werden.

Es war auch nie direkt als Sprungziel gedacht, sondern wurde dafür mißbraucht. Entsprechend funktioniert es in einigen HTML-/Browser-Kombinationen und in anderen nicht.

Deshalb sollte als Sprungziel eine id gewählt werden.

Gruss

MrMurphy

Hallo

Ich bin mir nicht so ganz sicher was du überhaupt erreichen willst.

Die Zeilenumbrüche werden in der verlinkten Webseite durch das HTML-Element "br" erzeugt

<br></br>

Falls die nicht erwünscht sind sollten sie im HTML-Quellcode gelöscht werden.

Gruss

MrMurphy

Hallo

Lösch mal die Doppelpunkte vor den öffnenden geschweiften Klammern.

Gruss

MrMurphy

Hallo

Zitat

Ich habe die entspr. CSS-Selektoren inline angegeben, damit sie für Euch sofort sichtbar sind.

Das kann ich nicht nachvollziehen.

In der Datei

Zitat

http://www.bedorf-music-fire.de/assets/css/main.css

gibt es den Eintrag

@media screen and (max-width: 736px) {




                        #sidebar {
                                display: none;
                        }




                }

durch den das Menü bei schmalen Fenstern ausgeblendet wird. Ist das dein Problem?

Gruss

MrMurphy