Hi Leute,
ich habe zwei Fragen, die mir hfftl. einer oder mehrere von euch beantworten können!
-
Ich möchte einen Header, der sich immer über die gesamte Breite der Seite erstreckt, die Navigation sollte aber immer die selbe Ausdehnung haben und immer Mittig sein. Das heißt nur zwei Spalten sollen sich je nach Auflösung verändern. Hier ein Beispiel: http://gimp-tutorials.net/ oder http://www.weheartstuff.co.uk/. Hat einer die Lösung für das Problem?
-
Ich möchte die Loginfelder nicht in meiner Seite haben 
. Deshalb dachte ich man könnte doch so ein Javascript erstellen, wo dann den Bildschirm (halt das Browserfenster) so verdunkelt wie bei Vista, so halbtransparent und dann soll auf diesem das Loginformular angezeigt werden. Klingt gut, doch wie soll ich das den umsetzten hat da jemand ne Idee, oder die Google Schlagwörter?
MfG
Amityvilel
Blockelemente wie div, h1, p etc haben per Voreinstellung die
volle Breite des Elternelementes. Wenn man kein Bild braucht,
kann man einfach eine Hintergrundfarbe angeben und man ist
fertig. Wenn ein Teil des Hintergrundes ein Pixelbild sein soll,
so nimmt man am Rand am besten dieselbe Farbe wie die des
Hintergrundes und positioniert es passend - ohne in den
Quelltext geguckt zu haben, wäre das die Methode für das
GIMP-Beispiel.
Beim zweiten dürfte das ‘Hippie-Bild’ links zu einem weiteren
Element gehören, welches einfach von rechts aus positioniert
wird, der Text links daneben oder darüber, je nach
Anzeigebreite hat dann einfach einen höheren z-index und ist
wohl ebenfalls positioniert, das ist da zumindest die übliche
Methode, um das hinzubekommen.
Beide Beispiele sind nicht besonders geschickt gelöst, wie man
deutlich sehen kann, wenn man den Anzeigebereich sehr
schmal macht - verschiedene Dinge funktionieren da nicht mehr
richtig oder man muß horizontal rollen - mit etwas nachdenken
kann man da sicher noch was optimieren.
Beide Beispiele enthalten auch alberne Fehler, besonders
beim Gimp-Beispiel kann man leicht mit dem Validator sehen,
daß der Autor keine Ahnung hat und ein ziemlicher Chaot sein
muß, bei zweiten zeigt besonders das h1 in a, daß der Autor
von HTML auch nicht viel verstanden hat ;o)
Ist also eher von abzuraten, das als Beispiele für irgendwas
verwenden - hoffentlich ist zumindest der Inhalt der Projekte
besser ;o)
Achso - das zweite kann man auch allein mit CSS hinbekommen,
Teiltransparenz ist allerdings bereits ein CSS3-Modul, kein
CSS2 mehr, wird bei älteren browsern also nicht funktionieren.
Als Kompromiß könnte man ein teiltransparentes PNG als
Hintergrundbild nehmen (was dann nur beim MSIE 6 und älter
und bei netscape4 nicht funktioniert).
Jedenfalls kann man da erstmal den login-Kram per display:none
ausblenden und dann, wenn jemand mit der Maus über das
Elternelement fährt, dies auf display:block setzen und anzeigen.
Das kann man dann fixed positionieren und über den gesamten
Anzeigebereich ausdehen lassen.
Ein Skript braucht man dafür jedenfalls nicht.
Ok danke für die ausführliche Antwort. Wäre es den HTML/CSS valid. wenn ich eine Tabelle mache die 100% der Seitenfläche einnimmt und bei x=0 y=0 postitioniert ist. Die Tabelle hat nun einen Hintergrundbild. In einem
, dann wäre die Tabelle immer mittig und wenn das Fenster mal kleiner wird und die feste Breite der Haupttabelle unterschreitet dann gibts auch keine Fehler ausser das man halt scrollen muss.
Meiner Meinung nach wäre es valid, allerdings deprecated, zumindest align (oder hab ich das was falsch in erinnerung?)
Außerdem sollte man Tabellen zur Positionierung, also nur aus Design-Gründen vermeiden. Versuch es doch lieber mit div’s und span’s!
Ausprobiert habe ich es nicht, aber prinzipiell kannst du auch
direkt das form-Element entsprechend mit Eigenschaften
versehen, wo immer das auch auch steht.
Nur wenn in dem Formular auch tabellenartiger Inhalt vorkommt,
ergibt es ja überhaupt einen Sinn, daß da Tabellenelemente
auftauchen - wozu sollen die sonst gut sein?
hm stimmt, in der heutigen Zeit wird ja eh immer mehr ohne Tabellen gemacht 
leider hab ich nicht die CSS2/3 Kenntnisse um mein Projekt so aufzuziehen
So hab ich das immer gemacht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Seitenlayout</title>
<style type="text/css">
<!--
body{
background-color: #CC0000;
margin: 0;
padding: 0;
}
#kopf{
width: 100%;
border: 5px solid black;
background-color: #FFFFFF;
padding: 10px;
}
#zentriert{
padding: 10px;
}
#inhalt{
margin-right: auto;
margin-left: auto;
min-width: 800px;
max-width: 1200px;
border: 5px solid black;
background-color: #FFFFFF;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="kopf">Inhalt des Kopfbereichs</div>
<div id="zentriert">
<div id="inhalt">
Inhalt der Seite
</div>
</div>
</body>
</html>
Die Farben und Rahmen sehen jetzt nicht sonderlich toll aus, aber die Funktion ist erfüllt.
hm ok! Danke, ich werde mich an dem auf jeden Fall orientieren, aber ich hatte nochmal eine andere Idee xD
