Float und List-Style Problem

83RAM

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

<!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>

Alles anzeigen

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}

Alles anzeigen

MrMurphy

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

83RAM

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

<!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>

Alles anzeigen

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; }

Alles anzeigen

MrMurphy

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:

HTML

<!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>

Alles anzeigen

Gruss

MrMurphy

83RAM

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

83RAM

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....

MrMurphy

Hallo

Zitat

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

83RAM

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!

Tags