Antworten auf deine Fragen:
Neues Thema erstellen

Bei Klick ins Menü soll sich der Inhalt ändern

d3mueller

PC-Freak :D

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

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

localhorst

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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.
 
Zuletzt bearbeitet:

d3mueller

PC-Freak :D

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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

localhorst

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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.
 
Zuletzt bearbeitet:

vincitore

Aktives Mitglied

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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 :) da ist dein Problem nur mit css umgesetzt

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

cebito

undefined

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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.

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.

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...
 
Zuletzt bearbeitet:

d3mueller

PC-Freak :D

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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 ;)


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 :) 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 :D 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 :).

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

Aktives Mitglied

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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

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
 
Zuletzt bearbeitet:

d3mueller

PC-Freak :D

AW: Bei Klick ins Menü soll sich der Inhalt ändern

Wow. Vielen Dank für deine Mühe :daumenhoch:
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

Aktives Mitglied

AW: Bei Klick ins Menü soll sich der Inhalt ändern

Wow. Vielen Dank für deine Mühe :daumenhoch:
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

PC-Freak :D

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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
 
Zuletzt bearbeitet:

vincitore

Aktives Mitglied

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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

PC-Freak :D

AW: Bei Klick ins Menü soll sich der Inhalt ändern

Hi,
Ne hilft leider nichts.

thx, dass dus dir nochmal anschaust :daumenhoch:
 
Zuletzt bearbeitet:

vincitore

Aktives Mitglied

AW: Bei Klick ins Menü soll sich der Inhalt ändern

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



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

d3mueller

PC-Freak :D

AW: Bei Klick ins Menü soll sich der Inhalt ändern

Cool es geht jetzt.

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

danke :daumenhoch:

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.480
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben