gebbers: Textfeld?

SELF-Forum

Textfeld?

gebbers
– Informationen zu den Bewertungsregeln

Hi, ich habe ein wenig an einer Seite rumgebastelt und komme nun nicht mehr weiter.
Bis jetzt steht der Banner, und das Navi(dieses ist nicht nicht programmiert stellt aber kein Problem da)
Nun soll neben das Navi noch Text, also nicht untereinander, wie schaffe ich das?
Hier mal der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.body1 { margin-left:20%; margin-right:80%; margin-top:0%;  }
.body2 { margin-left:30%; margin-right:80%; margin-top:0%; line-height:80%;   }
.style1 {
 font-family: "Bell Gothic Std Light";
 color: #BABABA;
 font-weight: bold;
 font-size: 24px;
}
</style>
</head>

<body>
<div align="center" class="body1"><img src="banner.jpg" width="708" height="188" alt="Banner" /></div>
<div class="body1">
<p class="style1">Home</p>
<p class="style1">News</p>
<p class="style1">Programm</p>
<p class="style1">Teilnehmer</p>
<p class="style1">Kontakt</p>
</div>
<div class="body2">
<p class="style1">ewiohgerozheprhoktrjprtküjrtjpk</p>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A050A0">
  <colgroup>
    <col width="200">
    <col>
  </colgroup>
    <td valign="top" bgcolor="#FFFFFF">
      <table border="0" align="center" cellpadding="10" cellspacing="0">
        <tr>
          <td width="460">
            <h2>Worum geht es hier eigentlich?</h2>
            <p>Ach, um Web-Design, halt das Übliche.</p>
            <p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
            <p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Die Tabelle, oder der 2 Text sollen auf der selben Höhe neben "Home" starten.
Achso, möglichst mit % arbeiten damits auch für andere Seiten klappt, danke schon mal ;)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Textfeld?

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Hi, ich habe ein wenig an einer Seite rumgebastelt und komme nun nicht mehr weiter.
    Bis jetzt steht der Banner, und das Navi(dieses ist nicht nicht programmiert stellt aber kein Problem da)

    Seit wann ist eine Navigation saechlich?

    Nun soll neben das Navi noch Text, also nicht untereinander, wie schaffe ich das?

    Beschaeftige dich mit floating.

    Und verzichte moeglichst auf Tabellen zu Layoutzwecken, dazu sind sie nicht gedacht.

    MfG ChrisB

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Textfeld?

      gebbers
      – Informationen zu den Bewertungsregeln

      Mhhh erstmal danke, durfte ja kein neuen Theard machen also gehts hier weiter!
      Das Problem gibts immernoch da es mit dem floating, warum auch immer, nicht geklappt hat.
      Hab mich dann entschieden das ganze einfach über einen Positionsverweis anzugeben, was auf der normalen Bildschirmgröße auch toll klappt.

      Problematisch wird es wenn der Bildschirm kleiner ist, dann überlappen die Texte und das ganze schaut nicht mehr wirklich gut aus.
      Ich weiß nicht was für Alternativen es noch gibt, bzw. ob man die absolute Position ändern kann, so das die Abstände nie verändert werden.

      Danke schon mal, hier jetzt der neue Quelltext:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      .body1 { margin-left:20%; margin-right:80%; margin-top:0%; }
      .body2 { margin-left:20%; margin-right:80%; margin-top:0%;  }
      .body3 { position:absolute ; top:220px; left:200px;}
      .style1 {
       font-family: "Bell Gothic Std Light";
       color: #BABABA;
       font-weight: bold;
       font-size: 24px;
      }
      </style>
      </head>

      <body>
      <div align="center" class="body1"><img src="banner.jpg" width="708" height="188" alt="Banner" /></div>
      <div class="body2">
      <p class="style1 ">Home</p>
      <p class="style1 ">News</p>
      <p class="style1 ">Programm</p>
      <p class="style1 ">Teilnehmer</p>
      <p class="style1 ">Kontakt</p>
      </div>

      <p class="style1 body3">ewiohgerozheprhoktrjprtküjrtjpk</p>

      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Textfeld?

        EKKi
        – Informationen zu den Bewertungsregeln

        Mahlzeit,

        Positionsverweis

        Was ist das?

        .body1 { margin-left:20%; margin-right:80%; margin-top:0%; }
        .body2 { margin-left:20%; margin-right:80%; margin-top:0%;  }
        .body3 { position:absolute ; top:220px; left:200px;}
        .style1 {
        font-family: "Bell Gothic Std Light";
        color: #BABABA;
        font-weight: bold;
        font-size: 24px;
        }

        Klassen namens "body1", "body2", "body3", "style1" o.ä. sind ziemlicher Bullshit. Verwende "sprechende Namen" - also sowas wie "navigation", "menu", "footer", "content" oder weiß der Geier. Ansonsten blickst Du nämlich irgendwann nicht mehr durch, was nun eigentlich was bedeutet - inhaltlich!

        Warum probierst Du nicht einfach aus, das in SELFHTML existierende http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Beispiel bei Dir umzusetzen und es dann an Deine Layout-Wünsche und Bedürfnisse anzupassen?

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Textfeld?

          gebbers
          – Informationen zu den Bewertungsregeln

          Moin, erstmal vielen dank, klappt schon fast perfekt!
          Hab jetzt lediglich das Problem das vor jedem Naviverzeichnis ein Punkt ist.
          Hoffe es ist schon ein wenig ordentlicher:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                 "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
          <title>Zweispaltiges Layout mit fester Breite</title>
          <style type="text/css">
            banner{
             margin-left:20%; margin-right:80%; margin-top:0%; }
            body {
              color: black; background-color: white;
              font-size: 100.0%;
              font-family: Helvetica,Arial,sans-serif;
              margin: 0;
              text-align: center;
            }

          div#Seite {
              text-align: left;
              margin: 0 auto;
              width: 708px;
              padding: 0.5em;
             }

          ul#Navigation {

          float: left;
              margin: 0; padding: 0;

          }
            ul#Navigation li {
           font-family: "Bell Gothic Std Light";
            color: #BABABA;
            font-weight: bold;
            font-size: 24px;
              margin: 0; padding: 0.5em;
            }
            ul#Navigation a {
              display: block;
           font-size: 24px;
              padding: 0.2em;
           font-family: "Bell Gothic Std Light";
           color: #BABABA;
              font-weight: bold;
            }

          }
            div#Inhalt {
              margin-left: 22em;
              padding: 0 1em;

          }

          div#Inhalt p {
              font-size:1em;
              margin: 1em 0;
            }
          </style>
          </head>
          <body>
          <div align="center" class="banner"><img src="banner.jpg" width="708" height="188" alt="Banner" /></div>
          <div id="Seite">
            <ul id="Navigation">
              <li><a href="index.html">Home</a></li>
              <li><a href="news.html">News</a></li>
              <li><a href="progamm.html">Programm</a></li>
              <li><a href="teilnehmer.html">Teilnehmer</a></li>
              <li><a href="kontakt.html">Kontakt</a></li>
            </ul>

          <div id="Inhalt">

          <p>Diese Seite hat eine feste Breite von 760px und ist zentriert.</p>
              <p>Die Breite ist so gew&auml;hlt, dass in 800px breiten Fenstern nicht horizontal
                 gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
            </div>
          </div>

          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Textfeld?

            EKKi
            – Informationen zu den Bewertungsregeln

            Mahlzeit,

            Hab jetzt lediglich das Problem das vor jedem Naviverzeichnis ein Punkt ist.

            Dann http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style@title=formatiere die Listen doch entsprechend - dafür ist CSS da.

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Textfeld?

              gebbers
              – Informationen zu den Bewertungsregeln

              Geiler Typ, der er da ist! ^^ Vielen dank. Sollte jetzt erstmal passen.
              Mal schauen wie weit ich jetzt komme!^^

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln