Navibar & Content nebeneinander ausrichten??? :'(

    • Navibar & Content nebeneinander ausrichten??? :'(

      Hey liebe [SIZE="6"][COLOR="#ff8c00"]M[/COLOR][/SIZE]-[SIZE="3"]Core[/SIZE] Community :)

      Ich hab ein behindertes Problem -.-'

      Undzwar:



      Die Navibar und der Content sollen nebeneinander ausgerichtet werden doch es funktioniert mit keinem beschissenen Code.
      Google hat auch nicht weiter geholfen.
      Und deswegen wollte ich mein Glück bei meinen baby's probieren :grin:
      wisst ihr villt. wie der code dafür lauten könnte?

      Hoffe über schnelle und hilfreiche antworten :)

      Danke! ♥

      mfg

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Hier ein Code-Beispiel

      Quellcode

      1. *
      2. {
      3. padding: 0px;
      4. margin: 0px;
      5. }
      7. #wrapper
      8. {
      9. width: 960px;
      10. background-color: #EFEFEF;
      11. margin: 0 auto;
      12. }
      14. #sidebar_left
      15. {
      16. width: 150px;
      17. display: block;
      18. float: left;
      19. background-color: #DFDFDF;
      20. height: 250px;
      21. }
      23. #content
      24. {
      25. margin-left: 150px;
      26. min-height: 250px;
      27. }
      29. .clearfix:after {
      30. content: ".";
      31. display: block;
      32. clear: both;
      33. visibility: hidden;
      34. line-height: 0;
      35. height: 0;
      36. }
      38. .box
      39. {
      40. background-color: #CCF;
      41. float: left;
      42. margin: 10px 35px;
      43. width: 250px;
      44. height: 250px;
      45. }
      Alles anzeigen

      HTML-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN\" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      4. <html>
      5. <head>
      6. <link rel="stylesheet" type="text/css" href="design/default.css" media="screen" />
      7. </head>
      8. <body>
      9. <!-- Zentrierung der Website -->
      10. <div id="wrapper">
      11. <!-- Linke Sidebar = Navigation -->
      12. <div class="clearfix">
      13. <div id="sidebar_left">
      14. Navigation
      15. </div>
      16. <!-- Maincontent -->
      17. <div id="content">
      18. <h3>Hauptinhalt</h3>
      19. </div>
      20. </div>
      21. <!-- Box 1 -->
      22. <div class="box">
      23. <h4>Box1</h4>
      24. </div>
      25. <!-- Box 2-->
      26. <div class="box">
      27. <h4>Box2</h4>
      28. </div>
      29. <!-- Box 3-->
      30. <div class="box">
      31. <h4>Box3</h4>
      32. </div>
      33. </div>
      34. </body>
      35. </html>
      Alles anzeigen

    • ( Wrapper oder Body sollten display: relative haben, da sonst hier spätestens der IE sein eigenes Spielchen spielt.)
      Wäre mir neu.

      Ich würde einen FullWrapper machen (der den kompletten Seiteninhalt enthält),
      die Navigation via Margin & width anrichten und dann den Content Absolut ( Margin-left: Navigationsbreite + Abstand px/%tual)
      anrichten und fertig.

      Vorteil wäre hierbei, dass du weder eine feste Content Höhe noch eine feste Navigationshöhe festlegen müsstest.

    • Dann ist es dir neu bezüglich des Internet Explorers.
      Ich weiß es, da es mir vor wenigen Tagen passiert ist.
      Dies ist ein spezieller Fall, da ich ihn simple nachgestellt habe, er jedoch ohne position:relative funktioniert hat.
      Woran es gelegen hat, ist mir nicht ganz bewusst.
      Eventuell Überschreibung unterer Ordnungen, worauf ich nun nicht eingehen möchte.
      Dennoch war hier die Lösung position:relative.

      Sage mir den Unterschied zwischen deinem und meinem Vorschlag?
      Ich habe hier einen Wrapper, an dem alles ausgerichtet wird und die Navigation links verläuft?

      Die Höhe ist bei mir ebenso irrelevant, ich aufgrund des mageren Inhaltes einfach festgelegt habe.

    • Ich frag mich wieso ihr alles mit Wrapper und so macht, naja egal

      mach einfach "float: left;" in die Container "navbar" und "content"

      Du gibst "navbar" und "content" ne feste breite und jenachdem, ne höhe, ausser du machst background repeaten..

      Demnach nach den "content" setzt du einfach ein "clear" um das Float zu beenden

      <div class="clear:both"> oder so war das, bin leider gerade per PS3 Online und kann gerade nicht an den Rechner

    • silvermf;271531 schrieb:

      Ich frag mich wieso ihr alles mit Wrapper und so macht, naja egal

      mach einfach "float: left;" in die Container "navbar" und "content"

      Du gibst "navbar" und "content" ne feste breite und jenachdem, ne höhe, ausser du machst background repeaten..

      Demnach nach den "content" setzt du einfach ein "clear" um das Float zu beenden

      <div class="clear:both"> oder so war das, bin leider gerade per PS3 Online und kann gerade nicht an den Rechner


      Wrapper ist wie der Body ein Grundbegriff des Codens..
      Wrapper bedeutet sowas wie.. joar verpackung XD
      Ebenetwas was alles zusammen fasst...
      Daher benutzt man auch die div id wrapper damit jeder seit das es um die gesamte verpackung der HP geht.

      Mit deiner Lösung selbst wirst du aber überhaupt nicht weiter kommen xD


      @Synaptic

      Ich würde... sofern es möglich ist NIE Position Absolut nehmen... Soweit wie möglich sollte man imemr versuchen alles mit margin udn Float in irgendeiner Form zu lösen. Ansonsten kommt man mit den ganzen absolut,relativ oder fixxirten Elementen nur durcheinander...

      Virtuals lösung ist hier wohl eindeutig die beste..
      sogar an Browserversatz ect. gedacht XD

      Aber die grundidee dies zu lösen ist einfach das benutzen von Float und Margin. Damit bekommt man das sicher hin.
      Hat aber Virtual schon gezeigt.


      Zum problem mit dem IE:
      Virtual hat recht^^
      Der dreht bei sowas leicht ab