• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div-Boxen richtig positionieren

L

Lunaticx

Neues Mitglied
Hallo Leute,

ich habe vor kurzem mit html und css angefangen und bekomme das layout, dass ich haben will nicht hin.

hier seht ihr wie die seite aufgebaut sein soll:


und hier ist der code:
HTML: 
<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="page">
      <div class="header">
        <p>header</p>
      </div>
      <div class="menu">
        <div class="button" onmouseover="this.className='button-hover'" onmouseout="this.className='button'">
          <p>Item1</p>
        </div>
        <div class="button" onmouseover="this.className='button-hover'" onmouseout="this.className='button'">
          <p>Item2</p>
        </div>
        <div class="button" onmouseover="this.className='button-hover'" onmouseout="this.className='button'">
          <p>Item3</p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="contacts">
      </div>
      <div class="content">
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>
und das stylesheet:
HTML: 
body {
  background: #DCDCDC;
  padding: 0px;
  margin: 0px;
}

p {
  padding: 0px;
  margin: 0px;
}

.page {
  margin: 20px auto 0px auto;
  border: 1px solid black;
  width: 960px;
}

.header {
  background: #00529B;
  padding: 0px;
  margin: 0px;
  height: 100px;
}

.login {
  background: #00529B;
  padding: 0px;
  margin: 0px;
  height: 100px;
}

.menu {
  background: #2979C1;
  padding: 6px 3px 3px 3px;
  margin: 0px;
}

.button {
  float: left;
  background: #00529B;
  margin: 0px 3px 0px 3px;
  width: 70px;
  height: 30px;
}

.button-hover {
  float: left;
  background: #01447F;
  margin: 0px 3px 0px 3px;
  width: 70px;
  height: 30px;
  cursor: default;
}

.clear {
  clear: both;
}

.content {
  background: #00529B;
  padding: 10px 10px 10px 10px;
  margin: 0px;
  width: auto;
}

.contacts {
  float: right;
  background: white;
  padding: 0px;
  margin: 0px;
  width: 200px;
  min-height: 200px;
  height: auto;
}
Ich hoffe ihr könnt mir helfen und eventuell auch Verbesserungs-Vorschläge mit einbringen.

Danke im voraus.
 
Lunaticx schrieb:
ich habe vor kurzem mit html und css angefangen und bekomme das layout, dass ich haben will nicht hin.
Zum Vergrößern anklicken....
Huh, hey, whoa, halt!

Du rollst das Feld ja von hinten auf!
Warum fängst Du mit CSS an, wo Dir doch noch die HTML-Kenntnisse fehlen?

Aber nun gut, Du hast ja quasi keinen Inhalt, da kann ich Deine HTML-Kenntnisse natürlich nicht so gut beurteilen, obwohl Du ein Menü doch immerhin schonmal völlig falsch ausgezeichnet hast. Jeden einzelnen Menüpunkt hast Du als "Textabsatz" (<p>) ausgezeichnet, aus diesem einzelnen Element dann eine "Gruppe" (<div>) gemacht usw.

Deinen "header", der ja vermutlich eine Überschrift sein soll (engl. "header"), ist auch nicht als Überschrift (<h1> bis <h6>) ausgezeichnet.

Nun, ehrlich gesagt, liegt da die Vermutung nahe, dass Du keinen blassen Schimmer von HTML hast. CSS funktioniert aber nur, wenn die Basis aus HTML valide und semantisch sinnvoll ist. Was Du derzeit produzierst, ist div-Suppe, und die ist im Sinne von HTML falsch, weil sinnfrei.

Daher ist Deine Frage auch hinfällig, weil wenn Du da jetzt weitermachst, erstellst Du Dir ein Sylesheet, das zu diesem HTML-Code passt. Wenn Du den erst nach dem Layout anpasst (da müssen ja 80% der divs raus, und der ganze Inhalt mit semantischer Auszeichnung fehlt), dann kannst Du Dein ganzes Stylesheet wieder neu schreiben, weil dann der Code, auf dem CSS basiert, nicht mehr da ist.

Ich hoffe ihr könnt mir helfen und eventuell auch Verbesserungs-Vorschläge mit einbringen.
Zum Vergrößern anklicken....
Ich hoffe doch, ich konnte Dir helfen, ansonsten gilt: Fragen? Fragen!
 
Lunaticx:
Wenn du gerade mit HTML/CSS angefangen hast, solltest du nichts mit JavaScript machen, denn das wieder eine Stufe höher.
 
mir geht es ja nur um die formatierung:
hab jetzt von vorne angefangen und jetzt sieht es schonmal besser aus, aber immernoch fehlerhaft.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Test</title>
  </head>
  <body>
    <div class="main">
      <div class="topl">top-left</div>
      <div class="topr">top-right</div>
      <div class="clrl"></div>
      <div class="menu">menu</div>
      <div class="botl">bottom-left</div>
      <div class="botr">bottom-right</div>
      <div class="clrl"></div>
    </div>
  </body>
</html>

HTML: 
body {
  background: #ccc;
  padding: 0px;
  margin: 0px;
}

.main {
  margin: 20px auto 0px auto;
  border: 3px solid black;
}

.topl {
  float: left;
  background: red;
  width: 700px;
  height: 100px;
}

.topr {
  float: left;
  background: green;
  width: 200px;
  height: 100px;
}

.menu {
  background: blue;
  height: 30px;
}

.botl {
  float: left;
  background: red;
  width: 700px;
  height: 300px;
}

.botr {
  float: left;
  background: green;
  width: 200px;
  height: 300px;
}

.clrl {
  clear: left;
}

so sieht es jetzt aus:


das problem ist die äußere box mit dem schwarzen rand.

wie bekomm ich diese auf die anderen boxen angepasst?
 
Silar schrieb:
Lunaticx:
Wenn du gerade mit HTML/CSS angefangen hast, solltest du nichts mit JavaScript machen, denn das wieder eine Stufe höher.
Zum Vergrößern anklicken....
Es redet doch gar keiner von JavaScript.

Lunaticx schrieb:
hab jetzt von vorne angefangen und jetzt sieht es schonmal besser aus, aber immernoch fehlerhaft.
Zum Vergrößern anklicken....
Ja, richtig. Ist immer noch bloß div-Suppe und kein HTML.

Glaubst Du mir nicht, oder bereitet es Dir Spaß, etwas erst falsch umzusetzen, dafür viel Zeit zu investieren und dann nochmal alles neu zu machen und nochmal Zeit investieren?
Oder woran liegt es?

wie bekomm ich diese auf die anderen boxen angepasst?
Zum Vergrößern anklicken....
Passt doch. Deine blaue Box ist halt so breit. Wie soll sich der schwarze Rahmen denn anpassen? Zum 8-Eck werden?
 
Passt doch. Deine blaue Box ist halt so breit. Wie soll sich der schwarze Rahmen denn anpassen? Zum 8-Eck werden?
Zum Vergrößern anklicken....
auch wenn ich bei der klasse "menu" die breite festlege und kleiner mache, bleibt der schwarze rahmen so wie er jetzt ist.
 
Ja, weil Block-Elemente ohne Angabe einer Größe immer 100% der Breite des Elternelements einnehmen.
 
Also das Eltern-Element ist hier die div.main richtig?
Demnach ist es besser die breite von div.main festzulegen und die inneren Elemente anzupassen?

Und was meinst du mit div-Suppe ... wie soll ich es denn sonst machen?
 
Lunaticx schrieb:
Also das Eltern-Element ist hier die div.main richtig?
Zum Vergrößern anklicken....
Ja.

Demnach ist es besser die breite von div.main festzulegen und die inneren Elemente anzupassen?
Zum Vergrößern anklicken....
Besser, ist es, das alles ganz anders anzugehen, aber wenn Du die Größe von div.main anpasst, ändert sich die Größe von div.menu automatisch mit.

Und was meinst du mit div-Suppe ... wie soll ich es denn sonst machen?
Zum Vergrößern anklicken....
Ich meine mit div-Suppe den Zwang, den viele - wie Du auch - verspüren, erstmal den HTML-Code mit divs vollzukloppen, um damit ein Layout zu erstellen. Diese Menschen haben den Sinn von HTML und von divs noch nicht evrstanden. Mit HTML macht man kein Layout! Weder mit Tabellen, noch mit divs.

Mach es so, wie Elroy es gesagt hat, ich könnte das nicht besser formulieren (ist ja sicher auch mein Text ;-))!

Für das, was Du da bisher gebastelt hast, brauchst Du wahrscheinlich nichtmal ein einziges <div>.

Und wenn Du dann mal wieder möchtest, dass wir uns den nächsten Stand ansehen, tu uns einen Gefallen und lad die Seite irgendwo hoch und gib nur noch einen Link zur Seite an. Das erspart Dir viel Arbeit, uns auch, wir können unsere Webmaster-Tools damit verwenden und das Forum quillt nicht über vor Quellcode. Danke.
 
Efchen schrieb:
Ja.
Mach es so, wie Elroy es gesagt hat, ich könnte das nicht besser formulieren (ist ja sicher auch mein Text ;-))!
Zum Vergrößern anklicken....

@Efchen: Ja, das stammt von dir.

Ich habe früher meine Layouts auch immer mit divs erstellt.
Durch dich habe ich erst gelernt wozu HTML eigentlich da ist.

Sorry für das Off Topic, aber das muste mal gesagt werden.

Gruss
Elroy
 
Das Leben für hunderte Webmaster könnte einfacher sein, wenn sie mir einfach mal glauben würden. Aber wenn man in der Schule Mist beigebracht bekommt und in der Schweiz für fgehlende Semantik sogar volle Punktzahl und ein Diplom bekommt...

Tim Barners Lee würde sich im Grab umdrehen, wenn er schon drin läge...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben