Wie mache ich solch eine Leiste? @ tutorials.de: Tutorials, Forum & Hilfe

Fleck06 · 03.06.06 00:21

Hi Leute,

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

GarGod · 03.06.06 02:51

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

HTML-Code:

<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 · 03.06.06 10:30

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.06.06 02:46

Das versteh ich jetzt nicht so:

Ich habe folgenden HTML Code:

HTML-Code:

<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.06.06 03:59

Hallo!

Zitat von Fleck06

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

HTML-Code:

<div class="anmeldeleiste">

Code :

1	#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.06.06 06:05

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 · 05.08.06 13:11

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

PHP-Code:


echo "

<div class=anmeldeleiste>

";

include('links.php');

So, nun die links.php:

PHP-Code:


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-Code:

#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.08.06 07:18

@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.10.06 21:29

Zitat von Maik

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.10.06 21:45

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-Code:

<!-- 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-Code:

<!-- 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>

DasLicht · 19.10.06 22:11

Hallo,

genau das habe ich gesucht, Vielen Dank.

LG

Dark22 · 21.11.06 19:31

so ich habe das ganze auch versucht, im Firefox klappt es wie ich will, im IE noch nicht, habe zwar auch mit einer Browserweiche ausprobiert jedoch ohne Erfolg. Das ganze sollte so aussehen: http://www.pfila.pfadidavos.ch/ (im FF)
hier meine mometanige css datei: http://www.pfila.pfadidavos.ch/pfila.css
Die Dreiecke (Menü) und die untere Leiste sollten beide fix positioniert sein.

Vielen Dank für eure Hilfe

Maik · 21.11.06 19:36

Dann vergleiche einfach nochmal deinen Code mit diesem hier.

Du mußt zwei Stylesheets in das Dokument laden, zuerst das Stylesheet für die modernen Browser und anschliessend das Stylesheet für den IE.

Dark22 · 21.11.06 19:42

habe nun genau den code eingebaut, im FF gehts im IE nicht, ich vermute das Problem mit meinem height: 100% weiss aber nicht genau

ps: hatte schon im Vorhinein mit diesem Code versucht jedoch ging es nicht und ich habe wieder die alte Variante hochgeladen

Maik · 21.11.06 19:50

Du sollst auch nicht den Code aus dem obigen Beispiel einfach in dein Dokument einfügen, sondern deinen CSS-Code auf diese Weise "splitten".

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Script fü eine Leiste

Wie mache ich solch ein Menu ?

Wie würdet ihr solch eine Tabelle darstellen?

Solch eine Musterüberlagerung

normales Foto in solch eine Grafik umgestalten

E-Mail:

Abonnieren Abbestellen