[GELÖST] div fixieren

kampkrusty · 25. Juni 2012 11:40

Hallo,

habe wohl wieder mal ein eher simples Problem.

Ich möchte ein div fixieren, da es im Moment immer mit dem Inhalt "wandert".

Das Template sieht wie folgt aus:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="content">
  <div class="post">
  <h2 class="title">{title}</h2>
  {* <p class="date">{created_date}</p> *}
    <div class="entry">{content}
    </div>
    <div class="meta">
      <p class="tags"></p>
      <p class="links">{print} | {anchor anchor='main' text='^ Top'}</p>
    </div>
  </div>
</div>

Hier klicken, um den Code zum Kopieren zu markieren

/* Content */

#content {
	float: left;
	width: 655px;
	padding: 0 24px 0 25px;
	background: url(/uploads/terrafirma2/bg04.jpg) no-repeat 0 -335px;
}

/* Post */

.post {
}

.post .title, .post .date {
	padding: 0 25px;
}

.post .title {
	margin: 0;
	padding-top: 25px;
	line-height: normal;
	font-size: 32px;
	color: #5A5544;
}

.post .title a {
	text-decoration: none;
	color: #5A5544;
}

.post .title a:hover {
	text-decoration: underline;
}


.post .date {
	line-height: normal;
	color: #ACAAA1;
}

.post .entry {
	margin: 0 25px;
	padding: 20px 0;
	border-top: 1px solid #E5E1D8;
}

.post .meta {
	height: 53px;
	background: #E5ECDB;
	border-bottom: 1px solid #DDE5CE;
}

.post .meta p {
	line-height:  normal;
}

.post .meta .tags {
	float: left;
	padding: 20px 0 0 25px;
}

.post .meta .links {
	float: right;
	padding: 20px 25px 0 0;
}

.post .meta .comments {
	margin-right: 30px;
	padding-left: 22px;
	background: url(/uploads/terrafirma2/img04.gif) no-repeat 0 50%;
}

.post .meta .more {
	padding-left: 17px;
	background: url(/uploads/terrafirma2/img05.gif) no-repeat 0 50%;
}

Link zur Seite: kampkrusty.de (nicht lachen, bin Anfänger wink )
Es handelt sich um den unteren grünen Balken.

antibart · 25. Juni 2012 12:18

position: fixed;

... ich habe allerdings nicht die geringste Ahnung, ob das auch innerhalt eines Tabellen-Layouts funktioniert.

Beitrag geändert von antibart (25. Juni 2012 18:21)

kampkrusty · 25. Juni 2012 12:25

An welche Stelle müsste das denn genau?

mike-r · 25. Juni 2012 15:09

kampkrusty schrieb:

Es handelt sich um den unteren grünen Balken.

Welcher grüne Balken?

kampkrusty · 25. Juni 2012 15:18

Der auf dem "^ Top" steht. Habe die Farbe mal wohlwollend mit "grün" beschrieben...

NaN · 25. Juni 2012 16:37

Gib mal dem Div mit der Klasse "meta" im Stylesheet folgende Eigenschaften:

.post .meta {
background: none repeat scroll 0 0 #E5ECDB;
border-bottom: 1px solid #DDE5CE;
height: 53px;
position:fixed;
left:0;
right:0;
bottom:0;
}

kampkrusty · 26. Juni 2012 12:08

Danke dir erst mal, allerdings hatte ich mir das anders vorgestellt.
Mit deinen Änderungen sieht es jetzt so aus: kampkrusty.de

Ich hätte es aber gern wie im Anhang. Im Moment "wandert" dieser Balken halt mit der jeweiligen Textlänge auf der Seite.

Beitrag geändert von kampkrusty (26. Juni 2012 12:09)

antibart · 26. Juni 2012 12:28

Entweder er ist fixiert - also immer an der selben Stelle - oder er passt sich dynamisch der Textmenge an.

Dritte Option wäre "immer unten (am unteren Browserrand)" - also auch bei wenig Text. Dafür gibt jede Menge Anleitungen im I-Net:

http://www.ohne-css.gehts-gar.net/0044.php

Beitrag geändert von antibart (26. Juni 2012 12:29)

kampkrusty · 26. Juni 2012 12:39

Es wäre dann die dritte Option. Ich möchte das dieser Balken immer an der Stelle bleibt wie er oben auf der Zeichnung zu sehen ist, egal wie lang der Text ist.
Wenn ich das richtig sehe muss ich dafür aber einiges umschreiben. Mal sehen ob ich das hin bekomme. smile

NaN · 26. Juni 2012 12:45

Ah. Jetzt verstehe ich was Du meinst.
(Bei "fixiert" denke ich meistens an "position:fixed")

Da gäbe es noch eine Möglichkeit.
Du packst das Div mit der Klasse "meta" einfach nach unten vor den Footer (nach clearfix) und formatierst ihn so, dass er genauso breit ist wie der Inhalt. (Dann ist er allerdings auch immer unterhalb der Sidebar)

antibart · 26. Juni 2012 12:51

kampkrusty schrieb:

Es wäre dann die dritte Option. Ich möchte das dieser Balken immer an der Stelle bleibt wie er oben auf der Zeichnung zu sehen ist, egal wie lang der Text ist.
Wenn ich das richtig sehe muss ich dafür aber einiges umschreiben. Mal sehen ob ich das hin bekomme.

Und wenn der Text länger ist als der Bildschirminhalt ermöglicht? Soll dann ein Scrollbar erscheinen wie bei einem Frame? Also overflow: auto; ?

Beitrag geändert von antibart (26. Juni 2012 12:53)

kampkrusty · 26. Juni 2012 13:07

Im Moment "wächst" die Seite mit dem Inhalt. Also je mehr Text desto länger wird die Seite (Textbereich).
Das sieht man ganz gut beim Vergleich Startseite (home) und wenn man mal auf einen Termin im Kalender klickt.
Da erkennt man auch mein Problem am besten.

/edit
für einen Nicht-Profi ist das Problem ganz schön tricky. Überlege gerade ob ich dieses div ganz weglasse. wink

Beitrag geändert von kampkrusty (26. Juni 2012 13:11)

NaN · 26. Juni 2012 14:16

So schwer ist das garnicht.
Hattest Du das hier schon probiert?
(Pack das DIV mit der Klasse "meta" nach unten vor "footer-bar")
Suche im Sytelsheet dann nach .post .meta und ändere das zunächst in .meta (weil das meta-div ja dann nicht mehr im post-div ist).
Danach suchst Du im Stylesheet nach #content und schaust nach wie dort die Breite formatiert ist und gibst dem meta-div die gleiche Breite. Dann musst Du vermutlich noch mit width, margin o. padding spielen, damit alles an der richtigen Position sitzt.
Z.B.:

Hier klicken, um den Code zum Kopieren zu markieren

    width: 680px;
    margin: 10px 0px 10px 25px;

Das sollte es im Prinzip gewesen sein.

kampkrusty · 26. Juni 2012 14:39

Genial! Ich glaube ich hab es hinbekommen.

Der entscheidende Hinweis war (u.a. wink ) das ich das .post im Stylesheet entfernen muss.

Forum für CMS/made simple

#1 25. Juni 2012 11:40

[GELÖST] div fixieren

#2 25. Juni 2012 12:18

Re: [GELÖST] div fixieren

#3 25. Juni 2012 12:25

Re: [GELÖST] div fixieren

#4 25. Juni 2012 15:09

Re: [GELÖST] div fixieren

#5 25. Juni 2012 15:18

Re: [GELÖST] div fixieren

#6 25. Juni 2012 16:37

Re: [GELÖST] div fixieren

#7 26. Juni 2012 12:08

Re: [GELÖST] div fixieren

#8 26. Juni 2012 12:28

Re: [GELÖST] div fixieren

#9 26. Juni 2012 12:39

Re: [GELÖST] div fixieren

#10 26. Juni 2012 12:45

Re: [GELÖST] div fixieren

#11 26. Juni 2012 12:51

Re: [GELÖST] div fixieren

#12 26. Juni 2012 13:07

Re: [GELÖST] div fixieren

#13 26. Juni 2012 14:16

Re: [GELÖST] div fixieren

#14 26. Juni 2012 14:39

Re: [GELÖST] div fixieren

Fußzeile des Forums