[CSS] position:?

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [CSS] position:?

    hi also ich habe eine homepage mit ganz normalen tabbelen geschrieben das es mir aber zu unübersichtlich wurde beschloss ihc die homepage mit css zu schreiben und nun meine frage als ich die hompe mit positon:absolute geschrieben habe lies sich die homepage nicht zentrieren ??? was ratet ihr für absolute bitte auch ein beispiel damit ich es auch verstehe

    thx im voraus

    inu123
    Stichworte: -
  • #2
    Code:
     
<div id="layout">
	<!--komplette Seite hier rein -->
</div>

    und im css dann


    Code:
     
#layout {
	margin-left: auto;
	margin-right: auto;
	width: 70%; /** Musste schauen wie breit deine Seite ist **/
}
    wenn ich das nun richtig in erinnerung habe.

    Kommentar

    • #3
      und dem umgebenden block noch ein
      Code:
      text-align:center;
      mitgeben.

      @inu123: es stört sich sicher niemand dran, wenn du in deinen sätzen punkte verwendest. danke.
      Die Zeit hat ihre Kinder längst gefressen

      Kommentar

      • #4
        big thx , wenn ich noch schwierigkeiten bekommen werde, wende ich mich an euch.

        @derhund: ok

        Kommentar

        • #5
          hmm hab jetzt den anweisungen dir ihr mir gegeben habt befolgt. Ich habe text-align:center; eingeben und das ganze layout ist verrutscht :? mein anderes problem wie mache ich das, dass wenn ich immer mehr text hinschreibe sich die ganzen layout container mitziehen sonst zieht sich nur die box wo der inhalt auch erweitert wird und dann überlappt sich das alles.

          hier mein Anfänger code

          <html>
          <head>
          <title>Deadline-Cup</title>
          <body>

          <!-- /container -->
          <div id="layout">
          <div id="header"><img src="banner.jpg"></div>
          <div id="menu1">
          <p><a href="index.html">Startseite</a></p>
          <p><a href="index.html">Anmeldung</a></p>
          <p><a href="index.html">Cup-Team</a></p>
          <p><a href="index.html">Teilnehmer</a></p>
          <p><a href="index.html">Turnierbaum</a></p>
          <p><a href="index.html">Hall of Fame</a></p>
          <p><a href="index.html">Kontakt</a></p>
          </div>
          <div id="navi"> <marquee direction="left"> >>| : : | Willkommen auf der Deadline-cuP Web Seite | : : | Nächster CuP steht noch nicht fest!!! | : : |<< </marquee></div>
          <div id="contents">
          <p>Text Text Text Text Text Text Text Text Text Text Text </p>
          <p>Text Text Text Text Text Text Text Text Text Text Text </p>
          <p>Text Text Text Text Text Text Text Text Text Text Text </p>
          <p>Text Text Text Text Text Text Text Text Text Text Text </p>
          </div>
          <div id="footer">&copy; by xxx</div>
          </div>
          <!-- /container -->

          <style type="text/css">

          #layout {
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          text-align:center;
          }


          #header {
          border: 1px solid black;
          postion:absolute;
          height: 150px;
          width: 800px;
          background-color: #808080;
          top: 230px
          }

          #menu1 {
          border: 1px solid black;
          position:absolute;
          left:92px;
          top: 220;
          background-color: #808080;
          height: 400px;
          width: 150px;
          }

          #footer {
          border: 1px solid black;
          position:absolute;
          left: 92px;
          top: 640px;
          width: 800;
          height: 25;
          background-color: #808080;
          }

          #navi {
          position:absolute;
          border: 1px solid black;
          top: 180px;
          left:92px;
          background-color: #808080;
          width: 800px;
          height: auto;
          }

          #contents {
          position:absolute;
          border: 1px solid black;
          background-color: #808080;
          width: 630px;
          height: 400px;
          top: 220px;
          right:92px;
          }

          <!--Hover/-->
          a:link { text-decoration:none; font-weight:bold; color:#000000; }
          a:visited { text-decoration:none; font-weight:bold; color:#000000; }
          a:hover { text-decoration:none; font-weight:bold; background-color:#C0C0C0; }
          a:active { text-decoration:none; font-weight:bold; background-color:#C0C0C0; }
          a:focus { text-decoration:none; font-weight:bold; background-color:#C0C0C0; }
          </style>
          </body>
          </html>



          hmm

          thx schon mal im voraus

          Kommentar

          • #6
            Original geschrieben von inu123
            Ich habe text-align:center; eingeben und das ganze layout ist verrutscht :? mein anderes problem wie mache ich das, dass wenn ich immer mehr text hinschreibe sich die ganzen layout container mitziehen sonst zieht sich nur die box wo der inhalt auch erweitert wird und dann überlappt sich das alles.
            ja, das sind die üblichen probleme, die absolute positionierung oftmals nach sich zieht.
            sie ist auch nicht der heilige gral des layoutens mit CSS, auch wenn viele anfänger das denken.

            verzichte auf absolute positionierung, und setze dein layout mit float etc. um, wo nötig.

            und schau dir mal das neue selfhtml-kapitel über CSS-basierte Layouts an.
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar

            Vorherige template Weiter
            Lädt...
            X