Ergebnis 1 bis 8 von 8

Thema: Float und List-Style Problem

  1. #1
    HTML Newbie
    Registriert seit
    13.06.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Float und List-Style Problem

    Hallo, vielen Dank für die Möglichkeit hier Fragen stellen zu können!

    Bin eher HTML/CSS Neuling und bin gerade dabei mir für meinen Nebenberuf eine Webseite zu basteln.

    Nun steh ich vor einem Problem:
    hab auf der linken seite ein aside für news und ein nav für die navigation durch die unterseiten
    rechts ist der text
    der text floated auch um beide rum, nur irgendwie wird durch die seitennavi der text unterbrochen, obwohl es nur zur "platzreservierung" auf der linken seite kommt. Hätte es auch schon mit position:absolute probiert, das funktionerte aber auch nicht so richtig.
    aber seht selbst

    2. Problem
    beim Seitennavi sind die Aufzählungspunkte beim ersten li-Element links und bei den folgenden li-Elementen sind sie rechts....??


    Vielen vielen Dank für eure Antworten!

    Hier der HTML und der CSS Code


    HTML-Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>Trekking Toni </title>
            <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
    
        <body>
            <div id="wrapper">
    
    
            <header>
                <p id="logotext">Trekking Toni</p>
            </header>
    
    
            <nav id="navoben">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="vita.html">Über mich</a></li>
                    <li><a href="übersicht.html">Kurse und Touren</a></li>
                    <li><a href="pension.html">Pension und Restaurant</a></li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                    <li><a href="links.html">Links</a></li>
                </ul>
            </nav>
    
    
            <aside>
                <h2>Neuigkeiten</h2>
                <ul>
                    <li>TEST</li>
                    <li>13.06.2015 08:42: i verstehs ned, wieso der text ned sauber floated! >:o</li>
                </ul>
            </aside>
    
    
            <nav id="navlinks">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="vita.html">Über mich</a></li>
                    <li><a href="übersicht.html">Kurse und Touren</a></li>
                    <li><a href="pension.html">Pension und Restaurant</a></li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                    <li><a href="links.html">Links</a></li>
                </ul>
            </nav>
    
    
            <section>
                <h1>Willkommen auf meiner Website!</h1>
                <br />
                <p>blablablablkajdlkjsladgjfasöldgjflakflaskflskjflökasjdfklsflka
    jdfkblablablablkajdlkjsladgjfasöldgjflakflaskflskjflökasjdfklsflkajdfkl
    blablablablkajdlkjsladgjfasöldgjflakflaskflskjflökasjdfklsflkajdfkl
    blablablablkajdlkjsladgjfasöldgjflakflaskflskjflökasjdfklsflkajdfkl
    blablablablkajdlkjsladgjfasöldgjflakflaskflskjflökasjdfklsflkajdfkl
    blablablablkajdlkjsladgjfasöldgjflakflaskflskjflökasjdfklsflkajdfkll</p>
                <br />        
                <br />
                <br />
                <br />
            </section>
    
    
            <footer>
                <small>copyright by 83Ram</small>
            </footer>
            
    
            </div>
        </body>
    </html>
    Code:
    * {margin: 0; padding: 0;}
    
    body {/*background-image: url(bilder/hintergrund.png);*/ background-color: #74DF00; background-attachment: fixed; font-family: Times New Roman, serif, sans-serif; }
    
    #wrapper {width: 950px; margin: 0 auto; border: solid black 2px; }
    
    header {background-image: url(bilder/gipfelsonne.png); height: 294px;}
    #logotext {padding: 50px 20px; font-size: 20pt; text-align: right; }
    
    section {margin-top: 30px; margin-left: 250px; margin-bottom: 30px; /*background-color: orange; */}
    section h1 {padding-top: 20px; padding-bottom: 0.6em;  }
    section h2 {padding-top: 0.5em; padding-bottom: 0.4em; }
    section h3 {padding-top: 0.5em; padding-bottom: 0.2em; }
    section p {padding-bottom: 1em;}
    section ul {padding-left: 1em; }
    section li {padding-left: 0,5em; }
    
    #navoben ul {list-style-type: none; }
    #navoben li {display: inline; }
    #navoben a {display: block; width: 150px; float: left; text-align: center; line-height: 24px; }
    
    #navlinks {width: 220px; height: 150px; float: left; margin-right: 680px; margin-top: 30px; /*position: absolute; top:480px;*/ border: solid black 1px;}
    #navlinks ul {padding-left: 1em; list-style-type: square; display: block; }
    #navlinks ul ul {padding-left: 1em; list-style-type: disc;}
    #navlinks a {width: 220px; float: left; line-height: 24px; }
    
    
    aside {width: 220px; height: 250px; float: left;}
    aside h2 {margin-top: 30px; padding-bottom: 0.4em;}
    aside ul {list-style-type: none;}
    
    footer {text-align: center; clear: both; background-color: #F2F2F2; }
    
    a:link{color:black; text-decoration: none}
    a:visited {color: black;}
    a:hover {background-color:white}
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Float und List-Style Problem

    Hallo,

    deine Probleme entstehen aus mehreren Fehlern, die teilweise auch noch zusammenspielen.

    Zuächst solltest du dich mit den Auswirkungen und dem richtigen Einsatz von float beschäftigen. Google mal nach "float aus dem Fluss nehmen" und "float clear". Da passiert noch einiges mehr als das Elemente nach links oder rechts verschoben werden.

    Weiterhin willst du in übertriebener Weise Breiten und Höhen bestimmen, bist dir aber offensichtlich nicht im klaren, was alles dazu berücksichtigt werden muss (padding, border, margin). Dadurch ist der Inhalt von Containern teilweise größer als die Container selbst.

    Lösche zum Beispiel mal aus

    Code:
    #navlinks a {width: 220px; float: left; line-height: 24px;
    das

    Code:
     line-height: 24px;
    Andere unsaubere Lösungen (z. B. Abstände durch das br-Element erzeugen) sind eher nebensächlich.

    Gruss

    MrMurphy
    Geändert von MrMurphy (13.06.2015 um 15:10 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    13.06.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float und List-Style Problem

    Vielen Dank erstmal für deine Antwort. Hab das mit den Größenzuweisungen in einem Tutorial gelesen. Vom googlen her hab ich viel lesen können über Float usw aber das hat mir leider meine Frage nicht so richtig beantwortet.
    Hab nun nochmals eine Test-Seite erstellt ohne Inhalt nur damit ich mit den Boxen "spielen" kann. Aber so recht will es nicht funktionieren.
    Vielleicht könntet ihr mir ja die Frage beantworten.

    News und Naviseite wären jetzt untereinander, und Section hätte ich jetzt testweise auf Float: right eingestellt, aber es will nicht nach oben "rutschen".

    Vielen Dank für eure Bemühungen!

    HTML-Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>TEST</title>
            <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
    
        <body>
            <div id="wrapper">
    
            <header>                <p>header</p>            </header>
            <nav id="navioben">        <p>navioben</p>            </nav>
            <aside>                    <p>news</p>                </aside>
            <nav id="naviseite">    <p>naviseite</p>        </nav>
            <section>                <p>section</p>            </section>
            <footer>                <p>footer</p>            </footer>
    
            </div>
        </body>
    </html>
    Code:
    * {margin: 0; padding: 0;}
    body {background-color: lightgreen; color: white; }
    
    
    #wrapper {background-color: black; width: 1000px; margin: auto; }
    header {background-color: green; width: 1000px; height: 300px;}
    #navioben {background-color: red; width: 1000px; height: 50px;}
    aside {background-color: blue; width: 200px; height: 250px; }
    #naviseite {background-color:purple; width: 200px; height: 250px; }
    section {background-color: grey; width: 580px; height: 450px; float: right;}
    footer {background-color:orange; width: 1000px; height: 30px; clear: both; }

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Float und List-Style Problem

    Hallo,

    Blockelemente wie div, aside, nav, section, h1 bis h6, p u.s.w. beginnen immer unterhalb des vorigen Blockelements.

    Wenn Blockelemente gefloatet nebeneinander stehen sollen müssen beide gefloatet werden.

    In deinem Fall sollen 2 Elemente untereinander stehen und daneben soll ein weiteres Element angeordnet werden. Dafür gibt es mit HTML und CSS keine direkte Lösung.

    Du musst also um die beiden übereinander stehen Elemente ein zusätzliches herumlegen und das ebenfalls floaten.

    Das könnte dann so aussehen:

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
       <title>Probleme 03</title>
       <meta name="description" content="HTML5, CSS3">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Um alte IE HTML5-tauglich zu machen -->
       <!--[if lt IE 9]>
          <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]-->
       <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
       <style>
          * {padding: 0; margin: 0;}
          body {background-color: lightgreen; color: white; }
          #wrapper {background-color: black; width: 1000px; margin: auto; }
          header {background-color: green; height: 300px;}
          #navioben {background-color: red; height: 50px;}
          aside {width: 200px; float: left; }
          section {background-color: blue; height: 250px; }
          #naviseite {background-color:purple; height: 250px;}
          main {background-color: grey; width: 580px; height: 450px; float: right;}
          footer {background-color:orange; height: 30px; clear: both; }
       </style>
    </head>
    <body>
       <div id="wrapper">
          <header>
             <p>header</p>
          </header>
          <nav id="navioben">
             <p>navioben</p>
          </nav>
          <aside>
             <section>
                <p>news</p>
             </section>
             <nav id="naviseite">
                <p>naviseite</p>
             </nav>
          </aside>
          <main>
             <p>main</p>
          </main>
          <footer>
             <p>footer</p>
          </footer>
       </div>
    </body>
    </html>
    Gruss

    MrMurphy
    Geändert von MrMurphy (14.06.2015 um 11:40 Uhr)

  5. Folgende User finden die Antwort von MrMurphy gut:


  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    13.06.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float und List-Style Problem

    das ist eine sehr gute idee, vielen vielen dank schau's mir später genauer an
    danke dir!

  7. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    13.06.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float und List-Style Problem

    habs jetzt bei allen seiten eingefügt und es läuft perfekt, vielen vielen vielen!! Dank

    Eine andere Frage hätte ich noch: Kann ich die News zentral in einer (html-)Datei eingeben, damit ich die nicht auf jeder seite per copy&paste einfügen muss?
    hätte schon nach "content zentral verwalten" u.a. gegoogelt....

  8. #7
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Float und List-Style Problem

    Hallo

    Kann ich die News zentral in einer (html-)Datei eingeben, damit ich die nicht auf jeder seite per copy&paste einfügen muss?
    Nein, nur mit HTML und CSS geht das nicht.

    Ich kenne dafür zwei bzw. drei Möglichkeiten.

    1. Du benutzt einen Editor der das gleichzeitige Berarbeiten von mehreren Dateien unterstützt. Ich kenne aber nur den kostenpflichtigen Dreamweaver.

    2. Du benutzt ein Content Management System (CMS). Die können in der Regel so eingerichtet werden, das bestimmte Informationen auf allen Seiten angezeigt werden. Es gibt jede Menge kostenlose, allerdings ist die Einarbeitung in der Regel eher aufwändig. Dein Provider muss zudem die Voraussetzungen für CMS bereitstellen, in der Regel PHP und eine Datenbank wie mySQL.

    3. Du benutzt die serverseitige Programmiersprache PHP. Auch die muss von deinem Provider unterstützt werden, du benötigst aber nur wenige Befehle (z. B. include), die du problemlos im Internet findest. Das ist für mich die sinnvollste Lösung.

    Zum Testen von CMS und PHP kannst du dir selbst einen kostenlosen Server wie XAMPP aufsetzen oder einen kostenlosen Provider wie bplaced.net nutzen. Bei kostenpflichtigen Providern ist in der billigsten Variante häufig PHP nicht enthalten.

    Gruss

    MrMurphy
    Geändert von MrMurphy (14.06.2015 um 18:27 Uhr)

  9. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    13.06.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float und List-Style Problem

    oke danke MrMurphy, ich werds momentan lassen und einfach gestalten per copy&paste, soviel bzw. sooft gibts da auch nichts zu ändern.
    also vielen vielen Dank nochmals!

Ähnliche Themen

  1. List-Style Symbol '>'
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.07.2010, 12:14
  2. mit list-style-type einzelne Listenelemente ansprechen.
    Von markise im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.02.2010, 16:50
  3. Problem mit list-style-type in Navigation
    Von markise im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.02.2010, 19:45
  4. List - Style Abstände
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 07.07.2008, 03:03
  5. list-style-image..?
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.06.2007, 16:10

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •