zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe Bei einer Css Floaten geht nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.05.2018, 01:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.05.2018
Beiträge: 11
westpiomt befindet sich auf einem aufstrebenden Ast
Frage Hilfe Bei einer Css Floaten geht nicht

Hallo ich soll diese seite so machen https://files.icq.net/get/09igwHSlnG...h705b01839b1bc

bekomme es aber nur so weit https://s1.imagebanana.com/file/180521/Vbn4hled.jpg

kann mir da jemand helfen, die 4 links unten nebeneinander statht untereinander zu bekommen mit floaten bekomme ich das nicht hin

und das archiv mit den links sollte nach rechts in eine eigene spalte und die links da untereinander

Mfg
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.05.2018, 05:27
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

Ohne Link zu deiner Seite oder den gesamten Quelltext können wir dir nicht konkret helfen.

Allgemein: Für die 4 Links unten erscheint mir Flexbox sinnvoller als Float.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.05.2018, 14:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.05.2018
Beiträge: 11
westpiomt befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
                                    <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Layout mit Flexbox</title>
   <link href="neulena.css" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Gentium+Basic" rel="stylesheet">

  <style>


  </style>
</head>
<body>
<section>



  <nav>
    <h1>Toller Blog
    <ul>
      <li><a href="#">Neue Beiträge</a></li>
      <li><a href="#">Archiv</a></li>
      <li><a href="#">Community</a></li>
         <li><a href="#">Kontakt</a></li> </h1>

           <br> <h2>Post 1</h2> <br>

      <p><h3>  von Lena Rimkus </p>
      Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                                Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore<br>
                                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
                                ea rebum. Stet clita kasd
                                gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                                amet, consetetur sadipscing<br>  </p>
                                elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                                sed diam voluptua. At vero eos
                                et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                                sanctus est <br>
                                Lorem ipsum dolor sit amet.</h3>


         <h4>  <li><a href="#">zu den Kommentaren</a></li>  </h4>




    </ul>


 <aside>



 <h5>Archiv
         <ul>
      <li><a href="#">Januar 2018</a></li>
      <li><a href="#">Februar 2018</a></li>
      <li><a href="#">März 2018</a></li>
         <li><a href="#">Mehr</a></li> </h5>
    </ul>


</aside>

</section>

     <div class="brclear"></div>
    <div id="footer">
         <p>&copy;Copyright 2018</p>

               <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
      <li><a href="#">Impressum</a></li>
         <li><a href="#">AGB</a></li>

    </ul>

  </div>







</body>
</html>
Code:
     body {
          font-family:  'Gentium Basic', serif;
          width: 90%;
          padding: 2%;
          border-radius: 20 px;
          text-shadow: 2px 5px 8px #333333;

        }
        nav ul {
          list-style-type: none;
          padding-left: 2.0%;
          width: 20%;
          border-radius: 20 px;
          display: flex;




        }
        nav ul li {
         margin: 1em auto;


        }
        section {
           width: 70%;
           display: flex;
        }
        article  {
           width: 20%;
           background: #ddd;
           padding: 2.5%;
           border-radius: 20 px;
        }

        aside     {
           width: 20%;
           background: #ddd;
           padding: 2.5%;
           border-radius: 20 px;
        }

        article, { width: 20%; }
        aside    { width: 20%; }
        nav      { width: 60%;}





        h1 { font-family: Gentium, serif;
                float: left; width: 80%;

        }

        h2  { font-family: Gentium, serif;
               width: 80%;
        }


        h3   { font-family: Gentium, serif;

        }


        h4   { font-family: Gentium, serif;
                  list-style: none;
        }


        h5   { font-family: Gentium, serif;
                margin: 1em auto;


        }
Hier bitte
Mit Zitat antworten
  #4 (permalink)  
Alt 21.05.2018, 15:43
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

Grundlage für ein funktionierendes CSS ist ein fehlerfreies HTML. Daran hapert es bei dir.

Elemente dürfen nicht ineinander verwebt sein (keine Ahnung ob es dafür einen passenderen Ausdruck gibt). Falsch ist zum Beispiel

Code:
<p>
<h3>
</p>
</h3>
Wobei zusätzlich h3 grundsätzlich nicht inner eines p-Elements stehen darf. Korrekt wäre hingegen

Code:
<p>
</p>
<h3>
</h3>
Zudem dürfen bestimmte Elemente nicht innerhalb von anderen Elementen stehen. Und weiter dürfen innerhalb von bestimmten Elementen nur bestimmte andere Elemente stehen.

Das alles beachtest du überhaupt nicht.

Webseiten in der Browserdarstellung sind zudem keine Fehleranzeige. Browser versuchen jeden Mist, der ihnen vorgesetzt wird, noch einigermaßen sinnvoll anzuzeigen.

Ich habe deine Seite mal online gestellt

Testseite

und durch den Validator gejagt

Ergebnis des Validators

Die Fehler solltest du zunächst beheben.

Die Links in dem Footer bekommst du mit folgenden CSS-Anweisungen nebeneinander:

Code:
   #footer ul {
      display: flex;
   }
   #footer li {
      list-style-type: none;
      padding: 0.2rem 0.5rem;
   }
Das habe ich in die Testseite bereits eingebaut.

Gruss

MrMurphy

Geändert von MrMurphy (21.05.2018 um 15:55 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.05.2018, 16:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.05.2018
Beiträge: 11
westpiomt befindet sich auf einem aufstrebenden Ast
Standard

danke vielmals aber mit dem code

Code:
Code:
   #footer ul {
      display: flex;
   }
   #footer li {
      list-style-type: none;
      padding: 0.2rem 0.5rem;
   }
sind die links jetzt zwar nebeneinander aber nicht mehr links an der seite sondern zu weit rechts ?

Mfg
Mit Zitat antworten
  #6 (permalink)  
Alt 21.05.2018, 16:34
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

Dann verwende stattdessen folgendes CSS:

Code:
   #footer ul {
      padding: 0rem;
      display: flex;
   }
   #footer li {
      list-style-type: none;
      margin-right: 1rem;
   }
Die Testseite habe ich angepasst.

Gruss

MrMurphy

Geändert von MrMurphy (21.05.2018 um 16:39 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 21.05.2018, 17:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.05.2018
Beiträge: 11
westpiomt befindet sich auf einem aufstrebenden Ast
Standard

danke hat super geklappt

jetzt muss ich nur noch die archiv seite mit januar 2018 bis mehr

nach rechts bekommen im heft steht

- das main element machen sie zum flexcontainer, sodass das layout zweispaltig wird (section nit artikeln links, aside rechts .

- damit die hauptnavigationen horizontal angeordnet werden, machen sie auch die ul innerhalb von nav zum flexcontainer, sie können hierfür auf den selektor nav ul zurückgreifen.

wie mach ich den das '? es geht immer nur um cm nach rechts wenn ich es versuche

Mfg

Code:
     body {
          font-family:  'Gentium Basic', serif;
          width: 90%;
          padding: 2%;
          border-radius: 20 px;
          text-shadow: 2px 5px 8px #333333;

        }
        nav ul {
          list-style-type: none;
          padding-left: 2.0%;
          width: 20%;
          border-radius: 20 px;
          display: flex;




        }
        nav ul li {
         margin: 1em auto;
          display: flex;

        }
        section {
           width: 70%;
           display: flex;
        }
        article  {
           width: 20%;
           background: #ddd;
           padding: 2.5%;
           border-radius: 20 px;
        }

        aside     {
           width: 20%;
           background: #ddd;
           padding: 2.5%;
           border-radius: 20 px;
        }

        article  { width: 20%; }
        aside    { width: 20%; }
        nav      { width: 60%;}





        h1 { font-family: Gentium, serif;
                float: left; width: 80%;

        }

        h2  { font-family: Gentium, serif;
               width: 80%;
        }


        h3   { font-family: Gentium, serif;

        }


        h4   { font-family: Gentium, serif;
                  list-style: none;
        }


        h5   { font-family: Gentium, serif;
                margin: 1em auto;

        }


 #footer ul {
      padding: 0rem;
      display: flex;
   }
   #footer li {
      list-style-type: none;
      margin-right: 1rem;
   }

Geändert von westpiomt (21.05.2018 um 17:20 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 21.05.2018, 17:15
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

Hast du überhaupt schon die Fehler korrigiert? Wenn ja benötigen wir den neuen fehlerfreien Quelltext.

Das main-Element finde ich zur Zeit noch gar nicht.

Gruss

MrMurphy

Geändert von MrMurphy (21.05.2018 um 17:27 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 21.05.2018, 17:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.05.2018
Beiträge: 11
westpiomt befindet sich auf einem aufstrebenden Ast
Standard

hab die ganzen fehler nicht alle verstanden hab versucht was zu ändern dann war der text auf einmal in der mitte und total lang untereinander...

HTML-Code:
                                    <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Layout mit Flexbox</title>
   <link href="neulena.css" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Gentium+Basic" rel="stylesheet">

  <style>


  </style>
</head>
<body>
<section>



  <nav>
    <h1>Toller Blog
    <ul>
      <li><a href="#">Neue Beiträge</a></li>
      <li><a href="#">Archiv</a></li>
      <li><a href="#">Community</a></li>
         <li><a href="#">Kontakt</a></li> </h1>

           <br> <h2>Post 1</h2> <br>

      <p>  von Lena Rimkus </p>
      Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                                Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore<br>
                                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
                                ea rebum. Stet clita kasd
                                gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                                amet, consetetur sadipscing<br>  </p>
                                elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                                sed diam voluptua. At vero eos
                                et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                                sanctus est <br>
                                Lorem ipsum dolor sit amet.</h3>


         <h4>  <li><a href="#">zu den Kommentaren</a></li>  </h4>




    </ul>


 <aside>



 <h5>Archiv
         <ul>
      <li><a href="#">Januar 2018</a></li>
      <li><a href="#">Februar 2018</a></li>
      <li><a href="#">März 2018</a></li>
         <li><a href="#">Mehr</a></li> </h5>
    </ul>


</aside>

</section>

     <div class="brclear"></div>
    <div id="footer">
         <p>&copy;Copyright 2018</p>

               <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
      <li><a href="#">Impressum</a></li>
         <li><a href="#">AGB</a></li>

    </ul>

  </div>







</body>
</html>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.05.2018, 18:31
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

Es ist leider recht schwierig dir zu helfen, da dir entscheidende Grundlagen fehlen. Das du zudem Informationen immer häppchenweise nachschiebst erleichtert die Hilfe auch nicht grade.

Damit du überhaupt zu einem Ergebnis kommst habe ich mal versucht mit den bislang bekannten Informationen eine korrekte Webseite zu erstellen.

Das CSS befindet sich im head-Bereich der Webseite, das kannst du auch komplett einfach in eine externe Datei auslagern.

Da bei meinem Testseiten-Provider bplaced.net größere Umbauarbeiten stattfinden kann ich aktuell leider keine Online-Version zur Verfügung stellen. Vorhin hat die noch funktioniert, jetzt leider nicht mehr.

Hier der Quelltext der Webseite:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout mit Flexbox 01</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      body {
         font-family: 'Gentium Basic', serif;
         text-shadow: 2px 5px 8px #333333;
         padding: 2%;
         border-radius: 20px;
      }
      h1 {
         font-family: Gentium, serif;
         width: 80%;
      }
      h2 {
         font-family: Gentium, serif;
         width: 80%;
      }
      header {
         max-width: 700px;
      }
      nav {
         max-width: 700px;
      }
      nav ul {
         padding: 0px;
         display: flex;
      }
      nav ul li {
         list-style-type: none;
         margin-right: 1rem;
      }
      main {
         max-width: 700px;
         display: flex;
      }
      article {
         background: #ddd;
         padding: 2.5%;
         border-radius: 20px;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }
      aside {
         background: #ddd;
         padding: 2.5%;
         border-radius: 20px;
         margin-left: 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 150px;
      }
      footer {
         max-width: 700px;
      }
      footer ul {
         padding: 0rem;
         display: flex;
      }
      footer li {
         list-style-type: none;
         margin-right: 1rem;
      }
   </style>
</head>
<body>
   <header>
      <h1>Toller Blog</h1>
   </header>
   <nav>
      <ul>
         <li><a href="#">Neue Beiträge</a></li>
         <li><a href="#">Archiv</a></li>
         <li><a href="#">Community</a></li>
         <li><a href="#">Kontakt</a></li> 
      </ul>
   </nav>
   <main>
      <article>
         <h2>Post 1</h2>
         <p>von <i>Lena Rimkus</i></p>
         <p>Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
         <p>magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing</p>
         <p>elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
         <p>Lorem ipsum dolor sit amet.</p>
         <p class="link"><a href="#">zu den Kommentaren</a></p>
      </article>
      <aside>
         <h2>Archiv</h2>
         <p><a href="#">Januar 2018</a></p>
         <p><a href="#">Februar 2018</a></p>
         <p><a href="#">März 2018</a></p>
         <p><a href="#">Mehr</a></p> 
      </aside>
   </main>
   <footer>
      <p>&copy; Copyright 2018</p>
      <ul>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Über uns</a></li>
         <li><a href="#">Impressum</a></li>
         <li><a href="#">AGB</a></li>
      </ul>
   </footer>
</body>
</html>
Bei einigen CSS-Angaben weiß ich auch nicht, ob sie in der Aufgabenstellung gefordert werden oder ob du damit aus eigenem Antrieb die Qualität der Seite verschlimmerst.

Zum Beispiel der Schatten für den Text, der das Lesen der Seite unnötig erschwert. Oder border-radius für das body-Element.

Nachtrag: Die Seite funktioniert grade mal wieder. Ich weiß aber nicht ob während der Umbauarbeiten von bplaced.net immer problemlos abrufbar ist. Einfach mal probieren.

Testseite 2

Nachtrag: Ich habe die Testseite 2 für ein späteres Beispiel angepasst.

Gruss

MrMurphy

Geändert von MrMurphy (21.05.2018 um 20:56 Uhr)
Mit Zitat antworten
Sponsored Links
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 Menü - Anfänger benötigt Hilfe mauricen CSS 2 24.01.2013 12:44
ext rechts und links an CSS Kreis floaten? choumana CSS 10 20.11.2012 15:12
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! Web4Live CSS 2 13.07.2011 17:01
css hilfe victorwooten CSS 1 19.11.2006 14:15
CSS mit CSS Seiten verlinken !!! BRAUCHE HILFE !!!! beavis-2005 CSS 2 16.01.2006 18:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:38 Uhr.