zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden DIV statt Tabelle, für horizontale Navigationsleiste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.03.2016, 17:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2006
Beiträge: 15
Ashida befindet sich auf einem aufstrebenden Ast
Standard DIV statt Tabelle, für horizontale Navigationsleiste

Hallo.


Ich lese mich aktuell etwas in HTML und CSS ein,
um von den Tabellen als Layout-Grundgerüst weg zu kommen.
Das war Ziel für meine neue, kleine Seite.

Leider scheitere ich dabei, DIV`s richtig zu nutzen und bin etwas ratlos.

Ziel
Eine horizontale Navigationsleiste, dessen 5 Menüpunkte immer zentriert ausgerichtet sind,
und wo sich die äusseren Bereiche entsprechend der Browserbreite anpassen.

Der Teil mit dem Inhalt, soll später nur so breit werden, wie die Menüpunkte zusammen.

Hier habe ich das mit einer Tabelle gelöst, aber es ist nicht zufriedenstellend:
René Scheibel | Leidenschaftliche Fotografie


Eigentlich sollen die Menüpunkte in der Tabelle nach unten rechts ausgerichtet werden,
aber das spinnt alles rum.

Auch sollen beim Menüpunkt "Storys" später mehrer Auswahlmöglichkeiten aufklappen,
wenn man mit der Maus rüber fährt.
Vermutlich ist das bei einer Tabelle auch nicht realisierbar?

Problem
Ich habe nun 2 DIV`s genommen, um den linken und rechten Bereich darzustellen.
Diese habe ich mit float entsprechend ausgerichtet.

Allerdings bekomme ich es nicht hin, nun 5 weitere DIV`s für die Navigation, mit einer definierten Breite zentrisch dazwischen
zu bekommen, während sich das linke und rechts DIV dann entsprechend automatisch nur in der Breite anpassen.

Hier mal der Aufbau mit den DIV`s:
René Scheibel | Leidenschaftliche Fotografie

Was muss ich nun beachten, möchte ich die Leiste wie oben mit der Tabelle,
nur in DIV`s realisieren?

Mein css:
body {
margin-top: 70px;
margin-left:0;
margin-right:0;
padding:0;


}


#left {
float:left;
width:250px;
height: 50px;
background-color:#000000;
}
#right {
float:right;
width: 250px;
height: 50px;
margin-left: 14em;
background-color:#000000;
}


Mein body:
<body>

<div id="left">


</div>


<div id="right">

</div>

</body>


Würde ich riesig freuen, etwas Input bekommen zu können!


Gruss, Rene
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.03.2016, 18:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Dir fehlen leider 15 Jahre Entwicklung von HTML und CSS.

Die Zeiten von divs als Grundelement sind gezählt. div sollen (nach den HTML-Regeln sogar: dürfen) nur noch verwendet werden, wenn es keine geeigneteren Container gibt. Für die Hauptnavigation gibt es das nav-Element.

Gleichermaßen sollen Informationen und Gestaltung so weit wie möglich getrennt werden. Daraus folgt dass nur Elemente in den body-Bereich gehören, die unbedingt notwendig sind. Auf Elemente nur zur Gestaltung sollte verzichtet werden.

Entsprechend sieht der Quelltext für die Navigation folgendermaßen aus:

Code:
<body>
   <nav>
      <a href="">Home</a>
      <a href="">About me</a>
      <a href="">Equipment</a>
      <a href="">Story</a>
      <a href="">Gallery</a>
   </nav>
</body>
Die Gestaltung erfolgt dann per CSS und könnte folgendermaßen aussehen:

Code:
      nav {
         background-color: black;
         color: white;
         padding: 0 20%;
         margin: 1rem auto;
         display: flex;
         justify-content: space-around;
      }
      nav a {
         color: white;
         text-transform: uppercase;
         padding: 0.5rem 1rem;
      }
      nav a::before {
         content: "// ";
         color: #B68948;
      }
Das title-Element sollte nicht zu viel Text enthalten. Der aktuelle Text wird in allen meinen Browser nur teilweise angezeigt. Also lieber weniger Text, da abgeschnittener Text schlechter Stil ist und unprofessionell wirkt.

Als Zeichenkodierung solltest du UTF-8 wählen. Das ist bereits seit 10 Jahren mehr oder weniger Standard. Dann müssen auch nur noch einige wenige Zeichen maskiert werden.

Der gesamte Quelltext mit deinen bisherigen Angaben könnte dann so aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>René Scheibel</title>
   <meta name="description" content="HTML5, CSS3">
   <link href="http://www.scheibel-fotografie.com/favicon.ico" type="image/x-icon" rel="shortcut icon">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         background-image: url(http://www.scheibel-fotografie.com/background_wood.jpg);
         font-family: Sans-Serif;
         font-size: 100%;
      }
      body {
         margin: 0;
      }
      nav {
         background-color: black;
         color: white;
         padding: 0 20%;
         margin: 1rem auto;
         display: flex;
         justify-content: space-around;
      }
      nav a {
         color: white;
         text-transform: uppercase;
         padding: 0.5rem 1rem;
      }
      nav a::before {
         content: "// ";
         color: #B68948;
      }
   }

   </style>
</head>
<body>
   <nav>
      <a href="">Home</a>
      <a href="">About me</a>
      <a href="">Equipment</a>
      <a href="">Story</a>
      <a href="">Gallery</a>
   </nav>
</body>
</html>
Zitat:
Der Teil mit dem Inhalt, soll später nur so breit werden, wie die Menüpunkte zusammen.
Um dir das zu erläutern oder ein Beispiel zu geben benötigen wir den Inhalt von dir.

Zitat:
in der Tabelle nach unten rechts ausgerichtet werden
Ich verstehe nicht was du damit meinst.

Zitat:
Auch sollen beim Menüpunkt "Storys" später mehrer Auswahlmöglichkeiten aufklappen, wenn man mit der Maus rüber fährt.
Das solltest du dir noch mal überlegen. Über 70% aller Geräte im Internet verfügen inzwischen über Touchscreens (Smartphone, Tablet und ähnliche), die keinen hover-Effekt kennen.

Zitat:
nur in DIV`s realisieren?
Da kommst du wie schon geschrieben einige Jahre zu spät. div nur noch dann, wenn es keine geeigneteren Container gibt. Und insgesamt so wenige Container wie möglich. Für die Navigation also nur ein nav-Element.

Du solltest nicht in den Fehler verfallen, eine Tabelle mit div nachbauen zu wollen. Das funktioniert nicht und fliegt dir spätestens um die Ohren, wenn du die Seite später mal für Smartphones und Tablets responsive gestalten möchtest.

Gruss

MrMurphy

Geändert von MrMurphy (03.03.2016 um 18:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.03.2016, 19:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2006
Beiträge: 15
Ashida befindet sich auf einem aufstrebenden Ast
Standard

Herzlichen Dank für diesen tiefen Einblick ...

Hier das Beispiel, was ich mit "Inhalt = Menübreite" meinte:
http://www.scheibel-fotografie.com

Ich habe den alten Code mal mit deiner Variante ersetzt:
René Scheibel
  1. Diese "transparenten" Abstände, wie mit der Tabelle, lassen sich also nicht wirklich nachbauen?
    Das sollte primär das Layout darstellen.
    Also ist man eher gezwungen, die Leiste durchgängig zu lassen?
  2. Wie würdest du das lösen, wenn du unter "Story" mehrer Berichte zur Auswahl hast, aber ein Touchscreen-Endgerät soll es nutzen können?
    Habe gehofft, ein Klappmenü wäre die sauberste Lösung, ohne ein "Untermenü" erstellen zu müssen. (Bericht 1, Bericht 2, ...)

Was genau bedeuten die Befehle flex, text-transform und justify?
Mit den Werten "rem" hälst du einen Abstand ein?
Wie genau lässt sich der beziffern?


nav {
background-color: black;
color: white;
padding: 0 20%;
margin: 1rem auto;
display: flex;
justify-content: space-around;
}
nav a {
color: white;
text-transform: uppercase;
padding: 0.5rem 1rem;
}
nav a::before {
content: "// ";
color: #B68948;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 03.03.2016, 21:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Diese "transparenten" Abstände, wie mit der Tabelle, lassen sich also nicht wirklich nachbauen?
Doch, das geht. Allerdings ist das Kleinkram der üblicherweise erst zum Schluß erstellt wird wenn die Seite soweit fertig ist. Im Moment würde dir das wohl auch nicht weiterhelfen, da du zunächst die Grundlagen lernen und verstehen solltest.

Ich habe das mal eingebaut.

Heutzutage wird auf so große Hintergrundbilder (deins 680kb) auch verzichtet. Die Ladezeiten bei Smartphones und Tablets dauern dadurch zu lange und werden als störend empfunden. Leute mit Volumen-Verträgen werden dich verfluchen, da das Hintergrundbild überflüssig ist.

Zitat:
Wie würdest du das lösen, wenn du unter "Story" mehrer Berichte zur Auswahl hast, aber ein Touchscreen-Endgerät soll es nutzen können?
Ich würde auf der Seite "Storys" (also nicht auf allen Seiten) ein Untermenü anlegen.

Aufklappmenüs sind nicht sehr benutzerfreundlich und wegen der Touchscreens sehr aufwändig zu erstellen. Von daher rate ich von denen ab.

Zitat:
Was genau bedeuten die Befehle flex, ... und justify?
Die gehören zum Flexbox-Modell, welches zur Gestaltung von Layouts eingeführt wurde. Zur Erläuterung schmeisst du am besten die Suchmaschine deiner Wahl an. Das läßt sich im eher eingeschränkten Rahmen eines Forums nicht alles erklären.

Zitat:
Was genau bedeuten die Befehle ... text-transform
Mit text-transform kann Schrift beeinflußt werden. Zum guten Stil von HTML gehört es zum Beispiel im Quelltext die Groß- und Kleinschreibung zu beachten. Wenn ein Text in Großbuchstaben dargestellt werden soll dient dazu die CSS-Anweisung

Code:
text-transform: uppercase;
Zitat:
Mit den Werten "rem" hälst du einen Abstand ein?
rem ist eine Einheit wie px, em, Prozent und andere. rem besitzt gegenüber px oder em bestimmte Vorteile. Von daher verwende ich sie gerne. Für nähere Erläuterungen solltest du die Suchmaschine deiner Wahl bemühen.

1rem sind umgerechnet 16px.

Zitat:
Hier das Beispiel, ...
Konkreter Inhalt wäre besser. Ich habe für mein Beispiel Blindtext benutzt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>René Scheibel</title>
   <meta name="description" content="HTML5, CSS3">
   <link href="http://www.scheibel-fotografie.com/favicon.ico" type="image/x-icon" rel="shortcut icon">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         background-image: url(http://www.scheibel-fotografie.com/background_wood.jpg);
         font-family: Sans-Serif;
         font-size: 100%;
      }
      body {
         margin: 0;
      }
      nav {
         background-image: linear-gradient(90deg, black 0%, black 19%, transparent 19%, transparent 81%, black 81%, black 100%);
         color: white;
         padding: 0 19.5%;
         margin: 1rem auto;
         display: flex;
         justify-content: space-between;
      }
      nav a {
         background-color: black;
         color: white;
         text-align: center;
         text-transform: uppercase;
         padding: 0.5rem 1rem;
         margin: 0 1%;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
      nav a::before {
         content: "// ";
         color: #B68948;
      }
      main {
         background-color: white;
         width: 60%;
         padding: 0.5rem;
         margin: 1rem auto;
      }
   }

   </style>
</head>
<body>
   <nav>
      <a href="">Home</a>
      <a href="">About me</a>
      <a href="">Equipment</a>
      <a href="">Story</a>
      <a href="">Gallery</a>
   </nav>
   <main>
      <h1>Autobahnwahn</h1>
      <p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool.</p>
      <p>Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen.</p>
      <p>Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter.</p>
      <p>Ich dagegen wechsle die Cassette. Es geht weiter. Vor und hinter mir hektische Spurenwechsel. So zieht sich das Stück A 2 bis zum Recklinghauser Kreuz. Der erhofften Entspannung folgt zuverlässig der Vollfrust.</p>
      <p>Die A 43 bis Münster ist genauso voll wie das Kamener Kreuz zur Rush-hour. Auf der A 1 ist dann endgültig Schluss mit lustig. Alles dümpelt auf der Überholspur. Natürlich mit 90. Rechts geht es schneller, irrerweise wegen der Lkws. Die wollen nämlich alle noch vor zehn zu Hause sein.</p>
   </main>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (03.03.2016 um 21:46 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
DIV Höhe 100% Daniel86 CSS 12 29.07.2011 13:40
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
tabelle in div drin, wer bestimmt die Breite? bastien CSS 3 12.12.2006 17:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:22 Uhr.