Beiträge von MrMurphy

Hallo

Zitat

Geht das?!

Ja. Ich weiß nur nicht wie wir dir konkret helfen können.

Gruss

MrMurphy

Hallo

Zunächst: Der Firefox zeigt das Ergebnis des Quelltextes korrekt an.

Mit den CSS-Angaben erzeugst du gleich mehrere klassische Probleme: Float und Collapsing Margins.

Zu Float siehe zum Beispiel:

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

und

http://www.thestyleworks.de/basics/float-rule.shtml

Zu Collapsing Margins

http://www.peterkropff.de/site/css/collapsing.htm

und

https://wiki.selfhtml.org/wiki/CSS/Box-Modell

Wobei float heutzutage nicht mehr zum nebeneinanderstellen von Elementen mißbraucht werden muss, da mit Flexbox ein sinnvolleres Instrument dafür zur Verfügung steht. Float ist eigentlich nur dafür gedacht Elemente (zum Beispiel Grafiken) von Text umfließen zu lassen.

Gruss

MrMurphy

Hallo

Du kannst die Angaben mit dem table-Element erstellen und den Zellen entsprechende Ränder geben. Das ist zwar sachlich falsch, aber gebräuchlich.

Oder du könntest sachlich korrekt eine Liste mit dem dl-Element erstellen und mit CSS gestalten. Damit sind aber viele Webseitenersteller überfordert.

Oder du erstellst einen Quelltext mit div-Elementen und Absätzen und passt das Layout mit CSS an, zum Beispiel mit display: table oder display: flex.

Gruss

MrMurphy

Hallo

Ich kann dein Problem anhand deiner Beschreibung und deines Quellcodes leider nicht nachvollziehen.

Gruss

MrMurphy

Hallo

Willst du uns verarschen oder bist du nicht in der Lage zu erkennen, dass sich in deinem Beispiel-Quelltext die span-Elemente in einem div-Element mit der Klasse "wrapper" befinden und floaten? Also genau das was du angeblich erreichen willst. Das habe ich bereits in meiner ersten Antwort geschrieben.

Gruss

MrMurphy

Hallo

Sie floaten doch. Wo ist dein Problem?

Gruss

MrMurphy

Hallo

Benutze mal normalen Text anstatt eine unendliche Buchstabenfolge ohne Leerzeichen.

Gruss

MrMurphy

Hallo

Dein Quelltext enthält ein div mit der Klasse wrapper und die span-Elemente werden gefloatet. Deshalb kann ich dein Problem nicht nachvollziehen.

Gruss

MrMurphy

Hallo

Am sinnvollsten ist es dann den Container vollebreite außerhalb des umgebenden Containers zu setzen.

Alternativ bleibt noch der Weg über position: relative / position: absolute, der aber weitere Probleme verursacht und von dem ich deshalb abrate.

Insgesamt habe ich den Eindruck, dass du HTML / CSS nach veralteten Regeln lernst und dazu noch kompliziert erscheinende Regeln überspringst. Das erschwert es erfahrungsgemäß später ungemein, aktuelles HTML / CSS mit all seinen heutzutage sinnvollen Möglichkeiten zu lernen.

Gruss

MrMurphy

Hallo

div haben immer eine Breite von 100% und sind damit bildschirmbreit.

Gruss

MrMurphy

Hallo

Hast du auch einen Link zu der Seite?

Deinen Quellcodeschnipseln ist leider wenig zu entnehmen. Außer dass sie aller Wahrscheinlichkeit nach fehlerhaft sind.

Navigationen können zwar als Liste erstellt werden, das ist und war aber nie "vorgeschrieben". Wenn du trotzdem eine Liste verwenden willst steht dir das natürlich frei.

Wenn die sechs Links nebeneinander stehen sollen kann zum Beispiel folgendes HTML verwendet werden:

<nav>
      <a href="">Startseite</a>
      <a href="">Unterseite 1</a>
      <a href="">Unterseite 2</a>
      <a href="">Obermenü</a>
      <a href="">Unterseite 1</a>
      <a href="">Unterseite 2</a>
   </nav>

und die Anordnung dann mittels Flexbox, also zum Beispiel

nav {
         display: flex;
      }

Gruss

MrMurphy

Hallo

Er hat die Seite doch in seinem ersten Beitrag verlinkt.

Gruss

MrMurphy

Hallo

Ich verstehe dein Problem nicht. Soll der Text seichtlich zentriert werden oder in der Höhe?

Gruss

MrMurphy

Hallo

Mal abgesehen davon das height-Angaben so weit wie möglich vemieden werden sollen, musst du die height-Angaben natürlich korrekt berechnen, wenn du sie trotzdem verwenden willst.

Heißt in deinem Beispiel: Zwei Boxen mit normaler Höhe sind 200px + 200px + 5px(margin zwischen den Boxen) hoch. Entsprechend sind die doppelt hohen Boxen mit 400px zu niedrig, da der margin fehlt.

Gruss

MrMurphy

Hallo

In bestehenden Templates lassen sich Navigationen nur mit großem Aufwand ändern, wobei die Gefahr besteht, dass bei einem Update das Layout der Seite zerstört wird.

Von daher solltest du genau wissen was du tust und welche Auswirkungen Updates haben.

Weiterhin willst du wohl wenig Zeit(?) investieren. Die Navigation arbeitet aber mit JavaScript. Das musst du also noch neben HTML und CSS erstellen und anpassen. Mit den Nachteil, dass die Navigation bei Browsern ohne JavaScript überhaupt nicht funktioniert und die Besucher keine Chance haben die komplette Site zu besuchen.

Gruss

MrMurphy

Hallo

Ohne Link zu deiner Seite können wir dir kaum konkret helfen. Deshalb allgemein:

Höhenangaben sollten in HTML / CSS so weit wie möglich vermieden werden, da sie immer wieder zu Problemen führen. Grundsatz: Die Höhe von Elementen wird durch ihren Inhalt bestimmt.

Prozentangaben sind dann noch mal zusätzlich problembehaftet, da es viele unterschiedliche Grundlagen gibt, auf die die Prozentangaben sich beziehen. Es kommt sogar vor dass sich height-Angaben in Prozent auf die Breite beziehen. Deshalb mal zwei Links zu deiner Info:

https://developer.mozilla.org/de/docs/Web/CSS/padding-top

und

http://www.thestyleworks.de/basics/percentage.shtml

Gruss

MrMurphy

Hallo

Du machst dir viel Arbeit für nichts.

Zum einen unterstützt du Browser die heute nicht mehr verwendet werden. Zum anderen kannst du aktuelles CSS so nur bedingt einsetzen. Und du erschwerst dir selbst die Arbeit, da die unnötigen Container immer mit gestaltet werden müssen.

Außerdem widerspricht dein Vorgehen den aktuellen HTML5-Regeln, nach denen Inhalt und Aussehen getrennt werden sollen. Dazu gehört so weit wie möglich keine Container zu verwenden, die nur dem Aussehen dienen.

Ich rate von dem Vorgehen ab.

Zitat

Für den internen Bereich wird hingegen etwas eingebaut, so dass man mit alten Browsern gar nicht erst einloggen kann wenn sie Mindestanforderungen nicht erfüllen.

Die Logik kann ich nicht nachvollziehen. Einerseits willst du die Seite mit (untauglichen) Mitteln möglichst abwärtskompatibel machen, andererseits willst du genau solche alten Browser blockieren?

Gruss

MrMurphy

Hallo

Zitat

Das heißt, du würdest erst mal nur den Kopf- Hauptnavigation und Fußbereich machen der überall gleich ist?

Nein. Ich erstelle zunächst den Inhalt der Webside, das HTML. Vollkommen ohne mich durch Gedanken auf ein späteres Layout einschränken zu lassen.

Zitat

von ca 400 bis 2000 px Breite "gezogen" zu werden.

Nein. Ich schrieb

Zitat

der möglichst benutzerfreundlich präsentiert werden sollte

Kein Benutzer will Texte lesen, deren Zeilen sich über 2000px hinziehen.

Grundsatz: Erst Inhalt, dann Layout. Wenn du dir bereits beim Inhalt Gedanken über das spätere Layout machst schränkst du deine Möglichkeiten vollkommen unnütz ein.

Gruss

MrMurphy

Hallo

Zitat

Würdet ihr heute Flexbox ohne Prefixes nutzen?

Ja.

Gruss

MrMurphy

Hallo

Weder ... noch ... .

Wenn genügend Platz vorhanden ist ziehen die Besucher ihr Browserfenster so groß, wie sie es am angenehmsten empfinden.

Dieser Platz sollte vom Webseitenersteller dann ausgenutzt werden. Mit Responsive Design ist das heutzutage auch kein Problem mehr.

Über das Layout sollte zudem auch der Inhalt entscheiden, der möglichst benutzerfreundlich präsentiert werden sollte.

Deshalb hat es sich bewährt zunächst den Inhalt zu erstellen und anschließend dazu ein passendes Layout.

Ohne Nachteil für den Besucher, sondern ganz im Gegenteil, kann es deshalb sogar von Vorteil sein, auf verschiedenen Seiten unteschiedliche Layouts mit einer unterschiedlichen Spaltenanzahl zu verwenden.

Zunächst ein Layout zu bestimmen und dann den Inhalt da hineinzuquetschen hat sich hingegen als Sackgasse erwiesen.

Gruss

MrMurphy