nicht angemeldet
Einige Fragen zu CSS !!
0 0 
Der Martin
Einige Fragen zu CSS !!
Abnd allerseits,
ich versuche momentan in "die Welt" von CSS einzublicken und habe dembezüglich ein paar Fragen die ich mir trotz recherchieren nicht beantworten konnte.
Folge Idee: Ich möchte eine Homepage machen, welche ihrem "aktiven" Teil in der Mitte des Bildschirmes hat, sprich es bleibt immer (egal welche Bildschirmauflsg.) ein Rand übrig. Meine Idee sah folgendermaßen aus:
------------
<html>
<head>
<title>***</title>
<meta name="author" content="***">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
body { background-color:#000000; }
#page {
position:absolute;
top:10%;
left:15%;
right:15%;
width:70%;
padding:300px;
margin:30px;
border:1px solid #9F9F9F;
background-color:#2F2F2F;
}
....
--------------
Erläuterung: Ich gebe also an das zum oberen Rand 10%, zum linken 15% usw. immer frei sein müssen. Im folgenden Code (nach </style>;</head>;<body> ) schreibe ich dann folgenden Code:
<div id="page">
....
</div>
Frage: Ich habe jetzt ein bestimmtes Feld, wo meine Homepage drinnen entstehen soll. Jetzt möchte ich diese Teile in "header", "navigation" und "text" unterteilen. Der Header soll z.B. die gesamte Breite sowie 100px von oben ausfüllen.
Jetzt kann ich natürlich folgendes schreiben:
#header {
XXXX
XXXX
}
Die Frage ist dabei aber, wie bekomme ich es hin, das z.B. die position sich nurnoch auf das innere, also auf "#page" bezieht und nicht auf den absoluten, also ganzen Bildschirm?
==============================
So, das war mein ersten Problem, das zweite folgt bald darauf, und zwar möchte ich in der Navigation natürlich ein Menü errichten, die Inhalte sollen dann im "Text" Feld (rechts daneben) erscheinen, bei "frames" konnte man das mit target="daten" beschreiben, wie macht man das hier am besten?
Und ich möchte insgesamt den ganzen Code natürlich nicht in eine Datei fassen sondern möglichst strukturiert haben, z.B. im Menü "Home", "Impressum" etc. , wie macht man das dann, das im Menü der der Link angegeben ist, im "Text" es dann geöffnet wird? (Vllt mit a href="XXX" ?? )
Wäre super wenn man mir diese Fragen beantworten könnte!!
mfg benni
-
Hallo,
Abnd allerseits,
ich versuche momentan in "die Welt" von CSS einzublicken und habe dembezüglich ein paar Fragen die ich mir trotz recherchieren nicht beantworten konnte.Klar doch.
Folge Idee: Ich möchte eine Homepage machen, welche ihrem "aktiven" Teil in der Mitte des Bildschirmes hat, sprich es bleibt immer (egal welche Bildschirmauflsg.) ein Rand übrig. Meine Idee sah folgendermaßen aus:
<html>
<head>
<title>***</title>
<meta name="author" content="***">
<meta name="generator" content="Ulli Meybohms HTML EDITOR"><style type="text/css">
body { background-color:#000000; }
#page {
position:absolute;
top:10%;
left:15%;
right:15%;
width:70%;
padding:300px;
margin:30px;
border:1px solid #9F9F9F;
background-color:#2F2F2F;
}
....Erläuterung: Ich gebe also an das zum oberen Rand 10%, zum linken 15% usw. immer frei sein müssen. Im folgenden Code (nach </style>;</head>;<body> ) schreibe ich dann folgenden Code:
Ich würde vorschlagen hier mit dem Außenabstand (margin) zu arbeiten. Wenn du margin-left und margin-right auf auto setzt, wird der Bereich automatisch zentriert dargestellt. Den Abstand von oben kannst du dann mit margin-top bestimmen. (Weiteres s. den entsprechenden Abschnitt)
<div id="page">
....
</div>Frage: Ich habe jetzt ein bestimmtes Feld, wo meine Homepage drinnen entstehen soll. Jetzt möchte ich diese Teile in "header", "navigation" und "text" unterteilen. Der Header soll z.B. die gesamte Breite sowie 100px von oben ausfüllen.
Jetzt kann ich natürlich folgendes schreiben:#header {
XXXX
XXXX
}Die Frage ist dabei aber, wie bekomme ich es hin, das z.B. die position sich nurnoch auf das innere, also auf "#page" bezieht und nicht auf den absoluten, also ganzen Bildschirm?
position:relative, sofern ich dich richtig verstanden hab.
==============================
So, das war mein ersten Problem, das zweite folgt bald darauf, und zwar möchte ich in der Navigation natürlich ein Menü errichten, die Inhalte sollen dann im "Text" Feld (rechts daneben) erscheinen, bei "frames" konnte man das mit target="daten" beschreiben, wie macht man das hier am besten?
Und ich möchte insgesamt den ganzen Code natürlich nicht in eine Datei fassen sondern möglichst strukturiert haben, z.B. im Menü "Home", "Impressum" etc. , wie macht man das dann, das im Menü der der Link angegeben ist, im "Text" es dann geöffnet wird? (Vllt mit a href="XXX" ?? )Ganz normal, da die Seite bei jedem Aufruf komplett neu geladen wird. Ansonsten mußtest du entweder mit Frames oder iFrames arbeiten (bitte nicht). Oder du baust die Seite serverseitig zusammen (viel besser). Z.B. mit ServerSideIncludes oder PHP, je nach dem was du brauchst und was dein Webserver unterstützt.
-
Hoi, erstmal danke für die schnelle Antwort, bin aber noch nicht aus allem so ganz schlau geworden:
1. "Ich würde vorschlagen hier mit dem Außenabstand (margin) zu arbeiten. Wenn du margin-left und margin-right auf auto setzt, wird der Bereich automatisch zentriert dargestellt. Den Abstand von oben kannst du dann mit margin-top bestimmen. (Weiteres s. den entsprechenden Abschnitt)"
Hab das mal versucht:
#page {
position:absolute;
margin-top:10%;
margin-left:auto;
margin-right:auto;
width:70%;
padding:200px;
margin:15%;
border:1px solid #9F9F9F;
background-color:#2F2F2F;
}allerdings versteh ich die Zusammenhänge noch nicht so ganz ... position ist klar, margin.top wie weit vom oberen Bildschirmrand, aber beziehen sich die 10% dann auf das gesamtbild (abhängig von der Bildschirmauflösung)?
margin-left u. -right steht für die Seiten ... wieso stellt man das auf auto?
Widht wie breit das insgesamt sein soll denk ich mal (hier 70% des gesamten).
Wo bzw. wie kann ich sagen das es auch 70% in der Höhe sein soll?
Wozu steht "padding" und in welchem Verhältniss zu dem Rest?------------------------------------------
"»» Die Frage ist dabei aber, wie bekomme ich es hin, das z.B. die position sich nurnoch auf das innere, also auf "#page" bezieht und nicht auf den absoluten, also ganzen Bildschirm?
position:relative, sofern ich dich richtig verstanden hab."
hm weiss nicht so genau ..
#header {
position:relative;
margin-top:16%;
margin-right:16%;
margin:10%;
border:1px solid #9F9F9F;
background-color:#6F6F6F;
}das macht dann position: relative (ist der Befehl überhaupt mögl.`?) ..aber was muss ich da noch angeben? Zumal sich bei der Betrachtung nichts geändert hat, das Feld ist nachwievr in der Mitte des "page" Feldes!
------------------------------------
"Ganz normal, da die Seite bei jedem Aufruf komplett neu geladen wird. Ansonsten mußtest du entweder mit Frames oder iFrames arbeiten (bitte nicht). Oder du baust die Seite serverseitig zusammen (viel besser). Z.B. mit ServerSideIncludes oder PHP, je nach dem was du brauchst und was dein Webserver unterstützt."
dh. ich schreib da z.B. hin:
<a href="home.html" target="????">home</a>
Was fürn target denn dann? Ich will das dann im Feld "text" sich öffnen lassen.
mfg benni
-
Hoi, erstmal danke für die schnelle Antwort, bin aber noch nicht aus allem so ganz schlau geworden:
Hab das mal versucht:
#page {
position:absolute;
margin-top:10%;
margin-left:auto;
margin-right:auto;
width:70%;
padding:200px;
margin:15%;
border:1px solid #9F9F9F;
background-color:#2F2F2F;
}allerdings versteh ich die Zusammenhänge noch nicht so ganz ... position ist klar, margin.top wie weit vom oberen Bildschirmrand, aber beziehen sich die 10% dann auf das gesamtbild (abhängig von der Bildschirmauflösung)?
Auf das Elternelement.
margin-left u. -right steht für die Seiten ... wieso stellt man das auf auto?
Dadurch ermittelt der Browser den Abstand selbst
Widht wie breit das insgesamt sein soll denk ich mal (hier 70% des gesamten).
Bezieht sich ebenfalls auf das Elternelement
Wo bzw. wie kann ich sagen das es auch 70% in der Höhe sein soll?
height, was aber nicht immer funktioniert.
Wozu steht "padding" und in welchem Verhältniss zu dem Rest?
Padding ist der Innenabstand. Bitte die entsprechenden Abschnitte in SelfHTML noch mal durcharbeiten, da steht das alles sehr ausführlich drin.
hm weiss nicht so genau ..
#header {
position:relative;
margin-top:16%;
margin-right:16%;
margin:10%;
border:1px solid #9F9F9F;
background-color:#6F6F6F;
}das macht dann position: relative (ist der Befehl überhaupt mögl.`?) ..aber was muss ich da noch angeben? Zumal sich bei der Betrachtung nichts geändert hat, das Feld ist nachwievr in der Mitte des "page" Feldes!
S. SelfHTML.
"Ganz normal, da die Seite bei jedem Aufruf komplett neu geladen wird. Ansonsten mußtest du entweder mit Frames oder iFrames arbeiten (bitte nicht). Oder du baust die Seite serverseitig zusammen (viel besser). Z.B. mit ServerSideIncludes oder PHP, je nach dem was du brauchst und was dein Webserver unterstützt."
dh. ich schreib da z.B. hin:
<a href="home.html" target="????">home</a>
Was fürn target denn dann? Ich will das dann im Feld "text" sich öffnen lassen.
Das Target-Attribut existiert eigentlich gar nicht mehr - zumindest wenn du die Strict-Variante von (X)HTML verwendest.
Du hast das Menü und deinen Inhalt, und in der verlinkten Seiten müssen diese Bereiche dann wieder erstellt werden, nur eben mit dem geänderten Inhalt. Um sich das mehrfache Schreiben wiederkehrender Elemente zu sparen, werden überlicherweise serverseitige Technologien wie SSI oder eine Skriptsprache (z.B. PHP) verwendet.
Gruß
Stareagle
-
-
-
Hallo,
ich versuche momentan in "die Welt" von CSS einzublicken ...
das ist ein guter Vorsatz! :-)
top:10%;
left:15%;
right:15%;
width:70%;
padding:300px;
margin:30px;Aber die Maße möchtest du nochmal überdenken! Lass mich mal rechnen: Der Inhalt des, wie du es nennst, "aktiven Teils" nimmt schon von vornherein nur 70% der Fensterbreite ein (das wären bei mir so um die 600..650px). Dazu kommen rechts und links noch 300px Padding (den Margin schenken wir uns hier mal), also braucht die Seite bei meiner üblichen Fensterbreite von ca. 900px eine Gesamtbreite von über 1200px. Die Folge ist, dass ein horizontaler Scrollbalken auftaucht, und dass etwa ein Drittel der Fensterbreite für "nichts" verschenkt wird.
Bist du sicher, dass du die 300px Padding zusätzlich zu dem durch die Positionierung entstehenden Rand wirklich haben willst?[...] bei "frames" konnte man das mit target="daten" beschreiben, wie macht man das hier am besten?
Du wirst zwangsläufig die gesamte Seite neu laden müssen. Um wiederkehrende Inhalte überall einzubinden, hast du eine Reihe von Möglichkeiten (SSI, serverseitige Scriptsprachen, im einfachsten Fall ein Editor, der das vor dem Upload macht).
Und ich möchte insgesamt den ganzen Code natürlich nicht in eine Datei fassen sondern möglichst strukturiert haben, z.B. im Menü "Home", "Impressum" etc.
Da wäre dann SSI wohl das Mittel der Wahl.
Schönen Abend noch,
Martin--
"Life! Don't talk to me about life!"
(Marvin, the paranoid android in Douglas Adams' "The Hitchhiker's Guide To The Galaxy"