Delphi-PRAXiS - [CSS] Code zusammenfassen

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)

Luckie

11. Nov 2006 14:58

[CSS] Code zusammenfassen

Ich habe folgenden CSS Code:

Code:

			div {

  position: absolute;

  left: 200px;

  right: 20px;

}

div.nav {

  background-color: #d8d8d8;

  position: absolute;

  left: -180px;

  top: 25px;

  width: 150px;

  padding: 5px;

  border-width: 1px;

  border-style: solid;

  border-color: #808080;

}

div.admin {

  background-color: #d8d8d8;

  position: absolute;

  left: -180px;

  top: 219px;

  width: 150px;

  padding: 5px;

  border-width: 1px;

  border-style: solid;

  border-color: #808080;

}

div.stats {

  background-color: #d8d8d8;

  position: absolute;

  left: -180px;

  top: 350px;

  width: 150px;

  padding: 5px;

  border-width: 1px;

  border-style: solid;

  border-color: #808080;

}

Kann man den noch irgendwie zusammenfassen? Es kommt ja vieles doppelt vor.

mkinzler

11. Nov 2006 15:01

Re: [CSS] Code zusammenfassen

Ich würde alles was identisch ist in div auslagern. Das gilt ja grundsätzlich.

alcaeus

11. Nov 2006 15:07

Re: [CSS] Code zusammenfassen

Zitat:

Zitat von Luckie

Kann man den noch irgendwie zusammenfassen? Es kommt ja vieles doppelt vor.

Natuerlich:

Code:

			div {

  position: absolute;

  left: 200px;

  right: 20px;

}

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

  background-color: #d8d8d8;

  position: absolute;

  left: -180px;

  width: 150px;

  padding: 5px;

  border-width: 1px;

  border-style: solid;

  border-color: #808080;

}

div.nav {

  top: 25px;

}

div.admin {

  top: 219px;

}

div.stats {

  top: 350px;

}

;)

Greetz
alcaeus

PS: Ob es wirklich so geschickt ist, jedes div zu positionieren, weiss ich nicht. Evtl. solltest du das wirklich klassen- oder id-spezifisch machen, und in div {} nur die wirklich allgemeinen Sachen zu setzen.

Luckie

11. Nov 2006 15:09

Re: [CSS] Code zusammenfassen

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.

Roter Kasten.

@alcaeus: Das proble ist, wenn cih jetzt einen Link in der Navigation hinzufüge, wird die Box größer und ich muss die top-eigenschaften der anderen Boxen anpasen. Kann man das irgendwie automatisieren?

alcaeus

11. Nov 2006 15:11

Re: [CSS] Code zusammenfassen

Indem du die Boxen nicht absolut positionierst? :gruebel:
Ich versteh sowieso nicht warum fast jeder meint, div-Layouts muessten absolut positioniert werden.

Hast du mal ne Demo von der Seite? Evtl. gehts wirklich viel einfacher als du denkst...

Greetz
alcaeus

Luckie

11. Nov 2006 15:14

Re: [CSS] Code zusammenfassen

Das Demo ist eine Homepage. ;)

alcaeus

11. Nov 2006 15:18

Re: [CSS] Code zusammenfassen

Zitat:

Zitat von Luckie

Das Demo ist eine Homepage. ;)

Sag doch gleich dass du direkt an deiner Homepage arbeitest...ich mach das immer etwas anders ;)

[add]Inhalt vergessen. Ich ueberleg mir schnell was.[/add]

Greetz
alcaeus

Luckie

11. Nov 2006 15:19

Re: [CSS] Code zusammenfassen

Ich habe keinen Apache mit PHP lokal installiert, so dass ich das immer direkt live auf dem Server mache. ;)

Sascha L

11. Nov 2006 16:55

Re: [CSS] Code zusammenfassen

Zitat:

Zitat von Luckie

Ich habe keinen Apache mit PHP lokal installiert, so dass ich das immer direkt live auf dem Server mache. ;)

Dort erstellt man sich einen Unterordner, z.B. "Test" und kopiert eine Website hin, an der man dann rumtesten kann und wenn dann alles funktioniert, übernimmt man es für die Hauptseite ;)

Luckie

11. Nov 2006 16:59

Re: [CSS] Code zusammenfassen

Ist mir zu umständlich. Aber zurück zum Thema bitte.

Thorben77

11. Nov 2006 18:47

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;

}

alcaeus

11. Nov 2006 19:02

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

Luckie

11. Nov 2006 19:51

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.

jfheins

12. Nov 2006 10:44

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

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

12. Nov 2006 21:57

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?

Thorben77

13. Nov 2006 14:04

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:

Luckie

13. Nov 2006 14:06

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.

Thorben77

13. Nov 2006 14:16

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.)

Alle Zeitangaben in WEZ +1. Es ist jetzt 11:37 Uhr.