Delphi-PRAXiS - [CSS] Code zusammenfassen

Seite 2 von 2

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [CSS] Code zusammenfassen (https://www.delphipraxis.net/80579-%5Bcss%5D-code-zusammenfassen.html)

Re: [CSS] Code zusammenfassen

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:

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:

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;

}

Re: [CSS] Code zusammenfassen

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

Code:

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

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

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

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

Re: [CSS] Code zusammenfassen

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

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:

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.

Re: [CSS] Code zusammenfassen

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:

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.

Re: [CSS] Code zusammenfassen

Zitat:

Zitat von jfheins

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

Bitte was soll ich machen? :shock:

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?

Re: [CSS] Code zusammenfassen

Zitat:

Zitat von Luckie

Könntest du dazu mal ein Beispiel geben?

Du musst Dir nur meinen

Beitrag und alcaeus'

Ergänzung angucken... :roll:

Re: [CSS] Code zusammenfassen

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.

Re: [CSS] Code zusammenfassen

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

Code:

			</div>

<div id="sidebar">

Und ans Ende das:

Code:

			</div>

<div id="content">

Dann müsste es klappen :wink: . (Oder ich hab das mit der navigation.shtml nicht so richtig verstanden.)

Seite 2 von 2