Was ist neu?
Digital Marketing & Webmaster Forum

Digital Marketing, Internet-Technologien, Metaverse und mehr interessieren Dich? Registriere Dich gleich kostenlos, um Mitglied zu werden! Sobald Du angemeldet bist, kannst Du loslegen, Themen und Beiträge veröffentlichen und mit anderen Mitgliedern in Kontakt treten! Wir wünschen Dir einen anregenden Austausch!

Wie kann ich das machen???

m3xx

- Premium Member -
Meins oben die mit "Noch Single"?

Das Zauberwort Heist CSS und damit es kein Inhaltsleeres Post wird bekommst auch das Markup.

HTML:
div.MeineLeiste {
	background:#FFF;
	position:absolute;
	line-height:18px;
	width:100%;
	z-index:99;
}


<div class="MeineLeiste" align="center">
Hier der Inhalt der Box
</div>
 

PornoDussel

- Premium Member -
Da fehlt noch ein

top: 0px;

damit es ganz oben positioniert wird.

Noch ein kleiner Tipp am Rande.

Wenn du weißt, wie Breit das ganze sein soll ( z.B. 800 px ) und willst es in der Bildschirmmitte haben, kannst Du das so machen:

width: 800px;
margin-left: 50%;
left: -400px;

Also Breite bestimmen – mit margin-left direkt in die Mitte schieben und dann mit einem negativen Wert in left zurück zum Rand
 

m3xx

- Premium Member -
@PornoDussel
stimmt jetzt wo du es schreibst :rolleyes:


@Marcel
bottom:0px

weiß aber jetzt nicht wie sich da der IE verhält
 

PornoDussel

- Premium Member -
Ich rate einfach mal ins blaue: Du willst, das die Box immer unten angezeigt wird? Also beim Scrollen stehen bleibt?

Ist etwas aufwändiger, weil wir mit Hacks arbeiten müssen, dürfte aber klappen. Versuch mal folgendes:

Öffne die Datei: header.php
In den HTML-Head schreibst Du folgendes (für den IE 6 ):

PHP:
<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #pageScroll {
      height: 100%; width: 100%; overflow: auto;
    }
    #page {
      position: static;
    }
  }
</style><![endif]-->

Dann änderst Du die Zeile:

<div id="page">

(steht direkt unter <body…>) in:

<div id="pageScroll">
<div id="page">

Jetzt öffne die Datei : footer.php

Hier müssen wir nun unsere pageScroll-Box schließen – also ganz ans Ende </div> schreiben.
Als nächstes packen wir hier unser Box rein, die immer sichtbar sein soll:


<div id="bottomBox">
<!—Was Du auch immer für Inhalt haben willst -->
</div>


So.... das wäre der HTML-Teil gewesen. Jetzt müssen wir noch mit CSS dafür sorgen, das die bottomBox auch immer da ist:

In deine css-Datei (style.css) fügst du folgende Zeilen ein.

PHP:
#bottomBox {
    position: absolute;
    bottom: 3px;
    left: 0px;
    width: 80%;
    height: 25px;
  }
html>body #bottomBox {  /* so liebt es Firefox */
    position: fixed;
  }

Musst Du natürlich noch ein wenig an deine Bedürfnisse anpassen.
Aber im großen und ganzen war es das.....

Ich hoffe mal, das ich keine Tippfehler reingehauen habe
und viel Spass damit ;)
 

N20

- Premium Member -
wo ich das sehe.... was ist da state of the art zum zentrieren? margin:0 auto; oder margin-left:50%; ?
 

PornoDussel

- Premium Member -
Kann man pauschal nicht sagen. Aber in den meisten Fällen so, wie ich es in meinem ersten Betrag gesagt hatte.

Kleiner Nachtrag
Der Firefox und IE behandeln die Scrolleiste nicht gleich - daher kommt es vor, das es beim IE mittig ist, beim Firefox aber nicht. Das kann man mit einem Hack ausgleichen, indem man für den Firefox einfach einen anderen Wert für left bestimmt.
 

m3xx

- Premium Member -
margin:0 auto; wäre normaler weiße richtig aber der IE macht da wie immer eine ausnahmen.
 

PornoDussel

- Premium Member -
Ich sag mal so: Ich bin zwar kein CSS-Experte aber dafür ein Gewohnheitstier, deshalb mach ich es wohl noch auf die alte Art – einen absoluten Grund gibt es nicht wirklich. Wobei man nicht vergessen sollte, das auch noch einige User mit alten Browsern unterwegs sind und die kennen ein 0 auto nicht. Beim IE kann man das sicher über ein algin ausgleichen aber beim NN4 ?
 
Oben