Bei Klick ins Menü soll sich der Inhalt ändern

d3mueller · 31.03.2012, 17:01

Hi, also ich habe noch ein Problem/Anliegen ^^.
Also ich habe eine index.html Seite erstellt für einen Schwimmverein in meinem Dorf^^. Hier mal meine beiden Dateien:

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>
<header>
  <div class="logo">&nbsp;</div></header>
<nav>
<table border="0" cellspacing="0">
  <tr>
    <th width="100px" class="navigation ecke1"><a href="#">News</a></th>
    <th width="100px" class="navigation"><a href="#">Trainingszeiten</a></th>
    <th width="100px" class="navigation"><a href="#">Team</a></th>
    <th width="100px" class="navigation"><a href="#">Bilder</a></th>
    <th width="100px" class="navigation ecke2"><a href="#">Termine</a></th>
  </tr>
</table>

</nav>
<div id="container" class="content">
<h1> My Heading <span class="dreieck"></span><span class="dreieck2"></span> </h1>  Hallo
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />test
</div>
<footer>

</body>
</html>

style.css

Code:

/* CSS Document */
/* ---------------------------------Logo----------------------------------------------*/
.logo {
    background-image: url('Bilder/Logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    height:300px;
}
/* ---------------------------------Logo Ende----------------------------------------------*/

/* -----------------------------------Menue--------------------------------------------*/
table {
    margin: auto;
    width: 60%;
    min-width:960px;
}

.navigation {
    height: 5´40px;
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera11.10+ */
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 6px black;

    -moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    -webkit-box-shadow-: 0 0 5px #666, inset 0 0 5px #ddd;
    box-shadow: 0 0 15px #333, inset 0 0 1px #333;
    -webkit-transition: all .5s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease; 
}

.navigation:hover {
    background: #1e5799;
}
th.ecke1 {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
th.ecke2 {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
} /* Die ganz linken und rechten Ecken müssen rund werden */

th a {
    display:block; 
    width:100%;
    text-decoration:none;
    color: white;
}

/* -----------------------------------Menue Ende--------------------------------------------*/
/* -----------------------------------Content Anfang--------------------------------------------*/


    #container {  
        background: #666;  
        margin: auto; 
        margin-top: 15px; 
        width: 930px;   
        padding-top: 30px;
        padding-left: 15px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #fff;
        -moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
        -webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
        box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;  
        border-top: 10px solid black;
        }  
      
    h1 {  
         background: #e3e3e3;  
         background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);  
         background: -webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8));  
         padding: 10px 20px;  
         margin-left: -37px;  
         margin-top: -35px;  
         position: relative;  
         width: 102.1%;  
         -moz-box-shadow: 1px 1px 3px #292929;  
         -webkit-box-shadow: 1px 1px 3px #292929;  
         box-shadow: 1px 1px 3px #292929;  
         color: #454545;  
         text-shadow: 0 1px 0 white;  
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }  
      
    .dreieck {  
         width: 0; height: 0; 
         top: 104%;  
         line-height: 0;   
         border-top: 10px solid #c8c8c8;  
         border-left: 20px solid transparent; 
         position: absolute;
         left: 0;  
           
    }  
    .dreieck2 {  
          width: 0; height: 0; 
         top: 104%;  
         line-height: 0;   
         border-top: 10px solid #c8c8c8;  
         border-right: 20px solid transparent; 
         position: absolute;
         right: 0;  
           
    }

Jetzt dachte ich, es wäre cool, wenn man einfach auf einen Punkt im Menü geht, und der Inhalt wird im Contentbereich eingeblendet, sprich die opacity wird von 0 auf 1 erweitert bei einem Div, dass bereits in der index.html steht. (und so was dann halt bei jedem Menüpunkt)

Aber ich weiß nicht, wie ich das umsetzen kann. Oder ob man das überhaupt nur mit purem CSS machen kann?

Wäre echt super nett, wenn jemand mir helfen könnte, bin noch ein Anfänger

PS: Noch ne Frage nebenbei: Beim Menü der Hover-Effekt, das ging nur, wenn ich ne normale Farbe genommen habe. Bei einem Farbverlauf kam keine animation. Ist das normal?

MyBad · 31.03.2012, 17:26

Hi! Bevor du sich an solche "Spielereien" machst, solltest du dich zuvor mal lieber noch etwas mit HTML befassen. Dein Quelltext ist nämlich murx.

- du nutzt HTML5 Elemente, hast aber den XHTML Doctype angegeben
- deine Navigation ist eine Tabelle. Listenelemente sind hier aber angebracht. Stichwort: "Semantik"
- wozu dienen die vielen <br />-Tags? Abstände werden mit "padding" oder "margin" Werten im CSS vergeben.
- da ist aber noch einiges mehr.

Du solltest dich also wirklich ersteinmal mit dB Grundlagen befassen. Dann kannst du dich an Effekte und sonstige Spielereien wagen.

d3mueller · 31.03.2012, 18:03

Hi

1. Was macht das für einen unterschied? Geht doch bisher alles

2. Hab ich probiert mit tabellen komme ich zu einem schöneren ergebnis. Bei listen geht vieles nicht

3. Sry, aber so blöd bin selbst ich nicht. Das solte nur ein testimhalt sein! Um die box kurzfristig göet zu machen. Da veränder ich doch nichts im css!

Lg
Dennis

MyBad · 31.03.2012, 18:26

1. Das kann bei einigen Browsern zu Fehldarstellungen führen.
2. Mit Listen bekommt man ebenfalls eine schöne Darstellung hin. Das geht per CSS sehr schön.
3. Habe ich dir auch nicht unterstellen wollen. Deshalb die Frage. Aber wenn ich so einen Quelltext hier vorfinde, kann man durchaus von Anfänger- oder Unwissen ausgehen.

Wenn du aber nicht dazu lernen willst und der Meinung bist du kannst schon alles, helfe ich nun bei deinem eigentlichen Problem weiter:
Schau dir am besten mal das JQuery Framework an. Damit ist es ganz einfach bei mouseover Inhalte / Elemente ein- oder auszublenden.

vincitore · 31.03.2012, 18:33

Zitat:

Zitat von d3mueller

Hi

1. Was macht das für einen unterschied? Geht doch bisher alles

2. Hab ich probiert mit tabellen komme ich zu einem schöneren ergebnis. Bei listen geht vieles nicht

3. Sry, aber so blöd bin selbst ich nicht. Das solte nur ein testimhalt sein! Um die box kurzfristig göet zu machen. Da veränder ich doch nichts im css!

Lg
Dennis

zu 1.: ich würde sagen Glück gehabt. Das Argument (funktioniert doch alles) zieht nicht ganz... Das ist wie wenn du mit jemandem Englisch sprichst und zwischendurch deutsche Wörter einfügst... die erste Person kann vielleicht beides und versteht dich, die zweite nicht oder interpretiert es falsch...
Die Dokumententyp-Deklaration ist nicht ohne Grund da.
Mein Tipp: Nimm <!DOCTYPE html>

zu 2.: Alles eine Sache der CSS-Datei. Du zweckentfremdest hier Tabellen! Man nimmt ja auch nicht einen <p>-Tag und gestaltet ihn per CSS zu einer Überschrift, sondern nimmt <h1> usw. Die Übersichtlichkeit deines Codes und deine Suchmaschine freut sich!

jetzt zu deiner eigentlichen Frage

http://www.andrekind.de/ZenGarden/ da ist dein Problem nur mit css umgesetzt

gib mir ein paar Minuten dann erklär ich dir das hier anhand deines Beispiels

cebito · 31.03.2012, 18:43

Zitat:

Zitat von d3mueller

1. Was macht das für einen unterschied? Geht doch bisher alles

Bei älteren Dieselmotoren kann man auch Schnaps oder sonstwas in den Tank kippen und die laufen damit - macht man es deshalb? Einen neueren mach ich damit allerdings platt. Im Übrigen ist der HTML5 Doctype doch viel einfacher.

Zitat:

Zitat von d3mueller

2. Hab ich probiert mit tabellen komme ich zu einem schöneren ergebnis. Bei listen geht vieles nicht

Sicherlich, schau dir mal die CSS-Eigenschaft display an... http://www.css4you.de/display.html Du kannst jedem Element die Eigenschaften von Tabellen, Tabellenzellen etc. geben. Dann kriegst auch deine Darstellung wie du sie haben willst, allerdings mit semantisch sinnvollen und korrekten Elementen.

Zitat:

Zitat von d3mueller

3. Sry, aber so blöd bin selbst ich nicht. Das solte nur ein testimhalt sein! Um die box kurzfristig göet zu machen. Da veränder ich doch nichts im css!

Dafür gibt es jede Menge Tools im Netz um sinnvollen Platzhaltertext zu bekommen... https://www.google.de/search?q=lorem+ipsum+generator

d3mueller · 31.03.2012, 19:15

Zitat:

Zitat von MyBad

1. Das kann bei einigen Browsern zu Fehldarstellungen führen.
2. Mit Listen bekommt man ebenfalls eine schöne Darstellung hin. Das geht per CSS sehr schön.
3. Habe ich dir auch nicht unterstellen wollen. Deshalb die Frage. Aber wenn ich so einen Quelltext hier vorfinde, kann man durchaus von Anfänger- oder Unwissen ausgehen.

Wenn du aber nicht dazu lernen willst und der Meinung bist du kannst schon alles, helfe ich nun bei deinem eigentlichen Problem weiter:
Schau dir am besten mal das JQuery Framework an. Damit ist es ganz einfach bei mouseover Inhalte / Elemente ein- oder auszublenden.

Hi, natürlich will was dazu lernen, und ich weiß selbstverständlich noch lang nicht alles. Aber das kann man mir auch netter beibringen

Zitat:

Zitat von vincitore

zu 1.: ich würde sagen Glück gehabt. Das Argument (funktioniert doch alles) zieht nicht ganz... Das ist wie wenn du mit jemandem Englisch sprichst und zwischendurch deutsche Wörter einfügst... die erste Person kann vielleicht beides und versteht dich, die zweite nicht oder interpretiert es falsch...
Die Dokumententyp-Deklaration ist nicht ohne Grund da.
Mein Tipp: Nimm <!DOCTYPE html>

zu 2.: Alles eine Sache der CSS-Datei. Du zweckentfremdest hier Tabellen! Man nimmt ja auch nicht einen <p>-Tag und gestaltet ihn per CSS zu einer Überschrift, sondern nimmt <h1> usw. Die Übersichtlichkeit deines Codes und deine Suchmaschine freut sich!

jetzt zu deiner eigentlichen Frage

http://www.andrekind.de/ZenGarden/ da ist dein Problem nur mit css umgesetzt

gib mir ein paar Minuten dann erklär ich dir das hier anhand deines Beispiels

Ja okay, hast recht

Hat Dreamweaver halt automatisch am Anfang eingefügt, deshalb.

Zu den Tabellen: Du hast ja Recht, aber bisher blick ich das noch nicht so ganz, z.B. wenn ich da einen Hintergrund um ein Listenelement (li) mache, ist der zu klein, und ich kann ihn iwie nicht per Höhe verändern. Deshalb

Aber ich lasse mich sehr gerne belehren^^

Das mit dem Link sieht cool aus. Wäre nett, wnen du mir das zeigst

.

Zitat:

Zitat von cebito

Bei älteren Dieselmotoren kann man auch Schnaps oder sonstwas in den Tank kippen und die laufen damit - macht man es deshalb? Einen neueren mach ich damit allerdings platt. Im Übrigen ist der HTML5 Doctype doch viel einfacher.

Sicherlich, schau dir mal die CSS-Eigenschaft display an... http://www.css4you.de/display.html Du kannst jedem Element die Eigenschaften von Tabellen, Tabellenzellen etc. geben. Dann kriegst auch deine Darstellung wie du sie haben willst, allerdings mit semantisch sinnvollen und korrekten Elementen.

Dafür gibt es jede Menge Tools im Netz um sinnvollen Platzhaltertext zu bekommen... https://www.google.de/search?q=lorem+ipsum+generator

Ja, auch du hast Recht^^

Mit Lorem Ipsum.. da bin ich meistens halt zu faul für, weil so <br> einzufügen geht halt schneller manchmal. Ist ja nur kurz zum probieren.
Aber ich werd mir jetzt mal angewöhnen, Lorem ipsum.. zu nehmen

Danke

vincitore · 31.03.2012, 20:46

So gut dann leg ich mal los
Vorab noch eine wichtige Info: Lies es dir gut durch und versuch es zu verstehen! Einfaches Copy&Paste wird dich nicht weiterbringen!

(Erklärungen der einzelnen CODE Blöcke sind immer NACH dem einzelnen Block)

so also erst einmal das Gerüst

Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>[...]</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
[...]
</body>
</html>

Ich denke mal dazu muss ich wenig sagen

Gut kommen wir zur Navigation, die hattest du bisher mit einer Tabelle realisiert, wie schon oben gesagt, ist das nicht die optimale Lösung. Besser ist es so:
HTML:

Code:

	<nav>
		<ul id="navigation">
			<li><a href="#News">News</a></li>
			<li><a href="#Trainingszeiten">Trainingszeiten</a></li>
			<li><a href="#Team">Team</a></li>
			<li><a href="#Bilder">Bilder</a></li>
			<li><a href="#Termine">Termine</a></li>
		</ul>
	</nav>

Ich denke mal auch hier sollten nicht all zu viele Fragen auftauchen.
Die Liste bekommt die ID Navigation und die Links sind mit den später angelegten DIVs verknüpft.

Soweit so gut, im Moment sieht es ja noch nicht so aus wie du es gerne hättest, dazu brauchen ein paar Zeilen im CSS Dokument:

Code:

nav {
	margin: auto;
	width: 60%;
	min-width:960px;
}

Hier wird die Navigation mittig ausgerichtet und die Breite definiert.

Code:

#navigation { /*Leiste mit aberundeten Ecken*/
	list-style: none; /*entfernen des Listenaussehens*/
	/*Ecken und Schatten*/
	-webkit-border-radius:6px 6px 6px 6px;
	   -moz-border-radius:6px 6px 6px 6px;
	        border-radius:6px 6px 6px 6px;
	-webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
	   -moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
	        box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
	/*Hintergrund*/
	background: #1e5799; /* Fallback */
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
	background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

selbsterklärend (siehe Kommentare innerhalb des CODEs)

Code:

#navigation li{/*Navigationselemente (einzeilige Liste)*/
	padding: 5px 10px 5px 10px;
	display: inline-block;
	height: 30px;
	font-size: 28px;
	font-weight: bold;
	text-shadow: 0 0 6px black;
}

display: inline-block; Listenpunkte ohne Zeilenumbruch

Code:

#navigation li:hover {
	background: #7db9e8; /* Fallback */
	background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* IE10+ */
	background: linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

Hover-Effekt

Code:

nav a {
	display:block;
	text-decoration:none;
	color: white;
}

sollte bekannt sein

So damit hätten wir schon mal die Liste so wies sein sollte

Dann kommen wir jetzt mal zum Content:
Zuerst einmal der grobe html-Aufbau:

Code:

	<section id="container">
		<div id="News">[…]</div>
		<div id="Trainingszeiten">[…]</div>
		<div id="Team">[…]</div>
		<div id="Bilder">[…]</div>
		<div id="Termine">[…]</div>
	</section>

Die einzelnen Divs bekommen eine einzigartige ID, damit über die Navigation darauf zugegriffen werden kann.

Hier ein kleiner Hinweis am Rande: IDs sind immer nur ein mal in einem Dokument zu vergeben, CLASSes können auch mehrmals vorhanden sein.

Im Moment werden die DIVs noch alle angezeigt, was jetzt per CSS geändert wird:

Code:

#container {
	margin: auto;
	width: 60%;
	min-width:960px;
	margin-top: 15px;
	background-color: #ccc;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
	        border-radius: 6px;
	-webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
	   -moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
	        box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
	border-top: 10px solid black;
}

Positionierung+Gestaltung aus deinem Ausgangspost

Code:

#container div {
	padding: 10px;
	display: none;
}

Ausblenden aller DIVs

Code:

#container div:target {
	display: block;
}

Einblenden des gewünschten DIVs

So viel Spaß damit. Falls noch Fragen offen sein sollten, einfach schreiben!

Edit: Dein h1-style usw. kannst du natürlich wieder einbauen

d3mueller · 31.03.2012, 21:40

Wow. Vielen Dank für deine Mühe

Stimmt, so ist es echt viel übersichtlicher^^ und einfacher, da habt ihr recht.(Und das Menü sieht sogar noch besser aus als vorher, finde ich)
Habe auch alles soweit verstanden, denke ich.
Eine Frage noch: Wenn man jetzt die transition reinpackt, müsste die doch eigentlich hier hin, oder?

Code:

#container div { 
padding: 10px;
display: none;
-moz-transition: all 1s ease;
 }

Natürlich auch für die anderen Browser, aber nur als Beispiel. Weil hier steht ja der Wert display:none und beim nächsten display:block;
aber es geht nicht.
Wenn du mir da noch helfen könntest, wäre es perfekt

Bei der Liste habe ich es geschafft (auch wenn es nur geht, wenn ich beim Hover ne normale BG-Farbe nehme, und keinen Farbverlauf. Liegt denke ich, aber an CSS, weil es geht iwie nicht anders)

Echt nochmal Vielen Danke

Lg
Dennis

vincitore · 31.03.2012, 21:51

Zitat:

Zitat von d3mueller

Wow. Vielen Dank für deine Mühe

Stimmt, so ist es echt viel übersichtlicher^^ und einfacher, da habt ihr recht.(Und das Menü sieht sogar noch besser aus als vorher, finde ich)
Habe auch alles soweit verstanden, denke ich.
Eine Frage noch: Wenn man jetzt die transition reinpackt, müsste die doch eigentlich hier hin, oder?

Code:

#container div { 
padding: 10px;
display: none;
-moz-transition: all 1s ease;
 }

Natürlich auch für die anderen Browser, aber nur als Beispiel. Weil hier steht ja der Wert display:none und beim nächsten display:block;
aber es geht nicht.
Wenn du mir da noch helfen könntest, wäre es perfekt

Bei der Liste habe ich es geschafft (auch wenn es nur geht, wenn ich beim Hover ne normale BG-Farbe nehme, und keinen Farbverlauf. Liegt denke ich, aber an CSS, weil es geht iwie nicht anders)

Echt nochmal Vielen Danke

Lg
Dennis

Hm also bei mir hat das mit der Liste auch mit dem Verlauf funktioniert?!

Transition und display funktionieren zusammen nicht.
Ein anderer Weg wäre halt über opacity zu gehen, dann müsstest du aber position: absolut machen und die divs übereinander legen

d3mueller · 01.04.2012, 07:33

Zitat:

Zitat von vincitore

Hm also bei mir hat das mit der Liste auch mit dem Verlauf funktioniert?!

Transition und display funktionieren zusammen nicht.
Ein anderer Weg wäre halt über opacity zu gehen, dann müsstest du aber position: absolut machen und die divs übereinander legen

hi,
komisch, aber ich habe mal den Code so wie du ihn geschrieben hast kopiert, aber bei mir kam keine Animation.

Aber mein Browser ist aktuell.

Okay, habe es mal versucht, und es funktioniert sogar

. Ist das vom Code her soweit okay?

Code:

#container div {
    margin: auto;
    border: 1px solid black;
    width:960px;
    position:absolute;
    opacity: 0;
    -moz-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
}

#container div:target {
    opacity: 1;
}

Lg
Dennis
PS: Kann man das jetzt noch so machen, dass ein anderes Div als "Start-div" festgelegt wird? Weil sonst ist da am Anfang ja einfach nichts. Muss nicht sein, aber wenn das machbar wäre...

EDIT2: Also bisher geht es ja einigermaßen. Aber ich wollte wie in meinem Anfangspost das Menü in so ein umgestyltes <h1> Element packen. Habe es im style.css definiert und im index.html eingefügt und es geht alles. Mit Text funktioniert es wunderbar. Aber wenn ich nun den <nav> Bereich (also da, wo das Menü ist) dort einfüge sieht es komisch aus:

Und es geht nicht anders. Habe versucht, die Höhe zu ändern, das padding etc. Ich bekomms nicht hin

Beim meinem ursprünglichen Code mit der Tabelle als Menü geht es komischerweise perfekt, ohne Probleme:

Was kann ich da machen? Hier die beiden Dateien (so aufgebaut wie von vincitore geschrieben, nur mit ner Animation für die DIVs und halt dem h1 Element.

index.html

Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>[...]</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    

<section id="container">

        <div id="News">
       <h1>
        <nav>
        <ul id="navigation">
            <li><a href="#News">News</a></li>
            <li><a href="#Trainingszeiten">Trainingszeiten</a></li>
            <li><a href="#Team">Team</a></li>
            <li><a href="#Bilder">Bilder</a></li>
            <li><a href="#Termine">Termine</a></li>
        </ul>
</nav><span class="dreieck"></span><span class="dreieck2"></span>
      </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac tempus quam. Quisque dictum posuere arcu. In suscipit accumsan cursus. Ut est nibh, dapibus a sodales nec, tristique a velit. Ut condimentum, quam vel semper sagittis, urna massa ultrices lectus, eu sollicitudin arcu sapien ut lectus. Donec sollicitudin, erat lobortis dictum fermentum, nulla purus lobortis risus, quis sodales purus erat vel nisi. Mauris auctor, augue in sodales convallis, justo metus sodales lorem, at iaculis tellus urna vitae mauris. Integer luctus eleifend suscipit. Suspendisse sagittis justo et mi venenatis ultricies. Nunc lacinia quam vel erat pellentesque bibendum.
</p><p>
Ut a sapien ac sem faucibus euismod tempor eget nulla. Vivamus nulla est, accumsan sed tristique et, scelerisque eu augue. In hac habitasse platea dictumst. Vivamus feugiat interdum nulla sit amet pharetra. Suspendisse convallis tempus leo ac gravida. Duis tristique, lectus eu adipiscing egestas, nulla neque auctor nibh, sodales elementum neque arcu at lacus. Mauris ultrices pretium enim vitae fringilla. Nulla at diam neque.
</p><p>
Phasellus condimentum ante sed massa malesuada eu iaculis sem ornare. Ut tempus velit ac ante ullamcorper ultricies. Nam mauris libero, malesuada aliquam tincidunt a, sollicitudin ac diam. Nunc interdum porttitor nunc sit amet venenatis. Quisque luctus faucibus placerat. Nullam iaculis lacus ac elit consectetur pretium. Pellentesque laoreet, mi eget luctus vestibulum, risus mi commodo ante, at feugiat metus libero vel est. Nunc non justo est. Nulla venenatis porta ultrices. In lacinia venenatis massa, at tincidunt orci consectetur laoreet. Sed fermentum felis eget dui facilisis nec hendrerit ipsum consectetur. Suspendisse potenti. Nulla commodo, velit ac cursus commodo, elit neque tincidunt urna, eget mollis nunc tellus vel quam.
</p><p>
Cras sem turpis, aliquet eu condimentum ac, pharetra ac nunc. Sed aliquam tristique lacinia. Vestibulum quis sem odio. Aenean ac mi eget metus pharetra semper et egestas arcu. Nulla a dui id erat viverra bibendum vitae in risus. Proin ac rutrum diam. Mauris dolor massa, ullamcorper at vehicula sed, sodales ac nunc. Duis quis sem tortor. Pellentesque accumsan lectus id quam molestie facilisis. Praesent eleifend nibh aliquam nibh imperdiet vel interdum ligula varius. Donec eu risus eget nisl viverra faucibus non vitae nunc. Vivamus convallis nisl in nibh sodales eget pharetra risus feugiat. Aliquam vulputate arcu faucibus dolor ullamcorper pellentesque. Curabitur scelerisque massa at ligula consequat commodo. Fusce ligula lorem, dignissim eu blandit sit amet, ultrices quis nisi. Pellentesque quis turpis nulla.
</p><p>
Phasellus ante nunc, euismod et porta at, aliquam quis nisl. Donec eget libero convallis elit iaculis tristique. Aliquam erat volutpat. Suspendisse urna odio, facilisis ac aliquet nec, egestas in nulla. Suspendisse sed lorem dui, vitae laoreet risus. Mauris volutpat tristique laoreet. Morbi eleifend sem vitae lectus placerat bibendum. Curabitur gravida sollicitudin purus quis placerat. Vestibulum viverra, nisl sit amet dignissim porttitor, nisi enim aliquam leo, ac volutpat nulla arcu sed leo. Mauris sit amet bibendum libero. Duis volutpat augue in lacus bibendum eleifend ultrices risus laoreet. Aenean nisi tortor, convallis volutpat pretium at, aliquam et urna. Morbi posuere, dui non pretium semper, tortor nunc mattis ligula, vel venenatis velit tortor in elit. Nam quis rhoncus mauris. </p>
        </div>
        <div id="Trainingszeiten">2</div>
        <div id="Team">3</div>
        <div id="Bilder">4</div>
        <div id="Termine">5</div>
    </section>
</body>
</html>

style.css

Code:

@charset "utf-8";
/* CSS Document */


nav {
    margin: auto;
    width:960px;
}

#navigation { /*Leiste mit aberundeten Ecken*/
    list-style: none; /*entfernen des Listenaussehens*/
    /*Ecken und Schatten*/
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
    -webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
       -moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
            box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    /*Hintergrund*/
    background: #1e5799; /* Fallback */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

#navigation li{/*Navigationselemente (einzeilige Liste)*/
    padding: 5px 10px 5px 10px;
    display: inline-block;
    height: 30px;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 6px black;
}

#navigation li:hover {
    background: #7db9e8; /* Fallback */
    background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* IE10+ */
    background: linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}


nav a {
    display:block;
    text-decoration:none;
    color: white;
}

#container {
    margin: auto;
    width:960px;
    margin-top: 15px;
    background-color: #ccc;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
       -moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
            box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    border-top: 10px solid black;
}

#container div {
    margin: auto;
    border: 1px solid black;
    width:960px;
    position:absolute;
    opacity: 0;
    -moz-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
}

#container div:target {
    opacity: 1;
}


    h1 {  
         background: #e3e3e3;  
         background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);  
         background: -o-linear-gradient(top, #e3e3e3, #c8c8c8);  
         background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));  
         padding: 10px 20px;  
         margin-left: -21px;  
         margin-top: -5px;  
         position: relative;  
         width: 962px;  
         -moz-box-shadow: 1px 1px 3px #292929;  
         -webkit-box-shadow: 1px 1px 3px #292929;  
         box-shadow: 1px 1px 3px #292929;  
         color: #454545;  
         text-shadow: 0 1px 0 white;  
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }  
      
    .dreieck {  
         width: 0; height: 0; 
         top: 104%;  
         line-height: 0;   
         border-top: 10px solid #c8c8c8;  
         border-left: 20px solid transparent; 
         position: absolute;
         left: 0;  
           
    }  
    .dreieck2 {  
          width: 0; height: 0; 
         top: 104%;  
         line-height: 0;   
         border-top: 10px solid #c8c8c8;  
         border-right: 20px solid transparent; 
         position: absolute;
         right: 0;  
           
    }

PS: Bevor jemand fragt: Ich weiß, dass wenn man auf etwas anderes als News klickt, das Menü verschwindet. Ich würd das dann in jedem div einbauen, dann geht das wieder

Ne andere Methode fällt mir nicht ein

Schon mal danke für eure Hilfe

vincitore · 01.04.2012, 18:11

Also auf die schnelle haette ich gesagt, margin-Top:0; und margin-bottom: 0; bei dem nav-Tag

Falls das nicht hilft, gucke ich es mir an sobald ich aus dem Zug raus bin.

d3mueller · 01.04.2012, 18:15

Hi,
Ne hilft leider nichts.

thx, dass dus dir nochmal anschaust

vincitore · 01.04.2012, 19:18

gib dem #navigation margin:0; dann geht's

http://www.andrekind.de/d3mueller/test.html#News

Edit: Warum nimmst du eigentlich das Menü mit in die divs? mach es lieber so wie bei mir im Link

d3mueller · 01.04.2012, 19:28

Cool es geht jetzt.

Ja, so geht das auch^^. Ist glaub besser. Wusste nur nicht wie.

danke

EDIT:
Jetzt halt noch 2 Sachen:
1. Wie oben schon gesagt, kann man einen Standard-Div haben, der am Anfang eingeblendet ist?

2. Kann man das so machen, dass der Browser nicht immer zu dem Menü Div dann springt? Weil durch das href="#news" denkt er ja, er soll zum news div scrollen. Geht das überhaupt? Habe schon versucht, das href durch name zu erstetzen, aber das ging dann gar nicht

31.03.2012, 21:40	#9
d3mueller PC-Freak :D Themenstarter Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 240 Verwendet: Adobe Collection, GIMP	Wow. Vielen Dank für deine Mühe Stimmt, so ist es echt viel übersichtlicher^^ und einfacher, da habt ihr recht.(Und das Menü sieht sogar noch besser aus als vorher, finde ich) Habe auch alles soweit verstanden, denke ich. Eine Frage noch: Wenn man jetzt die transition reinpackt, müsste die doch eigentlich hier hin, oder? Code: #container div { padding: 10px; display: none; -moz-transition: all 1s ease; } Natürlich auch für die anderen Browser, aber nur als Beispiel. Weil hier steht ja der Wert display:none und beim nächsten display:block; aber es geht nicht. Wenn du mir da noch helfen könntest, wäre es perfekt Bei der Liste habe ich es geschafft (auch wenn es nur geht, wenn ich beim Hover ne normale BG-Farbe nehme, und keinen Farbverlauf. Liegt denke ich, aber an CSS, weil es geht iwie nicht anders) Echt nochmal Vielen Danke Lg Dennis

01.04.2012, 18:15	#13
d3mueller PC-Freak :D Themenstarter Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 240 Verwendet: Adobe Collection, GIMP	Hi, Ne hilft leider nichts. thx, dass dus dir nochmal anschaust Geändert von d3mueller (01.04.2012 um 18:31 Uhr).

01.04.2012, 19:18	#14
vincitore Helper Registriert seit: 22.01.2005 Ort: Darmstadt; Lorch am Rhein Beiträge: 579 Kamera: Canon EOS 5D Mark III Verwendet: Adobe Photoshop CS4, Lightroom 4, Coda 2, Cinema 4D R13 Student	gib dem #navigation margin:0; dann geht's http://www.andrekind.de/d3mueller/test.html#News Edit: Warum nimmst du eigentlich das Menü mit in die divs? mach es lieber so wie bei mir im Link Geändert von vincitore (01.04.2012 um 19:22 Uhr).

01.04.2012, 19:28	#15
d3mueller PC-Freak :D Themenstarter Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 240 Verwendet: Adobe Collection, GIMP	Cool es geht jetzt. Ja, so geht das auch^^. Ist glaub besser. Wusste nur nicht wie. danke EDIT: Jetzt halt noch 2 Sachen: 1. Wie oben schon gesagt, kann man einen Standard-Div haben, der am Anfang eingeblendet ist? 2. Kann man das so machen, dass der Browser nicht immer zu dem Menü Div dann springt? Weil durch das href="#news" denkt er ja, er soll zum news div scrollen. Geht das überhaupt? Habe schon versucht, das href durch name zu erstetzen, aber das ging dann gar nicht Geändert von d3mueller (01.04.2012 um 19:59 Uhr).

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Bei Klick ins Menü soll sich der Inhalt ändern

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

31.03.2012, 17:26	#2
MyBad localhorst Registriert seit: 18.12.2006 Beiträge: 1.812	Hi! Bevor du sich an solche "Spielereien" machst, solltest du dich zuvor mal lieber noch etwas mit HTML befassen. Dein Quelltext ist nämlich murx. - du nutzt HTML5 Elemente, hast aber den XHTML Doctype angegeben - deine Navigation ist eine Tabelle. Listenelemente sind hier aber angebracht. Stichwort: "Semantik" - wozu dienen die vielen <br />-Tags? Abstände werden mit "padding" oder "margin" Werten im CSS vergeben. - da ist aber noch einiges mehr. Du solltest dich also wirklich ersteinmal mit dB Grundlagen befassen. Dann kannst du dich an Effekte und sonstige Spielereien wagen. Geändert von MyBad (31.03.2012 um 17:29 Uhr).

31.03.2012, 18:03	#3
d3mueller PC-Freak :D Themenstarter Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 240 Verwendet: Adobe Collection, GIMP	Hi 1. Was macht das für einen unterschied? Geht doch bisher alles 2. Hab ich probiert mit tabellen komme ich zu einem schöneren ergebnis. Bei listen geht vieles nicht 3. Sry, aber so blöd bin selbst ich nicht. Das solte nur ein testimhalt sein! Um die box kurzfristig göet zu machen. Da veränder ich doch nichts im css! Lg Dennis

31.03.2012, 18:26	#4
MyBad localhorst Registriert seit: 18.12.2006 Beiträge: 1.812	1. Das kann bei einigen Browsern zu Fehldarstellungen führen. 2. Mit Listen bekommt man ebenfalls eine schöne Darstellung hin. Das geht per CSS sehr schön. 3. Habe ich dir auch nicht unterstellen wollen. Deshalb die Frage. Aber wenn ich so einen Quelltext hier vorfinde, kann man durchaus von Anfänger- oder Unwissen ausgehen. Wenn du aber nicht dazu lernen willst und der Meinung bist du kannst schon alles, helfe ich nun bei deinem eigentlichen Problem weiter: Schau dir am besten mal das JQuery Framework an. Damit ist es ganz einfach bei mouseover Inhalte / Elemente ein- oder auszublenden. Geändert von MyBad (31.03.2012 um 18:28 Uhr).

01.04.2012, 18:11	#12
vincitore Helper Registriert seit: 22.01.2005 Ort: Darmstadt; Lorch am Rhein Beiträge: 579 Kamera: Canon EOS 5D Mark III Verwendet: Adobe Photoshop CS4, Lightroom 4, Coda 2, Cinema 4D R13 Student	Also auf die schnelle haette ich gesagt, margin-Top:0; und margin-bottom: 0; bei dem nav-Tag Falls das nicht hilft, gucke ich es mir an sobald ich aus dem Zug raus bin.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Bei Klick ins Menü soll sich der Inhalt ändern

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige