myGully.com - Problem mit CSS Homepage

myGully.com (https://mygully.com/index.php)

- Entwicklung & Programmierung (https://mygully.com/forumdisplay.php?f=72)

- - Problem mit CSS Homepage (https://mygully.com/showthread.php?t=2600913)

Problem mit CSS Homepage

Hallo habe mich mal mit CSS beschäftigt und wollte meine Homepage komplett mit CSS machen habe eine schöne navigation und einen Header erstellt jedoch 2 kleine Problemen:

1. Wie Verbinde ich mit CSS meine Dokumente in denen die INhalte drin sind mit der Navigation ( also Wenn ich in der Navi auf Startseite klicke dass er mir das Dokument Startseite auch öffnet )

2. Meine Homepage ist so ganz typisch aufgebaut: Oben ein header links die navigation
und und neben der navi rechts dann ein fenster in dem die ausgewählten inhalte aufgerufen werden. Also die Frage wie erstelle ich dieses Fenster und lege fest, dass
der Inhalt immer dort aufgerufen wird. ?

Danke im Vorraus :)

mit css gar nicht ... das geht afaik nur über das altmodische <a href... oder natürlich über javas*****

css ist letztendlich wie makeup während html das knochengerüst und haut darstellt ... javas***** kann teile die haut letztendlich anbräunen oder pikel verursachen ...

EDITH sagt: schau dir mal [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...] an ... da lernst du alles was man an basics braucht

http://www.myimg.de/?img=hp6bf1e.jpg

So sieht die Homepage zur Zeit aus ;) keine Sorge es wird kein illegaler Privatserver bin nur ein WoW Fan und die Homepage
wird nicht online gestellt sondern nur zur Übung verwendet um CSS Besser zu verstehen zu können mit Java habeich mich
noch nicht auseinander gesetzt was ich erst in nächster Zeit vor habe :P.
Die Navigationsleiten öffnen sich und es steht noch eine kleine Info sozusagen dann da wie ihr auf dem Bild unter dem Punkt
"Startseite" sehen könnt :)

also meine frage was müsste ich in die CSS datei schreiben um das Graue Fenster zu haben und darin meine HTML
Seiten erscheinen zu lassen nach der Auswahl eines Punktes in der Navigation.

Und wie weise ich meinen fertigen HTML - Dokumenten zu, zu welchem Punkt genau sie in der navigation gehören und somit dann geöffnet werden können in dieses Fenster :)

So Ungefähr soll die Homepage aussehen wie egsagt der Header und die Navigation sind fertig nur diese 2 Sachen fehelen mit also das graue Fensterchen und die verbindung der Dokumente mit der NaviLeiste :)

ok vielen dank bin schon um einiges weiter ;)

ok hat irgendwie doch alles nicht geklappt hat jmd. die zeit und die Lust und könnte mir das machen ?
würde euch mein kleines Projekt eben schicken geht iwie alles nich ...

Zitat:

Zitat von InduZz (Beitrag 23411505)

wird nicht online gestellt sondern nur zur Übung verwendet um CSS Besser zu verstehen zu können mit Java habeich mich

Ich dachte du machst die "nur so", damit du CSS "besser verstehst"? Was bringt es da, wenn das andere für dich übernehmen? Hm?

Und was geht denn nun genau nicht?

berechtigte frage ;) um zu sehen wie es geht da ich im internet nichts hilfreiches finde dazu zumindest klappt es einfach nicht würde ich das ding online stellen wollen um was weis sich was damit zu machen würde ichs mit HTML machen und nich mit CSS :P

habe mir jetzt mal das Projekt neu gemacht mit einer anderen Navigation
es hatte nicht funktioniert eine box zu definieren in die ein inhalt geöffnet wird.
das 2. war die verbindung zwischen navigation und den dazugehörigen dokumenten was ich aber an sich gelöst habe indem ich sozusagen immer die gleichen Dokumente habe vom aufbau in der der header und die navigation etc. immer wieder drin ist und nur der inhalt sich ändert.

in meinem neuen versuch mit einer anderen navigationsleiste habe ich jetzt eine box definiert bekommen das problem ist ich bekomme meine navigationsleiste nicht nach oben gerückt je siehe bild
=> http://www.myimg.de/?img=abcf911d.jpg

Mein jetziges Problem ist, dass die Navigationsleiste nun immer links unter dem Text ist bekomme sie nicht angepasst dass sie immer oben links ist wie normalerweise...

So der S***** ;) :

<div id="splash"><img src="Header.jpg" width="1000" height="180" alt="" /></div>
<html>
<head>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation {
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
width: 100%;
w\idth: 8.8em;
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: black; background-color: #eee;
}
#Inhalt {
margin-left: 20em; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #Inhalt { m
background-color: #ffffe0;
}

#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}

h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}

#Navigation {

}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
</style>
</head>
<body>

<div id="Scrollbereich">
<div id="Inhalt">
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
</div>
</div>

<ul id="Navigation">
<li><h2>Allgemeines</h2></li>
<li><a href="start.html">Startseite</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>

<li><h2>Völker & Anderes</h2></li>
<li><a href="#Beispiel">Fraktionen</a></li>
<li><a href="#Beispiel">Seite 5</a></li>
<li><a href="#Beispiel">Seite 6</a></li>

<li><h2>Weltkarte</h2></li>
<li><a href="#Beispiel">Classic</a></li>
<li><a href="#Beispiel">T.B.C.</a></li>
<li><a href="#Beispiel">W.O.T.L.K.</a></li>
<li><a href="#Beispiel">Cataclysm</a></li>
</ul>

</body>
</html>
</ul>
</div>

</body>
</html>

hammer funktioniert alles bestens :) vielen dank :)

Edit: habe noch einen kleinen schönheitsfehler den ich durch
top: XYZ;
left: XYZ;

jetzt nicht beseitigt bekommen habe nämlich das inhaltsfenster etwas einrücken weil
es in den rechten bildschirmrand reinläuft und teile des inhaltes fehlen

bekomme ich es irgendwie von links und rechts eingerückt richtung mitte das mein inhalt nicht im rand verschwindet ?

2. problem wollte die inhaltsbox färben jedoch färbt sich dann immer alles und nicht nur einzelne teile habe versucht mir den hintergrund grau zu machen und die inhaltsbox weiß oder so aber wie gesagt färbt sich immer beides in derselben farbe egal wo ich es ändere...