[CSS] Code zusammenfassen

**Thorben77**

Sicher lässt sich das zusammenfassen:
Du machst aus der linken Sparte einen Block mit der ID sidebar und aus dem rechten Teil einen Block mit der ID content:

markieren

Code:

			<html>

  <head>...</head>

  <body>

    <div id="sidebar">

      <div>

         Navigation...

      </div>

      <div>

         Admin-Krams...

      </div>

      <div>

         Und anderes...

      </div>

    </div>

    <div id="content">

      Der Inhalt...

    </div>

  </body>

</html>

Und im CSS:

markieren

Code:

			div#sidebar {

  position: absolute;

  top: 0;

  left: 0;

  width: 150px;

}

div#sidebar div {

  background: ...;

  border: ...;

  padding: ...;

  margin: ...;

  Und anderes für die Boxen links...

}

div#content {

  position: absolute;

  left: 200px;

  top: 0;

}

**alcaeus**

@Thorben: noch besser. Lass #sidebar floaten und gut is:

markieren

Code:

			<div id="sidebar">...</div>

<div id="content">...</div>

<div style="clear:both;"></div>

markieren

Code:

			#sidebar {

  width:150px;

  float:left;

  padding:5px;

}

#content {

  margin-left:175px;

}

#sidebar ist 150px breit, mit padding allerdings 160px. Ich fuege beim Margin nochmal 15px dazu, damit die beiden Boxen auch huebsch getrennt sind.

Greetz
alcaeus

**Luckie**

Wie ich alcaeus auch via ICQ schon erklärt habe sind alle meine Seiten so aufgebaut:

markieren

Code:

			<html>

  <body>

    <div>

      include navigation.shtml

   </div>

  </body>

</html>

Dass es da einen div-Tag gibt ist purer Zufall und stammt noch von früher.

Ich bräuchte jetzt also eine Lösung, die ich mit so wenig Aufwand wie möglich umsetzen könnte. Was bedeutet, dass ich maximal die Datei navigation.shtml und den Stylesheet verändern / anpassen möchte. Alles andere wäre mit erheblichen Aufwand verbunden.

Das einzige, wa smich an meiner bishergen Lösung stört ist die Tatsache, dass ich auch jedes mal die Positionen der Boxen anpassen muss, wenn ich dort etwas ändere am Inhalt.

Mache ich es so:

markieren

Code:

			div.nav, div.admin, div.stats { 

  background-color: #d8d8d8;

  float: left;

  /*position: absolute;*/

  /*left: -180px;*/

  width: 150px;

  padding: 5px; 

  border-width: 1px; 

  border-style: solid; 

  border-color: #808080; 

}

hängen alle drei Boxen übereinander am oberen Seitenrand ziemlich in der Mitte der Seite.

**jfheins**

Könntest du die Contaoner nicht einfach left floaten und left clearen ?

Am besten wäre es glaube ich auch noch, die drei container in einen großen div zu packen, und diesen dann auszurichten - dann brauchst du dich nicht mehr um die Ausrichtung der drei kleineren zu kümmern.

Und:

Zitat von Luckie:

Na ja, ich habe ja ein normales div ohne Klasse, aber das hat auch chon Eigenschaften. Ich dachte an div.box für die Boxen und dann davon die anderen divs ableiten oder so. Geht das mit CSS? Und wenn ja, wie.

Ich würde das jetzt mit einer Klasse div.box machen, und anderen Klassen für die anderen Elemente, du kannst ja auch 2 Klassen angeben (<div class="box google">bla</div>) - bekommt dann de eigenschaften beider Klassen.

**Luckie**

Zitat von jfheins:

Könntest du die Contaoner nicht einfach left floaten und left clearen ?

Bitte was soll ich machen?

Zitat:

Am besten wäre es glaube ich auch noch, die drei container in einen großen div zu packen, und diesen dann auszurichten - dann brauchst du dich nicht mehr um die Ausrichtung der drei kleineren zu kümmern.

Könntest du dazu mal ein Beispiel geben?

**Thorben77**

Zitat von Luckie:

Könntest du dazu mal ein Beispiel geben?

Du musst Dir nur meinen

Beitrag und alcaeus'

Ergänzung angucken...

**Luckie**

Ja gut. Aber das:
[code]
div#content {
position: absolute;
left: 200px;
top: 0;
}
[delphi]
würde bedeuten, dass ich so ziemlich alle Seiten ändern müsste und das wollte ich vermeiden.

**Thorben77**

Du kannst ja an den Anfang der Navigationsdatei noch das setzen:

markieren

Code:

			</div>

<div id="sidebar">

Und ans Ende das:

markieren

Code:

			</div>

<div id="content">

Dann müsste es klappen

. (Oder ich hab das mit der navigation.shtml nicht so richtig verstanden.)

[CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Re: [CSS] Code zusammenfassen

Forumregeln

Thorben77 Registriert seit: 22. Okt 2004 359 Beiträge	#16 Re: [CSS] Code zusammenfassen 13. Nov 2006, 14:04 Zitat von Luckie: Könntest du dazu mal ein Beispiel geben? Du musst Dir nur meinen Beitrag und alcaeus' Ergänzung angucken...
	Zitat

Luckie Registriert seit: 29. Mai 2002 37.621 Beiträge Delphi 2006 Professional	#17 Re: [CSS] Code zusammenfassen 13. Nov 2006, 14:06 Ja gut. Aber das: [code] div#content { position: absolute; left: 200px; top: 0; } [delphi] würde bedeuten, dass ich so ziemlich alle Seiten ändern müsste und das wollte ich vermeiden. Michael Ein Teil meines Codes würde euch verunsichern.
	Zitat

Thorben77 Registriert seit: 22. Okt 2004 359 Beiträge	#18 Re: [CSS] Code zusammenfassen 13. Nov 2006, 14:16 Du kannst ja an den Anfang der Navigationsdatei noch das setzen: markieren Code: </div> <div id="sidebar"> Und ans Ende das: markieren Code: </div> <div id="content"> Dann müsste es klappen . (Oder ich hab das mit der navigation.shtml nicht so richtig verstanden.)
	Zitat