✔ Wie mache ich solch eine Leiste?

Fleck06 · 3. Juni 2006

Hi Leute,

kann mir jemand sagen wie ich eine solche Leiste wie sie ganz unten bei http://www.erweiterungen.de zu finden ist?

GarGod · 3. Juni 2006

Wenn du diesen Strich meinst mit <hr noshade>
Wenn du das ding mit dem login meinst:

HTML:

<form id="perma-login" method="post" action="/">
<fieldset>
<label>Benutzername: <input type="text" name="username" maxlength="40"/></label><label>Passwort: <input type="password" name="password" maxlength="25"/></label><label><input type="checkbox" name="autologin"/> automatisch anmelden</label><input type="image" name="login" src="http://www.erweiterungen.de/img/buttons/go.png" value="Anmelden" alt="Anmelden" title="Anmelden" class="log-button"/>
</fieldset>
</form>

Maik · 3. Juni 2006

Wenn du die fixe Position der Anmeldeleiste am unteren Fensterrand beim Seitenscrollen meinst, hier der relevante Code aus den beiden eingebundenen CSS-Dateien:

Code:

/* rahmen.css */
/* http://www.erweiterungen.de/css.dev/rahmen.css */

#anmeldeleiste { /* Für nicht-IE-Browser */
   position: fixed;
   left:0;
   right: 0;
   bottom: 0;
   z-index: 7;
}

Code:

/* ie.css */
/* http://www.erweiterungen.de/css.dev/ie.css */

#anmeldeleiste { /* Für IE */
   position: absolute;
   bottom:0;
   top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
   width: 100%;
   width:expression(document.body.clientWidth);
}

Fleck06 · 28. Juni 2006

Das versteh ich jetzt nicht so:

Ich habe folgenden HTML Code:

HTML:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<div class="anmeldeleiste">
<table width="100%" border="1">
<tr>
<td>	
<form id="perma-login" method="post" action="/"> <fieldset> <label>Benutzername: <input type="text" name="username" maxlength="40"/></label><label>Passwort: <input type="password" name="password" maxlength="25"/></label><label><input type="checkbox" name="autologin"/> automatisch anmelden</label><input type="image" name="login" src="http://www.erweiterungen.de/img/buttons/go.png" value="Anmelden" alt="Anmelden" title="Anmelden" class="log-button"/> </fieldset> </form>	
</td>
</tr>
</table>
</div>
</body>
</html>

und die eingebundene CSS:

Code:

#anmeldeleiste {
   position: absolute;
   bottom:0;
   top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
   width: 100%;
   width:expression(document.body.clientWidth);
}

aber er setzt keine Leiste direkt über der Statusleiste im Browser...

Dr Dau · 28. Juni 2006

Hallo!

Fleck06 hat gesagt.:
.....aber er setzt keine Leiste direkt über der Statusleiste im Browser...

HTML:

<div class="anmeldeleiste">

Code:

#anmeldeleiste

Fällt Dir nichts auf?

Im <div> definierst Du eine Klasse (class = .name)..... im CSS gibst Du aber ein Individualformat (id = #name) an.

Und bevor weitere Probleme auftauchen.....
Ein Individualformat darf nur einmal pro Seite verwendet werden, eine Klasse hingegen so oft Du willst.

Gruss Dr Dau

Maik · 28. Juni 2006

Da es hier um die Positionierung eines Elements geht, wandert der Thread ins CSS-Board.

Bleibt noch anzumerken, daß das von dir verwendete Stylesheet style.css bislang nur im IE funktioniert. Vergleiche hierzu nochmal meinen letzten Beitrag.

philishake · 5. August 2006

Hi Leute ich habe eine Flashdatei eingebunden die mitlaufen soll aber es net.
also hier die mainseite:

PHP:

echo "
<div class=anmeldeleiste>
";
include('links.php');

So, nun die links.php:

PHP:

echo "
<!--Im Film verwendete URLs-->
<!--Im Film verwendeter Text-->
<!-- saved from url=(0013)about:internet -->
<object classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 width=785 height=115 id=links align=middle>
<param name=allowScriptAccess value=sameDomain />
<param name=movie value=images/links.swf /><param name=quality value=high /><param name=bgcolor value=#ffffff /><embed src=images/links.swf quality=high bgcolor=#ffffff width=785 height=115 name=links align=middle allowScriptAccess=sameDomain type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer />
</object>
";

und jetzte noch die design.css:

HTML:

#anmeldeleiste {
   position: absolute;
   bottom:0;
   top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
   width: 100%;
   width:expression(document.body.clientWidth);
}

aber die Flashdatei bleibt leider immernoch oben hängen, warum?

Maik · 31. August 2006

@philishake: im Stylesheet hast Du den ID-Selektor #anmeldeleiste stehen, im DIV rufst Du jedoch mit dem class-Attribut die Klasse .anmeldeleiste auf.

Somit hast Du den gleichen Fehler wie Fleck06 begangen und hättest eigentlich beim aufmerksamen Lesen des Beitrags von Dr Dau von selbst drauf kommen müssen, wie sich das Problem beheben lässt.

DasLicht · 19. Oktober 2006

Maik hat gesagt.:
Wenn du die fixe Position der Anmeldeleiste am unteren Fensterrand beim Seitenscrollen meinst, hier der relevante Code aus den beiden eingebundenen CSS-Dateien:

Code:

/* rahmen.css */ /* http://www.erweiterungen.de/css.dev/rahmen.css */ #anmeldeleiste { /* Für nicht-IE-Browser */ position: fixed; left:0; right: 0; bottom: 0; z-index: 7; }

Code:

/* ie.css */ /* http://www.erweiterungen.de/css.dev/ie.css */ #anmeldeleiste { /* Für IE */ position: absolute; bottom:0; top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight); width: 100%; width:expression(document.body.clientWidth); }

Hallo,

tut mir leid das ich das Thema wieder hervor hole aber wie kann ich es so einbinden das es in allen Browsern funtioniert?
Bekomme das nicht so hin wie ich will. Im IE läufts aber im Mozilla nicht.

LG

Maik · 19. Oktober 2006

Ich weiß jetzt nicht, wo bei Dir der Fehler liegt, aber Du mußt zunächst das Stylesheet für die modernen Browser in das Dokument laden und anschliessend mit Hilfe des Conditional Comments () eine CSS-Browserweiche für den IE setzen.

Beispiel mit zentralen Stylesheets im Header:

HTML:

<!-- put IE into Quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
background: #dfdfdf;
}

#anmeldeleiste { /* Für nicht-IE-Browser */
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 7;
   height: 50px;
   background: #000;
   color: #fff;
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
#anmeldeleiste { /* Für IE */
   position: absolute;
   bottom:0;
   top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
   width: 100%;
   width:expression(document.body.clientWidth);
}
</style>
<![endif]-->

</head>
<body>

<p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p>

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

</body>
</html>

Beispiel mit CSS-Dateien:

HTML:

<!-- put IE into Quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

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

</head>
<body>

<p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p>

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

</body>
</html>

✔ Wie mache ich solch eine Leiste?

Fleck06

Erfahrenes Mitglied

GarGod

Erfahrenes Mitglied

Maik

Fleck06

Erfahrenes Mitglied

Dr Dau

ich wisch hier durch

Maik

philishake

javascript enthusiast

Maik

DasLicht

Mitglied

Maik

Neue Beiträge