[CSS] Positionierung mit div

**Luckie**

Ich habe folgenmde HTML Seite:

Code:

			<html>

  <head>

    <link rel="stylesheet" type="text/css" href="/css/stylesheet.css">

  </head>

  <body>

    <div>

text</p>

    </div>

  </body>

</html>

Und folgenden Stylesheet dazu:

markieren

Code:

			div (

  position:absolute;

  left:100px;

  top:90px;

)

Aber trotzdem steht der Text ganz normal oben links in der Ecke. Was mache ich da noch falsch? (Der Stylesheet wird gefunden.)

**Meflin**

In CSS verwendet man auch { } und nicht ( )

Moin Michael,

zuerst einmal zu deinem Stylesheet. Da ich annehme du willst ein Element erstellen das man häufiger verwenden kann, solltest du also eine "Klasse" erstellen (btw, in CSS muss man andere Klammern setzen, nämlich geschweifte).

markieren

Code:

			.content {

  color: blue;

  position:absolute;

  left:100px;

  top:90px;

    }

Diese "Klasse" rufst du in einem div-Container dann einfach auf:

markieren

Code:

			<html>

  <head>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>

    <div class="content">

text</p>

    </div>

  </body>

</html>

Ansonsten guckst du am Besten mal auf

http://www.css4you.de, da steht alles was man wissen muss sehr schön beschrieben.

**Luckie**

Zitat von Meflin:

In CSS verwendet man auch { } und nicht ( )

Was ich machen will, ist die Navigation meiner Homepage an den linken Rand anzuordnen. Aufgebaut sind die Seiten alle wie folgt:

markieren

Code:

			<html>

  <head>

    <link rel="stylesheet" type="text/css" href="/css/stylesheet.css">

  </head>

  <body>

    <div>

      <?php

        include 'includes/nav.shtml';

      ?>

    </div>

  </body>

</html>

nav.shtml:

markieren

Code:

			<div class="nav">

[url="/"]Home[/url] |

[url="http://ablage.michael-puff.de"]Ablage[/url] |

[url="/Developer/Artikel/"]Artikel[/url] |

[url="/dirindex.php?folder=Developer/"]Developer[/url] |

[url="/Ablage/Links.xml"]Links[/url] |

[url="http://programme.michael-puff.de"]Programme[/url] |

[url="/sitemap.php"]Sitemap[/url] |

[url="/search.php"]Suche[/url] |

[url="/impressum.php"]Impressum[/url]

</div>

Jetzt dachte ich, ich könnte das so erereichen:

markieren

Code:

			div {

  position:absolute;

  left:200px;

}

div.nav {

  position:absolute;

  left:0px;

}

Aber wie man sieht:

http://www.michael-puff.de/ funktioniert das so nicht.

Ich will es vermeiden alle möglichen Seite wieder editieren zu müssen.

So geht es:

markieren

Code:

			div {

  position: absolute;

  left: 200px;

  right: 20px;

}

div.nav {

  position: absolute;

  left: -180px;

  top: 40px;

}

Aber jetzt die Frage, was ist besser schöner? Am oberen Rand oder an der Seite mit den Navigationslinks untereinander?

[edit=SirThornberry]Quote-Tag vervollständigt (Klammer geschlossen) - Mfg, SirThornberry[/edit]

Zitat:

Aber jetzt die Frage, was ist besser schöner? Am oberen Rand oder an der Seite mit den Navigationslinks untereinander?

Die Navigationsbox noch ein bisschen weiter runter, dann finde ich persönlich das schicker als die Linkleiste oben.

**Luckie**

Wie weit runter? Oberkante Nav-Box auf gleicher Höhe, wie die Linie unter der Seitenüberschrift?

Ich für meinen Geschmack würde es gut finden, wenn die Unterkante der Navigationsbox in Höhe von "Seite durchsuchen" liegen würde.

Auf

http://www.michael-puff.de/Developer/Artikel/ scheint es übrigens Probleme mit der Google-Werbung zu geben,

http://www.michael-puff.de/Ablage/Links.xml sieht auch sehr merkwürdig aus (die Links unten).

Aber vielleicht wäre es angebracht dies in einem anderen Topic zu diskutieren?

**Luckie**

Hm, ich glaube, da mache ich noch Boxen drunter. Insofern passt das.

Ja, bei der Google-Werbung muss ich noch was ändern. Aber das ist nicht so schlimm. Acuh müssen die Links zu den PDFs bei den Artikeln noch angepasst werden.

Das passt schon hier. Es geht ja immer noch um die Positionierung.

**Luckie**

So. Fertig:

http://www.michael-puff.de/

**Meflin**

Zitat von Luckie:

So. Fertig:

http://www.michael-puff.de/

Also nach meinem ästhetischen Empfinden sollte das linke Menü oben entweder auf der oberen Höhe des Hs beginnen, oder aber auf Höhe der Linie der Unterstreichung. Aber so siehts blöde aus

[CSS] Positionierung mit div

[CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Re: [CSS] Positionierung mit div

Forumregeln

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#2 Re: [CSS] Positionierung mit div 10. Nov 2006, 15:06 In CSS verwendet man auch { } und nicht ( ) Leo S. https://github.com/leoschweizer
	Zitat

Balu der Bär (Gast) n/a Beiträge	#5 Re: [CSS] Positionierung mit div 10. Nov 2006, 15:47 Zitat: Aber jetzt die Frage, was ist besser schöner? Am oberen Rand oder an der Seite mit den Navigationslinks untereinander? Die Navigationsbox noch ein bisschen weiter runter, dann finde ich persönlich das schicker als die Linkleiste oben.
	Zitat

Luckie Registriert seit: 29. Mai 2002 37.621 Beiträge Delphi 2006 Professional	#6 Re: [CSS] Positionierung mit div 10. Nov 2006, 15:50 Wie weit runter? Oberkante Nav-Box auf gleicher Höhe, wie die Linie unter der Seitenüberschrift? Michael Ein Teil meines Codes würde euch verunsichern.
	Zitat

Luckie Registriert seit: 29. Mai 2002 37.621 Beiträge Delphi 2006 Professional	#9 Re: [CSS] Positionierung mit div 10. Nov 2006, 16:28 So. Fertig: http://www.michael-puff.de/ Michael Ein Teil meines Codes würde euch verunsichern.
	Zitat

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#10 Re: [CSS] Positionierung mit div 10. Nov 2006, 18:02 Zitat von Luckie: So. Fertig: http://www.michael-puff.de/ Also nach meinem ästhetischen Empfinden sollte das linke Menü oben entweder auf der oberen Höhe des Hs beginnen, oder aber auf Höhe der Linie der Unterstreichung. Aber so siehts blöde aus Leo S. https://github.com/leoschweizer
	Zitat