zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 02.04.2015, 12:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

CSS Code ohne HTML Code ist nutzlos. Warum nimmst du dir nicht 1 Minute Zeit zum posten und überlegst, was hilfreich ist und was nicht?
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 02.04.2015, 12:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 11
JOBE00 befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
<body>
<header>
    <img src="" width="900" height="250" alt=""/>
</header> 
<nav>
    <ul id="navigation">
    <li><a href="index.htm"><div class="home">Home</div></a></li>
    <li><a href="about.htm"><div class="about">Über uns</div></a></li>    
    <li><a href="concept.htm"><div class="concept">Konzept</div></a></li>
    <li><a href="ohours.htm"><div class="ohours">Öffnungszeiten</div></a></li>
    <li><a href="contact.htm"><div class="contact">Kontakt</div></a></li>
    <li><a href="drive.htm"><div class="drive">Anfahrt</div></a></li>    
    <li><a href="sitenotice.htm"><div class="impressum">Impressum</div></a><div></div></li>
</nav>        
<section>
<p>Das ist ein Beispieltext.</p>
<p>Das ist ein Beispieltext.</p>
<p>Das ist ein Beispieltext.</p>
<p>Das ist ein Beispieltext.</p>    
<p>Das ist ein Beispieltext.</p>
<p>Das ist ein Beispieltext.</p>   
    
<p>Das ist ein Beispieltext.</p>
<p>Das ist ein Beispieltext.</p>
<div id="aside"><p>Hier kommt der Facebookbutton!</p></div>    
</section>  
<footer>
<div id="Footer"><p>Copyright &copy; </p></div>    
</footer>    
</body>
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 02.04.2015, 14:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

So. Viele. Divs. Warum diese ganze divitis? Das bringt doch nichts.
Und, wenn ich dich richtig verstehe: Du gibst deiner section eine feste Breite und wunderst dich, dass sie nicht breiter wird?
Auch solltest du elemente auch clearen wenn du sie floatest. Es scheint, dass du dir die Grundlagen von HTML/CSS noch genauer anschauen solltest.
Mit Zitat antworten
  #24 (permalink)  
Alt 03.04.2015, 07:39
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,

ich werfe mal eine ganz andere Lösung in den Ring. Irgendwie werden bei der ganzen Diskussion die wichtigsten Personen im Bezug zu einer Webseite vergessen - die Besucher.

Ein sinnvoller Grundsatz ist ja, das in Internetseiten nicht seitlich gescrollt werden sollte.

In Zeiten von Touchscreens, Smartphones und Tablets würde ich die Navigation als flexible Buttons erstellen. Dann haben die Benutzer direkt sichtbare Flächen, die sie zum Wechsel der Seite antouchen können.

Mit dem Flexbox-Modell muss auch nichts berechnet werden. Der HTML-Teil des Quellcodes bleibt sauber und übersichtlich. Links können ohne Änderung der CSS-Angaben hinzugefügt oder entfernt werden. Die Ansicht wirkt bei jeder Fensterbreite und jedem Zoomfaktor "sauber".

Später kann dann mit Responsive Design noch genauer auf die Anordnung / Breite der Buttons eingewirkt werden.

Vorlagen für CSS3-gestaltete Buttons gibt es inzwischen zu tausenden.

Nachfolgend mal ein Beispiel, nur flexibel, noch ohne jegliches Responsive Design:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout der Navigation</title>
   <meta name="description" content="Layout der Navigation">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      @media all {
         * {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
         html {
            font-size: 100%;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
         body {
            padding: 0;
         }
         ul {
            padding: 0;
            margin: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
         }
         li {
            list-style-type: none;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-flex: auto;
            -ms-flex: auto;
            flex: auto;
         }
         a {
            text-decoration: none;
            color:white;
            font-weight:bold;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.0rem;
            padding: 0.5rem 1rem;
            border:1px solid #74b807;
            border-radius: 0.5rem;
            margin: 0.5rem;
            -moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
            -webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
            box-shadow:inset 0px 1px 0px 0px #a4e271;
            background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809));
            background:-moz-linear-gradient(top, #89c403 5%, #77a809 100%);
            background:-webkit-linear-gradient(top, #89c403 5%, #77a809 100%);
            background:-o-linear-gradient(top, #89c403 5%, #77a809 100%);
            background:-ms-linear-gradient(top, #89c403 5%, #77a809 100%);
            background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0);
            background-color:#89c403;
            text-shadow:0px 1px 0px #528009;
         }
         a:hover {
            background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403));
            background:-moz-linear-gradient(top, #77a809 5%, #89c403 100%);
            background:-webkit-linear-gradient(top, #77a809 5%, #89c403 100%);
            background:-o-linear-gradient(top, #77a809 5%, #89c403 100%);
            background:-ms-linear-gradient(top, #77a809 5%, #89c403 100%);
            background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403',GradientType=0);
            background-color:#77a809;
         }
   </style>
</head>
<body>
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Über uns</a></li>
         <li><a href="#">Konzept</a></li>
         <li><a href="#">Öffnungszeiten</a></li>
         <li><a href="#">Kontakt</a></li>
         <li><a href="#">Anfahrt</a></li>
         <li><a href="#">Impressum</a></li>
      </ul>
   </nav>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (03.04.2015 um 07:41 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
ausrichten horizontal, css, html, navigation ausrichten

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
Problem mit sticky navigation ha-bauer Javascript & Ajax 6 22.04.2013 20:05
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Dropdown Navigation Problem in Opera xuxu CSS 1 28.01.2011 17:45
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera eRoZion CSS 17 16.09.2005 10:30
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:40 Uhr.