zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden content nicht im flow; position: absolute

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.12.2011, 16:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 12
malta befindet sich auf einem aufstrebenden Ast
Standard content nicht im flow; position: absolute

hallo,

folgendes problem:

ich habe ein menü erstellt, welches IMMER oben, über dem content stehen soll. dadrunter soll der content dargestellt werden. der beginnt jedoch leider schon 'unter' dem menü bzw. das menü liegt über dem content..
Zudem besteht das Problem, dass wenn ich das browserfenster kleiner mache und die menüpunkte untereinander dargestellt werden, rückt der content auch nicht automatisch weiter nach unten..

kann mir da jmd helfen?!

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">

      body {
         margin: 0;
      }

      #navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: 2px solid #ccc;
        background: #000000;
        font: 12px Arial,sans-serif;
      }

      #navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #navbar li {
        float: left;
        white-space:nowrap;
      }

      #navbar li a {
        display: block;
        background-color: #000000;
        color: #666666;
        padding: .5em;
        text-decoration: none;
      }

      #navbar li a:hover {
        background-color: #333333;
        color: #cccccc;
      }
      #content_box {
        display: block;
        align: center;
      }
      #content {
        width: 500px;
        margin:auto;
        background: #ffffff;
        font: 14px Arial,sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li>
          <a href="/">Startseite</a>
        </li>
        <li>
          <a href="/aktionen">Aktionen</a>
        </li>
        <li>
          <a href="/bilder-videos">Bilder & Videos</a>
        </li>
        <li>
          <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a>
        </li>
        <li>
          <a href="/reservierung">Kontakt & Reservierung</a>
        </li>
      </ul>
    </div>
    <div id="content_box">
      <div id="content">
        wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü
      </div>
    </div>
  </body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.12.2011, 16:53
Benutzerbild von jnv
jnv jnv ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.07.2010
Beiträge: 152
jnv befindet sich auf einem aufstrebenden Ast
Standard

Du kannst dem Content ein margin-top (Höhe der Navigation) geben.

Alternativ auf position-Angaben verzichten und ordentlich floaten, dann hast du solche Probleme nicht.
__________________
#m { f : g } /* jnv */
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.12.2011, 17:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 12
malta befindet sich auf einem aufstrebenden Ast
Standard

margin-top hilft..
allerdings nicht, wenn ich das browser-fenster kleiner ziehe und die menüpunkte untereinander angeordnet werden..
ich hätte den abstand gerne (immer gleich)/ relativ zum menü nicht zum browser-top..
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2011, 17:13
Benutzerbild von jnv
jnv jnv ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.07.2010
Beiträge: 152
jnv befindet sich auf einem aufstrebenden Ast
Standard

Nimm für #navbar die position-Angaben

HTML-Code:
        position: absolute;
        top: 0;
        left: 0;
raus, und ersetzte diese durch einen float.

Edit: align: center; ist meines Wissen nach kein gültiges CSS

Edit 2: Habe das immer überlesen. Mit float bleibt das Menü natürlich nicht immer oben. Mit absoluter Positionierung allerdings auch nicht. position:fixed evtl. Aber wie du das margin relativ machen kannst, wüsste ich so im Moment auch nicht.
__________________
#m { f : g } /* jnv */

Geändert von jnv (22.12.2011 um 18:01 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.12.2011, 18:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 12
malta befindet sich auf einem aufstrebenden Ast
Standard

wenn ich die position absolute rausnehme, bekomme ich das menü nicht mehr auf 100% breite und die border-bottom verschwindet auch zur hälfte:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">

      body {
         margin: 0;
      }

      #navbar {

        display: block;
        border-bottom: 2px solid #ccc;
        background: #000000;
        font: 12px Arial,sans-serif;
      }

      #navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #navbar li {
        float: left;
        white-space:nowrap;
      }

      #navbar li a {
        display: block;
        background-color: #000000;
        color: #666666;
        padding: .5em;
        text-decoration: none;
      }

      #navbar li a:hover {
        background-color: #333333;
        color: #cccccc;
      }
      #content_box {
        margin-top: 3em;
        display: block;
        align: center;
      }
      #content {
        width: 500px;
        margin:auto;
        background: #ffffff;
        font: 14px Arial,sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li>
          <a href="/">Startseite</a>
        </li>
        <li>
          <a href="/aktionen">Aktionen</a>
        </li>
        <li>
          <a href="/bilder-videos">Bilder & Videos</a>
        </li>
        <li>
          <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a>
        </li>
        <li>
          <a href="/reservierung">Kontakt & Reservierung</a>
        </li>
      </ul>
    </div>
    <div id="content_box">
      <div id="content">
        wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü
      </div>
    </div>
  </body>
</html>
Mit Zitat antworten
  #6 (permalink)  
Alt 22.12.2011, 18:16
Benutzerbild von jnv
jnv jnv ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.07.2010
Beiträge: 152
jnv befindet sich auf einem aufstrebenden Ast
Standard

Lies dir meinen Beitrag nocheinmal durch und schau dir anschließend #navbar an.

Da fehlt die float-Eigenschaft und eine Breite kann ich auch nicht sehen.
__________________
#m { f : g } /* jnv */
Mit Zitat antworten
  #7 (permalink)  
Alt 22.12.2011, 18:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 12
malta befindet sich auf einem aufstrebenden Ast
Standard

ich dachte, dass mit display: block; automatisch eine breite von 100% erzeugt wird!?

und dass div elemente grundsätzlich display: block; sind und daher nie nebeneinander stehen..

mit float: left; bzw float: right; gehts, aber ich verstehe nicht warum und was der unterschied ist.

nun greift allerdings der margin-top von container_box nicht mehr.. !? *?
Mit Zitat antworten
  #8 (permalink)  
Alt 22.12.2011, 18:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 12
malta befindet sich auf einem aufstrebenden Ast
Standard

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">

      body {
         margin: 0;
      }

      #navbar {
        float: left;
        width: 100%;
        border-bottom: 2px solid #ccc;
        background: #000000;
        font: 12px Arial,sans-serif;
      }

      #navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #navbar li {
        float: left;
        white-space:nowrap;
      }

      #navbar li a {
        display: block;
        background-color: #000000;
        color: #666666;
        padding: .5em;
        text-decoration: none;
      }

      #navbar li a:hover {
        background-color: #333333;
        color: #cccccc;
      }
      #content_box {
        display: block;
        align: center;
      }
      #content {
        margin-top: 2em;
        width: 500px;
        margin:auto;
        background: #ffffff;
        font: 14px Arial,sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li>
          <a href="/">Startseite</a>
        </li>
        <li>
          <a href="/aktionen">Aktionen</a>
        </li>
        <li>
          <a href="/bilder-videos">Bilder & Videos</a>
        </li>
        <li>
          <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a>
        </li>
        <li>
          <a href="/reservierung">Kontakt & Reservierung</a>
        </li>
      </ul>
    </div>
    <div id="content_box">
      <div id="content">
        wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü
      </div>
    </div>
  </body>
</html>
Mit Zitat antworten
  #9 (permalink)  
Alt 22.12.2011, 18:39
Benutzerbild von jnv
jnv jnv ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.07.2010
Beiträge: 152
jnv befindet sich auf einem aufstrebenden Ast
Standard

Damit sagst du nur, dass das Element die Breite bekommt die es benötigt. Hier musst du explizit eine Breite angeben.

#content_box erfüllt momentan keinen Sinn. Somit kannst du diese löschen, da du ja #content bereits zentriert hast.
Auf #content kannst du dann auch ein margin-top anwenden.
__________________
#m { f : g } /* jnv */
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.12.2011, 18:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 12
malta befindet sich auf einem aufstrebenden Ast
Standard

danke dir!
habe die container_box weggenommen und es funktioniert, allerdings wirkt das margin-top nicht..

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">

      body {
         margin: 0;
      }

      #navbar {
        float: left;
        width: 100%;
        border-bottom: 2px solid #ccc;
        background: #000000;
        font: 12px Arial,sans-serif;
      }

      #navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      #navbar li {
        float: left;
        white-space:nowrap;
      }

      #navbar li a {
        display: block;
        background-color: #000000;
        color: #666666;
        padding: .5em;
        text-decoration: none;
      }

      #navbar li a:hover {
        background-color: #333333;
        color: #cccccc;
      }
      #content {
        margin-top: 6em;
        width: 500px;
        margin:auto;
        background: #ffffff;
        font: 14px Arial,sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li>
          <a href="/">Startseite</a>
        </li>
        <li>
          <a href="/aktionen">Aktionen</a>
        </li>
        <li>
          <a href="/bilder-videos">Bilder & Videos</a>
        </li>
        <li>
          <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a>
        </li>
        <li>
          <a href="/reservierung">Kontakt & Reservierung</a>
        </li>
      </ul>
    </div>
    <div id="content">
        1wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü&nbsp;wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü
    </div>
  </body>
</html>
btw: macht es so sinn, wie id's als selector genommen werden, oder sollte ich das anders lösen? oder anders gefragt; ist das Wenige 'sauber'* geschrieben?

EDIT: *css konform geschrieben?!
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
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 18:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 15:20
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 17:30
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 16:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:47 Uhr.