✔ Nicht Scrollbare Leiste am unteren Browserrand

[counteract]

Hallo!

Leider habe ich noch eine Frage zu diesem Thema:

Und zwar möchte ich in dieser Leiste ein Bild unterbringen wie ist dies dann zu realisieren? Wie kann ich es einfügen und wo muss ich dies dann einfügen? In der CSS datei oder in der eigentlichen HTML Datei!

Sicherlich eine blöde Frage aber ich kenn mich da echt nich so wirklich aus!

Vielen dank schon mal für die Hilfe! (oder deine michaelsinterface)

 

[Maik]

Grundsätzlich stehen Dir zwei Möglichkeiten zur Auswahl, um eine Grafik in einem Element einzubinden:

• Das img-Element:

<div id="anmeldeleiste"><img src"..." alt="..."></div>

SELFHTML: HTML / Grafiken

• Ein Hintergrundbild mit CSS:

#anmeldeleiste {
background: url(pfad/zur/grafik.jpg);
}

<div id="anmeldeleiste"></div>

SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

 

[counteract]

cool! und kann ich dies dann auch in den Stylesheet von Oben mitreinsezten oder gehört das in die html datei?

 

[Maik]

Die CSS-Regel wird dann in der nicht_ie.css notiert:

#anmeldeleiste { 
   position: fixed;
   left:0;
   right: 0;
   bottom: 0;
   z-index: 7;
   background: url(pfad/zur/grafik.jpg);
   }

 

[counteract]

Kannst du mir noch erklären warum dies in der nicht_ie.css reingesetzt werden muss?

Wie funktioniert eigentlich der vorganz mit dem auswählen der 2 Stylesheets?

 

[Maik]

Betrachten wir nochmal den Codeschnipsel:

<link rel="stylesheet" href="nicht_ie.css" type="text/css"> 
<!--[if IE]>  
<link rel="Stylesheet" href="ie.css" type="text/css"> 
<![endif]-->

Beim Seitenaufruf laden alle Browser die zuerst genannte nicht_ie.css in das Dokument.

Die nicht-IE-Browser (Firefox, Mozilla, Netscape, Opera, u.ä.) kennen den Conditional Comment <!--[if IE]> ... <![endif]--> nicht und übergehen ihn somit.

Lediglich der IE lädt das darin eingebundene Stylesheet ie.css zusätzlich in das Dokument und "überschreibt" nun die entsprechenden Selektoren und CSS-Eigenschaften aus der nicht_ie.css, die in der ie.css für ihn speziell notiert sind.

Aus diesem Grund wird beispielsweise das Hintergrundbild auch in der nicht_ie.css definiert, da das Stylesheet ja von allen Browsern in das Dokument geladen wird.

Würdest Du diese Regel in der ie.css notieren und die Seite mit einem nicht-IE-Browser öffnen, wäre das Hintergrundbild nicht zu sehen.

 

[counteract]

Hallo!

Kann man dies auch lokal mit Testen oder muss man dies mit deinem Apache Server testen?

Für eine Antwort wäre ich sehr dankbar!

 

[Maik]

Die Technik lässt sich selbstverständlich auch ohne jeglichen Server lokal auf einer Festplatte testen.

 

[counteract]

Hallo!

Ich komme leider immer noch nicht ganz klar mit diesem Problem.

Diese Leiste von der ich spreche soll 50 px hoch sein und sich in der Breite anpassen, je nach Browser Fenster. Ausserdem soll die schwarz sein mit. Kann man dafür auch ein Bild der Leiste benutzen? Weil der obere Rand der leiste soll eine Silberne Linie zieren! Und einen Link beinhalten.

Wie kann man dies machen? Und in welchen Teil des Codes muss man das machen?

Sorry für die blöden Fragen aber ich bin absoluter CSS Neuling.

Vielen dank schonmal für die Hilfe!

 

[Maik]

Wie sich eine Grafik in einem Element einsetzen lässt und in welchem Quellcode (HTML, CSS) das notiert wird, hast Du hier doch schon gestern Abend gefragt, und ich habe Dir die Möglichkeiten und Vorgehensweise gezeigt, sowie die entsprechenden Links genannt, wo Du das nochmal im Detail nachlesen kannst.

Alternativ zu der Grafik könntest Du für die Leiste auch eine schwarze Hintergrundfarbe und einen silbernen Rahmen am oberen Elementrand bestimmen.

CSS-Code der nicht_ie.css:

#anmeldeleiste { 
   position: fixed;
   left:0;
   right: 0;
   bottom: 0;
   z-index: 7;
   height: 50px;
   background: #000;
   border-top: 1px solid #efefef;
   }